This commit is contained in:
@@ -1,115 +1,17 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { watch } from 'vue';
|
||||
import Content from '../viewer/content/Content.vue';
|
||||
import StatusBar from '../viewer/statusbar/StatusBar.vue';
|
||||
import TopBar from '../viewer/TopBar.vue';
|
||||
|
||||
import { ShowContent } from '../../services/Content.js';
|
||||
import { useCampaignService } from '~/services/Campaign.js';
|
||||
import { emitter } from '~/services/Emitter';
|
||||
import Server from '~/services/Server';
|
||||
import ContentSidebar from '../partials/ContentSidebar.vue';
|
||||
|
||||
const { Campaign } = useCampaignService();
|
||||
const notes = ref([]);
|
||||
const loadingNotes = ref(false);
|
||||
const notesError = ref('');
|
||||
const sidebarCollapsed = ref(false);
|
||||
|
||||
const campaignId = computed(() => {
|
||||
return Campaign.value?._id ?? Campaign.value?.id ?? null;
|
||||
});
|
||||
|
||||
const campaignName = computed(() => {
|
||||
return Campaign.value?.name ?? 'Campaign';
|
||||
});
|
||||
|
||||
async function fetchCampaignNotes() {
|
||||
if (!campaignId.value) {
|
||||
notes.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 = [];
|
||||
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 toggleSidebar() {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value;
|
||||
}
|
||||
|
||||
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) => {
|
||||
return currentNote.key !== createdNote.key;
|
||||
});
|
||||
notes.value.unshift(createdNote);
|
||||
openNote(createdNote);
|
||||
}
|
||||
|
||||
function formatNoteDate(date) {
|
||||
if (!date) return '';
|
||||
return new Date(date).toLocaleDateString();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on('note-created', handleNoteCreated);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off('note-created', handleNoteCreated);
|
||||
});
|
||||
|
||||
watch(Campaign, () => {
|
||||
if(Campaign.value) ShowContent.value = true;
|
||||
fetchCampaignNotes();
|
||||
}, { immediate: true });
|
||||
</script>
|
||||
|
||||
@@ -117,55 +19,7 @@ watch(Campaign, () => {
|
||||
<div v-show="ShowContent" class="content-manager">
|
||||
<TopBar></TopBar>
|
||||
<div class="content-layout">
|
||||
<aside class="notes-sidebar" :class="{ collapsed: sidebarCollapsed }">
|
||||
<div class="sidebar-header">
|
||||
<button
|
||||
class="sidebar-toggle"
|
||||
type="button"
|
||||
@click="toggleSidebar"
|
||||
:aria-expanded="(!sidebarCollapsed).toString()"
|
||||
aria-controls="campaign-notes-list"
|
||||
>
|
||||
<img
|
||||
class="sidebar-toggle-icon"
|
||||
:src="sidebarCollapsed ? '/icons/iconoir/regular/nav-arrow-right.svg' : '/icons/iconoir/regular/nav-arrow-left.svg'"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
>
|
||||
</button>
|
||||
|
||||
<div v-if="!sidebarCollapsed" class="sidebar-copy">
|
||||
<!-- Aqui posar buttons -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!sidebarCollapsed" id="campaign-notes-list" class="sidebar-list">
|
||||
<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="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>
|
||||
</aside>
|
||||
|
||||
<ContentSidebar></ContentSidebar>
|
||||
<Content></Content>
|
||||
</div>
|
||||
<StatusBar></StatusBar>
|
||||
@@ -184,117 +38,4 @@ watch(Campaign, () => {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.notes-sidebar {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
border-right: 1px solid var(--color-border);
|
||||
background-color: var(--color-background-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.2s ease, min-width 0.2s ease;
|
||||
}
|
||||
|
||||
.notes-sidebar.collapsed {
|
||||
width: 54px;
|
||||
min-width: 54px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-background-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-toggle-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
filter: invert(var(--color-icon-invert));
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-state {
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--color-background-soft);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sidebar-state.error {
|
||||
color: #9e2a2b;
|
||||
}
|
||||
|
||||
.note-link {
|
||||
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;
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user