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

Author: ivictbor

adminforth/commands/createCustomComponent/configUpdater.js

@@ -47,9 +47,27 @@ async function findResourceFilePath(resourceId) {
 
                     if (n.TSAsExpression.check(declaration) && n.ObjectExpression.check(declaration.expression)) {
                         objectExpressionNode = declaration.expression;
-                    }
-                    else if (n.ObjectExpression.check(declaration)) {
+                    } else if (n.ObjectExpression.check(declaration)) {
                         objectExpressionNode = declaration;
+                    } else if (n.Identifier.check(declaration)) {
+                        const varName = declaration.name;
+                    
+                        recast.visit(ast, {
+                            visitVariableDeclaration(path) {
+                                for (const decl of path.node.declarations) {
+                                    if (
+                                        n.VariableDeclarator.check(decl) &&
+                                        n.Identifier.check(decl.id) &&
+                                        decl.id.name === varName &&
+                                        n.ObjectExpression.check(decl.init)
+                                    ) {
+                                        objectExpressionNode = decl.init;
+                                        return false;
+                                    }
+                                }
+                                this.traverse(path);
+                            }
+                        });
                     }
 
                     if (objectExpressionNode) {
@@ -118,6 +136,25 @@ export async function updateResourceConfig(resourceId, columnName, fieldType, co
                     objectExpressionNode = declaration.expression;
                 } else if (n.ObjectExpression.check(declaration)) {
                     objectExpressionNode = declaration;
+                } else if (n.Identifier.check(declaration)) {
+                    const varName = declaration.name;
+                
+                    recast.visit(ast, {
+                        visitVariableDeclaration(path) {
+                            for (const decl of path.node.declarations) {
+                                if (
+                                    n.VariableDeclarator.check(decl) &&
+                                    n.Identifier.check(decl.id) &&
+                                    decl.id.name === varName &&
+                                    n.ObjectExpression.check(decl.init)
+                                ) {
+                                    objectExpressionNode = decl.init;
+                                    return false;
+                                }
+                            }
+                            this.traverse(path);
+                        }
+                    });
                 }
 
                 if (!objectExpressionNode) {
@@ -446,9 +483,28 @@ export async function updateCrudInjectionConfig(resourceId, crudType, injectionP
           let objectExpressionNode = null;
 
           if (n.TSAsExpression.check(declaration) && n.ObjectExpression.check(declaration.expression)) {
-            objectExpressionNode = declaration.expression;
+              objectExpressionNode = declaration.expression;
           } else if (n.ObjectExpression.check(declaration)) {
-            objectExpressionNode = declaration;
+              objectExpressionNode = declaration;
+          } else if (n.Identifier.check(declaration)) {
+              const varName = declaration.name;
+          
+              recast.visit(ast, {
+                  visitVariableDeclaration(path) {
+                      for (const decl of path.node.declarations) {
+                          if (
+                              n.VariableDeclarator.check(decl) &&
+                              n.Identifier.check(decl.id) &&
+                              decl.id.name === varName &&
+                              n.ObjectExpression.check(decl.init)
+                          ) {
+                              objectExpressionNode = decl.init;
+                              return false;
+                          }
+                      }
+                      this.traverse(path);
+                  }
+              });
           }
 
           if (!objectExpressionNode) {

adminforth/commands/createCustomComponent/main.js

@@ -58,13 +58,26 @@ async function handleFieldComponentCreation(config, resources) {
 
   console.log(chalk.grey(`Selected ❯ 🔤 Custom fields ❯ ${fieldType}`));
 
-  const resourceId = await select({
-      message: 'Select resource for which you want to change component:',
-      choices: [
-          ...resources.map(r => ({ name: `${r.label} ${chalk.grey(`${r.resourceId}`)}`, value: r.resourceId })),
-          new Separator(),
-          { name: '🔙 BACK', value: '__BACK__' },
-      ]
+  const resourceId = await search({
+    message: 'Select resource for which you want to change component:',
+    source: async (input) => {
+      const searchTerm = input ? input.toLowerCase() : '';
+  
+      const filtered = resources.filter(r => {
+        const label = r.label || '';
+        const id = r.resourceId || '';
+        return label.toLowerCase().includes(searchTerm) || id.toLowerCase().includes(searchTerm);
+      });
+  
+      return [
+        ...filtered.map(r => ({
+          name: `${r.label} ${chalk.grey(`${r.resourceId}`)}`,
+          value: r.resourceId,
+        })),
+        new Separator(),
+        { name: '🔙 BACK', value: '__BACK__' },
+      ];
+    }
   });
    if (resourceId === '__BACK__') return handleFieldComponentCreation(config, resources); // Pass config back
 
@@ -144,14 +157,28 @@ async function handleCrudPageInjectionCreation(config, resources) {
 
   console.log(chalk.grey(`Selected ❯ 📄 CRUD Page Injection ❯ ${crudType}`));
 
-  const resourceId = await select({
+  const resourceId = await search({
     message: 'Select resource for which you want to inject the component:',
-    choices: [
-      ...resources.map(r => ({ name: `${r.label} ${chalk.grey(`${r.resourceId}`)}`, value: r.resourceId })),
-      new Separator(),
-      { name: '🔙 BACK', value: '__BACK__' },
-    ],
+    source: async (input) => {
+      const searchTerm = input ? input.toLowerCase() : '';
+  
+      const filtered = resources.filter(r => {
+        const label = r.label || '';
+        const id = r.resourceId || '';
+        return label.toLowerCase().includes(searchTerm) || id.toLowerCase().includes(searchTerm);
+      });
+  
+      return [
+        ...filtered.map(r => ({
+          name: `${r.label} ${chalk.grey(`${r.resourceId}`)}`,
+          value: r.resourceId,
+        })),
+        new Separator(),
+        { name: '🔙 BACK', value: '__BACK__' },
+      ];
+    }
   });
+  
   if (resourceId === '__BACK__') return handleCrudPageInjectionCreation(config, resources);
 
   const selectedResource = resources.find(r => r.resourceId === resourceId);

adminforth/dataConnectors/clickhouse.ts

@@ -207,6 +207,10 @@ class ClickhouseConnector extends AdminForthBaseConnector implements IAdminForth
         const column = resource.dataSourceColumns.find((col) => col.name == field);
         let placeholder = `{f$?:${column._underlineType}}`;
         let operator = this.OperatorsMap[filter.operator];
+        if ((filter.operator == AdminForthFilterOperators.LIKE || filter.operator == AdminForthFilterOperators.ILIKE) && column._underlineType == 'UUID') {
+          placeholder = '{f$?:String}';
+          field = `toString(${field})`;
+        }
         if (filter.operator == AdminForthFilterOperators.IN || filter.operator == AdminForthFilterOperators.NIN) {
           placeholder = `(${filter.value.map((_, j) => `{p$?:${column._underlineType}}`).join(', ')})`;
         } else if (filter.operator == AdminForthFilterOperators.EQ && filter.value === null) {

adminforth/documentation/blog/2024-10-01-ai-blog/index.md

@@ -736,12 +736,12 @@ $grColor5: #695BE9;
     -moz-osx-font-smoothing: grayscale;
     // gradient with color spots
     animation: gradient 15s ease infinite;
-    min-height: 100vh;
+    min-height: 100dvh;
   }
   body {
     margin: 0;
     padding: 0;
-    max-height: 100vh;
+    max-height: 100dvh;
     overflow: overlay;
     background-image: radial-gradient(
   circle farthest-corner at top left, $grColor1 0%, rgba(225, 243, 97,0) 50%),

adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md

@@ -138,7 +138,7 @@ export default {
 
 ### Virtual scroll
 
-Set `options.listVirtualScrollEnabled` to true to enable virtual scrolling in the table
+Set `options.listVirtualScrollEnabled` to true to enable virtual scrolling in the table. The default value is false. Enable this option if you need to display a large number of records on a single page.
 
 ```typescript title="./resources/apartments.ts"
 export default {
@@ -151,6 +151,20 @@ export default {
     }
   ]
 ```
+Additionally, you can configure `options.listBufferSize` to specify the number of rows to buffer for virtual scrolling. The default value is 30 rows.
+
+```typescript title="./resources/apartments.ts"
+export default {
+      resourceId: 'aparts',
+      options: {
+        ...
+        listVirtualScrollEnabled: true,
+//diff-add
+        listBufferSize: 20,
+      }
+    }
+  ]
+```
 
 ### Custom row click action
 

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -861,6 +861,22 @@ Spinner component is used to display a loading state for a component.
   </div>
 </div>
 
+## Country Flag
+
+The Country Flag component displays national flags using ISO 3166-1 alpha-2 country codes.
+
+<div class="split-screen" >
+  <div>
+  ```html
+  <CountryFlag countryCode="ua" />
+  ```
+  </div>
+  <div>
+  ![Country Flag](image-92.png)
+  </div>
+</div>
+
+
 ## Bar Chart
 
 Under the hood AdminForth uses MIT-licensed [ApexCharts](https://apexcharts.com/). It has very rich variety of options, you can pass
@@ -996,6 +1012,7 @@ any of native settings to `options` prop. Here we will only show some basics.
         }
 //diff-add
       }
+//diff-add
     }
   }"
 />
@@ -1453,7 +1470,7 @@ import { PieChart } from '@/afcl'
 //diff-add
           offset: -10, // Moves labels closer to or further from the slices
 //diff-add
-          minAngleToShowLabel: 10, // Ensures that small slices don’t show labels
+          minAngleToShowLabel: 10, // Ensures that small slices don't show labels
 //diff-add
         },
 //diff-add
@@ -1685,7 +1702,3 @@ import { MixedChart } from '@/afcl'
   </div>
 </div>
 
-
-
-
-

adminforth/documentation/docs/tutorial/03-Customization/image-92.png

@@ -144,3 +144,113 @@ To get completion suggestions for the text in the editor, you can use the `compl
 ```
 
 ![alt text](gptDemo.gif)
+
+### Imges in Rich editor
+
+First, you need to create resource for images:
+```prisma title="schema.prisma"
+model description_image {
+    id          String   @id
+    created_at  DateTime
+    resource_id String
+    record_id   String
+    image_path  String
+}
+```
+
+```bash
+npm run makemigration -- --name add_description_image
+```
+
+```bash
+npm i @adminforth/upload --save
+npm i @adminforth/storage-adapter-local --save
+```
+
+```typescript title="./resources/description_image.ts"
+import AdminForthStorageAdapterLocalFilesystem from "../../adapters/adminforth-storage-adapter-local";
+import { AdminForthResourceInput } from "../../adminforth";
+import UploadPlugin from "../../plugins/adminforth-upload";
+import { v1 as uuid } from "uuid";
+
+export default {
+  dataSource: "maindb",
+  table: "description_image",
+  resourceId: "description_images",
+  label: "Description images",
+  columns: [
+    {
+      name: "id",
+      primaryKey: true,
+      required: false,
+      fillOnCreate: ({ initialRecord }: any) => uuid(),
+      showIn: {
+        create: false,
+      },
+    },
+    {
+      name: "created_at",
+      required: false,
+      fillOnCreate: ({ initialRecord }: any) => new Date().toISOString(),
+      showIn: {
+        create: false,
+      },
+    },
+    { name: "resource_id", required: false },
+    { name: "record_id", required: false },
+    { name: "image_path", required: false },
+  ],
+  plugins: [
+    new UploadPlugin({
+      pathColumnName: "image_path",
+      
+      // rich editor plugin supports only 'public-read' ACL images for SEO purposes (instead of presigned URLs which change every time)
+      storageAdapter: new AdminForthStorageAdapterLocalFilesystem({
+        fileSystemFolder: "./db/uploads/description_images", // folder where files will be stored on disk
+        adminServeBaseUrl: "static/source", // the adapter not only stores files, but also serves them for HTTP requests
+        mode: "public", // public if all files should be accessible from the web, private only if could be accesed by temporary presigned links
+        signingSecret: process.env.ADMINFORTH_SECRET, // secret used to generate presigned URLs
+      }),
+  
+      allowedFileExtensions: [
+        "jpg",
+        "jpeg",
+        "png",
+        "gif",
+        "webm",
+        "exe",
+        "webp",
+      ],
+      maxFileSize: 1024 * 1024 * 20, // 5MB
+
+
+      filePath: ({ originalFilename, originalExtension, contentType }) =>
+        `description_images/${new Date().getFullYear()}/${uuid()}/${originalFilename}.${originalExtension}`,
+
+      preview: {
+        // Used to display preview (if it is image) in list and show views instead of just path
+        // previewUrl: ({s3Path}) => `https://tmpbucket-adminforth.s3.eu-central-1.amazonaws.com/${s3Path}`,
+        // show image preview instead of path in list view
+        // showInList: false,
+      },
+    }),
+  ],
+} as AdminForthResourceInput;
+```
+
+Next, add attachments to RichEditor plugin:
+
+```typescript title="./resources/apartments.ts"
+import RichEditorPlugin from '@adminforth/rich-editor';
+
+// ... existing resource configuration ...
+
+new RichEditorPlugin({
+  htmlFieldName: 'description',
+  attachments: {
+    attachmentResource: "description_images",
+    attachmentFieldName: "image_path",
+    attachmentRecordIdFieldName: "record_id",
+    attachmentResourceIdFieldName: "resource_id",
+  }
+})