adminforth 2.27.0-next.4 → 2.27.0-next.41

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

@@ -1,5 +1,5 @@
 <template>
-      <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow"
+      <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow border dark:border-gray-700"
         :class="{'rounded-default' : isRounded}"
       >
         <div v-if="groupName && !noTitle"  class="text-md font-semibold px-6 py-3 flex flex-1 items-center text-lightShowTableHeadingText bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground  dark:text-darkShowTableHeadingText rounded-t-lg">

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

@@ -71,7 +71,7 @@
             >
               <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
               <span class="overflow-hidden flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}
-                <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+                <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
                   fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
                   <Tooltip v-if="item.badgeTooltip">
                     {{ item.badge }}
@@ -129,7 +129,7 @@
                       } : {}"
                     >{{ item.label }}
 
-                        <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+                        <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
                         fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
                         <Tooltip v-if="item.badgeTooltip">
                             {{ item.badge }}

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

@@ -43,21 +43,28 @@
               </div>
             </div>
           </li>
-          <li v-for="action in customActions" :key="action.id">
-            <div class="wrapper"> 
+          <li v-for="(action, i) in customActions" :key="action.id">
+            <div 
+              class="wrapper"                 
+              @click="injectedComponentClick(threeDotsDropdownItems ? threeDotsDropdownItems.length + i : i)"
+            > 
               <component
-                v-if="action.customComponent"
+                :ref="(el: any) => setComponentRef(el, threeDotsDropdownItems ? threeDotsDropdownItems.length + i : i)"
                 :is="(action.customComponent && getCustomComponent(formatComponent(action.customComponent))) || CallActionWrapper"
                 :meta="formatComponent(action.customComponent).meta"
                 @callAction="(payload? : Object) => handleActionClick(action, payload)"
-              >
-                <a @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
-                  <div class="flex items-center gap-2">
+]              >
+                <a @click.prevent class="block">
+                  <div class="flex items-center gap-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
                     <component 
-                      v-if="action.icon" 
+                      v-if="action.icon && !actionLoadingStates[action.id!]" 
                       :is="getIcon(action.icon)" 
                       class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
                     />
+                    <Spinner
+                      v-if="actionLoadingStates[action.id!]"
+                      class="w-5 h-5 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300"
+                    />
                     {{ action.name }}
                   </div>
                 </a>
@@ -92,12 +99,12 @@
 import { getCustomComponent, getIcon, formatComponent, executeCustomAction } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import { useAdminforth } from '@/adminforth';
-import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 import { ref, type ComponentPublicInstance, onMounted, onUnmounted } from 'vue';
 import type { AdminForthActionFront, AdminForthBulkActionFront, AdminForthComponentDeclarationFull } from '@/types/Common';
 import type { AdminForthActionInput } from '@/types/Back';
+import { Spinner } from '@/afcl';
 
 const { list, alert} = useAdminforth();
 const route = useRoute();
@@ -105,6 +112,7 @@ const coreStore = useCoreStore();
 const router = useRouter();
 const threeDotsDropdownItemsRefs = ref<Array<ComponentPublicInstance | null>>([]);
 const showDropdown = ref(false);
+const actionLoadingStates = ref<Record<string, boolean>>({});
 const dropdownRef = ref<HTMLElement | null>(null);
 const buttonTriggerRef = ref<HTMLElement | null>(null);
 
