adminforth 2.17.0-next.6 → 2.17.0-next.61

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.
@@ -93,7 +96,8 @@ export interface FrontendAPIInterface {
         setFilter(filter: FilterParams): void;
 
         /**
-         * DEPRECATED: does the same as setFilter, kept for backward compatibility
+         * @deprecated does the same as setFilter, kept for backward compatibility, will be removed in 2.0.0
+         * 
          * Update a filter in the list
          * 
          * Filters visibility in badge is automatically determined by column configuration:
@@ -102,9 +106,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 +140,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/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();
@@ -194,6 +174,18 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
   const requiredColumns = coreStore.resource?.columns.filter(c => c.required?.create === true) || [];
   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'
   });

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

@@ -119,7 +119,7 @@
       :adminUser="coreStore.adminUser"
     />
     <ResourceListTableVirtual
-      v-if="isVirtualScrollEnabled"
+      v-if="isVirtualScrollEnabled && !coreStore.isResourceFetching"
       :resource="coreStore.resource"
       :rows="rows"
       :page="page"
@@ -143,6 +143,11 @@
           ? [coreStore.resourceOptions.pageInjections.list.tableBodyStart]
           : []
       "
+      :customActionIconsThreeDotsMenuItems="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems) 
+        ? coreStore.resourceOptions.pageInjections.list.customActionIconsThreeDotsMenuItems 
+        : coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems
+          ? [coreStore.resourceOptions.pageInjections.list.customActionIconsThreeDotsMenuItems]
+          : []"
       :tableRowReplaceInjection="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace)
         ? coreStore.resourceOptions.pageInjections.list.tableRowReplace[0]
         : coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace || undefined"
@@ -152,7 +157,7 @@
     />
 
     <ResourceListTable
-      v-else
+      v-else-if="!coreStore.isResourceFetching"
       :resource="coreStore.resource"
       :rows="rows"
       :page="page"
@@ -176,6 +181,11 @@
           ? [coreStore.resourceOptions.pageInjections.list.tableBodyStart]
           : []
       "
+      :customActionIconsThreeDotsMenuItems="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems) 
+        ? coreStore.resourceOptions.pageInjections.list.customActionIconsThreeDotsMenuItems 
+        : coreStore.resourceOptions?.pageInjections?.list?.customActionIconsThreeDotsMenuItems
+          ? [coreStore.resourceOptions.pageInjections.list.customActionIconsThreeDotsMenuItems]
+          : []"
       :tableRowReplaceInjection="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace)
         ? coreStore.resourceOptions.pageInjections.list.tableRowReplace[0]
         : coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace || undefined"
@@ -215,10 +225,10 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 
 import Filters from '@/components/Filters.vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 
 const filtersShow = ref(false);
-
+const { confirm, alert, list } = useAdminforth();
 const coreStore = useCoreStore();
 const filtersStore = useFiltersStore();
 
@@ -345,7 +355,7 @@ async function refreshExistingList(pk?: any) {
 async function startBulkAction(actionId: string) {
   const action = coreStore.resource?.options?.bulkActions?.find(a => a.id === actionId);
   if (action?.confirm) {
-    const confirmed = await adminforth.confirm({
+    const confirmed = await confirm({
       message: action.confirm,
     });
     if (!confirmed) {
@@ -370,7 +380,7 @@ async function startBulkAction(actionId: string) {
     await getList();
 
     if (data.successMessage) {
-      adminforth.alert({
+      alert({
         message: data.successMessage,
         variant: 'success'
       });
@@ -454,7 +464,7 @@ async function init() {
   clearAutoRefresher();
   if (coreStore.resource!.options?.listRowsAutoRefreshSeconds) {
     listAutorefresher = setInterval(async () => {
-      await adminforth.list.silentRefresh();
+      await list.silentRefresh();
     }, coreStore.resource!.options.listRowsAutoRefreshSeconds * 1000);
   }
 }
@@ -464,7 +474,7 @@ watch([page, sort, () => filtersStore.filters], async () => {
   await getList();
 }, { deep: true });
 
-adminforth.list.refresh = async () => {
+list.refresh = async () => {
   const result = await getList();
 
   if (!result) {
@@ -478,11 +488,11 @@ adminforth.list.refresh = async () => {
   return {};
 };
 
-adminforth.list.silentRefresh = async () => {
+list.silentRefresh = async () => {
   return await refreshExistingList();
 }
 
-adminforth.list.silentRefreshRow = async (pk: any) => {
+list.silentRefreshRow = async (pk: any) => {
   return await refreshExistingList(pk);
 }
 

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

@@ -28,7 +28,7 @@ import { useRouter } from 'vue-router';
 import { useCoreStore } from '@/stores/core';
 import { getCustomComponent, getIcon } from '@/utils';
 import { Dropdown } from 'flowbite';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { VerticalTabs } from '@/afcl'
 import { useRoute } from 'vue-router'
 
@@ -36,6 +36,7 @@ const route = useRoute()
 const coreStore = useCoreStore();
 const router = useRouter();
 
+let { closeUserMenuDropdown } = useAdminforth();
 const routerIsReady = ref(false);
 const loginRedirectCheckIsReady = ref(false);
 const dropdownUserButton = ref<HTMLElement | null>(null);
@@ -58,7 +59,7 @@ watch(dropdownUserButton, (el) => {
       document.querySelector('#dropdown-user') as HTMLElement,
       document.querySelector('[data-dropdown-toggle="dropdown-user"]') as HTMLElement,
     );
-    adminforth.closeUserMenuDropdown = () => dd.hide();
+    closeUserMenuDropdown = () => dd.hide();
   }
 });
 

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

@@ -144,16 +144,17 @@ import {callAdminForthApi} from '@/utils';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import ShowTable from '@/components/ShowTable.vue';
-import adminforth from "@/adminforth";
+import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 import { getIcon } from '@/utils';
-import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
+import { type AdminForthComponentDeclarationFull, type AdminForthResourceColumnCommon, type FieldGroup } from '@/types/Common.js';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const route = useRoute();
 const router = useRouter();
 const loading = ref(true);
 const { t } = useI18n();
+const { confirm, alert, show } = useAdminforth();
 const coreStore = useCoreStore();
 
 const actionLoadingStates = ref<Record<string, boolean>>({});
@@ -206,7 +207,7 @@ const allColumns = computed(() => {
 
 const otherColumns = computed(() => {
   const groupedColumnNames = new Set(
-    groups.value.flatMap(group => group.columns.map((col: AdminForthResourceColumnCommon) => col.name))
+    groups.value.flatMap(group => group.columns?.map((col: AdminForthResourceColumnCommon) => col.name))
   );
 
   return coreStore.resource?.columns.filter(
@@ -215,7 +216,7 @@ const otherColumns = computed(() => {
 });
 
 async function deleteRecord() {
-  const data = await adminforth.confirm({
+  const data = await confirm({
     message: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
     no: t('Cancel'),
@@ -282,7 +283,7 @@ async function startCustomAction(actionId: string, extra: any) {
     });
 
     if (data.successMessage) {
-      adminforth.alert({
+      alert({
         message: data.successMessage,
         variant: 'success'
       });
@@ -294,7 +295,7 @@ async function startCustomAction(actionId: string, extra: any) {
   }
 }
 
-adminforth.show.refresh = () => {
+show.refresh = () => {
   (async () => {
     try {
       loading.value = true;