From 6f3c9fd5350e119b67421d78c2c4e03e69afb428 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Thu, 29 Jan 2026 13:19:09 +0200
Subject: [PATCH 1/6] fix: rebuild

---
 adminforth/spa/src/stores/core.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adminforth/spa/src/stores/core.ts b/adminforth/spa/src/stores/core.ts
index 9ef5fd46..09b3cf9b 100644
--- a/adminforth/spa/src/stores/core.ts
+++ b/adminforth/spa/src/stores/core.ts
@@ -69,7 +69,7 @@ export const useCoreStore = defineStore('core', () => {
       return acc;
     }, {});
     config.value = resp.config;
-    adminUser.value = resp.adminUser;
+    adminUser.value = resp.adminUser;  
     userData.value = resp.user;
     console.log('🌍 AdminForth v', resp.version);
   }

From 93c2e9891924d6368223dd2f32544b0f86f55662 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Thu, 29 Jan 2026 14:52:56 +0200
Subject: [PATCH 2/6] feat: add unsaved changes warning on page leave

---
 adminforth/spa/src/views/CreateView.vue | 31 ++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/adminforth/spa/src/views/CreateView.vue b/adminforth/spa/src/views/CreateView.vue
index 7a04e95c..3dfe1564 100644
--- a/adminforth/spa/src/views/CreateView.vue
+++ b/adminforth/spa/src/views/CreateView.vue
@@ -12,7 +12,7 @@
 
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
-      <button @click="$router.back()"
+      <button @click="() => {cancelButtonClicked = true; $router.back()}"
         class="af-cancel-button flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-lightCreateViewButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover"
       >
         {{ $t('Cancel') }}
@@ -81,8 +81,8 @@ import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
 import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { onMounted, onBeforeMount, ref, watch, nextTick } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { onMounted, onBeforeMount, onBeforeUnmount, ref, watch, nextTick } from 'vue';
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import { computed } from 'vue';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
@@ -113,11 +113,36 @@ const initialValues = ref({});
 
 const readonlyColumns = ref([]);
 
+const cancelButtonClicked = ref(false);
+const wasSaveSuccessful = ref(false);
 
 async function onUpdateRecord(newRecord: any) {
   record.value = newRecord;
 }
 
