kjdskjk

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>