This commit is contained in:
@@ -1,106 +1,54 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { useCampaignService } from '~/services/Campaign.js';
|
||||
import { emitter } from '~/services/Emitter';
|
||||
import Server from '~/services/Server';
|
||||
import { CreateWindow } from '~/services/Windows';
|
||||
import NestedNoteList from './NestedNoteList.vue';
|
||||
|
||||
const { Campaign } = useCampaignService();
|
||||
const notes = ref([]);
|
||||
const folders = ref([]);
|
||||
const loadingNotes = ref(false);
|
||||
const notesError = ref('');
|
||||
const sidebarCollapsed = ref(false);
|
||||
const isDragOverSidebar = ref(false);
|
||||
const expandedFolderIds = ref([]);
|
||||
const nestedNoteListRef = ref(null);
|
||||
|
||||
const campaignId = computed(() => {
|
||||
return Campaign.value?._id ?? Campaign.value?.id ?? null;
|
||||
});
|
||||
|
||||
const notesMeta = computed(() => {
|
||||
const count = notes.value.length;
|
||||
return `${count} ${count === 1 ? 'note' : 'notes'}`;
|
||||
});
|
||||
|
||||
async function fetchCampaignNotes() {
|
||||
if (!campaignId.value) {
|
||||
notes.value = [];
|
||||
notesError.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
loadingNotes.value = true;
|
||||
notesError.value = '';
|
||||
|
||||
async function handleSidebarDrop(event) {
|
||||
const noteKey = event.dataTransfer.getData('text/plain');
|
||||
if (!noteKey) return;
|
||||
try {
|
||||
const response = await Server().get('/note/list', {
|
||||
params: {
|
||||
campaign: campaignId.value
|
||||
}
|
||||
});
|
||||
await Server().post('/note/update', { id: noteKey, folder: null });
|
||||
fetchCampaignNotes();
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
if (response.data.status !== 'ok') {
|
||||
notes.value = [];
|
||||
notesError.value = response.data.msg ?? 'Unable to load notes.';
|
||||
return;
|
||||
}
|
||||
|
||||
notes.value = response.data.notes.map((note) => {
|
||||
return {
|
||||
key: note._id,
|
||||
title: note.title,
|
||||
text: note.content ?? '',
|
||||
date: note.date
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
notes.value = [];
|
||||
notesError.value = 'Unable to load notes.';
|
||||
} finally {
|
||||
loadingNotes.value = false;
|
||||
function toggleExpandedFolder(folderId) {
|
||||
const arr = expandedFolderIds.value;
|
||||
const idx = arr.indexOf(folderId);
|
||||
if (idx !== -1) {
|
||||
arr.splice(idx, 1);
|
||||
} else {
|
||||
arr.push(folderId);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSidebar() {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value;
|
||||
function isFolderExpanded(folderId) {
|
||||
return expandedFolderIds.value.includes(folderId);
|
||||
}
|
||||
|
||||
async function createNote() {
|
||||
if (!Campaign.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const campaignId = Campaign.value?._id
|
||||
|
||||
try {
|
||||
const response = await Server().post('/note/create', {
|
||||
title: 'New note',
|
||||
content: "",
|
||||
campaign: campaignId
|
||||
});
|
||||
|
||||
if (response.data.status !== 'ok') {
|
||||
return;
|
||||
}
|
||||
|
||||
emitter.emit('note-created', response.data.note);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function openNote(note) {
|
||||
emitter.emit('push-note', note);
|
||||
}
|
||||
|
||||
function handleNoteCreated(note) {
|
||||
if (!note) {
|
||||
return;
|
||||
}
|
||||
if (!note) return;
|
||||
|
||||
const noteCampaignId = note.campaign?._id ?? note.campaign ?? null;
|
||||
if (campaignId.value && noteCampaignId && noteCampaignId !== campaignId.value) {
|
||||
return;
|
||||
}
|
||||
if (campaignId.value && noteCampaignId && noteCampaignId !== campaignId.value) return;
|
||||
|
||||
const createdNote = {
|
||||
key: note._id,
|
||||
@@ -109,24 +57,105 @@ function handleNoteCreated(note) {
|
||||
date: note.date
|
||||
};
|
||||
|
||||
notes.value = notes.value.filter((currentNote) => {
|
||||
return currentNote.key !== createdNote.key;
|
||||
});
|
||||
notes.value = notes.value.filter((currentNote) => currentNote.key !== createdNote.key);
|
||||
notes.value.unshift(createdNote);
|
||||
openNote(createdNote);
|
||||
}
|
||||
|
||||
function handleNoteRenamed(data) {
|
||||
const note = notes.value.find(n => n.key === data.key);
|
||||
if (note) {
|
||||
note.title = data.title;
|
||||
}
|
||||
emitter.emit('title-updated', { key: data.key, title: data.title });
|
||||
}
|
||||
|
||||
const campaignId = computed(() => {
|
||||
return Campaign.value?._id ?? Campaign.value?.id ?? null;
|
||||
});
|
||||
|
||||
async function fetchCampaignNotes() {
|
||||
if (!campaignId.value) {
|
||||
notes.value = [];
|
||||
folders.value = [];
|
||||
notesError.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
loadingNotes.value = true;
|
||||
notesError.value = '';
|
||||
|
||||
try {
|
||||
const response = await Server().get('/note/list', { params: { campaign: campaignId.value } });
|
||||
|
||||
if (response.data.status !== 'ok') {
|
||||
notes.value = [];
|
||||
folders.value = [];
|
||||
notesError.value = response.data.msg ?? 'Unable to load notes.';
|
||||
return;
|
||||
}
|
||||
|
||||
folders.value = response.data.folders.map((folder) => ({
|
||||
_id: folder._id, name: folder.name, date: folder.date
|
||||
}));
|
||||
|
||||
notes.value = response.data.notes.map((note) => {
|
||||
return { key: note._id, title: note.title, text: note.content ?? '', date: note.date };
|
||||
});
|
||||
} catch (error) {
|
||||
notes.value = [];
|
||||
folders.value = [];
|
||||
notesError.value = 'Unable to load notes.';
|
||||
} finally {
|
||||
loadingNotes.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createNote() {
|
||||
if (!Campaign.value) return;
|
||||
|
||||
const cid = Campaign.value?._id;
|
||||
|
||||
try {
|
||||
const response = await Server().post('/note/create', {
|
||||
title: 'New note',
|
||||
content: '',
|
||||
campaign: cid
|
||||
});
|
||||
|
||||
if (response.data.status !== 'ok') return;
|
||||
|
||||
emitter.emit('note-created', response.data.note);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
function createFolder() {
|
||||
CreateWindow('new_folder', { campaign: campaignId.value });
|
||||
}
|
||||
|
||||
function toggleSidebar() {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value;
|
||||
}
|
||||
|
||||
const rootNotes = computed(() => notes.value.filter(n => !n._folder));
|
||||
|
||||
watch(campaignId, (newVal) => {
|
||||
if (newVal) {
|
||||
fetchCampaignNotes();
|
||||
} else {
|
||||
notes.value = [];
|
||||
folders.value = [];
|
||||
notesError.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on('note-created', handleNoteCreated);
|
||||
if (campaignId.value) {
|
||||
fetchCampaignNotes();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off('note-created', handleNoteCreated);
|
||||
});
|
||||
|
||||
watch(Campaign, () => {
|
||||
fetchCampaignNotes();
|
||||
}, { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -160,6 +189,17 @@ watch(Campaign, () => {
|
||||
<img class="sidebar-action-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="sidebar-action"
|
||||
type="button"
|
||||
@click="createFolder"
|
||||
:disabled="!Campaign"
|
||||
title="New folder"
|
||||
aria-label="New folder"
|
||||
>
|
||||
<img class="sidebar-action-icon" src="/icons/iconoir/regular/folder.svg" alt="" aria-hidden="true">
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="sidebar-action"
|
||||
type="button"
|
||||
@@ -177,35 +217,35 @@ watch(Campaign, () => {
|
||||
<div class="sidebar-copy">
|
||||
<span class="sidebar-eyebrow">Campaign</span>
|
||||
<strong class="sidebar-title">Notes</strong>
|
||||
<span class="sidebar-meta">{{ notesMeta }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="campaign-notes-list" class="sidebar-list">
|
||||
<div class="sidebar-list-drop-wrap" :class="{ 'drag-over': isDragOverSidebar }" id="campaign-notes-list" @dragenter.self="isDragOverSidebar = true" @dragleave.self="isDragOverSidebar = false" @dragover.prevent @drop.stop="handleSidebarDrop">
|
||||
<div v-if="loadingNotes" class="sidebar-state">
|
||||
Loading notes...
|
||||
</div>
|
||||
Loading notes...
|
||||
</div>
|
||||
|
||||
<div v-else-if="notesError" class="sidebar-state error">
|
||||
{{ notesError }}
|
||||
</div>
|
||||
<div v-else-if="notesError" class="sidebar-state error">
|
||||
{{ notesError }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="notes.length === 0" class="sidebar-state">
|
||||
No notes in this campaign yet.
|
||||
</div>
|
||||
<div v-else-if="folders.length === 0 && notes.length === 0" class="sidebar-state">
|
||||
No notes in this campaign yet.
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<button
|
||||
v-for="note in notes"
|
||||
:key="note.key"
|
||||
type="button"
|
||||
class="note-link"
|
||||
@click="openNote(note)"
|
||||
>
|
||||
<span class="note-link-title">{{ note.title }}</span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<template v-else>
|
||||
<NestedNoteList ref="nestedNoteListRef"
|
||||
:parent-folder-id="null"
|
||||
:folders="folders"
|
||||
:notes="rootNotes"
|
||||
:campaign-id="campaignId"
|
||||
:expanded-folder-ids="expandedFolderIds"
|
||||
@open-note="openNote"
|
||||
@reload-notes="fetchCampaignNotes"
|
||||
@toggle-expanded-folder="toggleExpandedFolder"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
@@ -213,8 +253,8 @@ watch(Campaign, () => {
|
||||
<style scoped>
|
||||
.sidebar-shell {
|
||||
min-height: 0;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar-actions {
|
||||
@@ -260,8 +300,8 @@ watch(Campaign, () => {
|
||||
}
|
||||
|
||||
.notes-sidebar {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
width: 280px;
|
||||
border-right: 1px solid var(--color-border);
|
||||
background-color: var(--color-background-light);
|
||||
display: flex;
|
||||
@@ -305,7 +345,7 @@ watch(Campaign, () => {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
.sidebar-list-drop-wrap {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
box-sizing: border-box;
|
||||
@@ -313,6 +353,14 @@ watch(Campaign, () => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
gap: 2px;
|
||||
transition: background-color 0.15s ease;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sidebar-list-drop-wrap.drag-over {
|
||||
background: var(--color-button-hover);
|
||||
}
|
||||
|
||||
.sidebar-state {
|
||||
@@ -326,35 +374,6 @@ watch(Campaign, () => {
|
||||
color: #9e2a2b;
|
||||
}
|
||||
|
||||
.note-link {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.note-link:hover {
|
||||
transform: translateX(2px);
|
||||
background: var(--color-background-light);
|
||||
}
|
||||
|
||||
.note-link-title {
|
||||
font-weight: 600;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.note-link-date {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.notes-sidebar {
|
||||
width: 220px;
|
||||
@@ -362,7 +381,7 @@ watch(Campaign, () => {
|
||||
}
|
||||
|
||||
.sidebar-header,
|
||||
.sidebar-list {
|
||||
.sidebar-list-drop-wrap {
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user