Merge branch 'next' of github.com:devforth/adminforth into feature/AdminForth/1194/i-added-logger-to-root-level-a

Author: yaroslav8765

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

@@ -40,7 +40,7 @@
   "devDependencies": {
     "typescript": "5.4.5",
     "tsx": "4.11.2",
-    "@types/express": "latest",
+    "@types/express": "^4.17.21",
     "@types/node": "latest",
     "@prisma/client": "latest",
     "prisma": "^7.0.0"

adminforth/documentation/docs/tutorial/001-gettingStarted.md

@@ -40,7 +40,7 @@ cd myadmin # or any other name you provided
 CLI options:
 
 * **`--app-name`** - name for your project. Used in `package.json`, `index.ts` branding, etc. Default value: **`adminforth-app`**.
-* **`--db`** - database connection string. Currently PostgreSQL, MongoDB, SQLite, MySQL, Clickhouse are supported. Default value: **`sqlite://.db.sqlite`**
+* **`--db`** - database connection string. Currently PostgreSQL, MongoDB, SQLite, MySQL, Clickhouse and Qdrant (read only) are supported. Default value: **`sqlite://.db.sqlite`**
 
 > ☝️ Database Connection String format:
 >
@@ -51,6 +51,7 @@ CLI options:
 > - MongoDB — `mongodb://localhost:27017/dbname`
 > - Clickhouse — `clickhouse://localhost:8123/dbname`
 > - MySQL — `mysql://user:password@localhost:3306/dbname`
+> - Qdrant - `qdrant://localhost:6333`
 
 ### Understand the generated Project Structure
 

adminforth/documentation/docs/tutorial/03-Customization/09-Actions.md

@@ -35,6 +35,7 @@ Here's how to add a custom action:
           listThreeDotsMenu: true, // Show in three dots menu in list view
           showButton: true,        // Show as a button
           showThreeDotsMenu: true, // Show in three-dots menu
+          bulkButton: true
         }
       }
     ]

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

@@ -1237,6 +1237,43 @@ If you want to make table header or pagination, you can add `makeHeaderSticky`,
   ></Table>
 ```
 
+### Don't block pagination on loading
+
+Sometimes you might want to allow user switch between pages, even if old request wasn't finished. For these porpuses you can use `blockPaginationOnLoading` and `abortSignal` in data callback:
+```ts
+<Table
+  :columns="[
+    { label: 'Name', fieldName: 'name' },
+    { label: 'Age', fieldName: 'age' },
+    { label: 'Country', fieldName: 'country' },
+  ]"
+  :data="loadPageData"
+  //diff-add
+  :blockPaginationOnLoading="false"
+  :pageSize="3"> 
+</Table>
+
+
+...
+
+async function loadPageData(data, abortSignal) {  
+  const { offset, limit } = data;
+  // in real app do await callAdminForthApi or await fetch to get date, use offset and limit value to slice data
+  await new Promise(resolve => setTimeout(resolve, offset === 500)) // simulate network delay
+  if (abortSignal.abort) return; // since result won't be displayed, we stop computing
+  
+  return {
+    data: [
+      { name: 'John', age: offset, country: 'US' },
+      { name: 'Rick', age: offset+1, country: 'CA' },
+      { name: 'Alice', age: offset+2, country: 'BR' },
+    ],
+    total: 30 // should return total amount of records in database
+  }
+}
+
+```
+
 ## ProgressBar
 
 <div class="split-screen" >
@@ -2380,6 +2417,8 @@ import { Modal, Button } from '@/afcl';
   askForCloseConfirmation?: boolean // Show extra popup to confirm close ( to avoid close by accident)
   closeConfirmationText?: string // Text that will be shown on close confirmation popup
   removeFromDomOnClose?: boolean // Remove modal from DOM on close ( default is false )
+  backgroundCustomClasses?: string // allows to add custom classes to the gray background of modal (e.g. you can have bg-pink-500/60)
+  modalCustomClasses?: string // allows to add custom classes to modal popup
 ```
 
 ## Date picker