Merge branch 'next' of github.com:devforth/adminforth into next

Author: ivictbor

adminforth/commands/createPlugin/templates/package.json.hbs

@@ -16,6 +16,6 @@
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "adminforth": "latest",
+    "adminforth": "latest"
   }
 }

adminforth/documentation/docs/tutorial/05-Plugins/05-upload.md

@@ -1,5 +1,3 @@
-
-
 # Upload
 
 This plugin allows you to upload files to Amazon S3 bucket.
@@ -305,7 +303,7 @@ new UploadPlugin({
 });
 ```
 
-### Max-width for preview image
+### Preview Image Size Configuration
 
 You can set the maximum width for the preview image in the `./resources/apartments.ts` file by adding the `maxWidth` property to the `preview` configuration:
 
@@ -322,8 +320,18 @@ You can set the maximum width for the preview image in the `./resources/apartmen
     s3Path: ({originalFilename, originalExtension, contentType}) => 
       `aparts/${new Date().getFullYear()}/${uuid()}-${originalFilename}.${originalExtension}`,
     preview: {
-      //diff-add
-      maxWidth: '200px', // Set the maximum width for the preview image
+      // Global width settings (applies to all views if specific view settings not provided)
+      maxWidth: '200px',  // Maximum width for preview images
+      minWidth: '200px',  // Minimum width for preview images
+
+      // List view specific settings
+      maxListWidth: '300px',  // Maximum width in list view
+      minListWidth: '100px',  // Minimum width in list view
+
+      // Show/detail view specific settings
+      maxShowWidth: '200px',  // Maximum width in show view
+      minShowWidth: '200px',  // Minimum width in show view
+    
       ...
     }
 

adminforth/documentation/docs/tutorial/06-Advanced/01-plugin-development.md

@@ -21,112 +21,28 @@ Let's create plugin which auto-completes text in strings
 ```bash
 mkdir -p af-plugin-chatgpt
 cd af-plugin-chatgpt
-npm init -y
-touch index.ts
-npm i typescript @types/node -D
-```
-
-Edit `package.json`:
-
-```json title='./af-plugin-chatgpt/package.json'
-{
-  ...
-//diff-remove
-  "main": "index.js",
-//diff-add
-  "main": "dist/index.js",
-//diff-add
-  "types": "dist/index.d.ts",
-//diff-add
-  "type": "module",
-  "scripts": {
-//diff-remove
-    "test": "echo \"Error: no test specified\" && exit 1",
-//diff-add
-    "build": "tsc && rsync -av --exclude 'node_modules' custom dist/ && npm version patch"
-  },
-}
-```
-
-
-Install AdminForth for types and classes imports:
-
-```bash
-npm i adminforth --save
-```
-
-Now create plugin boilerplate in `index.ts`:
-
-```ts title='./af-plugin-chatgpt/index.ts'
-
-import { AdminForthPlugin } from "adminforth";
-import type { IAdminForth, IHttpServer, AdminForthResourcePages, AdminForthResourceColumn, AdminForthDataTypes, AdminForthResource } from "adminforth";
-import type { PluginOptions } from './types.js';
-
-
-export default class ChatGptPlugin extends AdminForthPlugin {
-  options: PluginOptions;
-
-  constructor(options: PluginOptions) {
-    super(options, import.meta.url);
-    this.options = options;
-  }
-
-  async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
-    super.modifyResourceConfig(adminforth, resourceConfig);
-  
-    // simply modify resourceConfig or adminforth.config. You can get access to plugin options via this.options;
-  }
-  
-  validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
-    // optional method where you can safely check field types after database discovery was performed
-  }
-
-  instanceUniqueRepresentation(pluginOptions: any) : string {
-    // optional method to return unique string representation of plugin instance. 
-    // Needed if plugin can have multiple instances on one resource 
-    return `single`;
-  }
-
-  setupEndpoints(server: IHttpServer) {
-    server.endpoint({
-      method: 'POST',
-      path: `/plugin/${this.pluginInstanceId}/example`,
-      handler: async ({ body }) => {
-        const { name } = body;
-        return { hey: `Hello ${name}` };
-      }
-    });
-  }
-
-}
+npx adminforth create-plugin
 ```
 
-Create `types.ts` file:
+CLI options:
 
-```ts title='./af-plugin-chatgpt/types.ts'
-
-export interface PluginOptions {
-  
-}
-```
+* **`--plugin-name`** - name for your plugin.
 
+This command will:
+1. Set up the TypeScript configuration
+2. Create initial plugin files
+3. Install required dependencies
 
