Banknotizen automatisch speichern

frontend/pages/banking/statements/[mode]/[[id]].vue

@@ -40,6 +40,9 @@ const ownaccounts = ref([])
 const loading = ref(true)
 const loadingDocuments = ref(true)
 const savingNotes = ref(false)
+const notesSaveDelay = 800
+let notesSaveTimer = null
+let notesSaveQueued = false
 
 const rebuildDocumentLists = () => {
   const documents = createddocuments.value.filter(i => i.type === "invoices" || i.type === "advanceInvoices")
@@ -262,14 +265,26 @@ const removeAllocation = async (allocationId) => {
 }
 
 const saveNotes = async () => {
+  if (!itemInfo.value?.id || !notesChanged.value) return
+  if (savingNotes.value) {
+    notesSaveQueued = true
+    return
+  }
+
+  const notes = String(itemInfo.value.notes || "").trim() || null
   savingNotes.value = true
   try {
-    const notes = String(itemInfo.value.notes || "").trim() || null
     const updated = await useEntities("bankstatements").update(itemInfo.value.id, {notes}, true)
-    itemInfo.value.notes = updated.notes
     oldItemInfo.value.notes = updated.notes
+    if (String(itemInfo.value.notes || "").trim() === String(notes || "")) {
+      itemInfo.value.notes = updated.notes
+    }
   } finally {
     savingNotes.value = false
+    if (notesSaveQueued || notesChanged.value) {
+      notesSaveQueued = false
+      scheduleNotesSave()
+    }
   }
 }
 
@@ -277,6 +292,26 @@ const notesChanged = computed(() =>
     String(itemInfo.value?.notes || "").trim() !== String(oldItemInfo.value?.notes || "").trim()
 )
 
+const scheduleNotesSave = () => {
+  if (notesSaveTimer) clearTimeout(notesSaveTimer)
+  notesSaveTimer = setTimeout(() => {
+    notesSaveTimer = null
+    void saveNotes()
+  }, notesSaveDelay)
+}
+
+watch(() => itemInfo.value?.notes, () => {
+  if (!loading.value && notesChanged.value) scheduleNotesSave()
+})
+
+onBeforeRouteLeave(async () => {
+  if (notesSaveTimer) {
+    clearTimeout(notesSaveTimer)
+    notesSaveTimer = null
+  }
+  if (notesChanged.value) await saveNotes()
+})
+
 const searchString = ref(tempStore.searchStrings["bankstatementsedit"] || '')
 
 const clearSearchString = () => {
@@ -616,22 +651,12 @@ setup()
             <UFormField label="Notiz" size="sm">
               <UTextarea
                   v-model="itemInfo.notes"
+                  class="w-full"
                   :rows="3"
                   autoresize
                   placeholder="Interne Notiz zu dieser Bankbuchung hinzufügen …"
               />
             </UFormField>
-            <div class="mt-2 flex justify-end">
-              <UButton
-                  icon="i-heroicons-check"
-                  size="sm"
-                  :disabled="!notesChanged"
-                  :loading="savingNotes"
-                  @click="saveNotes"
-              >
-                Notiz speichern
-              </UButton>
-            </div>
           </div>
 
           <div class="mt-4">