@@ -136,6 +144,9 @@ async function handleActionClick(action: AdminForthActionInput, payload: any) {
     resourceId: route.params.resourceId as string,
     recordId: route.params.primaryKey as string,
     extra: payload || {},
+    setLoadingState: (loading: boolean) => {
+      actionLoadingStates.value[action.id!] = loading;
+    },
     onSuccess: async (data: any) => {
       await coreStore.fetchRecord({
         resourceId: route.params.resourceId as string,
@@ -166,6 +177,7 @@ function startBulkAction(actionId: string) {
 }
 
 async function injectedComponentClick(index: number) {
+  console.log('Injected component click triggered for index:', index);
   const componentRef = threeDotsDropdownItemsRefs.value[index];
   if (componentRef && 'click' in componentRef) {
     (componentRef as any).click?.();
@@ -196,8 +208,11 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-  .wrapper > * {
-    @apply px-4 py-2;
+  .wrapper {
+    @apply px-4 py-2 
+    hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover 
+    dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover
+    cursor-pointer;
   }
 </style>
 

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

@@ -11,6 +11,7 @@
         class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
       >
         <RouterLink
+          v-if="foreignResource && foreignResource?.pk"
           class="font-medium text-lightSidebarText dark:text-darkSidebarText hover:brightness-110 whitespace-nowrap"
           :to="{
             name: 'resource-show',

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

@@ -1,4 +1,6 @@
 import type { AdminForthResource, AdminForthResourceColumn } from '../types/Back.js';
+import type { FilterParams } from '@/types/Common';
+import type { Ref, ComputedRef } from 'vue';
 
 export type resourceById = {
     [key: string]: AdminForthResource;
@@ -61,3 +63,33 @@ export type AllowedActions = {
     delete: boolean,
 }
 
+
+export type sortType = {
+  field: string, 
+  direction: 'ask' | 'desc'
+} | null;
+
+export type AdminforthFilterStore = {
+  filters: Ref<FilterParams[]>,
+
+  setSort: (sort: sortType) => void,
+  getSort: () => sortType,
+
+  setFilter: (filters: FilterParams) => void,
+  setFilters: (filters: FilterParams[]) => void,
+
+  getFilters: () => FilterParams[],
+
+  clearFilter: (fieldName: string) => void,
+  clearFilters: () => void,
+
+  shouldFilterBeHidden: (fieldName: string) => boolean,
+
+  visibleFiltersCount: ComputedRef<number>,
+}
+
+export interface AdminforthFilterStoreUnwrapped extends Omit<AdminforthFilterStore, 'filters' | 'visibleFiltersCount'> {
+    filters: FilterParams[],
+    visibleFiltersCount: number,
+}
+

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

@@ -1,40 +1,42 @@
 import { ref, computed, type Ref } from 'vue';
 import { defineStore } from 'pinia';
 import { useCoreStore } from './core';
+import type { FilterParams } from '@/types/Common';
+import type { AdminforthFilterStore, sortType } from '../spa_types/core';
 
 export const useFiltersStore = defineStore('filters', () => {
-    const filters: Ref<any[]> = ref([]);
-    const sort: Ref<any> = ref({});
+    const filters: Ref<FilterParams[]> = ref([]);
+    const sort: Ref<sortType> = ref(null);
     const coreStore = useCoreStore();
 
-    const setSort = (s: any) => {
+    const setSort = (s: sortType): void => {
         sort.value = s;
     }
-    const getSort = () => {
+    const getSort = (): sortType => {
         return sort.value;
     }
-    const setFilter = (filter: any) => {
+    const setFilter = (filter: FilterParams) => {
         const index = filters.value.findIndex(f => f.field === filter.field);
-        if (filters.value[index] && filters.value[index].operator === filter.value.operator) {
+        if (filters.value[index] && filters.value[index].operator === filter.operator) {
             filters.value[index] = filter;
             return;
         }
         filters.value.push(filter);
     }
-    const setFilters = (f: any) => {
+    const setFilters = (f: FilterParams[]) => {
         filters.value = f;
     }
-    const getFilters = () => {
+    const getFilters = (): FilterParams[] => {
         return filters.value;
     }
-    const clearFilter = (fieldName: string) => {
+    const clearFilter = (fieldName: string): void => {
         filters.value = filters.value.filter(f => f.field !== fieldName);
     }
-    const clearFilters = () => {
+    const clearFilters = (): void => {
         filters.value = [];
     }
 
-    const shouldFilterBeHidden = (fieldName: string) => {
+    const shouldFilterBeHidden = (fieldName: string): boolean => {
         if (coreStore.resource?.columns) {
             const column = coreStore.resource.columns.find((col: any) => col.name === fieldName);
             if (column?.showIn?.filter !== true) {
@@ -48,7 +50,7 @@ export const useFiltersStore = defineStore('filters', () => {
         return filters.value.filter(f => !shouldFilterBeHidden(f.field)).length;
     });
 
-    return {
+    const store = {
         setFilter, 
         getFilters, 
         clearFilters, 
@@ -60,4 +62,6 @@ export const useFiltersStore = defineStore('filters', () => {
         shouldFilterBeHidden,
         clearFilter
     }
+
+    return store as AdminforthFilterStore;
 })

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

@@ -13,6 +13,7 @@ import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections,
   type AdminForthConfigMenuItem,
   type AnnouncementBadgeResponse,
   type AdminForthResourceColumnInputCommon,
+  type ColumnMinMaxValue,
 } from './Common.js';
 
 export interface ICodeInjector {
@@ -256,7 +257,7 @@ export interface IAdminForthDataSourceConnector {
    * 
    * Internally should call {@link IAdminForthDataSourceConnector.getFieldValue} for both min and max values.
    */
-  getMinMaxForColumnsWithOriginalTypes({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<{ [key: string]: { min: any, max: any } }>;
+  getMinMaxForColumnsWithOriginalTypes({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<ColumnMinMaxValue>;
 
 
   /**
@@ -309,7 +310,7 @@ export interface IAdminForthDataSourceConnectorBase extends IAdminForthDataSourc
     newValues: any, 
   }): Promise<{ok: boolean, error?: string}>;
 
-  getMinMaxForColumns({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<{ [key: string]: { min: any, max: any } }>;
+  getMinMaxForColumns({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<ColumnMinMaxValue>;
 
   deleteMany?({resource, recordIds}:{resource: AdminForthResource, recordIds: any[]}): Promise<number>;
 }
@@ -1305,6 +1306,19 @@ export interface AdminForthActionInput {
     standardAllowedActions: AllowedActions;
   }) => boolean;
   url?: string;
+  bulkHandler?: (params: {
+      adminforth: IAdminForth;
+      resource: AdminForthResource;
+      recordIds: (string | number)[];
+      adminUser: AdminUser;
+      response: IAdminForthHttpResponse;
+      extra?: HttpExtra;
+      tr: ITranslateFunction;
+  }) => Promise<{
+      ok: boolean;
+      error?: string;
+      successMessage?: string;
+  }>;
   action?: (params: {
       adminforth: IAdminForth;
       resource: AdminForthResource;
@@ -1312,7 +1326,7 @@ export interface AdminForthActionInput {
       adminUser: AdminUser;
       response: IAdminForthHttpResponse;
       extra?: HttpExtra;
-      tr: Function;
+      tr: ITranslateFunction;
   }) => Promise<{
       ok: boolean;
       error?: string;
@@ -1837,6 +1851,8 @@ export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourc
   /** 
    * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
    * using checkboxes.
+   * @deprecated Since 2.26.5. Will be removed in 3.0.0. Use `actions` instead.
+
    */
   bulkActions?: Array<AdminForthBulkAction>,
 
@@ -2136,4 +2152,11 @@ export interface IWebSocketBroker {
   publish: (topic: string, data: any, filterUsers?: (adminUser: AdminUser) => Promise<boolean>) => void;
 
   registerWsClient: (client: IWebSocketClient) => void;
+}
+export interface PluginsCommonOptions {
+   /**
+     * Id of the plugin. It should be unique across all plugins.
+     * It is required if you want to log custom actions, otherwise it is optional.
+    */
+    id?: string;
 }

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

@@ -303,7 +303,7 @@ export interface AdminForthComponentDeclarationFull {
     [key: string]: any,
   }
 }
-import { type AdminForthActionInput, type AdminForthResource } from './Back.js' 
+import { type IAdminForth, type AdminForthActionInput, type AdminForthResource } from './Back.js' 
 export { type AdminForthActionInput } from './Back.js'
 
 export type AdminForthComponentDeclaration = AdminForthComponentDeclarationFull | string;
@@ -314,8 +314,9 @@ export type FieldGroup = {
   noTitle?: boolean;
 };
 
-export interface AdminForthActionFront extends Omit<AdminForthActionInput, 'id'> {
+export interface AdminForthActionFront extends Omit<AdminForthActionInput, 'id' | 'bulkHandler' | 'action' | 'allowed'> {
   id: string;
+  hasBulkHandler?: boolean;
 }
 
 export interface AdminForthBulkActionFront extends Omit<AdminForthBulkActionCommon, 'id'> {
@@ -610,14 +611,14 @@ export type ValidationObject = {
      * ```
      * 
      */
-    regExp: string,
+    regExp?: string,
 
     /**
      * Error message shown to user if validation fails
      * 
      * Example: "Invalid email format"
      */
-    message: string,
+    message?: string,
 
     /**
      * Whether to check case sensitivity (i flag)
@@ -633,6 +634,20 @@ export type ValidationObject = {
      * Whether to check global strings (g flag)
      */
     global?: boolean
+
+    /**
+     * Custom validator function.
+     * 
+     * Example:
+     * 
+     * ```ts
+     * validator: async (value) => {
+     *   // custom validation logic
+     *   return { isValid: true, message: 'Validation passed' }; // or { isValid: false, message: 'Validation failed' }
+     * }
+     * ```
+     */
+    validator?: (value: any, record: any, adminForth: IAdminForth) => {isValid: boolean, message?: string} | Promise<{isValid: boolean, message?: string}> | boolean,
 }
 
 
@@ -1149,7 +1164,7 @@ export interface AdminForthConfigMenuItem {
    * Optional callback which will be called before rendering the menu for each item.
    * Result of callback if not null will be used as a small badge near the menu item.
    */
-  badge?: string | ((user: AdminUser) => Promise<string>),
+  badge?: string | number |  ((user: AdminUser) => Promise<string> | string | Promise<number> | number),
 
   /**
    * Tooltip shown on hover for badge
@@ -1242,4 +1257,8 @@ export interface GetBaseConfigResponse {
   config: AdminForthConfigForFrontend,
   adminUser: AdminUser,
   version: string,
+}
+
+export interface ColumnMinMaxValue { 
+  [key: string]: { min: any, max: any } 
 }

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

@@ -0,0 +1,65 @@
+import type { AdminForthResourceColumn } from '@/types/Back';
+import { useAdminforth } from '@/adminforth';
+import { type Ref, nextTick } from 'vue';
+
+export function scrollToInvalidField(resourceFormRef: any, t: (key: string) => string) {
+  const { alert } = useAdminforth();
+  let columnsWithErrors: {column: AdminForthResourceColumn, error: string}[] = [];
+  for (const column of resourceFormRef.value?.editableColumns || []) {
+    if (resourceFormRef.value?.columnsWithErrors[column.name]) {
+      columnsWithErrors.push({
+        column,
+        error: resourceFormRef.value?.columnsWithErrors[column.name]
+      });
+    }
+  }
+  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>';
+  alert({
+    messageHtml: errorMessage,
+    variant: 'danger'
+  });
+  const firstInvalidElement = document.querySelector('.af-invalid-field-message');
+  if (firstInvalidElement) {
+    firstInvalidElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+}
+
+export async function saveRecordPreparations(
+  viewMode: 'create' | 'edit',
+  validatingMode: Ref<boolean>, 
+  resourceFormRef: Ref<any>, 
+  isValid: Ref<boolean>, 
+  t: (key: string) => string, 
+  saving: Ref<boolean>, 
+  runSaveInterceptors: any, 
+  record: Ref<Record<string, any>>, 
+  coreStore: any, 
+  route: any
+) {
+  validatingMode.value = true;
+  await nextTick();
+  //wait for response for the user validation function if it exists
+  while (1) {
+    if (resourceFormRef.value?.isValidating) {
+      await new Promise(resolve => setTimeout(resolve, 100));
+    } else {
+      break;
+    }
+  }
+  if (!isValid.value) {
+    await nextTick();
+    scrollToInvalidField(resourceFormRef, t);
+    return;
+  } else {
+    validatingMode.value = false;
+  }
+
+  saving.value = true;
+  const interceptorsResult = await runSaveInterceptors({
+    action: viewMode,
+    values: record.value,
+    resource: coreStore.resource,
+    resourceId: route.params.resourceId as string,
+  });
+  return interceptorsResult;
+}

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

@@ -1,2 +1,3 @@
 export * from './utils';
-export * from './listUtils';
+export * from './listUtils';
+export * from './createEditUtils';

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

@@ -8,7 +8,7 @@ import { Dropdown } from 'flowbite';
 import adminforth, { useAdminforth } from '../adminforth';
 import sanitizeHtml  from 'sanitize-html'
 import debounce from 'debounce';
-import type { AdminForthResourceColumnInputCommon, Predicate } from '@/types/Common';
+import type { AdminForthActionFront, AdminForthResourceColumnInputCommon, AdminForthResourceCommon, Predicate } from '@/types/Common';
 import { i18nInstance } from '../i18n'
 import { useI18n } from 'vue-i18n';
 import { onBeforeRouteLeave } from 'vue-router';
@@ -101,11 +101,13 @@ export async function callAdminForthApi(
   }
 }
 
-export function formatComponent(component: AdminForthComponentDeclaration): AdminForthComponentDeclarationFull {
+export function formatComponent(component: AdminForthComponentDeclaration | undefined): AdminForthComponentDeclarationFull {
   if (typeof component === 'string') {
     return { file: component, meta: {} };
-  } else {
+  } else if (typeof component === 'object') {
     return { file: component.file, meta: component.meta };
+  } else {
+    return { file: '', meta: {} };
   }
 }
 
@@ -191,7 +193,8 @@ export function applyRegexValidation(value: any, validation: ValidationObject[]
   if ( validation?.length ) {
     const validationArray = validation;
     for (let i = 0; i < validationArray.length; i++) {
-      if (validationArray[i].regExp) {
+      const regExpPattern = validationArray[i].regExp;
+      if (regExpPattern) {
         let flags = '';
         if (validationArray[i].caseSensitive) {
           flags += 'i';
@@ -203,7 +206,7 @@ export function applyRegexValidation(value: any, validation: ValidationObject[]
           flags += 'g';
         }
 
-        const regExp = new RegExp(validationArray[i].regExp, flags);
+        const regExp = new RegExp(regExpPattern, flags);
         if (value === undefined || value === null) {
           value = '';
         }
@@ -766,6 +769,7 @@ export async function executeCustomBulkAction({
   onError,
   setLoadingState,
   confirmMessage,
+  resource,
 }: {
   actionId: string | number | undefined,
   resourceId: string,
@@ -775,6 +779,7 @@ export async function executeCustomBulkAction({
   onError?: (error: string) => void,
   setLoadingState?: (loading: boolean) => void,
   confirmMessage?: string,
+  resource?: AdminForthResourceCommon,
 }): Promise<any> {
   if (!recordIds || recordIds.length === 0) {
     if (onError) {
@@ -796,7 +801,38 @@ export async function executeCustomBulkAction({
   setLoadingState?.(true);
 
   try {
-    // Execute action for all records in parallel using Promise.all
+    const action = resource?.options?.actions?.find((a: any) => a.id === actionId) as AdminForthActionFront | undefined;
+
+    if (action?.hasBulkHandler && action?.showIn?.bulkButton) {
+      const result = await callAdminForthApi({
+        path: '/start_custom_bulk_action',
+        method: 'POST',
+        body: {
+          resourceId,
+          actionId,
+          recordIds,
+          extra: extra || {},
+        }
+      });
+
+      if (result?.ok) {
+        if (onSuccess) {
+          await onSuccess([result]);
+        }
+        return { ok: true, results: [result] };
+      }
+
+      if (result?.error) {
+        if (onError) {
+          onError(result.error);
+        }
+        return { error: result.error };
+      }
+
+      return result;
+    }
+
+    // Per-record parallel calls (legacy path)
     const results = await Promise.all(
       recordIds.map(recordId =>
         callAdminForthApi({
@@ -811,7 +847,6 @@ export async function executeCustomBulkAction({
         })
       )
     );
-
     const lastResult = results[results.length - 1];
     if (lastResult?.redirectUrl) {
       if (lastResult.redirectUrl.includes('target=_blank')) {

package/dist/spa/src/utils.ts

@@ -1,2 +1,3 @@
 export * from './utils/utils';
-export * from './utils/listUtils';
+export * from './utils/listUtils';
+export * from './utils/createEditUtils';