Ask for confirmation when navigation away from unsaved dirty forms

Fixes #1541

Author: bkis

Tekst-Web/i18n/ui/deDE.yml

@@ -79,6 +79,7 @@ common:
   loading: Lade...
   url: URL
   downloadSaved: Datei gespeichert als {filename}.
+  dirtyFormConfirm: Sie haben ungespeicherte Änderungen. Wollen Sie dieses Formular wirklich schließen?
   areYouSureHelpTextHint: |
     Bitte vergewissern Sie sich, dass Sie die entsprechende Passage in den
     Hilfetexten zu diesem Thema gelesen und verstanden haben.

Tekst-Web/i18n/ui/enUS.yml

@@ -79,6 +79,7 @@ common:
   loading: Loading...
   url: URL
   downloadSaved: File saved as {filename}.
+  dirtyFormConfirm: You have unsaved changes. Are you sure you want to close this form?
   areYouSureHelpTextHint: |
     Please make sure you have read and understood the corresponding passage in the
     help texts on this topic. You can find the help texts for any page by clicking the

Tekst-Web/src/composables/modelChanges.ts

@@ -1,6 +1,10 @@
+import { $t } from '@/i18n';
+import { useDialog } from 'naive-ui';
 import { computed, ref, type Ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
 
 export function useModelChanges(model: Ref<Record<string, unknown> | undefined>) {
+  const dialog = useDialog();
   const valuesToJSON = (o: Record<string, unknown> | undefined) =>
     Object.fromEntries(Object.entries(o || {}).map(([k, v]) => [k, JSON.stringify(v)]));
   const beforeEntriesJson = ref(valuesToJSON(model.value));
@@ -9,6 +13,25 @@ export function useModelChanges(model: Ref<Record<string, unknown> | undefined>)
     Object.entries(afterEntriesJson.value).some(([k, v]) => v !== beforeEntriesJson.value[k])
   );
 
+  // register router guard to prevent navigation if there are unsaved changes
+  onBeforeRouteLeave(
+    async (_to, _from) =>
+      !changed.value ||
+      (await new Promise((resolve) =>
+        dialog.warning({
+          title: $t('common.warning'),
+          content: $t('common.dirtyFormConfirm'),
+          positiveText: $t('common.yes'),
+          negativeText: $t('common.no'),
+          onPositiveClick: () => resolve(true),
+          onNegativeClick: () => resolve(false),
+          onClose: () => resolve(false),
+          onEsc: () => resolve(false),
+          onMaskClick: () => resolve(false),
+        })
+      ))
+  );
+
   function getChanges(forceProps?: string[]) {
     if (!changed.value) {
       return {};