fix: improoved detection of changes in create/edit view to avoid notification "There are unsaved changes..." when there are no any changes

https://web.tracklify.com/project/2b7ZVgE5/AdminForth/1254/ZDp08cU0/disable-this-message-when-no-c

Author: yaroslav8765

adminforth/spa/src/utils/utils.ts

@@ -13,6 +13,7 @@ import { i18nInstance } from '../i18n'
 
 
 
+
 const LS_LANG_KEY = `afLanguage`;
 const MAX_CONSECUTIVE_EMPTY_RESULTS = 2;
 const ITEMS_PER_PAGE_LIMIT = 100;
@@ -522,3 +523,42 @@ export function btoa_function(source: string): string {
 export function atob_function(source: string): string {
   return atob(source);
 }
+
+export function compareOldAndNewRecord(oldRecord: Record<string, any>, newRecord: Record<string, any>): boolean {
+  const newKeys = Object.keys(newRecord);
+  const coreStore = useCoreStore();
+
+  for (const key of newKeys) {
+    if (oldRecord[key] !== newRecord[key]) {
+      if (  
+            ( 
+              oldRecord[key] === undefined || 
+              oldRecord[key] === null || 
+              oldRecord[key] === '' || 
+              (Array.isArray(oldRecord[key]) && oldRecord[key].length === 0)
+            ) 
+              &&            
+            ( 
+              newRecord[key] === undefined || 
+              newRecord[key] === null || 
+              newRecord[key] === '' || 
+              (Array.isArray(newRecord[key]) && newRecord[key].length === 0)
+            )
+      ) {
+        // console.log(`Value for key ${key} is considered equal (empty)`)
+        continue;
+      }
+
+      const column = coreStore.resource.columns.find((c) => c.name === key);
+      if (column?.foreignResource) {
+        if (newRecord[key] === oldRecord[key]?.pk) {
+          // console.log(`Value for key ${key} is considered equal (foreign key)`)
+          continue;
+        }
+      }
+      // console.log(`Value for key ${key} is different`, { oldValue: oldRecord[key], newValue: newRecord[key] });
+      return false;
+    }
+  }
+  return true;
+}

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 } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf, compareOldAndNewRecord } 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';
@@ -121,7 +121,7 @@ async function onUpdateRecord(newRecord: any) {
 }
 
 function checkIfWeCanLeavePage() {
-  return wasSaveSuccessful.value || cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialValues.value);
+  return wasSaveSuccessful.value || cancelButtonClicked.value || compareOldAndNewRecord(initialValues.value, record.value);
 }
 
 function onBeforeUnload(event: BeforeUnloadEvent) {

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 } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, compareOldAndNewRecord } 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';
@@ -113,7 +113,7 @@ function onBeforeUnload(event: BeforeUnloadEvent) {
 }
 
 function checkIfWeCanLeavePage() {
-  return wasSaveSuccessful.value || cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialRecord.value);
+  return wasSaveSuccessful.value || cancelButtonClicked.value || compareOldAndNewRecord(initialRecord.value, record.value);
 }
 
 window.addEventListener('beforeunload', onBeforeUnload);