-Create `./af-plugin-chatgpt/tsconfig.json` file:
+The CLI will create the following files and directories:
 
-```json title='./af-plugin-chatgpt/tsconfig.json'
-{
-  "compilerOptions": {
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include*/ 
-    "module": "node16",                                /* Specify what module code is generated. */
-    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules.  */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
-    "strict": false,                                     /* Enable all strict type-checking options. */
-    "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
-  },
-  "exclude": ["node_modules", "dist", "custom"],           /* Exclude files from compilation. */
-}
+```text
+af-plugin-chatgpt/
+├── custom
+│   └── tsconfig.json     # TypeScript configuration for custom components
+├── index.ts              # Main plugin file with boilerplate code
+├── package.json          # Plugin package configuration
+├── tsconfig.json         # TypeScript configuration
+└── types.ts              # TypeScript types for your plugin
 
 ```
 
@@ -204,37 +120,6 @@ export interface PluginOptions {
 }
 ```
 
-Now we have to create custom Vue component which will be used in plugin. To do it create custom folder:
-
-```bash
-mkdir -p af-plugin-chatgpt/custom
-```
-
-Also create `tsconfig.ts` file so your IDE will be able to resolve adminforth spa imports: 
-
-```json title='./af-plugin-chatgpt/custom/tsconfig.json'
-{
-  "compilerOptions": {
-    "baseUrl": ".", // This should point to your project root
-    "paths": {
-      "@/*": [
-        // "node_modules/adminforth/dist/spa/src/*"
-        "../../../spa/src/*"
-      ],
-      "*": [
-        // "node_modules/adminforth/dist/spa/node_modules/*"
-        "../../../spa/node_modules/*"
-      ],
-      "@@/*": [
-        // "node_modules/adminforth/dist/spa/src/*"
-        "."
-      ]
-    }
-  }
-}
-```
-
-
 We will use `vue-suggestion-input` package in our frontend component. 
 To install package into frontend component, first of all we have to initialize npm package in custom folder:
 
