kjdskjk

frontend/app/components/viewer/TopBar.vue

@@ -10,32 +10,6 @@ const campaignName = computed(() => {
     return Campaign.value?.name ?? 'Campaign';
 });
 
-async function createNote() {
-    if (!Campaign.value) {
-        return;
-    }
-
-    const campaignId = Campaign.value?._id 
-
-    try {
-        const response = await Server().post('/note/create', {
-            title: 'New note',
-            content: content.value,
-            campaign: campaignId
-        });
-
-        if (response.data.status !== 'ok') {
-            return;
-        }
-
-        emitter.emit('note-created', response.data.note);
-    } catch (err) {
-        error.value = 'Unable to create note.';
-    } finally {
-        isSaving.value = false;
-    }
-}
-
 function exitToMainMenu() {
     SetCampaign(null);
     SetShowContent(false);
@@ -60,10 +34,6 @@ function 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="createNote" :disabled="!Campaign">
-                <img class="note-button-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
-                <span>New Note</span>
-            </button>
         </div>
     </div>
 </template>

frontend/app/components/viewer/content/Note.vue

@@ -1,11 +1,8 @@
 <script setup>
 import { onMounted, onUnmounted, ref, createApp } from 'vue';
-import ToastManager from '~/components/managers/ToastManager.vue';
-import { emitter } from '~/services/Emitter';
 import { GetWidget, ParseMarkdown } from '~/services/Marker';
 import Server from '~/services/Server';
-import { DisplayToast } from '~/services/Toaster';
-import TestWidget from '../widgets/TestWidget.vue';
+import { DeleteNote, FetchCampaignNotes } from '~/services/Content';
 
 // import { GetNote, GetContent } from '@/services/Content';
 const props = defineProps(['text', 'title', 'noteKey']);
@@ -15,12 +12,11 @@ const sourceText = ref(''); // Original markdown source, used for editing
 const displayText = ref(''); // Compiled HTML from markdown
 
 const editingMode = ref(false);
-const editableTitle = ref(null);
 const title = ref(props.title);
 const displayTitle = ref('');
 
 function closeNote(){
-    emitter.emit('delete-note', props.noteKey);
+  DeleteNote(props.noteKey);
 }
 
 const compiledMarkdown = computed(() => {
@@ -29,7 +25,7 @@ const compiledMarkdown = computed(() => {
 
 function mountComponents() {
   // Should no need more
-  const widget_types = ['display', 'inline'];
+  const widget_types = ['display', 'inline', 'link'];
   widget_types.forEach((widget_type) => {
     const nodes = document.querySelectorAll('.vue-component-' + widget_type);
     nodes.forEach(el => {
@@ -96,6 +92,7 @@ function SaveNote(){
             return;
         }
         // DisplayToast('green', "Note saved successfully.", 500);
+        FetchCampaignNotes();
     }).catch((error) => {
         // Handle error (e.g., show a notification)
     });
@@ -149,6 +146,7 @@ function setupCallout() {
 
 const editTitle = (e) => {
   title.value = e.target.innerText;
+  SaveNote();
 }
 
 </script>

frontend/app/components/viewer/content/NoteContainer.vue

@@ -1,19 +1,23 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { ref } from 'vue';
 import Note from './Note.vue';
-import { emitter } from '~/services/Emitter';
-
-let noteData = ref([]);
+import { CurrentNotes, TotalNotes } from '~/services/Content';
 
 const noteContainer = ref(null);
 
+const computedCurrentNotes = computed(() => {
+    return CurrentNotes.value
+    .map(key => TotalNotes.value.find(note => note.key === key))
+    .filter(Boolean);
+})
+
 function calculateContainerWidth(){
     let dom = noteContainer.value;
     if (!dom) {
         return;
     }
 
-    dom.style.width = noteData.value.length * 701 + "px";
+    dom.style.width = CurrentNotes.value.length * 701 + "px";
     
     setTimeout(() => {
         for(let i = 0; i < dom.children.length; i++){
@@ -25,42 +29,14 @@ function calculateContainerWidth(){
     }, 0);
 }
 
-function pushNote(note){
-    noteData.value = noteData.value.filter((currentNote) => {
-        return currentNote.key !== note.key;
-    });
-    noteData.value.push(note);
-    calculateContainerWidth();
-}
-
-function handlePushNote(note) {
-    pushNote(note);
-}
-
-function handleDeleteNote(key) {
-    noteData.value = noteData.value.filter((note) => {
-        return note.key !== key;
-    });
-    calculateContainerWidth();
-}
-
-// Moure aixo
-onMounted(() => {
-    emitter.on("push-note", handlePushNote);
-    emitter.on("delete-note", handleDeleteNote);
-});
-
-onUnmounted(() => {
-    emitter.off("push-note", handlePushNote);
-    emitter.off("delete-note", handleDeleteNote);
-});
+watch(CurrentNotes, calculateContainerWidth);
 
 </script>
 
 <template>
 <div class="note-scrolling-container" id="note-scrolling-container">
     <div class="note-container" ref="noteContainer" >
-        <Note v-for="element in noteData" :key="element.key" :text="element.text" :title="element.title" :noteKey="element.key"></Note>
+        <Note v-for="element in computedCurrentNotes" :key="element.key" :text="element.text" :title="element.title" :noteKey="element.key"></Note>
     </div>
 </div>
 </template>

frontend/app/components/viewer/widgets/link/NoteLink.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+import { PushNote, GetNoteByName } from '~/services/Content';
+
+const props = defineProps(['content'])
+
+const parts = computed(() => props.content?.split('|') ?? [])
+
+const href = computed(() => parts.value[0] || '')
+const text = computed(() => parts.value[1] || parts.value[0] || '')
+
+
+function handleClick() {
+  // your custom logic here
+  PushNote(GetNoteByName(href.value));
+}
+
+
+</script>
+
+<template>
+  <a href="#" @click.prevent="handleClick">
+    {{ text }}
+  </a>
+</template>