Merge branch 'next' into rememberMeDuration

Author: SerVitasik

adminforth/commands/createResource/templates/resource.ts.hbs

@@ -14,6 +14,9 @@ export default {
       components: {
         list: "@/renderers/CompactUUID.vue",
       }{{/if}},
+      showIn: {
+        all:true,
+      }
     }{{#unless @last}},{{/unless}}
     {{/each}}
   ],

adminforth/dataConnectors/postgres.ts

@@ -400,6 +400,8 @@ class PostgresConnector extends AdminForthBaseConnector implements IAdminForthDa
         }
         const primaryKey = this.getPrimaryKey(resource);
         const q = `INSERT INTO "${tableName}" (${columns.join(', ')}) VALUES (${placeholders}) RETURNING "${primaryKey}"`;
+    //   console.log('\n🔵 [PG INSERT]:', q);
+    //   console.log('📦 [VALUES]:', JSON.stringify(values, null, 2));
         if (process.env.HEAVY_DEBUG_QUERY) {
             console.log('🪲📜 PG Q:', q, 'values:', values);
         }

adminforth/dataConnectors/sqlite.ts

@@ -143,6 +143,12 @@ class SQLiteConnector extends AdminForthBaseConnector implements IAdminForthData
         } else {
           return value;
         }
+              }
+      else if (field.isArray?.enabled) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        return JSON.stringify(value);
       } else if (field.type == AdminForthDataTypes.BOOLEAN) {
         return value === null ? null : (value ? 1 : 0);
       } else if (field.type == AdminForthDataTypes.JSON) {
@@ -322,7 +328,14 @@ class SQLiteConnector extends AdminForthBaseConnector implements IAdminForthData
       const columns = Object.keys(record);
       const placeholders = columns.map(() => '?').join(', ');
       const values = columns.map((colName) => record[colName]);
-      const q = this.client.prepare(`INSERT INTO ${tableName} (${columns.join(', ')}) VALUES (${placeholders})`);
+      // const q = this.client.prepare(`INSERT INTO ${tableName} (${columns.join(', ')}) VALUES (${placeholders})`);
+      const sql = `INSERT INTO ${tableName} (${columns.join(', ')}) VALUES (${placeholders})`;
+      //console.log('\n🟢 [SQLITE INSERT]:', sql);
+      //console.log('📦 [VALUES]:', JSON.stringify(values, null, 2));
+      const q = this.client.prepare(sql);
+      if (process.env.HEAVY_DEBUG_QUERY) {
+            console.log('🪲📜 SQL Q:', q, 'values:', values);
+        }
       const ret = await q.run(values);
       return ret.lastInsertRowid;
     }

