adminforth 2.17.0-next.3 → 2.17.0-next.31

package/dist/spa/src/composables/useFrontendApi.ts

@@ -1,17 +1,21 @@
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
 
 export function showSuccesTost(message: string) {
-  adminforth.alert({ message, variant: 'success' });  
+  const { alert } = useAdminforth();
+  alert({ message, variant: 'success' });  
   return message;
 }
 
 export function showWarningTost(message: string) {
-  adminforth.alert({ message, variant: 'warning' });  
+  const { alert } = useAdminforth();
+  alert({ message, variant: 'warning' });  
   return message;
 }
 
 export function showErrorTost(message: string, timeout?: number) {
-  adminforth.alert({ message, variant: 'danger', timeout: timeout || 30});  
+  const { alert } = useAdminforth();
+  alert({ message, variant: 'danger', timeout: timeout || 30});  
   return message;
 }
 

package/dist/spa/src/renderers/CompactField.vue

@@ -15,10 +15,11 @@
 import { computed, ref, onMounted, nextTick } from 'vue';
 import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
 import Tooltip from '@/afcl/Tooltip.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
+const { alert } = useAdminforth();
 const visualValue = computed(() => {
   // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
   const val = props.record[props.column.name];
@@ -34,7 +35,7 @@ const id = ref();
 
 function copyToCB() {
   navigator.clipboard.writeText(props.record[props.column.name]);
-  adminforth.alert({
+  alert({
     message: t('ID copied to clipboard'),
     variant: 'success',
   })

package/dist/spa/src/renderers/CompactUUID.vue

@@ -15,10 +15,11 @@
 import { computed, ref, onMounted, nextTick } from 'vue';
 import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
 import Tooltip from '@/afcl/Tooltip.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
+const { alert } = useAdminforth();
 const visualValue = computed(() => {
   // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
   const val = props.record[props.column.name];
@@ -34,7 +35,7 @@ const id = ref();
 
 function copyToCB() {
   navigator.clipboard.writeText(props.record[props.column.name]);
-  adminforth.alert({
+  alert({
     message: t('ID copied to clipboard'),
     variant: 'success',
   })

package/dist/spa/src/renderers/RichText.vue

@@ -22,4 +22,19 @@ const htmlContent = protectAgainstXSS(props.record[props.column.name])
    /* You can add default styles here if needed */
   word-break: break-word;
 }
+.rich-text :deep(table) {
+  border-collapse: collapse;
+  border: 1px solid #ddd;
+}
+
+.rich-text :deep(table th),
+.rich-text :deep(table td) {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+.rich-text :deep(table th) {
+  background-color: #f5f5f5;
+  font-weight: 600;
+}
 </style>

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

@@ -2,12 +2,13 @@ import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { callAdminForthApi } from '@/utils';
 import websocket from '@/websocket';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 
 import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, GetBaseConfigResponse, ResourceVeryShort, AdminUser, UserData, AdminForthConfigMenuItem, AdminForthConfigForFrontend } from '@/types/Common';
 import type { Ref } from 'vue'
 
 export const useCoreStore = defineStore('core', () => {
+  const { alert } = useAdminforth();
   const resourceById: Ref<Record<string, ResourceVeryShort>> = ref({});
   const theme: Ref<'light'| 'dark'> = ref(window.localStorage.getItem('af__theme') as ('light'|'dark') || 'light');
 
@@ -157,7 +158,7 @@ export const useCoreStore = defineStore('core', () => {
     });
 
     if (respData.error) {
-      adminforth.alert({
+      alert({
         message: respData.error,
         variant: 'danger',
         timeout: 30,

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

@@ -15,7 +15,7 @@ export const useFiltersStore = defineStore('filters', () => {
     }
     const setFilter = (filter: any) => {
         const index = filters.value.findIndex(f => f.field === filter.field);
-        if (filters.value[index]) {
+        if (filters.value[index] && filters.value[index].operator === filter.value.operator) {
             filters.value[index] = filter;
             return;
         }

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

@@ -1,7 +1,7 @@
 import type { Express, Request } from 'express';
 import type { Writable } from 'stream';
 
-import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections, AllowedActionsEnum, 
+import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections, AllowedActionsEnum, AdminForthResourcePages,
   type AdminForthComponentDeclaration, 
   type AdminForthResourceCommon, 
   type AdminUser, type AllowedActionsResolved, 
@@ -12,7 +12,6 @@ import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections,
   type AdminForthComponentDeclarationFull,
   type AdminForthConfigMenuItem,
   type AnnouncementBadgeResponse,
-  AdminForthResourcePages,
   type AdminForthResourceColumnInputCommon,
 } from './Common.js';
 
@@ -129,7 +128,7 @@ export interface IAdminForthSingleFilter {
   operator?: AdminForthFilterOperators.EQ | AdminForthFilterOperators.NE
   | AdminForthFilterOperators.GT | AdminForthFilterOperators.LT | AdminForthFilterOperators.GTE
   | AdminForthFilterOperators.LTE | AdminForthFilterOperators.LIKE | AdminForthFilterOperators.ILIKE
-  | AdminForthFilterOperators.IN | AdminForthFilterOperators.NIN;
+  | AdminForthFilterOperators.IN | AdminForthFilterOperators.NIN | AdminForthFilterOperators.IS_EMPTY | AdminForthFilterOperators.IS_NOT_EMPTY;
   value?: any;
   rightField?: string;
   insecureRawSQL?: string;
@@ -307,7 +306,7 @@ export interface IAdminForthAuth {
 
   removeCustomCookie({response, name}: {response: any, name: string}): void;
 
-  setCustomCookie({response, payload}: {response: any, payload: {name: string, value: string, expiry: number, expirySeconds: number, httpOnly: boolean}}): void;
+  setCustomCookie({response, payload}: {response: any, payload: {name: string, value: string, expiry?: number, expirySeconds: number, httpOnly: boolean}}): void;
 
   getCustomCookie({cookies, name}: {cookies: {key: string, value: string}[], name: string}): string | null;
 
@@ -469,6 +468,13 @@ export interface IAdminForthPlugin {
   instanceUniqueRepresentation(pluginOptions: any) : string;
 
 
+  /**   
+   * If this method returns true, AdminForth will allow only one instance of plugin per whole app
+   * (only for case when we are creating copy of resource and activating plugins)
+   * If false, multiple instances of plugin can be installed on different resources.
+   */
+  shouldHaveSingleInstancePerWholeApp?(): boolean;
+
   /**
    * Optional method which will be called after AdminForth discovers all resources and their columns.
    * Can be used to validate types of columns, check if some columns are missing, etc.
@@ -848,6 +854,7 @@ export interface AdminForthActionInput {
   name: string;
   showIn?: {
       list?: boolean,
+      listThreeDotsMenu?: boolean,
       showButton?: boolean,
       showThreeDotsMenu?: boolean,
   };
@@ -861,6 +868,7 @@ export interface AdminForthActionInput {
       resource: AdminForthResource;
       recordId: string;
       adminUser: AdminUser;
+      response: IAdminForthHttpResponse;
       extra?: HttpExtra;
       tr: Function;
   }) => Promise<{
@@ -1102,7 +1110,7 @@ export interface AdminForthInputConfig {
       /**
        * Add custom page to the settings page
        */
-      userMenuSettingsPages: {
+      userMenuSettingsPages?: {
         icon?: string,
         pageLabel: string,
         slug?: string,
@@ -1282,6 +1290,14 @@ export class Filters {
       subFilters,
     };
   }
+
+  static IS_EMPTY(field: string): IAdminForthSingleFilter {
+    return { field, operator: AdminForthFilterOperators.IS_EMPTY, value: null };
+  }
+
+  static IS_NOT_EMPTY(field: string): IAdminForthSingleFilter {
+    return { field, operator: AdminForthFilterOperators.IS_NOT_EMPTY, value: null };
+  }
 }
 
 export type FDataSort = (field: string, direction: AdminForthSortDirections) => IAdminForthSort;
@@ -1358,6 +1374,7 @@ export type AllowedActions = {
  */
 export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions'> {
 
+  baseActionsAsQuickIcons?: ('show' | 'edit' | 'delete')[],
   /** 
    * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
    * using checkboxes.

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

@@ -28,6 +28,8 @@ export enum AdminForthFilterOperators {
   NIN = 'nin',
   AND = 'and',
   OR = 'or',
+  IS_EMPTY = 'isEmpty',
+  IS_NOT_EMPTY = 'isNotEmpty',
 };
 
 export type FilterParams = {
@@ -503,6 +505,7 @@ export interface AdminForthResourceInputCommon {
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           customActionIcons?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          customActionIconsThreeDotsMenuItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           tableBodyStart?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           tableRowReplace?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },
@@ -529,11 +532,6 @@ export interface AdminForthResourceInputCommon {
           afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
-          /**
-           * Custom Save button component for Edit page.
-           * Accepts props: [record, resource, adminUser, meta, saving, validating, isValid, disabled, saveRecord]
-           */
-          saveButton?: AdminForthComponentDeclaration,
         },
 
         /**
@@ -546,11 +544,6 @@ export interface AdminForthResourceInputCommon {
           afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
-          /**
-           * Custom Save button component for Create page.
-           * Accepts props: [record, resource, adminUser, meta, saving, validating, isValid, disabled, saveRecord]
-           */
-          saveButton?: AdminForthComponentDeclaration,
         },
       }
     },

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

@@ -10,9 +10,10 @@ export interface FrontendAPIInterface {
      * Example: 
      * 
      * ```ts
-     * import adminforth from '@/adminforth'
+     *import { useAdminforth } from '@/adminforth';
      * 
-     * const isConfirmed = await adminforth.confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
+     * const { confirm } = useAdminforth();
+     * const isConfirmed = await confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
      * if (isConfirmed) {
      *  your code...
      * }
@@ -31,9 +32,10 @@ export interface FrontendAPIInterface {
      * Example:
      * 
      * ```ts
-     * import adminforth from '@/adminforth'
+     * import { useAdminforth } from '@/adminforth';
+     * const { alert } = useAdminforth();
      * 
-     * adminforth.alert({message: 'Hello', variant: 'success'})
+     * alert({message: 'Hello', variant: 'success'})
      * ```
      * 
      * @param params - The parameters of the alert
@@ -76,13 +78,14 @@ export interface FrontendAPIInterface {
          * Example:
          * 
          * ```ts
-         * import adminforth from '@/adminforth'
+         * import { useAdminforth } from '@/adminforth';
          * 
+         * const { list } = useAdminforth();
          * // Regular filter (will show in badge if column.showIn.filter !== false)
-         * adminforth.list.setFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * list.setFilter({field: 'name', operator: 'ilike', value: 'john'})
          * 
          * // Hidden filter (won't show in badge if column.showIn.filter === false)
-         * adminforth.list.setFilter({field: 'internal_status', operator: 'eq', value: 'active'})
+         * list.setFilter({field: 'internal_status', operator: 'eq', value: 'active'})
          * ```
          * 
          * Please note that you can set/update filter even for fields which have showIn.filter=false in resource configuration.
@@ -102,9 +105,9 @@ export interface FrontendAPIInterface {
          * Example:
          * 
          * ```ts
-         * import adminforth from '@/adminforth';
-         * 
-         * adminforth.list.updateFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * import { useAdminforth } from '@/adminforth';
+         * const { list } = useAdminforth();
+         * list.updateFilter({field: 'name', operator: 'ilike', value: 'john'})
          * ```
          * 
          * @param filter - The filter to update
@@ -136,6 +139,18 @@ export interface FrontendAPIInterface {
      * Close the user menu dropdown
      */
     closeUserMenuDropdown(): void;
+
+    /**
+     * Run save interceptors for a specific resource or all resources if no resourceId is provided
+     */
+    runSaveInterceptors(params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }): Promise<{ ok: boolean; error?: string | null; extra?: object; }>;
+
+    /**
+     * Clear save interceptors for a specific resource or all resources if no resourceId is provided
+     * 
+     * @param resourceId - The resource ID to clear interceptors for
+     */
+    clearSaveInterceptors(resourceId?: string): void;
 }
 
 export type ConfirmParams = {

package/dist/spa/src/utils.ts

@@ -446,9 +446,14 @@ export function createSearchInputHandlers(
   }, {} as Record<string, (searchTerm: string) => void>);
 }
 
-export function checkShowIf(c: AdminForthResourceColumnInputCommon, record: Record<string, any>) {
+export function checkShowIf(c: AdminForthResourceColumnInputCommon, record: Record<string, any>, allColumns: AdminForthResourceColumnInputCommon[]) {
   if (!c.showIf) return true;
-
+  const recordCopy = { ...record };
+  for (const col of allColumns) {
+    if (!recordCopy[col.name]) {
+      recordCopy[col.name] = null;
+    }
+  }
   const evaluatePredicate = (predicate: Predicate): boolean => {
     const results: boolean[] = [];
 
@@ -463,7 +468,7 @@ export function checkShowIf(c: AdminForthResourceColumnInputCommon, record: Reco
     const fieldEntries = Object.entries(predicate).filter(([key]) => !key.startsWith('$'));
     if (fieldEntries.length > 0) {
       const fieldResult = fieldEntries.every(([field, condition]) => {
-        const recordValue = record[field];
+        const recordValue = recordCopy[field];
 
         if (condition === undefined) {
           return true;

package/dist/spa/src/views/CreateView.vue

@@ -17,25 +17,7 @@
       >
         {{ $t('Cancel') }}
       </button>
-
-      <!-- Custom Save Button injection -->
-      <component
-        v-if="createSaveButtonInjection"
-        :is="getCustomComponent(createSaveButtonInjection)"
-        :meta="createSaveButtonInjection.meta"
-        :record="record"
-        :resource="coreStore.resource"
-        :adminUser="coreStore.adminUser"
-        :saving="saving"
-        :validating="validating"
-        :isValid="isValid"
-        :disabled="saving || (validating && !isValid)"
-        :saveRecord="saveRecord"
-      />
-      
-      <!-- Default Save Button fallback -->
       <button  
-        v-else
         @click="() => saveRecord()"
         class="af-save-button flex items-center py-1 px-3 text-sm font-medium rounded-default text-lightCreateViewSaveButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewSaveButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewSaveButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover disabled:opacity-50 gap-1"
         :disabled="saving || (validating && !isValid)"
@@ -99,12 +81,12 @@ 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, ref, watch, nextTick } from 'vue';
+import { onMounted, onBeforeMount, ref, watch, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { computed } from 'vue';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
 import type { AdminForthResourceColumn } from '@/types/Back';
@@ -121,18 +103,12 @@ const router = useRouter();
 const record = ref({});
 
 const coreStore = useCoreStore();
+const { clearSaveInterceptors, runSaveInterceptors, alert } = useAdminforth();
 
 const { t } = useI18n();
 
 const resourceFormRef = ref<InstanceType<typeof ResourceForm> | null>(null);
 
-const createSaveButtonInjection = computed<AdminForthComponentDeclarationFull | null>(() => {
-  const raw: any = coreStore.resourceOptions?.pageInjections?.create?.saveButton as any;
-  if (!raw) return null;
-  const item = Array.isArray(raw) ? raw[0] : raw;
-  return item as AdminForthComponentDeclarationFull;
-});
-
 const initialValues = ref({});
 
 const readonlyColumns = ref([]);
@@ -142,6 +118,10 @@ async function onUpdateRecord(newRecord: any) {
   record.value = newRecord;
 }
 
+onBeforeMount(() => {
+  clearSaveInterceptors(route.params.resourceId as string);
+});
+
 onMounted(async () => {
   loading.value = true;
   await coreStore.fetchResourceFull({
@@ -182,7 +162,7 @@ onMounted(async () => {
   initThreeDotsDropdown();
 });
 
-async function saveRecord(opts?: { confirmationResult?: any }) {
+async function saveRecord() {
   if (!isValid.value) {
     validating.value = true;
     await nextTick();
@@ -192,8 +172,20 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
     validating.value = false;
   }
   const requiredColumns = coreStore.resource?.columns.filter(c => c.required?.create === true) || [];
-  const requiredColumnsToSkip = requiredColumns.filter(c => checkShowIf(c, record.value) === false);  
+  const requiredColumnsToSkip = requiredColumns.filter(c => checkShowIf(c, record.value, coreStore.resource?.columns || []) === false);  
   saving.value = true;
+  const interceptorsResult = await runSaveInterceptors({
+    action: 'create',
+    values: record.value,
+    resource: coreStore.resource,
+    resourceId: route.params.resourceId as string,
+  });
+  if (!interceptorsResult.ok) {
+    saving.value = false;
+    if (interceptorsResult.error) showErrorTost(interceptorsResult.error);
+    return;
+  }
+  const interceptorConfirmationResult = (interceptorsResult.extra as Record<string, any>)?.confirmationResult;
   const response = await callAdminForthApi({
     method: 'POST',
     path: `/create_record`,
@@ -202,7 +194,7 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
       record: record.value,
       requiredColumnsToSkip,
       meta: {
-        ...(opts?.confirmationResult ? { confirmationResult: opts.confirmationResult } : {}),
+        ...(interceptorConfirmationResult ? { confirmationResult: interceptorConfirmationResult } : {}),
       },
     },
   });
@@ -220,7 +212,7 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
         primaryKey: response.newRecordId
       } 
     });
-    adminforth.alert({
+    alert({
       message: t('Record created successfully!'),
       variant: 'success'
     });
@@ -236,7 +228,7 @@ function scrollToInvalidField() {
     }
   }
   const errorMessage = t('Failed to save. Please fix errors for the following fields:') + '<ul class="mt-2 list-disc list-inside">' + columnsWithErrors.map(c => `<li><strong>${c.column.label || c.column.name}</strong>: ${c.error}</li>`).join('') + '</ul>';
-  adminforth.alert({
+  alert({
     messageHtml: errorMessage,
     variant: 'danger'
   });

package/dist/spa/src/views/EditView.vue

@@ -16,25 +16,7 @@
       >
         {{ $t('Cancel') }}
       </button>
-
-      <!-- Custom Save Button injection -->
-      <component
-        v-if="editSaveButtonInjection"
-        :is="getCustomComponent(editSaveButtonInjection)"
-        :meta="editSaveButtonInjection.meta"
-        :record="editableRecord"
-        :resource="coreStore.resource"
-        :adminUser="coreStore.adminUser"
-        :saving="saving"
-        :validating="validating"
-        :isValid="isValid"
-        :disabled="saving || (validating && !isValid)"
-        :saveRecord="saveRecord"
-      />
-      
-      <!-- Default Save Button fallback -->
       <button
-        v-else
         @click="() => saveRecord()"
         class="flex items-center py-1 px-3 text-sm font-medium  rounded-default text-lightEditViewSaveButtonText focus:outline-none bg-lightEditViewButtonBackground rounded border border-lightEditViewButtonBorder hover:bg-lightEditViewButtonBackgroundHover hover:text-lightEditViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewButtonFocusRing dark:focus:ring-darkEditViewButtonFocusRing dark:bg-darkEditViewButtonBackground dark:text-darkEditViewSaveButtonText dark:border-darkEditViewButtonBorder dark:hover:text-darkEditViewSaveButtonTextHover dark:hover:bg-darkEditViewButtonBackgroundHover disabled:opacity-50 gap-1"
         :disabled="saving || (validating && !isValid)"
@@ -94,17 +76,18 @@ 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, ref, type Ref, nextTick } from 'vue';
+import { computed, onMounted, onBeforeMount, ref, type Ref, nextTick, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
 import type { AdminForthResourceColumn } from '@/types/Back';
 
 const { t } = useI18n();
 const coreStore = useCoreStore();
+const { clearSaveInterceptors, runSaveInterceptors, alert } = useAdminforth();
 
 const isValid = ref(false);
 const validating = ref(false);
@@ -118,14 +101,11 @@ const saving = ref(false);
 
 const record: Ref<Record<string, any>> = ref({});
 
-const resourceFormRef = ref<InstanceType<typeof ResourceForm> | null>(null);
+watch(record, (newVal) => {
+  console.log('Record updated:', newVal);
+}, { deep: true });
 
-const editSaveButtonInjection = computed<AdminForthComponentDeclarationFull | null>(() => {
-  const raw: any = coreStore.resourceOptions?.pageInjections?.edit?.saveButton as any;
-  if (!raw) return null;
-  const item = Array.isArray(raw) ? raw[0] : raw;
-  return item as AdminForthComponentDeclarationFull;
-});
+const resourceFormRef = ref<InstanceType<typeof ResourceForm> | null>(null);
 
 async function onUpdateRecord(newRecord: Record<string, any>) {
   record.value = newRecord;
@@ -148,6 +128,10 @@ const editableRecord = computed(() => {
   return newRecord;
 })
 
+onBeforeMount(() => {
+  clearSaveInterceptors(route.params.resourceId as string);
+});
+
 onMounted(async () => {
   loading.value = true;
 
@@ -169,7 +153,7 @@ onMounted(async () => {
   loading.value = false;
 });
 
-async function saveRecord(opts?: { confirmationResult?: any }) {
+async function saveRecord() {
   if (!isValid.value) {
     validating.value = true;
     await nextTick();
@@ -180,6 +164,18 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
   }
 
   saving.value = true;
+  const interceptorsResult = await runSaveInterceptors({
+    action: 'edit',
+    values: record.value,
+    resource: coreStore.resource,
+    resourceId: route.params.resourceId as string,
+  });
+  if (!interceptorsResult.ok) {
+    saving.value = false;
+    if (interceptorsResult.error) showErrorTost(interceptorsResult.error);
+    return;
+  }
+  const interceptorConfirmationResult = interceptorsResult.extra?.confirmationResult;
   const updates: Record<string, any> = {};
   for (const key in record.value) {
     let columnIsUpdated = false;
@@ -212,14 +208,14 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
       recordId: route.params.primaryKey,
       record: updates,
       meta: {
-        ...(opts?.confirmationResult ? { confirmationResult: opts.confirmationResult } : {}),
+        ...(interceptorConfirmationResult ? { confirmationResult: interceptorConfirmationResult } : {}),
       },
     },
   });
   if (resp.error && resp.error !== 'Operation aborted by hook') {
     showErrorTost(resp.error);
   } else {
-    adminforth.alert({
+    alert({
       message: t('Record updated successfully'),
       variant: 'success',
       timeout: 400000
@@ -238,7 +234,7 @@ function scrollToInvalidField() {
     }
   }
   const errorMessage = t('Failed to save. Please fix errors for the following fields:') + '<ul class="mt-2 list-disc list-inside">' + columnsWithErrors.map(c => `<li><strong>${c.column.label || c.column.name}</strong>: ${c.error}</li>`).join('') + '</ul>';
-  adminforth.alert({
+  alert({
     messageHtml: errorMessage,
     variant: 'danger'
   });