adminforth 2.4.0-next.7 → 2.4.0-next.71

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

@@ -1,10 +1,12 @@
 <template>
-    <div class="overflow-x-auto rounded-default shadow-resourseFormShadow dark:shadow-darkResourseFormShadow">
+      <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow"
+        :class="{'rounded-default' : isRounded}"
+      >
         <div v-if="groupName && !noTitle"  class="text-md font-semibold px-6 py-3 flex flex-1 items-center dark:border-gray-600 text-gray-700 bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 rounded-t-lg">
         {{ groupName }}
         </div>
       <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 table-fixed">
-        <thead v-if="!allColumnsHaveCustomComponent"  class="text-gray-700 dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group">
+        <thead v-if="!allColumnsHaveCustomComponent"  class="text-gray-700 dark:text-gray-400 bg-lightFormHeading dark:bg-darkFormHeading dark:border-darkFormBorder block md:table-row-group">
           <tr>
             <th scope="col" class="px-6 py-3 text-xs uppercase hidden md:w-52 md:table-cell">
               {{ $t('Field') }}
@@ -19,7 +21,7 @@
             v-for="column in columns"
             :key="column.name"
             class="bg-lightForm border-t border-gray-100 
-              dark:bg-gray-800 dark:border-gray-700 block md:table-row"
+              dark:bg-darkForm dark:border-darkFormBorder block md:table-row"
           >
             <component
                 v-if="column.components?.showRow"
@@ -60,7 +62,7 @@
   import { getCustomComponent } from '@/utils';
   import { useCoreStore } from '@/stores/core';
   import { computed } from 'vue';
-  const props = defineProps<{ 
+  const props = withDefaults(defineProps<{ 
     columns: Array<{
         name: string;
         label: string;
@@ -80,8 +82,11 @@
     noTitle?: boolean;
     resource: Record<string, any>;
     record: Record<string, any>;
-  }>();
-
+    isRounded?: boolean;
+  }>(), {
+    isRounded: true
+  });
+  
   const coreStore = useCoreStore();
   const allColumnsHaveCustomComponent = computed(() => {
     return props.columns.every(column => {

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

@@ -27,8 +27,8 @@
     </span>
         
     <span v-else-if="column.type === 'boolean'">
-      <span v-if="record[column.name] === true" class="bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
-      <span v-else-if="record[column.name] === false" class="bg-red-100 whitespace-nowrap text-red-800gg text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
+      <span v-if="record[column.name] === true" class="af-true-value-icon bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
+      <span v-else-if="record[column.name] === false" class="af-false-value-icon bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
       <span v-else class="bg-gray-100 whitespace-nowrap text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-400">{{ $t('Unset') }}</span>
     </span>
     <span
@@ -39,13 +39,13 @@
         <span
           v-if="column.isArray.itemType === 'boolean' && arrayItem"
           :key="`${column.name}-${arrayItemIndex}`"
-          class="bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
+          class="af-true-value-icon bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
           {{ $t('Yes') }}
         </span>
         <span
           v-else-if="column.isArray.itemType === 'boolean'"
           :key="`${column.name}-${arrayItemIndex}`"
-          class="bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
+          class="af-false-value-icon bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
           {{ $t('No') }}
         </span>
         <span

package/dist/spa/src/controls/BoolToggle.vue

@@ -0,0 +1,34 @@
+<template>
+        <Toggle 
+        :disabled="readonly" 
+        @update:modelValue="$emit('update:value', $event)"
+        :modelValue="valueFromRecord"
+        >
+        <p>{{text}}</p>
+    </Toggle>
+</template>
+
+<script setup lang="ts">
+import Toggle from '@/afcl/Toggle.vue';
+import type {
+  AdminForthResourceColumnCommon,
+  AdminForthResourceCommon,
+  AdminUser,
+} from "@/types/Common";
+
+    const props = defineProps<{
+        value: boolean,
+        text: string,
+        column: AdminForthResourceColumnCommon,
+        record: any,
+        meta: any,
+        resource: AdminForthResourceCommon,
+        adminUser: AdminUser,
+        readonly: boolean
+    }>();
+    console.log(JSON.stringify(props));
+    console.log("Current mode:", props.meta?.mode)
+    defineEmits(['update:value']);
+    const valueFromRecord = props.record[props.column.name]
+    const editReadOnly = props.column.editReadonly;
+</script>

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

@@ -21,6 +21,7 @@ export type ResourceColumns = {
 
 export type CoreConfig = {
     brandName: string,
+    singleTheme?: 'light' | 'dark',
     brandLogo: string,
     title: string,
     datesFormat: string,
@@ -33,12 +34,18 @@ export type CoreConfig = {
         passwordHashField: string,
         loginBackgroundImage: string,
         loginBackgroundPosition: string,
+        removeBackgroundBlendMode: boolean,
         userFullnameField: string,
     },
     emptyFieldPlaceholder?: {
         show?: string,
         list?: string,
     } | string,
+
+    customHeadItems?: {
+        tagName: string;
+        attributes: { [key: string]: string | boolean };
+    }[],
 }
 
 

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

@@ -118,7 +118,7 @@ export const useCoreStore = defineStore('core', () => {
         item.badge = badge;
       }
     });
-
+    websocket.unsubscribeAll();
     subscribeToMenuBadges();
 
   }

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

@@ -92,16 +92,16 @@ 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;
 }
 
@@ -336,7 +336,7 @@ 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 }
@@ -474,7 +474,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 +525,7 @@ export type BeforeEditSaveFunction = (params: {
   oldRecord: any,
   adminforth: IAdminForth,
   extra?: HttpExtra,
-}) => Promise<{ok: boolean, error?: string}>;
+}) => Promise<{ok: boolean, error?: string | null}>;
 
 
 