adminforth/documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -396,6 +396,79 @@ cd custom
 npm i @iconify-prerendered/vue-mdi
 ```
 
+## List table row replace injection
+
+`tableRowReplace` lets you fully control how each list table row is rendered. Instead of the default table `<tr>…</tr>` markup, AdminForth will mount your Vue component per record and use its returned DOM to display the row. Use this when you need custom row layouts, extra controls, or conditional styling that goes beyond column-level customization.
+
+Supported forms:
+- Single component: `pageInjections.list.tableRowReplace = '@@/MyRowRenderer.vue'`
+- Object form with meta: `pageInjections.list.tableRowReplace = { file: '@@/MyRowRenderer.vue', meta: { /* optional */ } }`
+- If an array is provided, the first element is used.
+
+Example configuration:
+
+```ts title="/resources/apartments.ts"
+{
+  resourceId: 'aparts',
+  ...
+  options: {
+    pageInjections: {
+      list: {
+        tableRowReplace: {
+          file: '@@/ApartRowRenderer.vue',
+          meta: {
+            // You can pass any meta your component may read
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+Minimal component example (decorate default row with a border):
+
+```vue title="/custom/ApartRowRenderer.vue"
+<template>
+  <tr class="border border-gray-200 dark:border-gray-700 rounded-sm">
+    <slot />
+  </tr>
+  
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+const props = defineProps<{
+  record: any
+  resource: any
+  meta: any
+  adminUser: any
+}>();
+</script>
+```
+
+Component contract:
+- Inputs
+  - `record`: the current record object
+  - `resource`: the resource config object
+  - `meta`: the meta object passed in the injection config
+- Slots
+  - Default slot: the table’s standard row content (cells) will be projected here. Your component can wrap or style it.
+- Output
+  - Render a full `<tr>…</tr>` fragment. For example, to replace the standard set of cells with a single full‑width cell, render:
+
+```vue
+<tr>
+  <td :colspan="columnsCount">
+    <slot />
+  </td>
+</tr>
+```
+
+Notes and tips:
+- Requirements:
+  - Required `<tr></tr>` structure around `<slot />`
+
 ## List table beforeActionButtons
 
 `beforeActionButtons` allows injecting one or more compact components into the header bar of the list page, directly to the left of the default action buttons (`Create`, `Filter`, bulk actions, three‑dots menu). Use it for small inputs (quick search, toggle, status chip) rather than large panels.

adminforth/documentation/docs/tutorial/03-Customization/10-menuConfiguration.md

@@ -1,4 +1,4 @@
-# Menu Configuration
+# Menu & Header
 
 
 ## Icons
@@ -253,3 +253,26 @@ import adminforth from '@/adminforth';
 adminforth.menu.refreshMenuBadges()
 ```
 
+## Avatars
+
+If you want your user to have custom avatar you can use avatarUrl:
+
+```ts title='./index.ts'
+
+auth: {
+
+  ...
+
+  avatarUrl: async (adminUser)=> { 
+    return `https://${process.env.STORAGE_PROVIDER_PATH}/${adminUser.dbUser.avatar_path}`
+  },
+
+  ...
+
+}
+
+```
+
+This syntax can be use to get unique avatar for each user of hardcode avatar, but it makes more sense to use it with [upload plugin](https://adminforth.dev/docs/tutorial/Plugins/upload/#using-plugin-for-uploading-avatar)
+
+

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

@@ -759,6 +759,26 @@ function onBeforeClose() {
 }
 ```
 
+### Ask for extra confirmation before close
+
+If you want dialog to ask user for conformation when he tryes to close dialog, you can add: 
+
+```ts
+<Dialog 
+  ref="confirmDialog" 
+  class="w-96"
+  //diff-add
+  :closable="false"
+  //diff-add
+  :askForCloseConfirmation="true"
+  //diff-add
+  closeConfirmationText='Are you sure you want to close this dialog?',
+>
+  <div class="space-y-4">
+    The dialog content goes here.
+  </div>
+</Dialog>
+```
 
 ## Dropzone
 

adminforth/documentation/docs/tutorial/07-Plugins/04-RichEditor.md

@@ -221,18 +221,13 @@ export default {
         "exe",
         "webp",
       ],
-      maxFileSize: 1024 * 1024 * 20, // 5MB
+      maxFileSize: 1024 * 1024 * 20, // 20MB
 
 
       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;

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

@@ -31,7 +31,8 @@ Leave all settings unchanged (ACL Disabled, Block all public access - checked)
         ],
         "AllowedMethods": [
             "HEAD",
-            "PUT"
+            "PUT",
+            "GET"
         ],
         "AllowedOrigins": [
             "http://localhost:3500"
@@ -507,4 +508,155 @@ You can set the maximum width for the preview image in the `./resources/apartmen
   ...
 
 });
-```
+```
+
+## Using plugin for uploading avatar
+
+Let's say, that you want to use upload plugin for uploading avatar for each user.
+To do this add avatar column to the user resource:
+
+
+```ts title="./schema.prisma"
+  model adminuser {
+    id            String     @id
+    email         String     @unique
+    password_hash String
+    role          String
+    created_at    DateTime
+    //diff-add
+    avatar        ?String
+  }
+```
+
+Then make migration:
+
+```bash
+  npm run makemigration -- --name add-user-avatar-field ; npm run migrate:local
+```
+
+Add this column to the users resource:
+
+```ts title="./resources/adminuser.ts"
+
+...
+
+columns: [
+  
+  ...
+
+  //diff-add
+  {
+    //diff-add
+    name: "avatar",
+    //diff-add
+    type: AdminForthDataTypes.STRING,
+    //diff-add
+    showIn: ["show", "edit", "create" ],
+    //diff-add
+  },
+
+  ...
+
+]
+
+...
+
+plugins: [
+
+  ...
+
+  //diff-add
+  new UploadPlugin({
+      //diff-add
+    pathColumnName: "avatar",
+      //diff-add
+    storageAdapter: new AdminForthAdapterS3Storage({
+      //diff-add
+      bucket: process.env.AWS_BUCKET_NAME,
+      //diff-add
+      region: process.env.AWS_REGION,
+      //diff-add
+      accessKeyId: process.env.AWS_ACCESS_KEY_ID as string,
+      //diff-add
+      secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY as string,
+      //diff-add
+    }),
+    //diff-add
+    allowedFileExtensions: [
+      //diff-add
+      "jpg",
+      //diff-add
+      "jpeg",
+      //diff-add
+      "png",
+      //diff-add
+      "gif",
+      //diff-add
+      "webm",
+      //diff-add
+      "exe",
+      //diff-add
+      "webp",
+      //diff-add
+    ],
+    //diff-add
+    maxFileSize: 1024 * 1024 * 20, // 20MB
+    //diff-add
+    filePath: ({ originalFilename, originalExtension, contentType, record }) => {
+      //diff-add
+      return `aparts/${new Date().getFullYear()}/${originalFilename}.${originalExtension}`
+      //diff-add
+    },
+    //diff-add
+    preview: {
+      //diff-add
+      maxWidth: "200px",
+      //diff-add
+    },
+    //diff-add
+  }),
+
+  ...
+
+]
+
+```
+
+And finally add this callback:
+
+```ts title="./index.ts"
+
+  auth: {
+
+    ...
+    //diff-add
+    avatarUrl: async (adminUser)=>{
+      //diff-add
+      const plugin = admin.getPluginsByClassName('UploadPlugin').find(p => p.pluginOptions.pathColumnName === 'avatar') as any; 
+      //diff-add
+      if (!plugin) {
+        //diff-add
+        throw new Error('Upload plugin for avatar not found');
+        //diff-add
+      }
+      //diff-add
+      if (adminUser.dbUser.avatar === null || adminUser.dbUser.avatar === undefined || adminUser.dbUser.avatar === '') {
+        //diff-add
+        return '';
+        //diff-add
+      }
+      //diff-add
+      const imageUrl = await plugin.getFileDownloadUrl(adminUser.dbUser.avatar || '', 3600);
+      //diff-add
+      return imageUrl;
+      //diff-add
+    },
+
+
+    ...
+
+  }
+
+```
+
+And now you can easily update avatar for each user