BinarySandia04
0fb4f01892
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 1m20s
390 lines
10 KiB
Vue
390 lines
10 KiB
Vue
<script setup>
|
|
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);
|
|
|
|
async function handleSidebarDrop(event) {
|
|
const noteKey = event.dataTransfer.getData('text/plain');
|
|
if (!noteKey) return;
|
|
try {
|
|
await Server().post('/note/update', { id: noteKey, folder: null });
|
|
fetchCampaignNotes();
|
|
} catch (e) {}
|
|
}
|
|
|
|
function toggleExpandedFolder(folderId) {
|
|
const arr = expandedFolderIds.value;
|
|
const idx = arr.indexOf(folderId);
|
|
if (idx !== -1) {
|
|
arr.splice(idx, 1);
|
|
} else {
|
|
arr.push(folderId);
|
|
}
|
|
}
|
|
|
|
function isFolderExpanded(folderId) {
|
|
return expandedFolderIds.value.includes(folderId);
|
|
}
|
|
|
|
function openNote(note) {
|
|
emitter.emit('push-note', note);
|
|
}
|
|
|
|
function handleNoteCreated(note) {
|
|
if (!note) return;
|
|
|
|
const noteCampaignId = note.campaign?._id ?? note.campaign ?? null;
|
|
if (campaignId.value && noteCampaignId && noteCampaignId !== campaignId.value) return;
|
|
|
|
const createdNote = {
|
|
key: note._id,
|
|
title: note.title,
|
|
text: note.content ?? '',
|
|
date: note.date
|
|
};
|
|
|
|
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(() => {
|
|
if (campaignId.value) {
|
|
fetchCampaignNotes();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="sidebar-shell">
|
|
<nav class="sidebar-actions" aria-label="Campaign tools">
|
|
<button
|
|
class="sidebar-action"
|
|
type="button"
|
|
@click="toggleSidebar"
|
|
:aria-expanded="(!sidebarCollapsed).toString()"
|
|
aria-controls="campaign-notes-list"
|
|
:title="sidebarCollapsed ? 'Expand notes' : 'Collapse notes'"
|
|
:aria-label="sidebarCollapsed ? 'Expand notes' : 'Collapse notes'"
|
|
>
|
|
<img
|
|
class="sidebar-action-icon"
|
|
:src="sidebarCollapsed ? '/icons/iconoir/regular/nav-arrow-right.svg' : '/icons/iconoir/regular/nav-arrow-left.svg'"
|
|
alt=""
|
|
aria-hidden="true"
|
|
>
|
|
</button>
|
|
|
|
<button
|
|
class="sidebar-action"
|
|
type="button"
|
|
@click="createNote"
|
|
:disabled="!Campaign"
|
|
title="New note"
|
|
aria-label="New note"
|
|
>
|
|
<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"
|
|
@click="fetchCampaignNotes"
|
|
:disabled="!Campaign || loadingNotes"
|
|
title="Refresh notes"
|
|
aria-label="Refresh notes"
|
|
>
|
|
<img class="sidebar-action-icon" src="/icons/iconoir/regular/refresh.svg" alt="" aria-hidden="true">
|
|
</button>
|
|
</nav>
|
|
|
|
<aside class="notes-sidebar" :class="{ collapsed: sidebarCollapsed }">
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-copy">
|
|
<span class="sidebar-eyebrow">Campaign</span>
|
|
<strong class="sidebar-title">Notes</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div v-else-if="notesError" class="sidebar-state error">
|
|
{{ notesError }}
|
|
</div>
|
|
|
|
<div v-else-if="folders.length === 0 && notes.length === 0" class="sidebar-state">
|
|
No notes in this campaign yet.
|
|
</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>
|
|
|
|
<style scoped>
|
|
.sidebar-shell {
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.sidebar-actions {
|
|
width: 32px;
|
|
min-width: 32px;
|
|
padding: 8px 6px;
|
|
border-right: 1px solid var(--color-border);
|
|
background-color: var(--color-background-light);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.sidebar-action {
|
|
width: 34px;
|
|
height: 34px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 8px;
|
|
background: var(--color-background-soft);
|
|
box-shadow: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar-action:hover {
|
|
background: var(--color-button-hover);
|
|
}
|
|
|
|
.sidebar-action:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.sidebar-action-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
filter: invert(var(--color-icon-invert));
|
|
}
|
|
|
|
.notes-sidebar {
|
|
min-width: 280px;
|
|
width: 280px;
|
|
border-right: 1px solid var(--color-border);
|
|
background-color: var(--color-background-light);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
transition: width 0.2s ease, min-width 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.notes-sidebar.collapsed {
|
|
width: 0;
|
|
min-width: 0;
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
.sidebar-header {
|
|
width: 280px;
|
|
min-width: 280px;
|
|
box-sizing: border-box;
|
|
padding: 12px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.sidebar-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sidebar-eyebrow,
|
|
.sidebar-meta {
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.sidebar-title {
|
|
line-height: 1.2;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.sidebar-list-drop-wrap {
|
|
width: 280px;
|
|
min-width: 280px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
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 {
|
|
padding: 12px;
|
|
border-radius: 10px;
|
|
background: var(--color-background-soft);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sidebar-state.error {
|
|
color: #9e2a2b;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.notes-sidebar {
|
|
width: 220px;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.sidebar-header,
|
|
.sidebar-list-drop-wrap {
|
|
width: 220px;
|
|
min-width: 220px;
|
|
}
|
|
}
|
|
</style>
|