adminforth 2.4.0-next.31 → 2.4.0-next.310

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

@@ -55,7 +55,7 @@ export interface FrontendAPIInterface {
      * 
      * @param params - The parameters of the alert
      */
-    alert(params:AlertParams): void;
+    alert(params:AlertParams): void | Promise<string> | string;
 
 
     list: {
@@ -82,27 +82,40 @@ export interface FrontendAPIInterface {
          */
         closeThreeDotsDropdown(): void;
 
-
         /**
-         * Set a filter in the list
-         * Works only when user located on the list page.
+         * Set a filter in the list.
+         * Works only when user located on the list page. If filter already exists, it will be replaced with the new one.
          * Can be used to set filter from charts or other components in pageInjections.
          * 
+         * Filters are automatically marked as hidden (won't count in badge) if:
+         * - Column has showIn.filter: false
+         * 
          * Example:
          * 
          * ```ts
          * import adminforth from '@/adminforth'
          * 
+         * // Regular filter (will show in badge if column.showIn.filter !== false)
          * adminforth.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'})
          * ```
          * 
+         * Please note that you can set/update filter even for fields which have showIn.filter=false in resource configuration.
+         * Also you can set filter for virtual columns. For example Universal search plugin calls updateFilter for virtual column which has showIn.filter=false (because we dont want to show this column in filter dropdown, plugin renders its own filter UI)
+         * 
          * @param filter - The filter to set
          */
         setFilter(filter: FilterParams): void;
 
         /**
+         * DEPRECATED: does the same as setFilter, kept for backward compatibility
          * Update a filter in the list
          * 
+         * Filters visibility in badge is automatically determined by column configuration:
+         * - Hidden if column has showIn.filter: false
+         * 
          * Example:
          * 
          * ```ts
@@ -121,6 +134,14 @@ export interface FrontendAPIInterface {
         clearFilters(): void;
     }
 
+    show: {
+        /**
+         * Full refresh the current record on the show page. Loader may be shown during fetching.
+         * Fire-and-forget; you don't need to await it.
+         */
+        refresh(): void;
+    }
+
     menu: {
         /**
          * Refreshes the badges in the menu, by recalling the badge function for each menu item
@@ -171,7 +192,12 @@ export type AlertParams = {
      * Default is 10 seconds;
      */
     timeout?: number | 'unlimited';
-    
+
+    /**
+     * Optional buttons to display in the alert
+     */
+    buttons?: {value: any, label: string}[];
+
 }
 
 

package/dist/spa/src/types/adapters/CaptchaAdapter.ts

@@ -0,0 +1,34 @@
+/**
+ * Interface for Captcha adapters.
+ */
+
+export interface CaptchaAdapter {
+    /**
+     * Returns the script source URL for the captcha widget.
+     */
+    getScriptSrc(): string;
+
+    /**
+     * Returns the site key for the captcha.
+     */
+    getSiteKey(): string;
+
+    /**
+     * Returns the widget ID for the captcha.
+     */
+    getWidgetId(): string;
+
+    /**
+     * Returns the script HTML for the captcha widget.
+     */
+    getRenderWidgetCode(): string;
+
+    /**
+     * Returns the function name to render the captcha widget.
+     */
+    getRenderWidgetFunctionName(): string;
+    /**
+     * Validates the captcha token.
+     */
+    validate(token: string, ip: string): Promise<Record<string, any>>;
+}

package/dist/spa/src/types/adapters/EmailAdapter.ts

@@ -2,7 +2,7 @@ export interface EmailAdapter {
 
   /**
    * This method is called to validate the configuration of the adapter
-   * and should throw a clear user-readbale error if the configuration is invalid.
+   * and should throw a clear user-readable error if the configuration is invalid.
    */
   validate(): Promise<void>;
 
@@ -24,4 +24,4 @@ export interface EmailAdapter {
     error?: string;
     ok?: boolean;
   }>;
-}
+}

package/dist/spa/src/types/adapters/ImageVisionAdapter.ts

@@ -0,0 +1,30 @@
+export interface ImageVisionAdapter {
+
+  /**
+   * This method is called to validate the configuration of the adapter
+   * and should throw a clear user-readable error if the configuration is invalid.
+   */
+  validate(): void;
+
+  /**
+   * Input file extension supported
+   */
+  inputFileExtensionSupported(): string[];
+
+  /**
+   * This method should generate an image based on the provided prompt and input files.
+   * @param prompt - The prompt to generate the image
+   * @param inputFileUrls - An array of input file paths (optional)
+   * @returns A promise that resolves to an object containing the generated image  and any error message
+   */
+  generate({
+    prompt, 
+    inputFileUrls,
+  }: {
+    prompt: string,
+    inputFileUrls: string[],
+  }): Promise<{
+    response: string;
+    error?: string;
+  }>;
+}

package/dist/spa/src/types/adapters/KeyValueAdapter.ts

@@ -0,0 +1,16 @@
+
+/**
+ * Might have implementations like RAM, Redis, Memcached,
+ * 
+ */
+export interface KeyValueAdapter {
+
+  get(key: string): Promise<string | null>;
+  
+  set(key: string, value: string, expiresInSeconds?: number): Promise<void>;
+
+  delete(key: string): Promise<void>;
+
+}
+
+  

package/dist/spa/src/types/adapters/index.ts

@@ -0,0 +1,8 @@
+export type { EmailAdapter } from './EmailAdapter.js';
+export type { CompletionAdapter } from './CompletionAdapter.js';
+export type { ImageGenerationAdapter } from './ImageGenerationAdapter.js';
+export type { KeyValueAdapter } from './KeyValueAdapter.js';
+export type { ImageVisionAdapter } from './ImageVisionAdapter.js';
+export type { OAuth2Adapter } from './OAuth2Adapter.js';
+export type { StorageAdapter } from './StorageAdapter.js';
+export type { CaptchaAdapter } from './CaptchaAdapter.js';

package/dist/spa/src/utils.ts

@@ -1,24 +1,32 @@
 import { onMounted, ref, resolveComponent } from 'vue';
 import type { CoreConfig } from './spa_types/core';
-import type { ValidationObject } from './types/AdminForthConfig';
+import type { ValidationObject } from './types/Common.js';
 import router from "./router";
 import { useCoreStore } from './stores/core';
 import { useUserStore } from './stores/user';
 import { Dropdown } from 'flowbite';
 import adminforth from './adminforth';
 import sanitizeHtml  from 'sanitize-html'
+import debounce from 'debounce';
+import type { AdminForthResourceColumnInputCommon, Predicate } from '@/types/Common';
+import { i18nInstance } from './i18n'
 
 const LS_LANG_KEY = `afLanguage`;
+const MAX_CONSECUTIVE_EMPTY_RESULTS = 2;
+const ITEMS_PER_PAGE_LIMIT = 100;
 
-export async function callApi({path, method, body=undefined}: {
+export async function callApi({path, method, body, headers}: {
   path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
   body?: any
+  headers?: Record<string, string>
 }): Promise<any> {
+  const t = i18nInstance?.global.t || ((s: string) => s)
   const options = {
     method,
     headers: {
       'Content-Type': 'application/json',
       'accept-language': localStorage.getItem(LS_LANG_KEY) || 'en',
+      ...headers
     },
     body: JSON.stringify(body),
   };
@@ -27,6 +35,7 @@ export async function callApi({path, method, body=undefined}: {
     const r = await fetch(fullPath, options);
     if (r.status == 401 ) {
       useUserStore().unauthorize();
+      useCoreStore().resetAdminUser();
       await router.push({ name: 'login' });
       return null;
     } 
@@ -35,18 +44,18 @@ export async function callApi({path, method, body=undefined}: {
     // if it is internal error, say to user
     if (e instanceof TypeError && e.message === 'Failed to fetch') {
       // this is a network error
-      adminforth.alert({variant:'danger', message: window.i18n?.global?.t('Network error, please check your Internet connection and try again'),})
+      adminforth.alert({variant:'danger', message: t('Network error, please check your Internet connection and try again'),})
       return null;
     }
 
-    adminforth.alert({variant:'danger', message: window.i18n?.global?.t('Something went wrong, please try again later'),})
+    adminforth.alert({variant:'danger', message: t('Something went wrong, please try again later'),})
     console.error(`error in callApi ${path}`, e);
   }
 }
 
 export async function callAdminForthApi({ path, method, body=undefined, headers=undefined }: {
   path: string,
-  method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH',
   body?: any,
   headers?: Record<string, string>
 }): Promise<any> {
@@ -92,13 +101,14 @@ export const loadFile = (file: string) => {
 }
 
 export function checkEmptyValues(value: any, viewType: 'show' | 'list' ) {
-  const config: CoreConfig | {} = useCoreStore().config;
+  const config: CoreConfig | {} | null = useCoreStore().config;
   let emptyFieldPlaceholder = '';
-  if (config.emptyFieldPlaceholder) {
-    if(typeof config.emptyFieldPlaceholder === 'string') {
-      emptyFieldPlaceholder = config.emptyFieldPlaceholder;
+  if (config && 'emptyFieldPlaceholder' in config) {
+    const efp = (config as CoreConfig).emptyFieldPlaceholder;
+    if(typeof efp === 'string') {
+      emptyFieldPlaceholder = efp;
     } else {
-       emptyFieldPlaceholder = config.emptyFieldPlaceholder?.[viewType] || '';
+       emptyFieldPlaceholder = efp?.[viewType] || '';
     }
     if (value === null || value === undefined || value === '') {
       return emptyFieldPlaceholder;
@@ -179,7 +189,7 @@ export function verySimpleHash(str: string): string {
   return `${str.split('').reduce((a, b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)}`;
 }
 
-export function humanifySize(size) {
+export function humanifySize(size: number) {
   if (!size) {
     return '';
   }
@@ -208,4 +218,274 @@ export function protectAgainstXSS(value: string) {
       'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
     } 
   });
+}
+
+export function isPolymorphicColumn(column: any): boolean {
+  return !!(column.foreignResource?.polymorphicResources && column.foreignResource.polymorphicResources.length > 0);
+}
+
+export function handleForeignResourcePagination(
+  column: any,
+  items: any[],
+  emptyResultsCount: number = 0,
+  isSearching: boolean = false
+): { hasMore: boolean; emptyResultsCount: number } {
+  const isPolymorphic = isPolymorphicColumn(column);
+  
+  if (isPolymorphic) {
+    if (isSearching) {
+      return {
+        hasMore: items.length > 0,
+        emptyResultsCount: 0
+      };
+    } else {
+      if (items.length === 0) {
+        const newEmptyCount = emptyResultsCount + 1;
+        return {
+          hasMore: newEmptyCount < MAX_CONSECUTIVE_EMPTY_RESULTS, // Stop loading after 2 consecutive empty results
+          emptyResultsCount: newEmptyCount
+        };
+      } else {
+        return {
+          hasMore: true,
+          emptyResultsCount: 0
+        };
+      }
+    }
+  } else {
+    return {
+      hasMore: items.length === ITEMS_PER_PAGE_LIMIT,
+      emptyResultsCount: 0
+    };
+  }
+}
+
+export async function loadMoreForeignOptions({
+  columnName,
+  searchTerm = '',
+  columns,
+  resourceId,
+  columnOptions,
+  columnLoadingState,
+  columnOffsets,
+  columnEmptyResultsCount
+}: {
+  columnName: string;
+  searchTerm?: string;
+  columns: any[];
+  resourceId: string;
+  columnOptions: any;
+  columnLoadingState: any;
+  columnOffsets: any;
+  columnEmptyResultsCount: any;
+}) {
+  const column = columns?.find(c => c.name === columnName);
+  if (!column || !column.foreignResource) return;
+  
+  const state = columnLoadingState[columnName];
+  if (state.loading || !state.hasMore) return;
+  
+  state.loading = true;
+  
+  try {
+    const list = await callAdminForthApi({
+      method: 'POST',
+      path: `/get_resource_foreign_data`,
+      body: {
+        resourceId,
+        column: columnName,
+        limit: 100,
+        offset: columnOffsets[columnName],
+        search: searchTerm,
+      },
+    });
+    
+    if (!list || !Array.isArray(list.items)) {
+      console.warn(`Unexpected API response for column ${columnName}:`, list);
+      state.hasMore = false;
+      return;
+    }
+    
+    if (!columnOptions.value) {
+      columnOptions.value = {};
+    }
+    if (!columnOptions.value[columnName]) {
+      columnOptions.value[columnName] = [];
+    }
+    columnOptions.value[columnName].push(...list.items);
+    
+    columnOffsets[columnName] += 100;
+    
+    const paginationResult = handleForeignResourcePagination(
+      column,
+      list.items,
+      columnEmptyResultsCount[columnName] || 0,
+      false // not searching
+    );
+    
+    columnEmptyResultsCount[columnName] = paginationResult.emptyResultsCount;
+    state.hasMore = paginationResult.hasMore;
+    
+  } catch (error) {
+    console.error('Error loading more options:', error);
+  } finally {
+    state.loading = false;
+  }
+}
+
+export async function searchForeignOptions({
+  columnName,
+  searchTerm,
+  columns,
+  resourceId,
+  columnOptions,
+  columnLoadingState,
+  columnOffsets,
+  columnEmptyResultsCount
+}: {
+  columnName: string;
+  searchTerm: string;
+  columns: any[];
+  resourceId: string;
+  columnOptions: any;
+  columnLoadingState: any;
+  columnOffsets: any;
+  columnEmptyResultsCount: any;
+}) {
+  const column = columns?.find(c => c.name === columnName);
+
+  if (!column || !column.foreignResource || !column.foreignResource.searchableFields) {
+    return;
+  }
+  
+  const state = columnLoadingState[columnName];
+  if (state.loading) return;
+  
+  state.loading = true;
+  
+  try {
+    const list = await callAdminForthApi({
+      method: 'POST',
+      path: `/get_resource_foreign_data`,
+      body: {
+        resourceId,
+        column: columnName,
+        limit: 100,
+        offset: 0,
+        search: searchTerm,
+      },
+    });
+    
+    if (!list || !Array.isArray(list.items)) {
+      console.warn(`Unexpected API response for column ${columnName}:`, list);
+      state.hasMore = false;
+      return;
+    }
+    
+    if (!columnOptions.value) {
+      columnOptions.value = {};
+    }
+    columnOptions.value[columnName] = list.items;
+    columnOffsets[columnName] = 100;
+    
+    const paginationResult = handleForeignResourcePagination(
+      column,
+      list.items,
+      columnEmptyResultsCount[columnName] || 0,
+      true // is searching
+    );
+    
+    columnEmptyResultsCount[columnName] = paginationResult.emptyResultsCount;
+    state.hasMore = paginationResult.hasMore;
+
+  } catch (error) {
+    console.error('Error searching options:', error);
+  } finally {
+    state.loading = false;
+  }
+}
+
+export function createSearchInputHandlers(
+  columns: any[],
+  searchFunction: (columnName: string, searchTerm: string) => void,
+  getDebounceMs?: (column: any) => number
+) {
+  if (!columns) return {};
+
+  return columns.reduce((acc, c) => {
+    if (c.foreignResource && c.foreignResource.searchableFields) {
+      const debounceMs = getDebounceMs ? getDebounceMs(c) : 300;
+      return {
+        ...acc,
+        [c.name]: debounce((searchTerm: string) => {
+          searchFunction(c.name, searchTerm);
+        }, debounceMs),
+      };
+    }
+    return acc;
+  }, {} as Record<string, (searchTerm: string) => void>);
+}
+
+export function checkShowIf(c: AdminForthResourceColumnInputCommon, record: Record<string, any>) {
+  if (!c.showIf) return true;
+
+  const evaluatePredicate = (predicate: Predicate): boolean => {
+    const results: boolean[] = [];
+
+    if ("$and" in predicate) {
+      results.push(predicate.$and.every(evaluatePredicate));
+    }
+
+    if ("$or" in predicate) {
+      results.push(predicate.$or.some(evaluatePredicate));
+    }
+
+    const fieldEntries = Object.entries(predicate).filter(([key]) => !key.startsWith('$'));
+    if (fieldEntries.length > 0) {
+      const fieldResult = fieldEntries.every(([field, condition]) => {
+        const recordValue = record[field];
+
+        if (condition === undefined) {
+          return true;
+        }
+        if (typeof condition !== "object" || condition === null) {
+          return recordValue === condition;
+        }
+
+        if ("$eq" in condition) return recordValue === condition.$eq;
+        if ("$not" in condition) return recordValue !== condition.$not;
+        if ("$gt" in condition) return recordValue > condition.$gt;
+        if ("$gte" in condition) return recordValue >= condition.$gte;
+        if ("$lt" in condition) return recordValue < condition.$lt;
+        if ("$lte" in condition) return recordValue <= condition.$lte;
+        if ("$in" in condition) return (Array.isArray(condition.$in) && condition.$in.includes(recordValue));
+        if ("$nin" in condition) return (Array.isArray(condition.$nin) && !condition.$nin.includes(recordValue));
+        if ("$includes" in condition)
+          return (
+            Array.isArray(recordValue) &&
+            recordValue.includes(condition.$includes)
+          );
+        if ("$nincludes" in condition)
+          return (
+            Array.isArray(recordValue) &&
+            !recordValue.includes(condition.$nicludes)
+          );
+
+        return true;
+      });
+      results.push(fieldResult);
+    }
+
+    return results.every(result => result);
+  };
+
+  return evaluatePredicate(c.showIf);
+}
+
+export function btoa_function(source: string): string {
+  return btoa(source);
+}
+
+export function atob_function(source: string): string {
+  return atob(source);
 }