+function checkIfWeCanLeavePage() {
+  return cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialValues.value);
+}
+
+window.addEventListener('beforeunload', (event) => {
+  if (!checkIfWeCanLeavePage()) {
+    event.preventDefault();
+    event.returnValue = '';
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', () => {});
+});
+
+onBeforeRouteLeave((to, from, next) => {
+  if (!checkIfWeCanLeavePage()) {
+      const answer = confirm('There are unsaved changes. Are you sure you want to leave this page?');
+      if (!answer) return next(false);
+  }
+  next();
+});
+
 onBeforeMount(() => {
   clearSaveInterceptors(route.params.resourceId as string);
 });

From f6a0b6b006dab4eb96c8d25b5941605e2352302d Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Thu, 29 Jan 2026 14:54:50 +0200
Subject: [PATCH 3/6] fix: update page leave check to include save success
 condition

---
 adminforth/spa/src/views/CreateView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/adminforth/spa/src/views/CreateView.vue b/adminforth/spa/src/views/CreateView.vue
index b442978a..019d35d8 100644
--- a/adminforth/spa/src/views/CreateView.vue
+++ b/adminforth/spa/src/views/CreateView.vue
@@ -121,7 +121,7 @@ async function onUpdateRecord(newRecord: any) {
 }
 
 function checkIfWeCanLeavePage() {
-  return cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialValues.value);
+  return wasSaveSuccessful.value || cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialValues.value);
 }
 
 window.addEventListener('beforeunload', (event) => {
@@ -227,6 +227,7 @@ async function saveRecord() {
     showErrorTost(response.error);
   } else {
     saving.value = false;
+    wasSaveSuccessful.value = true;
     if (route.query.returnTo) {
       router.push(<string>route.query.returnTo);
     } else {

From 94f4f9f8d70c48dce8b81b3411f3ee5c10af5066 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Thu, 29 Jan 2026 15:21:22 +0200
Subject: [PATCH 4/6] feat: enhance unsaved changes confirmation before route
 leave

---
 adminforth/spa/src/views/CreateView.vue |  6 +--
 adminforth/spa/src/views/EditView.vue   | 66 ++++++++++++++++++-------
 2 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/adminforth/spa/src/views/CreateView.vue b/adminforth/spa/src/views/CreateView.vue
index 019d35d8..2edd7437 100644
--- a/adminforth/spa/src/views/CreateView.vue
+++ b/adminforth/spa/src/views/CreateView.vue
@@ -103,7 +103,7 @@ const router = useRouter();
 const record = ref({});
 
 const coreStore = useCoreStore();
-const { clearSaveInterceptors, runSaveInterceptors, alert } = useAdminforth();
+const { clearSaveInterceptors, runSaveInterceptors, alert, confirm } = useAdminforth();
 
 const { t } = useI18n();
 
@@ -135,9 +135,9 @@ onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', () => {});
 });
 
-onBeforeRouteLeave((to, from, next) => {
+onBeforeRouteLeave(async (to, from, next) => {
   if (!checkIfWeCanLeavePage()) {
-      const answer = confirm('There are unsaved changes. Are you sure you want to leave this page?');
+      const answer = await confirm({message: t('There are unsaved changes. Are you sure you want to leave this page?'), yes: 'Yes', no: 'No'});
       if (!answer) return next(false);
   }
   next();
diff --git a/adminforth/spa/src/views/EditView.vue b/adminforth/spa/src/views/EditView.vue
index 203e90b5..b637bf0d 100644
--- a/adminforth/spa/src/views/EditView.vue
+++ b/adminforth/spa/src/views/EditView.vue
@@ -11,7 +11,7 @@
 
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
-      <button @click="$router.back()"
+      <button @click="() => {cancelButtonClicked = true; $router.back()}"
         class="flex items-center py-1 px-3 me-2 text-sm font-medium text-lightEditViewButtonText  rounded-default focus:outline-none bg-lightEditViewButtonBackground rounded border border-lightEditViewButtonBorder hover:bg-lightEditViewButtonBackgroundHover hover:text-lightEditViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewButtonFocusRing dark:focus:ring-darkEditViewButtonFocusRing dark:bg-darkEditViewButtonBackground dark:text-darkEditViewButtonText dark:border-darkEditViewButtonBorder dark:hover:text-darkEditViewButtonTextHover dark:hover:bg-darkEditViewButtonBackgroundHover"
       >
         {{ $t('Cancel') }}
@@ -76,8 +76,8 @@ import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
 import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { computed, onMounted, onBeforeMount, ref, type Ref, nextTick, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { computed, onMounted, onBeforeMount, ref, type Ref, nextTick, watch, onBeforeUnmount } from 'vue';
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { useAdminforth } from '@/adminforth';
@@ -87,7 +87,7 @@ import type { AdminForthResourceColumn } from '@/types/Back';
 
 const { t } = useI18n();
 const coreStore = useCoreStore();
-const { clearSaveInterceptors, runSaveInterceptors, alert } = useAdminforth();
+const { clearSaveInterceptors, runSaveInterceptors, alert, confirm } = useAdminforth();
 
 const isValid = ref(false);
 const validating = ref(false);
@@ -101,6 +101,34 @@ const saving = ref(false);
 
 const record: Ref<Record<string, any>> = ref({});
 
+const initialRecord = computed(() => coreStore.record);
+const wasSaveSuccessful = ref(false);
+const cancelButtonClicked = ref(false);
+
+function checkIfWeCanLeavePage() {
+  return wasSaveSuccessful.value || cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialRecord.value);
+}
+
+window.addEventListener('beforeunload', (event) => {
+  if (!checkIfWeCanLeavePage()) {
+    event.preventDefault();
+    event.returnValue = '';
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', () => {});
+});
+
+onBeforeRouteLeave(async (to, from, next) => {
+  if (!checkIfWeCanLeavePage()) {
+      const answer = await confirm({message: t('There are unsaved changes. Are you sure you want to leave this page?'), yes: 'Yes', no: 'No'});
+      if (!answer) return next(false);
+  }
+  next();
+});
+
+
 watch(record, (newVal) => {
   console.log('Record updated:', newVal);
 }, { deep: true });
@@ -198,24 +226,28 @@ async function saveRecord() {
     if (columnIsUpdated) {
       updates[key] = record.value[key];
     }
-    saving.value = false;
   }
-
-  const resp = await callAdminForthApi({
-    method: 'POST',
-    path: `/update_record`,
-    body: {
-      resourceId: route.params.resourceId,
-      recordId: route.params.primaryKey,
-      record: updates,
-      meta: {
-        ...(interceptorConfirmationResult ? { confirmationResult: interceptorConfirmationResult } : {}),
+  let resp = null;
+  try {
+    resp = await callAdminForthApi({
+      method: 'POST',
+      path: `/update_record`,
+      body: {
+        resourceId: route.params.resourceId,
+        recordId: route.params.primaryKey,
+        record: updates,
+        meta: {
+          ...(interceptorConfirmationResult ? { confirmationResult: interceptorConfirmationResult } : {}),
+        },
       },
-    },
-  });
+    });
+  } finally {
+    saving.value = false;
+  }
   if (resp.error && resp.error !== 'Operation aborted by hook') {
     showErrorTost(resp.error);
   } else {
+    wasSaveSuccessful.value = true;
     alert({
       message: t('Record updated successfully'),
       variant: 'success',

From 5b4ec309a105d91a15a36f95e2625a7e60429114 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Thu, 29 Jan 2026 15:24:00 +0200
Subject: [PATCH 5/6] fix: rebuild

---
 adminforth/spa/src/stores/core.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adminforth/spa/src/stores/core.ts b/adminforth/spa/src/stores/core.ts
index 09b3cf9b..9ef5fd46 100644
--- a/adminforth/spa/src/stores/core.ts
+++ b/adminforth/spa/src/stores/core.ts
@@ -69,7 +69,7 @@ export const useCoreStore = defineStore('core', () => {
       return acc;
     }, {});
     config.value = resp.config;
-    adminUser.value = resp.adminUser;  
+    adminUser.value = resp.adminUser;
     userData.value = resp.user;
     console.log('🌍 AdminForth v', resp.version);
   }

From a8db8346cf6f8977dc2cd775cc12c7563517863e Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Thu, 29 Jan 2026 15:37:04 +0200
Subject: [PATCH 6/6] refactor: improve beforeunload event handling in
 CreateView and EditView

---
 adminforth/spa/src/views/CreateView.vue |  8 +++++---
 adminforth/spa/src/views/EditView.vue   | 16 +++++++++-------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/adminforth/spa/src/views/CreateView.vue b/adminforth/spa/src/views/CreateView.vue
index 2edd7437..924e15fa 100644
--- a/adminforth/spa/src/views/CreateView.vue
+++ b/adminforth/spa/src/views/CreateView.vue
@@ -124,15 +124,17 @@ function checkIfWeCanLeavePage() {
   return wasSaveSuccessful.value || cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialValues.value);
 }
 
-window.addEventListener('beforeunload', (event) => {
+function onBeforeUnload(event: BeforeUnloadEvent) {
   if (!checkIfWeCanLeavePage()) {
     event.preventDefault();
     event.returnValue = '';
   }
-});
+}
+
+window.addEventListener('beforeunload', onBeforeUnload);
 
 onBeforeUnmount(() => {
-  window.removeEventListener('beforeunload', () => {});
+  window.removeEventListener('beforeunload', onBeforeUnload);
 });
 
 onBeforeRouteLeave(async (to, from, next) => {
diff --git a/adminforth/spa/src/views/EditView.vue b/adminforth/spa/src/views/EditView.vue
index b637bf0d..08a8a91c 100644
--- a/adminforth/spa/src/views/EditView.vue
+++ b/adminforth/spa/src/views/EditView.vue
@@ -105,19 +105,21 @@ const initialRecord = computed(() => coreStore.record);
 const wasSaveSuccessful = ref(false);
 const cancelButtonClicked = ref(false);
 
-function checkIfWeCanLeavePage() {
-  return wasSaveSuccessful.value || cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialRecord.value);
-}
-
-window.addEventListener('beforeunload', (event) => {
+function onBeforeUnload(event: BeforeUnloadEvent) {
   if (!checkIfWeCanLeavePage()) {
     event.preventDefault();
     event.returnValue = '';
   }
-});
+}
+
+function checkIfWeCanLeavePage() {
+  return wasSaveSuccessful.value || cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialRecord.value);
+}
+
+window.addEventListener('beforeunload', onBeforeUnload);
 
 onBeforeUnmount(() => {
-  window.removeEventListener('beforeunload', () => {});
+  window.removeEventListener('beforeunload', onBeforeUnload);
 });
 
 onBeforeRouteLeave(async (to, from, next) => {