adminforth 2.22.0-next.13 → 2.22.0-next.15

package/dist/spa/src/adminforth.ts

@@ -132,6 +132,7 @@ class FrontendAPI implements FrontendAPIInterface {
     return new Promise((resolve, reject) => {
       this.modalStore.setModalContent({ 
         content: params.message, 
+        contentHTML: params.messageHtml,
         acceptText: params.yes || 'Yes',
         cancelText: params.no || 'Cancel' 
       })

package/dist/spa/src/components/AcceptModal.vue

@@ -14,6 +14,8 @@
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                     </svg>
                     <h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText">{{ modalStore?.modalContent?.content }}</h3>
+                    <h3 class=" afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText" v-html="modalStore?.modalContent?.contentHTML"></h3>
+
                     <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-lightAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover focus:ring-4 focus:outline-none focus:ring-lightAcceptModalConfirmButtonFocus font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center dark:text-darkAcceptModalConfirmButtonText dark:bg-darkAcceptModalConfirmButtonBackground dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover dark:focus:ring-darkAcceptModalConfirmButtonFocus">
                         {{ modalStore?.modalContent?.acceptText }}
                     </button>

package/dist/spa/src/stores/modal.ts

@@ -4,6 +4,7 @@ import { defineStore } from 'pinia'
  type ModalContentType = {
   title?: string;
   content?: string;
+  contentHTML?: string;
   acceptText?: string;
   cancelText?: string;
  }
@@ -12,7 +13,8 @@ import { defineStore } from 'pinia'
 export const useModalStore = defineStore('modal', () => {
   const modalContent = ref({
     title: 'title',
-    content: 'content',
+    content: '',
+    contentHTML: '',
     acceptText: 'acceptText',
     cancelText: 'cancelText',
   });  
@@ -31,7 +33,8 @@ export const useModalStore = defineStore('modal', () => {
   function setModalContent(content: ModalContentType) {
     modalContent.value = {
       title: content.title || 'title',
-      content: content.content || 'content',
+      content: content.content || '',
+      contentHTML: content.contentHTML || '',
       acceptText: content.acceptText || 'acceptText',
       cancelText: content.cancelText || 'cancelText',
     };
@@ -41,6 +44,7 @@ export const useModalStore = defineStore('modal', () => {
     modalContent.value = {
       title: 'title',
       content: 'content',
+      contentHTML: '',
       acceptText: 'acceptText',
       cancelText: 'cancelText',
     };

package/dist/spa/src/types/FrontendAPI.ts

@@ -159,6 +159,10 @@ export type ConfirmParams = {
      * The message to display in the dialog
      */
     message?: string;
+    /**
+     * Message to display in the dialog as HTML (can be used instead of message)
+     */
+    messageHtml?: string;
     /**
      * The text to display in the "accept" button
      */

package/dist/spa/src/utils/utils.ts

@@ -10,6 +10,7 @@ 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';
 
 
 
@@ -524,9 +525,10 @@ export function atob_function(source: string): string {
   return atob(source);
 }
 
-export function compareOldAndNewRecord(oldRecord: Record<string, any>, newRecord: Record<string, any>): boolean {
+export function compareOldAndNewRecord(oldRecord: Record<string, any>, newRecord: Record<string, any>): {ok: boolean, changedFields: Record<string, {oldValue: any, newValue: any}>} {
   const newKeys = Object.keys(newRecord);
   const coreStore = useCoreStore();
+  const changedColumns: Record<string, { oldValue: any, newValue: any }> = {};
 
   for (const key of newKeys) {
     const oldValue = typeof oldRecord[key] === 'object' && oldRecord[key] !== null ? JSON.stringify(oldRecord[key]) : oldRecord[key];
@@ -537,21 +539,23 @@ export function compareOldAndNewRecord(oldRecord: Record<string, any>, newRecord
               oldValue === undefined || 
               oldValue === null || 
               oldValue === '' || 
-              (Array.isArray(oldValue) && oldValue.length === 0)
+              (Array.isArray(oldValue) && oldValue.length === 0) ||
+              oldValue === '[]' 
             ) 
               &&            
             ( 
               newValue === undefined || 
               newValue === null || 
               newValue === '' || 
-              (Array.isArray(newValue) && newValue.length === 0)
+              (Array.isArray(newValue) && newValue.length === 0) || 
+              newValue === '[]'
             )
       ) {
         // console.log(`Value for key ${key} is considered equal (empty)`)
         continue;
       }
 
-      const column = coreStore.resource.columns.find((c) => c.name === key);
+      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)`)
@@ -559,8 +563,39 @@ export function compareOldAndNewRecord(oldRecord: Record<string, any>, newRecord
         }
       }
       // console.log(`Value for key ${key} is different`, { oldValue: oldValue, newValue: newValue });
-      return false;
+      changedColumns[key] = { oldValue, newValue };
     }
   }
-  return true;
+  return { ok: Object.keys(changedColumns).length !== 0, changedFields: changedColumns };
+}
+
+export function generateMessageHtmlForRecordChange(changedFields: Record<string, { oldValue: any, newValue: any }>, t: ReturnType<typeof useI18n>['t']): string {
+  const coreStore = useCoreStore();
+
+  const escapeHtml = (value: any) => {
+    if (value === null || value === undefined || value === '') return `<em>${t('empty')}</em>`;
+    let s: string;
+    if (typeof value === 'object') {
+      try {
+        s = JSON.stringify(value);
+      } catch (e) {
+        s = String(value);
+      }
+    } else {
+      s = String(value);
+    }
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+  };
+
+  const items = Object.keys(changedFields || {}).map(key => {
+    const column = coreStore.resource?.columns?.find((c: any) => c.name === key);
+    const label = column?.label || key;
+    const oldV = escapeHtml(changedFields[key].oldValue);
+    const newV = escapeHtml(changedFields[key].newValue);
+    return `<li class="truncate"><strong>${escapeHtml(label)}</strong>: <span class="af-old-value text-muted">${oldV}</span> &#8594; <span class="af-new-value">${newV}</span></li>`;
+  }).join('');
+
+  const listHtml = items ? `<ul class="mt-2 list-disc list-inside">${items}</ul>` : '';
+  const messageHtml = `<div>${escapeHtml(t('There are unsaved changes. Are you sure you want to leave this page?'))}${listHtml}</div>`;
+  return messageHtml; 
 }

package/dist/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 } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf, compareOldAndNewRecord, generateMessageHtmlForRecordChange } 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 || compareOldAndNewRecord(initialValues.value, record.value);
+  return wasSaveSuccessful.value || cancelButtonClicked.value || compareOldAndNewRecord(initialValues.value, record.value).ok === false;
 }
 
 function onBeforeUnload(event: BeforeUnloadEvent) {
@@ -139,8 +139,12 @@ onBeforeUnmount(() => {
 
 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);
+    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();
 });

package/dist/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 } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, compareOldAndNewRecord, generateMessageHtmlForRecordChange } 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 || compareOldAndNewRecord(initialRecord.value, record.value);
+  return wasSaveSuccessful.value || cancelButtonClicked.value || compareOldAndNewRecord(initialRecord.value, record.value).ok === false;
 }
 
 window.addEventListener('beforeunload', onBeforeUnload);
@@ -124,8 +124,12 @@ onBeforeUnmount(() => {
 
 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);
+    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();
 });

package/dist/types/FrontendAPI.d.ts

@@ -156,6 +156,10 @@ export type ConfirmParams = {
      * The message to display in the dialog
      */
     message?: string;
+    /**
+     * Message to display in the dialog as HTML (can be used instead of message)
+     */
+    messageHtml?: string;
     /**
      * The text to display in the "accept" button
      */

package/dist/types/FrontendAPI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FrontendAPI.d.ts","sourceRoot":"","sources":["../../types/FrontendAPI.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3E,MAAM,WAAW,oBAAoB;IAEjC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,MAAM,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAEjD;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,MAAM,EAAC,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAG3D,IAAI,EAAE;QAEF;;WAEG;QACH,OAAO,IAAI,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAExC;;;;WAIG;QACH,aAAa,IAAI,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAE9C;;WAEG;QACH,gBAAgB,CAAE,EAAE,EAAE,GAAG,GAAG,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAEzD;;WAEG;QACH,sBAAsB,IAAI,IAAI,CAAC;QAE/B;;;;;;;;;;;;;;;;;;;;;;;;;WAyBG;QACH,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QAEtC;;;;;;;;;;;;;;;;;WAiBG;QACH,YAAY,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QAEzC;;WAEG;QACH,YAAY,IAAI,IAAI,CAAC;KACxB,CAAA;IAED,IAAI,EAAE;QACF;;;WAGG;QACH,OAAO,IAAI,IAAI,CAAC;KACnB,CAAA;IAED,IAAI,EAAE;QACF;;WAEG;QACH,iBAAiB,IAAI,IAAI,CAAC;KAC7B,CAAA;IAED;;OAEG;IACH,qBAAqB,IAAI,IAAI,CAAC;IAE9B;;OAEG;IACH,mBAAmB,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,QAAQ,GAAC,MAAM,CAAC;QAAC,MAAM,EAAE,GAAG,CAAC;QAAC,QAAQ,EAAE,GAAG,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;KAAE,GAAG,OAAO,CAAC;QAAE,EAAE,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;KAAE,CAAC,CAAC;IAE5K;;;;OAIG;IACH,qBAAqB,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpD;AAED,MAAM,MAAM,aAAa,GAAG;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CAEf,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,OAAO,YAAY,CAAC;IAEnD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE;QAAC,KAAK,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;CAE3C,CAAA;AAID,oBAAY,YAAY;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd"}
+{"version":3,"file":"FrontendAPI.d.ts","sourceRoot":"","sources":["../../types/FrontendAPI.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3E,MAAM,WAAW,oBAAoB;IAEjC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,MAAM,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAEjD;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,MAAM,EAAC,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAG3D,IAAI,EAAE;QAEF;;WAEG;QACH,OAAO,IAAI,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAExC;;;;WAIG;QACH,aAAa,IAAI,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAE9C;;WAEG;QACH,gBAAgB,CAAE,EAAE,EAAE,GAAG,GAAG,OAAO,CAAC;YAAE,KAAK,CAAC,EAAG,MAAM,CAAA;SAAE,CAAC,CAAC;QAEzD;;WAEG;QACH,sBAAsB,IAAI,IAAI,CAAC;QAE/B;;;;;;;;;;;;;;;;;;;;;;;;;WAyBG;QACH,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QAEtC;;;;;;;;;;;;;;;;;WAiBG;QACH,YAAY,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;QAEzC;;WAEG;QACH,YAAY,IAAI,IAAI,CAAC;KACxB,CAAA;IAED,IAAI,EAAE;QACF;;;WAGG;QACH,OAAO,IAAI,IAAI,CAAC;KACnB,CAAA;IAED,IAAI,EAAE;QACF;;WAEG;QACH,iBAAiB,IAAI,IAAI,CAAC;KAC7B,CAAA;IAED;;OAEG;IACH,qBAAqB,IAAI,IAAI,CAAC;IAE9B;;OAEG;IACH,mBAAmB,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,QAAQ,GAAC,MAAM,CAAC;QAAC,MAAM,EAAE,GAAG,CAAC;QAAC,QAAQ,EAAE,GAAG,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;KAAE,GAAG,OAAO,CAAC;QAAE,EAAE,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;KAAE,CAAC,CAAC;IAE5K;;;;OAIG;IACH,qBAAqB,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpD;AAED,MAAM,MAAM,aAAa,GAAG;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CAEf,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,OAAO,YAAY,CAAC;IAEnD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE;QAAC,KAAK,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;CAE3C,CAAA;AAID,oBAAY,YAAY;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd"}

package/dist/types/FrontendAPI.js.map

@@ -1 +1 @@
-{"version":3,"file":"FrontendAPI.js","sourceRoot":"","sources":["../../types/FrontendAPI.ts"],"names":[],"mappings":"AA2MA,MAAM,CAAN,IAAY,YAKT;AALH,WAAY,YAAY;IACpB,iCAAiB,CAAA;IACjB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,6BAAa,CAAA;AACf,CAAC,EALS,YAAY,KAAZ,YAAY,QAKrB"}
+{"version":3,"file":"FrontendAPI.js","sourceRoot":"","sources":["../../types/FrontendAPI.ts"],"names":[],"mappings":"AA+MA,MAAM,CAAN,IAAY,YAKT;AALH,WAAY,YAAY;IACpB,iCAAiB,CAAA;IACjB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,6BAAa,CAAA;AACf,CAAC,EALS,YAAY,KAAZ,YAAY,QAKrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.22.0-next.13",
+  "version": "2.22.0-next.15",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",