fix: improve leave create/edit view guard (when data is unsaved).

Don't change url, when "Go back" button in browser was clicked many times

https://web.tracklify.com/project/2b7ZVgE5/AdminForth/1285/pPkdEPJQ/strange-behaviour-of-on-before

Author: yaroslav8765

adminforth/spa/src/utils/utils.ts

@@ -5,13 +5,13 @@ import router from "../router";
 import { useCoreStore } from '../stores/core';
 import { useUserStore } from '../stores/user';
 import { Dropdown } from 'flowbite';
-import adminforth from '../adminforth';
+import adminforth, { useAdminforth } from '../adminforth';
 import sanitizeHtml  from 'sanitize-html'
 import debounce from 'debounce';
 import type { AdminForthResourceColumnInputCommon, Predicate } from '@/types/Common';
 import { i18nInstance } from '../i18n'
 import { useI18n } from 'vue-i18n';
-
+import { onBeforeRouteLeave } from 'vue-router';
 
 
 
@@ -616,4 +616,55 @@ export function getTimeAgoString(date: Date): string {
     const days = Math.floor(diffInSeconds / 86400);
     return `${days} ${days === 1 ? 'day' : 'days'} ago`;
   }
+}
+
+export class leaveGuardActiveClass {
+  private active = false;
+
+  isActive() {
+    return this.active;
+  }
+
+  setActive(value: boolean) {
+    this.active = value;
+  }
+}
+
+export async function onBeforeRouteLeaveCreateEditViewGuard(initialValues: any, record: any, checkIfWeCanLeavePage: () => boolean, leaveGuardActive: leaveGuardActiveClass): Promise<boolean> {
+  
+  const { confirm } = useAdminforth();
+  const { t } = useI18n();
+
+  onBeforeRouteLeave(async (to, from) => {
+
+    if (leaveGuardActive.isActive()) {
+      return false;
+    }
+
+    if (checkIfWeCanLeavePage()) {
+      return true;
+    }
+
+    leaveGuardActive.setActive(true);
+
+    try {
+      const { changedFields } = compareOldAndNewRecord(
+        initialValues.value,
+        record.value
+      );
+
+      const messageHtml =
+        generateMessageHtmlForRecordChange(changedFields, t);
+
+      const answer = await confirm({
+        messageHtml,
+        yes: t('Yes'),
+        no: t('No'),
+      });
+
+      return answer;
+    } finally {
+      leaveGuardActive.setActive(false);
+    }
+  });
 }

adminforth/spa/src/views/CreateView.vue

@@ -79,7 +79,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf, compareOldAndNewRecord, generateMessageHtmlForRecordChange } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf, compareOldAndNewRecord, onBeforeRouteLeaveCreateEditViewGuard, leaveGuardActiveClass, onBeforeRouteLeaveCreateEditView } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, onBeforeMount, onBeforeUnmount, ref, watch, nextTick } from 'vue';
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
@@ -137,17 +137,12 @@ onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', onBeforeUnload);
 });
 
-onBeforeRouteLeave(async (to, from, next) => {
-  if (!checkIfWeCanLeavePage()) {
-    const { changedFields } = compareOldAndNewRecord(initialValues.value, record.value);
-    
-    const messageHtml = generateMessageHtmlForRecordChange(changedFields, t);
 
-    const answer = await confirm({ messageHtml: messageHtml, yes: t('Yes'), no: t('No') });
-    if (!answer) return next(false);
-  }
-  next();
-});
+const leaveGuardActive = new leaveGuardActiveClass();
+
+
+onBeforeRouteLeaveCreateEditViewGuard(initialValues, record, checkIfWeCanLeavePage, leaveGuardActive);
+
 
 onBeforeMount(() => {
   clearSaveInterceptors(route.params.resourceId as string);

adminforth/spa/src/views/EditView.vue

@@ -74,7 +74,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, compareOldAndNewRecord, generateMessageHtmlForRecordChange } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, compareOldAndNewRecord, generateMessageHtmlForRecordChange, leaveGuardActiveClass, onBeforeRouteLeaveCreateEditViewGuard } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { computed, onMounted, onBeforeMount, ref, type Ref, nextTick, watch, onBeforeUnmount } from 'vue';
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
@@ -122,17 +122,8 @@ onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', onBeforeUnload);
 });
 
-onBeforeRouteLeave(async (to, from, next) => {
-  if (!checkIfWeCanLeavePage()) {
-    const { changedFields } = compareOldAndNewRecord(initialRecord.value, record.value);
-    
-    const messageHtml = generateMessageHtmlForRecordChange(changedFields, t);
-
-    const answer = await confirm({ messageHtml: messageHtml, yes: t('Yes'), no: t('No') });
-    if (!answer) return next(false);
-  }
-  next();
-});
+const leaveGuardActive = new leaveGuardActiveClass();
+onBeforeRouteLeaveCreateEditViewGuard(initialRecord, record, checkIfWeCanLeavePage, leaveGuardActive);
 
 const resourceFormRef = ref<InstanceType<typeof ResourceForm> | null>(null);