@@ -535,7 +420,7 @@ Finally, since we want to support multiple installations on one resource (e.g. o
 ```
 
 
-Ro compile plugin run:
+To compile plugin run:
 
 ```bash
 npm run build

adminforth/modules/configValidator.ts

@@ -330,23 +330,38 @@ export default class ConfigValidator implements IConfigValidator {
     return showInTransformedToObject as ShowIn;
   }
 
-  validateFieldGroups(fieldGroups: {
-    groupName: string;
-    columns: string[];
-  }[], resourceColumns: string[]): void {
-    if (!fieldGroups) return;
+  validateFieldGroups(fieldGroups: { groupName: string; columns: string[] }[], allColumnsList: string[]): string[] {
+    if (!fieldGroups) return allColumnsList;
+
+    const columnPositions = new Map<string, number>();
+    let position = 0;
 
     fieldGroups.forEach((group) => {
       group.columns.forEach((col) => {
-        if (!resourceColumns.includes(col)) {
-          const similar = suggestIfTypo(resourceColumns, col);
+        if (!allColumnsList.includes(col)) {
+          const similar = suggestIfTypo(allColumnsList, col);
           throw new Error(
-            `Group '${group.groupName}' has an unknown column '${col}'. ${similar ? `Did you mean '${similar}'?` : ''
+            `Group '${group.groupName}' has an unknown column '${col}'. ${
+              similar ? `Did you mean '${similar}'?` : ''
             }`
           );
         }
+        if (!columnPositions.has(col)) {
+          columnPositions.set(col, position++);
+        }
       });
     });
+
+    allColumnsList.forEach((col) => {
+      if (!columnPositions.has(col)) {
+        columnPositions.set(col, position++);
+      }
+    });
+    return allColumnsList.sort((a, b) => {
+      const posA = columnPositions.get(a);
+      const posB = columnPositions.get(b);
+      return posA - posB;
+    });
   }
 
   validateAndNormalizeCustomActions(resInput: AdminForthResourceInput, res: Partial<AdminForthResource>, errors: string[]): any[] {
@@ -500,8 +515,8 @@ export default class ConfigValidator implements IConfigValidator {
             if (col.masked) {
               errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray cannot be used for a masked column`);
             }
-            if (col.foreignResource) {
-              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray cannot be used for a foreignResource column`);
+            if (col.foreignResource && col.foreignResource.polymorphicResources) {
+              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray cannot be used for a polymorphic foreignResource column`);
             }
 
             if (!col.type || col.type !== AdminForthDataTypes.JSON) {
@@ -703,10 +718,11 @@ export default class ConfigValidator implements IConfigValidator {
       options.actions = this.validateAndNormalizeCustomActions(resInput, res, errors);
 
       const allColumnsList = res.columns.map((col) => col.name);
-      this.validateFieldGroups(options.fieldGroups, allColumnsList);
-      this.validateFieldGroups(options.showFieldGroups, allColumnsList);
-      this.validateFieldGroups(options.createFieldGroups, allColumnsList);
-      this.validateFieldGroups(options.editFieldGroups, allColumnsList);
+      const sortedColumns = this.validateFieldGroups(options.fieldGroups, allColumnsList);
+
+      res.columns = res.columns.sort((a, b) => {
+        return sortedColumns.indexOf(a.name) - sortedColumns.indexOf(b.name);
+      });
 
       // if pageInjection is a string, make array with one element. Also check file exists
       const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'customActionIcons'];

adminforth/modules/restApi.ts

@@ -675,13 +675,22 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
               const targetResource = this.adminforth.config.resources.find((res) => res.resourceId == col.foreignResource.resourceId);
               const targetConnector = this.adminforth.connectors[targetResource.dataSource];
               const targetResourcePkField = targetResource.columns.find((col) => col.primaryKey).name;
-              const pksUnique = [...new Set(data.data.map((item) => item[col.name]))];
+              const pksUnique = [...new Set(data.data.reduce((pks, item) => {
+                if (col.isArray?.enabled) {
+                  if (item[col.name]?.length) {
+                    pks = pks.concat(item[col.name]);
+                  }
+                } else {
+                  pks.push(item[col.name]);
+                }
+                return pks;
+              }, []))];
               if (pksUnique.length === 0) {
                 return;
               }
               const targetData = await targetConnector.getData({
                 resource: targetResource,
-                limit: limit,
+                limit: pksUnique.length,
                 offset: 0,
                 filters: [
                   {
@@ -755,7 +764,13 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
             }
 
             data.data.forEach((item) => {
-              item[col.name] = targetDataMap[item[col.name]];
+              if (col.isArray?.enabled) {
+                if (item[col.name]?.length) {
+                  item[col.name] = item[col.name].map((i) => targetDataMap[i]);
+                }
+              } else {
+                item[col.name] = targetDataMap[item[col.name]];
+              }
 
               if (!item[col.name]) {
                 if (col.foreignResource && col.foreignResource.polymorphicResources) {
@@ -1131,6 +1146,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
               return { error };
             }
             return {
+              recordId: record.id,
               ok: true
             }
         }

adminforth/spa/src/components/ValueRenderer.vue

@@ -1,7 +1,23 @@
 <template>
   <div>
-    <span @click="(e)=>{e.stopPropagation()}" v-if="column.foreignResource">
-      <RouterLink v-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110 whitespace-nowrap"
+    <span
+      v-if="column.foreignResource"
+      :class="{'flex flex-wrap': column.isArray?.enabled}"
+      @click="(e)=>{e.stopPropagation()}"
+    >
+      <span
+        v-if="record[column.name] && column.isArray?.enabled"
+        v-for="foreignResource in record[column.name]"
+        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
+          class="font-medium text-lightSidebarText dark:text-darkSidebarText hover:brightness-110 whitespace-nowrap"
+          :to="{ name: 'resource-show', params: { primaryKey: foreignResource.pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }"
+        >
+          {{ foreignResource.label }}
+        </RouterLink>
+      </span>
+      <RouterLink v-else-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110 whitespace-nowrap"
         :to="{ name: 'resource-show', params: { primaryKey: record[column.name].pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }">
         {{ record[column.name].label }}
       </RouterLink>

adminforth/spa/src/views/EditView.vue

@@ -172,7 +172,7 @@ async function saveRecord() {
     });
   }
   saving.value = false;
-  router.push({ name: 'resource-show', params: { resourceId: route.params.resourceId, primaryKey: coreStore.record[coreStore.primaryKey] } });
+  router.push({ name: 'resource-show', params: { resourceId: route.params.resourceId, primaryKey: resp.recordId } });
 }
 
 </script>

dev-demo/resources/apartments.ts

@@ -223,9 +223,16 @@ export default {
     {
       name: "room_sizes",
       type: AdminForthDataTypes.JSON,
+      // isArray: {
+      //   enabled: true,
+      //   itemType: AdminForthDataTypes.FLOAT,
+      // },
       isArray: {
         enabled: true,
-        itemType: AdminForthDataTypes.FLOAT,
+        itemType: AdminForthDataTypes.STRING,
+      },
+      foreignResource: {
+        resourceId: "users",
       },
     },
     {