This commit is contained in:
@@ -7,10 +7,16 @@ import { CreateWindow } from '@/services/Windows'
|
||||
import { GetUser, HasAdmin } from './services/User';
|
||||
import TooltipManager from './components/managers/TooltipManager.vue';
|
||||
import ContextMenuManager from './components/managers/ContextMenuManager.vue';
|
||||
import { useCampaignService } from './services/Campaign';
|
||||
|
||||
const { RestoreCampaign } = useCampaignService();
|
||||
|
||||
async function start(){
|
||||
if(GetUser()){
|
||||
CreateWindow('main_menu');
|
||||
const restoredCampaign = await RestoreCampaign();
|
||||
if (!restoredCampaign) {
|
||||
CreateWindow('main_menu');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -56,4 +62,4 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
354
frontend/app/components/partials/ContentSidebar.vue
Normal file
354
frontend/app/components/partials/ContentSidebar.vue
Normal file
@@ -0,0 +1,354 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, 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';
|
||||
|
||||
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 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 = '';
|
||||
|
||||
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 openCreateNoteWindow() {
|
||||
if (!Campaign.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
CreateWindow('create_note');
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on('note-created', handleNoteCreated);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off('note-created', handleNoteCreated);
|
||||
});
|
||||
|
||||
watch(Campaign, () => {
|
||||
fetchCampaignNotes();
|
||||
}, { immediate: true });
|
||||
</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="openCreateNoteWindow"
|
||||
: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="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>
|
||||
<span class="sidebar-meta">{{ notesMeta }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-shell {
|
||||
min-height: 0;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 280px;
|
||||
min-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 {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
box-sizing: border-box;
|
||||
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 {
|
||||
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;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.sidebar-header,
|
||||
.sidebar-list {
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,8 +2,9 @@
|
||||
import TopSearchBar from './topbar/TopSearchBar.vue';
|
||||
import { useCampaignService } from '~/services/Campaign';
|
||||
import { CreateWindow } from '~/services/Windows';
|
||||
import { SetShowContent } from '~/services/Content';
|
||||
|
||||
const { Campaign } = useCampaignService();
|
||||
const { Campaign, SetCampaign } = useCampaignService();
|
||||
|
||||
const campaignName = computed(() => {
|
||||
return Campaign.value?.name ?? 'Campaign';
|
||||
@@ -17,6 +18,12 @@ function openCreateNoteWindow() {
|
||||
CreateWindow('create_note');
|
||||
}
|
||||
|
||||
function exitToMainMenu() {
|
||||
SetCampaign(null);
|
||||
SetShowContent(false);
|
||||
CreateWindow('main_menu');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -31,6 +38,10 @@ function openCreateNoteWindow() {
|
||||
<TopSearchBar></TopSearchBar>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button class="top-bar-button sound-click" type="button" @click="exitToMainMenu">
|
||||
<img class="top-bar-button-icon" src="/icons/iconoir/regular/nav-arrow-left.svg" alt="" aria-hidden="true">
|
||||
<span>Main Menu</span>
|
||||
</button>
|
||||
<button class="note-button sound-click" type="button" @click="openCreateNoteWindow" :disabled="!Campaign">
|
||||
<img class="note-button-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
|
||||
<span>New Note</span>
|
||||
@@ -50,11 +61,11 @@ function openCreateNoteWindow() {
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 8px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.left, .right {
|
||||
@@ -65,6 +76,7 @@ function openCreateNoteWindow() {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@@ -75,6 +87,7 @@ function openCreateNoteWindow() {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.top-bar-button,
|
||||
.note-button {
|
||||
height: 30px;
|
||||
padding: 0 12px;
|
||||
@@ -92,6 +105,7 @@ function openCreateNoteWindow() {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.top-bar-button-icon,
|
||||
.note-button-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup>
|
||||
import { marked } from 'marked';
|
||||
import { onMounted, onUnmounted, ref, createApp } from 'vue';
|
||||
import ToastManager from '~/components/managers/ToastManager.vue';
|
||||
import { emitter } from '~/services/Emitter';
|
||||
import { ParseMarkdown } from '~/services/Marker';
|
||||
import Server from '~/services/Server';
|
||||
import { DisplayToast } from '~/services/Toaster';
|
||||
import TestWidget from '../widgets/TestWidget.vue';
|
||||
@@ -20,33 +20,15 @@ function closeNote(){
|
||||
emitter.emit('delete-note', props.noteKey);
|
||||
}
|
||||
|
||||
// MARKED
|
||||
|
||||
const renderer = new marked.Renderer();
|
||||
|
||||
renderer.paragraph = (token) => {
|
||||
const text = token.text || '';
|
||||
|
||||
if (text.startsWith(':::my-component')) {
|
||||
return `<div class="vue-component" data-component="TestWidget"></div>`;
|
||||
}
|
||||
|
||||
return `<p>${text}</p>`;
|
||||
};
|
||||
|
||||
marked.setOptions({
|
||||
renderer: renderer,
|
||||
});
|
||||
|
||||
const compiledMarkdown = computed(() => {
|
||||
return marked.parse(sourceText.value);
|
||||
return ParseMarkdown(sourceText.value);
|
||||
});
|
||||
|
||||
function mountComponents() {
|
||||
const nodes = document.querySelectorAll('.vue-component');
|
||||
|
||||
nodes.forEach(el => {
|
||||
const app = createApp(TestWidget, { /* props */ });
|
||||
const app = createApp(TestWidget, { content: el.dataset.content });
|
||||
app.mount(el);
|
||||
console.log("Mounted a component")
|
||||
});
|
||||
|
||||
3
frontend/app/components/viewer/widgets/TableWidget.vue
Normal file
3
frontend/app/components/viewer/widgets/TableWidget.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
@@ -1,3 +1,13 @@
|
||||
<script setup>
|
||||
const props = defineProps(['content']);
|
||||
|
||||
const name = ref('');
|
||||
|
||||
onMounted(() => {
|
||||
name.value = props.content || 'No content';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h2>This is a test widget</h2>
|
||||
<h2>This is a {{name}} widget</h2>
|
||||
</template>
|
||||
@@ -3,7 +3,7 @@ import { onMounted, ref } from 'vue';
|
||||
import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow } from '@/services/Windows';
|
||||
|
||||
import WindowHandle from './partials/WindowHandle.vue';
|
||||
import ColorPicker from '../partials/ColorPicker.vue';
|
||||
import ColorPicker from '../layouts/ColorPicker.vue';
|
||||
import Server from '~/services/Server';
|
||||
import { DisplayToast } from '~/services/Toaster';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import IconButton from '~/components/partials/IconButton.vue';
|
||||
import IconButton from '~/components/layouts/IconButton.vue';
|
||||
|
||||
const props = defineProps(['plus', 'edit', 'view', 'remove']);
|
||||
|
||||
|
||||
@@ -1,12 +1,41 @@
|
||||
import Server from './Server';
|
||||
|
||||
const SELECTED_CAMPAIGN_KEY = 'selectedCampaignId';
|
||||
|
||||
export const useCampaignService = () => {
|
||||
const Campaign = useState('campaign', () => null)
|
||||
|
||||
const SetCampaign = (data) => {
|
||||
Campaign.value = data;
|
||||
if (data?._id) {
|
||||
localStorage.setItem(SELECTED_CAMPAIGN_KEY, data._id);
|
||||
} else {
|
||||
localStorage.removeItem(SELECTED_CAMPAIGN_KEY);
|
||||
}
|
||||
}
|
||||
|
||||
const RestoreCampaign = async () => {
|
||||
const campaignId = localStorage.getItem(SELECTED_CAMPAIGN_KEY);
|
||||
if (!campaignId) return false;
|
||||
|
||||
try {
|
||||
const response = await Server().get(`/campaign/retrieve/${campaignId}`);
|
||||
if (response.data.status !== 'ok') {
|
||||
SetCampaign(null);
|
||||
return false;
|
||||
}
|
||||
|
||||
SetCampaign(response.data.campaign);
|
||||
return true;
|
||||
} catch (error) {
|
||||
SetCampaign(null);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
Campaign,
|
||||
SetCampaign
|
||||
SetCampaign,
|
||||
RestoreCampaign
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Marked } from "marked";
|
||||
|
||||
const marker = new Marked();
|
||||
|
||||
// optional: use a shared marked instance inside renderer
|
||||
const renderMarkdown = (text) => marker.parse(text);
|
||||
|
||||
const WidgetMap = {
|
||||
test: () => import("~/components/viewer/widgets/TestWidget.vue"),
|
||||
table: () => import("~/components/viewer/widgets/TableWidget.vue"),
|
||||
};
|
||||
|
||||
const extension = {
|
||||
name: "something",
|
||||
level: "block",
|
||||
|
||||
tokenizer(src) {
|
||||
const rule = /^@(\w+)\n([\s\S]+?)\n@end/;
|
||||
const match = rule.exec(src);
|
||||
|
||||
if (!match) return;
|
||||
|
||||
return {
|
||||
type: "something",
|
||||
raw: match[0],
|
||||
name: match[1],
|
||||
text: match[2],
|
||||
};
|
||||
},
|
||||
|
||||
renderer(token) {
|
||||
return `<div class="vue-component" data-component="${token.name}" data-content="${token.text}"></div>`;
|
||||
},
|
||||
};
|
||||
|
||||
marker.use({
|
||||
extensions: [extension],
|
||||
});
|
||||
|
||||
function ParseMarkdown(source) {
|
||||
return marker.parse(source || "");
|
||||
}
|
||||
|
||||
export { ParseMarkdown, WidgetMap };
|
||||
@@ -64,6 +64,7 @@ function LoadUser(){
|
||||
|
||||
function LogoutUser(){
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("selectedCampaignId");
|
||||
UserStatus.value = 0;
|
||||
}
|
||||
|
||||
@@ -77,4 +78,4 @@ export {
|
||||
HasAdmin,
|
||||
GetUserSetting,
|
||||
SetUserSetting
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user