adminforth 2.4.0-next.33 → 2.4.0-next.331

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

@@ -16,6 +16,7 @@ export const useCoreStore = defineStore('core', () => {
   const record: Ref<any | null> = ref({});
   const resource: Ref<AdminForthResourceCommon | null> = ref(null);
   const userData: Ref<UserData | null> = ref(null);
+  const isResourceFetching = ref(false);
 
   const resourceColumnsWithFilters = computed(() => {
     if (!resource.value) {
@@ -118,7 +119,7 @@ export const useCoreStore = defineStore('core', () => {
         item.badge = badge;
       }
     });
-
+    websocket.unsubscribeAll();
     subscribeToMenuBadges();
 
   }
@@ -172,6 +173,7 @@ export const useCoreStore = defineStore('core', () => {
       // already fetched
       return;
     }
+    isResourceFetching.value = true;
     resourceColumnsId.value = resourceId;
     resourceColumnsError.value = '';
     const res = await callAdminForthApi({
@@ -188,6 +190,7 @@ export const useCoreStore = defineStore('core', () => {
       resource.value = res.resource;
       resourceOptions.value = res.resource.options;
     }
+    isResourceFetching.value = false;
   }
 
   async function getPublicConfig() {
@@ -195,9 +198,18 @@ export const useCoreStore = defineStore('core', () => {
       path: '/get_public_config',
       method: 'GET',
     });
+    console.log('📦 getPublicConfig', res);
     config.value = {...config.value, ...res};
   }
 
+  async function getLoginFormConfig() {
+    const res = await callAdminForthApi({
+      path: '/get_login_form_config',
+      method: 'GET',
+    });
+    console.log('📦 getLoginFormConfig', res);
+    config.value = {...config.value, ...res};
+  }
 
   const username = computed(() => {
     const usernameField = config.value?.usernameField;
@@ -218,6 +230,7 @@ export const useCoreStore = defineStore('core', () => {
     userFullname,
     getPublicConfig,
     fetchMenuAndResource, 
+    getLoginFormConfig,
     fetchRecord, 
     record, 
     fetchResourceFull, 
@@ -231,5 +244,6 @@ export const useCoreStore = defineStore('core', () => {
     fetchMenuBadges,
     resetAdminUser,
     resetResource,
+    isResourceFetching,
   }
 })

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

@@ -1,9 +1,11 @@
-import { ref, type Ref } from 'vue';
+import { ref, computed, type Ref } from 'vue';
 import { defineStore } from 'pinia';
+import { useCoreStore } from './core';
 
 export const useFiltersStore = defineStore('filters', () => {
     const filters: Ref<any[]> = ref([]);
     const sort: Ref<any> = ref({});
+    const coreStore = useCoreStore();
 
     const setSort = (s: any) => {
         sort.value = s;
@@ -20,8 +22,37 @@ export const useFiltersStore = defineStore('filters', () => {
     const getFilters = () => {
         return filters.value;
     }
+    const clearFilter = (fieldName: string) => {
+        filters.value = filters.value.filter(f => f.field !== fieldName);
+    }
     const clearFilters = () => {
         filters.value = [];
     }
-    return {setFilter, getFilters, clearFilters, filters, setFilters, setSort, getSort}
+
+    const shouldFilterBeHidden = (fieldName: string) => {
+        if (coreStore.resource?.columns) {
+            const column = coreStore.resource.columns.find((col: any) => col.name === fieldName);
+            if (column?.showIn?.filter !== true) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    const visibleFiltersCount = computed(() => {
+        return filters.value.filter(f => !shouldFilterBeHidden(f.field)).length;
+    });
+
+    return {
+        setFilter, 
+        getFilters, 
+        clearFilters, 
+        filters, 
+        setFilters, 
+        setSort, 
+        getSort,
+        visibleFiltersCount,
+        shouldFilterBeHidden,
+        clearFilter
+    }
 })

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

@@ -29,7 +29,12 @@ export const useModalStore = defineStore('modal', () => {
     onCancelFunction.value = func;
   }
   function setModalContent(content: ModalContentType) {
-    modalContent.value = content;
+    modalContent.value = {
+      title: content.title || 'title',
+      content: content.content || 'content',
+      acceptText: content.acceptText || 'acceptText',
+      cancelText: content.cancelText || 'cancelText',
+    };
   }
   function resetmodalState() {
     isOpened.value = false;

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

@@ -12,19 +12,38 @@ export const useToastStore = defineStore('toast', () => {
     watch(route, () => {
         // on route change clear all toasts older then 5 seconds
         const now = +new Date();
-        toasts.value = toasts.value.filter((t) => now - t.createdAt < 5000);
+        toasts.value = toasts.value.filter((t) => t?.timeout === 'unlimited' || now - t.createdAt < 5000);
     });
 
-    const addToast = (toast: { message: string; variant: string }) => {
+    const addToast = (toast: { 
+        message?: string; 
+        messageHtml?: string; 
+        variant: string; 
+        timeout?: number | 'unlimited';
+        buttons?: { value: any; label: string }[];
+        onResolve?: (value?: any) => void;
+    }): string => {
         const toastId = uuid();
         toasts.value.push({
             ...toast,
             id: toastId,
             createdAt: +new Date(),
         });
+        return toastId;
     };
     const removeToast = (toast: { id: string }) => {
         toasts.value = toasts.value.filter((t) => t.id !== toast.id);
     };
-    return { toasts, addToast, removeToast };
+
+    const resolveToast = (toastId: string, value?: any) => {
+        const t = toasts.value.find((x) => x.id === toastId);
+        try {
+            t?.onResolve?.(value);
+        } catch {
+            // no-op
+        }
+        toasts.value = toasts.value.filter((x) => x.id !== toastId);
+    };
+
+    return { toasts, addToast, removeToast, resolveToast };
 });

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

@@ -1,4 +1,4 @@
-import type { Express } from 'express';
+import type { Express, Request } from 'express';
 import type { Writable } from 'stream';
 
 import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections, AllowedActionsEnum, 
@@ -8,12 +8,12 @@ import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections,
   type AdminForthBulkActionCommon, 
   type AdminForthForeignResourceCommon,
   type AdminForthResourceColumnCommon,
-  AdminForthResourceInputCommon,
-  AdminForthComponentDeclarationFull,
-  AdminForthConfigMenuItem,
-  AnnouncementBadgeResponse,
+  type AdminForthResourceInputCommon,
+  type AdminForthComponentDeclarationFull,
+  type AdminForthConfigMenuItem,
+  type AnnouncementBadgeResponse,
   AdminForthResourcePages,
-  AdminForthResourceColumnInputCommon,
+  type AdminForthResourceColumnInputCommon,
 } from './Common.js';
 
 export interface ICodeInjector {
@@ -22,12 +22,13 @@ export interface ICodeInjector {
   devServerPort: number;
 
   getServeDir(): string;
-
+  registerCustomComponent(filePath: string): void;
   spaTmpPath(): string;
 }
 
 export interface IConfigValidator {
   validateConfig(): void;
+  validateAfterPluginsActivation(): void;
   postProcessAfterDiscover(resource: AdminForthResource): void;
 }
 
@@ -92,19 +93,36 @@ export interface IExpressHttpServer extends IHttpServer {
    * Adds adminUser to request object if user is authorized. Drops request with 401 status if user is not authorized.
    * @param callable : Function which will be called if user is authorized.
    * 
-   * Example:
    * 
+   * @example
    * ```ts
-   * expressApp.get('/myApi', authorize((req, res) => \{
+   * expressApp.get('/myApi', authorize((req, res) => {
    *  console.log('User is authorized', req.adminUser);
-   *  res.json(\{ message: 'Hello World' \});
-   * \}));
-   * ``
+   *  res.json({ message: 'Hello World' });
+   * }));
+   * ```
    * 
-   */
+   */  
   authorize(callable: Function): void;
 }
 
+export interface ITranslateFunction {
+  (
+    msg: string,
+    category: string,
+    params: any,
+    pluralizationNumber?: number
+  ): Promise<string>;
+}
+
+// Omit <Request, 'param'> is used to remove 'param' method from Request type for correct docs generation
+export interface IAdminUserExpressRequest extends Omit<Request, 'protocol' | 'param' | 'unshift'> {
+  adminUser: AdminUser;
+}
+
+export interface ITranslateExpressRequest extends Omit<Request, 'protocol' | 'param' | 'unshift'> {
+  tr: ITranslateFunction;
+}
 
 export interface IAdminForthSingleFilter {
   field?: string;
@@ -113,7 +131,9 @@ export interface IAdminForthSingleFilter {
   | AdminForthFilterOperators.LTE | AdminForthFilterOperators.LIKE | AdminForthFilterOperators.ILIKE
   | AdminForthFilterOperators.IN | AdminForthFilterOperators.NIN;
   value?: any;
+  rightField?: string;
   insecureRawSQL?: string;
+  insecureRawNoSQL?: any;
 }
 export interface IAdminForthAndOrFilter {
   operator: AdminForthFilterOperators.AND | AdminForthFilterOperators.OR;
@@ -287,6 +307,10 @@ 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;
+
+  getCustomCookie({cookies, name}: {cookies: {key: string, value: string}[], name: string}): string | null;
+
   setAuthCookie({expireInDays, response, username, pk,}: {expireInDays?: number, response: any, username: string, pk: string}): void;
   
   removeAuthCookie(response: any): void;
@@ -336,10 +360,11 @@ export interface IAdminForth {
 
   createResourceRecord(
     params: { resource: AdminForthResource, record: any, adminUser: AdminUser, extra?: HttpExtra }
-  ): Promise<{ error?: string, createdRecord?: any }>;
+  ): Promise<{ error?: string, createdRecord?: any, newRecordId?: any }>;
 
   updateResourceRecord(
-    params: { resource: AdminForthResource, recordId: any, record: any, oldRecord: any, adminUser: AdminUser, extra?: HttpExtra }
+    params: { resource: AdminForthResource, recordId: any, record: any, oldRecord: any, adminUser: AdminUser, extra?: HttpExtra, updates?: never }
+    | { resource: AdminForthResource, recordId: any, record?: never, oldRecord: any, adminUser: AdminUser, extra?: HttpExtra, updates: any }
   ): Promise<{ error?: string }>;
 
   deleteResourceRecord(
@@ -474,7 +499,7 @@ export type BeforeDataSourceRequestFunction = (params: {
     requestUrl: string,
   },
   adminforth: IAdminForth,
-}) => Promise<{ok: boolean, error?: string}>;
+}) => Promise<{ok: boolean, error?: string, newRecordId?: string}>;
 
 /**
  * Modify response to change how data is returned after fetching from database.
@@ -525,7 +550,7 @@ export type BeforeEditSaveFunction = (params: {
   oldRecord: any,
   adminforth: IAdminForth,
   extra?: HttpExtra,
-}) => Promise<{ok: boolean, error?: string}>;
+}) => Promise<{ok: boolean, error?: string | null}>;
 
 
 
@@ -535,7 +560,7 @@ export type BeforeCreateSaveFunction = (params: {
   record: any, 
   adminforth: IAdminForth,
   extra?: HttpExtra,
-}) => Promise<{ok: boolean, error?: string}>;
+}) => Promise<{ok: boolean, error?: string | null, newRecordId?: string}>;
 
 export type AfterCreateSaveFunction = (params: {
   resource: AdminForthResource, 
@@ -543,6 +568,7 @@ export type AfterCreateSaveFunction = (params: {
   adminUser: AdminUser, 
   record: any, 
   adminforth: IAdminForth,
+  recordWithVirtualColumns?: any,
   extra?: HttpExtra,
 }) => Promise<{ok: boolean, error?: string}>;
 
@@ -579,6 +605,7 @@ export type BeforeLoginConfirmationFunction = (params?: {
     response: IAdminForthHttpResponse,
     adminforth: IAdminForth,
     extra?: HttpExtra,
+    rememberMeDays?: number,
 }) => Promise<{
   error?: string, 
   body: {
@@ -587,6 +614,19 @@ export type BeforeLoginConfirmationFunction = (params?: {
   }
 }>;
 
+/**
+ * Allow to make extra authorization
+ */
+export type AdminUserAuthorizeFunction = ((params?: { 
+    adminUser: AdminUser,
+    response: IAdminForthHttpResponse,
+    adminforth: IAdminForth,
+    extra?: HttpExtra,
+}) => Promise<{
+  error?: string,
+  allowed?: boolean,
+}>);
+
   
 /**
  * Data source describes database connection which will be used to fetch data for resources.
@@ -619,12 +659,23 @@ interface AdminForthInputConfigCustomization {
    */
   brandName?: string,
 
+  /**
+   * Whether to use single theme for the app
+   */
+  singleTheme?: 'light' | 'dark',
+
   /**
    * Whether to show brand name in sidebar
    * default is true
    */
   showBrandNameInSidebar?: boolean,
 
+  /**
+   * Whether to show brand logo in sidebar
+   * default is true
+   */
+  showBrandLogoInSidebar?: boolean,
+
   /**
    * Path to your app logo
    * 
@@ -638,6 +689,23 @@ interface AdminForthInputConfigCustomization {
    */
   brandLogo?: string,
 
+
+  /**
+   * Path to your app logo for icon only sidebar
+   * 
+   * Example:
+   * Place file `logo.svg` to `./custom` folder and set this option:
+   * 
+   */
+  iconOnlySidebar?: {
+    logo?: string,
+    enabled?: boolean,
+    /**
+     * Width of expanded sidebar (default: '16.5rem')
+     */
+    expandedSidebarWidth?: string,
+  },
+
   /**
    * Path to your app favicon
    * 
@@ -747,6 +815,7 @@ interface AdminForthInputConfigCustomization {
    */
   loginPageInjections?: {
     underInputs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    underLoginButton?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     panelHeader?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
   }
 
@@ -757,8 +826,20 @@ interface AdminForthInputConfigCustomization {
     userMenu?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     header?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     sidebar?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    sidebarTop?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     everyPageBottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
   }
+
+  /**
+  * Allows adding custom elements (e.g., &lt;link&gt;, &lt;script&gt;, &lt;meta&gt;) to the &lt;head&gt; of the HTML document.
+  * Each item must include a tag name and a set of attributes.
+  */
+  customHeadItems?: {
+    tagName: string;
+    attributes: Record<string, string | boolean>;
+    innerCode?: string;
+  }[];
+
 }
 
 export interface AdminForthActionInput {
@@ -787,6 +868,7 @@ export interface AdminForthActionInput {
   }>;
   icon?: string;
   id?: string;
+  customComponent?: AdminForthComponentDeclaration;
 }
 
 export interface AdminForthResourceInput extends Omit<NonNullable<AdminForthResourceInputCommon>, 'columns' | 'hooks' | 'options'> {
@@ -935,12 +1017,24 @@ export interface AdminForthInputConfig {
        */
       loginBackgroundPosition?: 'over' | '1/2' | '1/3' | '2/3' | '3/4' | '2/5' | '3/5',
 
+      /**
+       * If true, background blend mode will be removed from login background image when position is 'over'
+       * 
+       * Default: false
+       */
+      removeBackgroundBlendMode?: boolean,
+
       /**
        * Function or functions  which will be called before user try to login.
        * Each function will resive User object as an argument
        */
       beforeLoginConfirmation?: BeforeLoginConfirmationFunction | Array<BeforeLoginConfirmationFunction>,
 
+      /**
+       * Array of functions which will be called before any request to AdminForth API.
+       */
+      adminUserAuthorize?: AdminUserAuthorizeFunction | Array<AdminUserAuthorizeFunction>,
+
       /**
        * Optionally if your users table has a field(column) with full name, you can set it here.
        * This field will be used to display user name in the top right corner of the admin panel.
@@ -956,7 +1050,7 @@ export interface AdminForthInputConfig {
       /**
        * Any prompt to show users on login. Supports HTML.
        */
-      loginPromptHTML?: string,
+      loginPromptHTML?: string | (() => string | void | undefined | Promise<string | void | undefined>) | undefined 
 
       /**
        * Remember me days for "Remember Me" checkbox on login page.
@@ -988,6 +1082,17 @@ export interface AdminForthInputConfig {
        * If you are using Cloudflare, set this to 'CF-Connecting-IP'. Case-insensitive.
        */
       clientIpHeader?: string,
+
+      /**
+       * Add custom page to the settings page
+       */
+      userMenuSettingsPages: {
+        icon?: string,
+        pageLabel: string,
+        slug?: string,
+        component: string,
+        isVisible?: (adminUser: AdminUser) => boolean,
+      }[],
     },
 
      /**
@@ -1055,6 +1160,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
 
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclarationFull>,
+    underLoginButton?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     panelHeader: Array<AdminForthComponentDeclarationFull>,
   },
 
@@ -1062,8 +1168,16 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
     userMenu: Array<AdminForthComponentDeclarationFull>,
     header: Array<AdminForthComponentDeclarationFull>,
     sidebar: Array<AdminForthComponentDeclarationFull>,
+    sidebarTop: Array<AdminForthComponentDeclarationFull>,
     everyPageBottom: Array<AdminForthComponentDeclarationFull>,
   },
+
+  customHeadItems?: {
+    tagName: string;
+    attributes: Record<string, string | boolean>;
+    innerCode?: string;
+  }[];
+  
 }
 
 export interface AdminForthConfig extends Omit<AdminForthInputConfig, 'customization' | 'resources'> {
@@ -1111,6 +1225,21 @@ export class Filters {
   static LIKE(field: string, value: any): IAdminForthSingleFilter {
     return { field, operator: AdminForthFilterOperators.LIKE, value };
   }
+  static ILIKE(field: string, value: any): IAdminForthSingleFilter {
+    return { field, operator: AdminForthFilterOperators.ILIKE, value };
+  }
+  static GT_FIELD(leftField: string, rightField: string): IAdminForthSingleFilter {
+    return { field: leftField, operator: AdminForthFilterOperators.GT, rightField };
+  }
+  static GTE_FIELD(leftField: string, rightField: string): IAdminForthSingleFilter {
+    return { field: leftField, operator: AdminForthFilterOperators.GTE, rightField };
+  }
+  static LT_FIELD(leftField: string, rightField: string): IAdminForthSingleFilter {
+    return { field: leftField, operator: AdminForthFilterOperators.LT, rightField };
+  }
+  static LTE_FIELD(leftField: string, rightField: string): IAdminForthSingleFilter {
+    return { field: leftField, operator: AdminForthFilterOperators.LTE, rightField };
+  }
   static AND(
     ...args: (IAdminForthSingleFilter | IAdminForthAndOrFilter | Array<IAdminForthSingleFilter | IAdminForthAndOrFilter>)[]
   ): IAdminForthAndOrFilter {
@@ -1318,9 +1447,13 @@ export interface AdminForthResource extends Omit<AdminForthResourceInput, 'optio
     },
     create?: {
       /**
+       * Should return `ok: true` to continue saving pipeline and allow creating record in database, and `ok: false` to interrupt pipeline and prevent record creation.
+       * If you need to show error on UI, set `error: \<error message\>` in response.
+       * 
        * Typical use-cases:
-       * - Validate record before saving to database and interrupt execution if validation failed (`allowedActions.create` should be preferred in most cases)
-       * - fill-in adminUser as creator of record
+       * - Create record by custom code (return `{ ok: false, newRecordId: <id of created record from custom code> }`)
+       * - Validate record before saving to database and interrupt execution if validation failed (return `{ ok: false, error: <validation error> }`), though `allowedActions.create` should be preferred in most cases
+       * - fill-in adminUser as creator of record (set `record.<some field> = x; return \{ ok: true \}`) 
        * - Attach additional data to record before saving to database (mostly fillOnCreate should be used instead)
        */
       beforeSave?: Array<BeforeCreateSaveFunction>,
@@ -1471,15 +1604,27 @@ export type ShowInInput = ShowInModernInput | ShowInLegacyInput;
 export type ShowIn = {
   [key in AdminForthResourcePages]: AllowedActionValue
 }
+export type BackendOnlyInput =
+  | boolean
+  | ((p: {
+      adminUser: AdminUser;
+      resource: AdminForthResource;
+      meta: any;
+      source: ActionCheckSource;
+      adminforth: IAdminForth;
+    }) => boolean | Promise<boolean>);
+
 
-export interface AdminForthResourceColumnInput extends Omit<AdminForthResourceColumnInputCommon, 'showIn'> {
+export interface AdminForthResourceColumnInput extends Omit<AdminForthResourceColumnInputCommon, 'showIn' | 'backendOnly'> {
   showIn?: ShowInInput,
   foreignResource?: AdminForthForeignResource,
+  backendOnly?: BackendOnlyInput;
 }
 
-export interface AdminForthResourceColumn extends Omit<AdminForthResourceColumnCommon, 'showIn'> {
+export interface AdminForthResourceColumn extends Omit<AdminForthResourceColumnCommon, 'showIn' | 'backendOnly'> {
   showIn?: ShowIn,
   foreignResource?: AdminForthForeignResource,
+  backendOnly?: BackendOnlyInput;
 }
 
 export interface IWebSocketClient {