@@ -535,7 +535,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, 
@@ -619,6 +619,11 @@ 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
@@ -747,6 +752,7 @@ interface AdminForthInputConfigCustomization {
    */
   loginPageInjections?: {
     underInputs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    panelHeader?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
   }
 
   /**
@@ -758,6 +764,16 @@ interface AdminForthInputConfigCustomization {
     sidebar?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     everyPageBottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
   }
+
+  /**
+  * Allows adding custom elements (e.g., <link>, <script>, <meta>) to the <head> of the HTML document.
+  * Each item must include a tag name and a set of attributes.
+  */
+  customHeadItems?: {
+    tagName: string;
+    attributes: Record<string, string | boolean>;
+  }[];
+
 }
 
 export interface AdminForthActionInput {
@@ -934,6 +950,13 @@ 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
@@ -1054,6 +1077,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
 
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclarationFull>,
+    panelHeader: Array<AdminForthComponentDeclarationFull>,
   },
 
   globalInjections: {
@@ -1062,6 +1086,12 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
     sidebar: Array<AdminForthComponentDeclarationFull>,
     everyPageBottom: Array<AdminForthComponentDeclarationFull>,
   },
+
+  customHeadItems?: {
+    tagName: string;
+    attributes: Record<string, string | boolean>;
+  }[];
+  
 }
 
 export interface AdminForthConfig extends Omit<AdminForthInputConfig, 'customization' | 'resources'> {
@@ -1316,9 +1346,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>,

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

@@ -584,6 +584,8 @@ export interface AdminForthForeignResourceCommon {
   polymorphicResources?: Array<AdminForthPolymorphicForeignResource>,
   polymorphicOn?: string,
   unsetLabel?: string,
+  searchableFields?: string | string[],
+  searchIsCaseSensitive?: boolean,
 }
 
 export type FillOnCreateFunction = (params: {
@@ -1055,15 +1057,18 @@ export interface AdminForthConfigForFrontend {
   usernameFieldName: string,
   loginBackgroundImage: string,
   loginBackgroundPosition: string,
+  removeBackgroundBlendMode: boolean,
   title?: string,
   demoCredentials?: string,
   loginPromptHTML?: string,
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclaration>,
+    panelHeader: Array<AdminForthComponentDeclaration>,
   },
   rememberMeDays: number,
   showBrandNameInSidebar: boolean,
   brandLogo?: string,
+  singleTheme?: 'light' | 'dark',
   datesFormat: string,
   timeFormat: string,
   auth: any,
@@ -1079,7 +1084,11 @@ export interface AdminForthConfigForFrontend {
     header: Array<AdminForthComponentDeclarationFull>,
     sidebar: Array<AdminForthComponentDeclarationFull>,
     everyPageBottom: Array<AdminForthComponentDeclarationFull>,
-  }
+  },
+  customHeadItems?: {
+    tagName: string;
+    attributes: Record<string, string | boolean>;
+  }[],  
 }
 
 export interface GetBaseConfigResponse {

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

@@ -0,0 +1,25 @@
+export interface CompletionAdapter {
+
+  /**
+   * This method is called to validate the configuration of the adapter
+   * and should throw a clear user-readbale error if the configuration is invalid.
+   */
+  validate(): void;
+
+  /**
+   * This method should return a text completion based on the provided content and stop sequence.
+   * @param content - The input text to complete
+   * @param stop - An array of stop sequences to indicate where to stop the completion
+   * @param maxTokens - The maximum number of tokens to generate
+   * @returns A promise that resolves to an object containing the completed text and other metadata
+   */
+  complete(
+    content: string,
+    stop: string[],
+    maxTokens: number,
+  ): Promise<{
+    content?: string;
+    finishReason?: string;
+    error?: string;
+  }>;
+}

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

@@ -0,0 +1,29 @@
+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.
+   */
+  validate(): Promise<void>;
+
+  /**
+   * This method should send an email using the adapter
+   * @param from - The sender's email address
+   * @param to - The recipient's email address
+   * @param text - The plain text version of the email
+   * @param html - The HTML version of the email
+   * @param subject - The subject of the email
+   */
+  sendEmail(
+    from: string,
+    to: string,
+    text: string,
+    html: string,
+    subject: string
+  ): Promise<{
+    error?: string;
+    ok?: boolean;
+  }>;
+}
+
+export { EmailAdapter };

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

@@ -0,0 +1,50 @@
+export interface ImageGenerationAdapter {
+
+  /**
+   * This method is called to validate the configuration of the adapter
+   * and should throw a clear user-readbale error if the configuration is invalid.
+   */
+  validate(): void;
+
+  /**
+   * Return max number of images which model can generate in one request
+   */
+  outputImagesMaxCountSupported(): number;
+
+  /**
+   * Return the list of supported dimensions in format ["100x500", "200x200"]
+   */
+  outputDimensionsSupported(): string[];
+
+  /**
+   * 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 inputFiles - An array of input file paths (optional)
+   * @param n - The number of images to generate (default is 1)
+   * @param size - The size of the generated image (default is the lowest dimension supported)
+   * @returns A promise that resolves to an object containing the generated image URLs and any error message
+   */
+  generate({
+    prompt, 
+    inputFiles,
+    n,
+    size,
+  }: {
+    prompt: string,
+    inputFiles: string[],
+
+    // default = lowest dimension supported 
+    size?: string,
+
+    // one by default
+    n?: number
+  }): Promise<{
+    imageURLs?: string[];
+    error?: string;
+  }>;
+}

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

@@ -0,0 +1,34 @@
+
+/**
+ * This interface is used to implement OAuth2 authentication adapters.
+ */
+export interface OAuth2Adapter {
+  /**
+   * This method should return navigatable URL to the OAuth2 provider authentication page.
+   */
+  getAuthUrl(): string;
+
+  /**
+   * This method should return the token from the OAuth2 provider using the provided code and redirect URI.
+   * @param code - The authorization code received from the OAuth2 provider
+   * @param redirect_uri - The redirect URI used in the authentication request
+   * @returns A promise that resolves to an object containing the email address of the authenticated user
+   */
+  getTokenFromCode(code: string, redirect_uri: string): Promise<{ email: string }>;
+
+  /**
+   * This method should return text (content) of SVG icon which will be used in the UI.
+   * Use official SVG icons with simplest possible conent, omit icons which have base64 encoded raster images inside.
+   */
+  getIcon(): string;
+
+  /**
+   * This method should return the text to be displayed on the button in the UI
+   */
+  getButtonText?(): string;
+
+  /**
+   * This method should return the name of the adapter
+   */
+  getName?(): string;
+}

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

@@ -0,0 +1,73 @@
+
+/**
+ * Each storage adapter should support two ways of storing files:
+ * - publically (public URL) - the file can be accessed by anyone by HTTP GET / HEAD request with plain URL
+ * - privately (presigned URL) - the file can be accessed by anyone by HTTP GET / HEAD request only with presigned URLs, limited by expiration time
+ * 
+ */
+export interface StorageAdapter {
+  /**
+   * This method should return the presigned URL for the given key capable of upload (adapter user will call PUT multipart form data to this URL within expiresIn seconds after link generation).
+   * By default file which will be uploaded on PUT should be marked for deletion. So if during 24h it is not marked for not deletion, it adapter should delete it forever.
+   * The PUT method should fail if the file already exists.
+   * 
+   * Adapter user will always pass next parameters to the method:
+   * @param key - The key of the file to be uploaded e.g. "uploads/file.txt"
+   * @param expiresIn - The expiration time in seconds for the presigned URL
+   * @param contentType - The content type of the file to be uploaded, e.g. "image/png"
+   * 
+   * @returns A promise that resolves to an object containing the upload URL and any extra parameters which should be sent with PUT multipart form data
+   */
+  getUploadSignedUrl(key: string, contentType: string, expiresIn?: number): Promise<{
+    uploadUrl: string;
+    uploadExtraParams?: Record<string, string>;
+  }>;
+
+  /**
+   * This method should return the URL for the given key capable of download (200 GET request with response body or 200 HEAD request without response body).
+   * If adapter configured to store objects publically, this method should return the public URL of the file.
+   * If adapter configured to no allow public storing of images, this method should return the presigned URL for the file.
+   * 
+   * @param key - The key of the file to be downloaded e.g. "uploads/file.txt"
+   * @param expiresIn - The expiration time in seconds for the presigned URL
+   */
+  getDownloadUrl(key: string, expiresIn?: number): Promise<string>;
+
+  /**
+   * This method should mark the file for deletion.
+   * If file is marked for delation and exists more then 24h (since creation date) it should be deleted.
+   * This method should work even if the file does not exist yet (e.g. only presigned URL was generated).
+   * @param key - The key of the file to be uploaded e.g. "uploads/file.txt"
+   */
+  markKeyForDeletation(key: string): Promise<void>;
+
+
+  /**
+   * This method should mark the file to not be deleted.
+   * This method should be used to cancel the deletion of the file if it was marked for deletion.
+   * @param key - The key of the file to be uploaded e.g. "uploads/file.txt"
+   */
+  markKeyForNotDeletation(key: string): Promise<void>;
+
+
+  /**
+   * This method can start needed schedullers, cron jobs, etc. to clean up the storage.
+   * @param adapterUserUniqueRepresentation - The unique representation of the plugin instance which 
+   * wil use this adapter. Might be handy if you need to distinguish between different instances of the same adapter.
+   */
+  setupLifecycle(adapterUserUniqueRepresentation: string): Promise<void>;
+
+  /**
+   * If adapter is configured to publically, this method should return true.
+   */
+  objectCanBeAccesedPublicly(): Promise<boolean>;
+
+  /**
+   * This method should return the key as a data URL (base64 encoded string).
+   * @param key - The key of the file to be converted to a data URL
+   * @returns A promise that resolves to a string containing the data URL
+   */
+  getKeyAsDataURL(key: string): Promise<string>;
+}
+
+  

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

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