Merge branch 'next' of github.com:devforth/adminforth into next

Author: yaroslav8765

adminforth/index.ts

@@ -568,17 +568,21 @@ class AdminForth implements IAdminForth {
         response, 
         extra,
       });
-      if (!resp || (typeof resp.ok !== 'boolean' && (!resp.error && !resp.newRecordId))) {
+      if (resp.newRecordId) {
+        afLogger.warn(`Deprecation warning: beforeSave hook returned 'newRecordId'. Since AdminForth v1.2.9 use 'redirectToRecordId' instead. 'newRecordId' will be removed in v2.0.0`);
+      }
+      if (!resp || (typeof resp.ok !== 'boolean' && (!resp.error && !resp.newRecordId && !resp.redirectToRecordId))) {
         throw new Error(
-          `Invalid return value from beforeSave hook. Expected: { ok: boolean, error?: string | null, newRecordId?: any }.\n` +
-          `Note: Return { ok: false, error: null, newRecordId } to stop creation and redirect to an existing record.`
+          `Invalid return value from beforeSave hook. Expected: { ok: boolean, error?: string | null, newRecordId?: any, redirectToRecordId?: any }.\n` +
+          `Note: Return { ok: false, error: null, redirectToRecordId } (preferred) or { ok: false, error: null, newRecordId } (deprecated) to stop creation and redirect to an existing record.`
         );
       }
       if (resp.ok === false && !resp.error) {
-        const { error, ok, newRecordId } = resp;
+        const { error, ok, newRecordId, redirectToRecordId } = resp;
         return {
           error: error ?? 'Operation aborted by hook',
-          newRecordId: newRecordId
+          newRecordId: redirectToRecordId ? redirectToRecordId : newRecordId,
+          redirectToRecordId: redirectToRecordId
         };
       }
       if (resp.error) {

adminforth/modules/restApi.ts

@@ -1280,7 +1280,11 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
               extra: { body, query, headers, cookies, requestUrl, response } 
             });
             if (createRecordResponse.error) {
-              return { error: createRecordResponse.error, ok: false, newRecordId: createRecordResponse.newRecordId };
+              return { 
+                error: createRecordResponse.error, 
+                ok: false, 
+                newRecordId: createRecordResponse.redirectToRecordId ? createRecordResponse.redirectToRecordId :createRecordResponse.newRecordId, 
+                redirectToRecordId: createRecordResponse.redirectToRecordId };
             }
             const connector = this.adminforth.connectors[resource.dataSource];
 

adminforth/spa/src/utils/utils.ts

@@ -237,8 +237,12 @@ export function protectAgainstXSS(value: string) {
     ],
     allowedAttributes: {
       'li': [ 'data-list' ],
-      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
-    } 
+      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ],
+      // Allow  markup on spans (classes & styles), and
+      // generic data/aria/style attributes on any element. (e.g. for KaTeX-related previews)
+      'span': [ 'class', 'style' ],
+      '*': [ 'data-*', 'aria-*', 'style' ]
+    },
   });
 }
 

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';
@@ -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();
 
@@ -113,11 +113,38 @@ 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 wasSaveSuccessful.value || cancelButtonClicked.value || JSON.stringify(record.value) === JSON.stringify(initialValues.value);
+}
+
+function onBeforeUnload(event: BeforeUnloadEvent) {
+  if (!checkIfWeCanLeavePage()) {
+    event.preventDefault();
+    event.returnValue = '';
+  }
+}
+
+window.addEventListener('beforeunload', onBeforeUnload);
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', onBeforeUnload);
+});
+
+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();
+});
+
 onBeforeMount(() => {
   clearSaveInterceptors(route.params.resourceId as string);
 });
@@ -202,6 +229,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 {

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,36 @@ 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 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', onBeforeUnload);
+});
+
+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 +228,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',

adminforth/types/Back.ts

@@ -505,7 +505,15 @@ export type BeforeDataSourceRequestFunction = (params: {
     requestUrl: string,
   },
   adminforth: IAdminForth,
-}) => Promise<{ok: boolean, error?: string, newRecordId?: string}>;
+}) => Promise<{
+  ok: boolean, 
+  error?: string | null, 
+  /**
+   * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use redirectToRecordId instead.
+   */
+  newRecordId?: string, 
+  redirectToRecordId?: string
+}>;
 
 /**
  * Modify response to change how data is returned after fetching from database.
@@ -549,8 +557,15 @@ export type CreateResourceRecordResult = {
   /**
    * Optional id of an existing record to redirect to
    * (used when a beforeSave hook aborts creation and supplies newRecordId, allows to implement programmatic creation via API).
+   * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use redirectToRecordId instead.
    */
   newRecordId?: any;
+
+  /**
+   * Optional id of an existing record to redirect to
+   * (used when a beforeSave hook aborts creation and supplies redirectToRecordId, allows to implement programmatic creation via API).
+   */
+  redirectToRecordId?: any;
 };
 
 /**
@@ -838,7 +853,15 @@ export type BeforeCreateSaveFunction = (params: {
   response: IAdminForthHttpResponse,
 
   extra?: HttpExtra,
-}) => Promise<{ok: boolean, error?: string | null, newRecordId?: string}>;
+}) => Promise<{
+  ok: boolean, 
+  error?: string | null, 
+  /**
+   * @deprecated Since 1.2.9. Will be removed in 2.0.0. Use redirectToRecordId instead.
+   */
+  newRecordId?: string, 
+  redirectToRecordId?: string
+}>;
 
 export type AfterCreateSaveFunction = (params: {
     /**