feat: automatically save

public/src/views/PlanView.vue

@@ -14,7 +14,8 @@ import CreatePlanDialog from "@/components/dialog/CreatePlanDialog.vue";
 import CreateGottesdienstDialog from "@/components/dialog/CreateGottesdienstDialog.vue";
 import CreateMinistrantDialog from "@/components/dialog/CreateMinistrantDialog.vue";
 import {useRoute, useRouter} from "vue-router";
-import {min} from "rxjs";
+import debounce from "underscore/modules/debounce.js"
+import SavingIndicator from "@/components/SavingIndicator.vue";
 
 const MAX_WIDTH_MOBILE = 600;
 
@@ -38,6 +39,7 @@ const mobile = ref(window.innerWidth <= MAX_WIDTH_MOBILE)
 const editedMarks = reactive<Mark[]>([]);
 const editPlanAdmin = ref(false)
 const planId = ref(parseInt(route.params.id as string))
+const isSaving = ref(false)
 
 
 onMounted(async () => {
@@ -147,11 +149,13 @@ function getDif(): Mark[] {
     })
 }
 
-async function saveChanges() {
+
+const saveChanges = debounce(saveChangesFunc, 600)
+
+async function saveChangesFunc() {
     const saved = await API.setMarks(getDif())
     if (saved) {
-        plan.marks = getMarks()
-        editedMarks.length = 0
+        isSaving.value = false
     }
 }
 
@@ -165,6 +169,7 @@ function canEdit(username: string) {
     return plan.editable.includes(username)
 }
 
+
 function toggleMark(gid, mid) {
     // TODO: track changes
     const username = plan.ministranten.find(m => m.id == mid)?.username
@@ -179,6 +184,9 @@ function toggleMark(gid, mid) {
         }
         editedMarks.push(mark)
     }
+
+    isSaving.value = true
+    saveChanges()
 }
 
 
@@ -306,6 +314,9 @@ async function createMinistrant(ministrantId?: number) {
                 @add-mini="createMinistrant()"
                 v-if="editPlanAdmin"
             />
+
+
+            <SavingIndicator :visible="isSaving"/>
         </div>
     </main>
 </template>