kjdskjk

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>