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

Author: ivictbor

adminforth/commands/createApp/templates/index.ts.hbs

@@ -30,7 +30,8 @@ export const admin = new AdminForth({
     brandLogo: '@@/assets/logo.svg',
     datesFormat: 'DD MMM',
     timeFormat: 'HH:mm a',
-    showBrandNameInSidebar: true,
+  showBrandNameInSidebar: true,
+  showBrandLogoInSidebar: true,
     emptyFieldPlaceholder: '-',
     styles: {
       colors: {

adminforth/documentation/docs/tutorial/03-Customization/01-branding.md

@@ -54,6 +54,18 @@ showBrandNameInSidebar: false,
 
 `brandName` will still be used in the other places e.g. login form.
 
+## Removing brand logo from sidebar
+
+If you want to hide the logo image in the sidebar while keeping the brand name text (or vice versa), disable the logo with:
+
+```ts title='./index.ts'
+brandName: 'My App',
+//diff-add
+showBrandLogoInSidebar: false,
+```
+
+By default, the logo is shown when available. This flag controls the sidebar logo only and does not affect the login page.
+
 ## Theming
 
 AdminForth uses TailwindCSS for styling. You are able to customize the look of the application by changing the TailwindCSS configuration.

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

@@ -426,6 +426,7 @@ Also there are:
 
 * `config.customization.globalInjections.header`
 * `config.customization.globalInjections.sidebar`
+* `config.customization.globalInjections.sidebarTop` — renders inline at the very top of the sidebar, on the same row with the logo/brand name. If the logo is hidden via `showBrandLogoInSidebar: false`, this area expands to the whole row width.
 * `config.customization.globalInjections.everyPageBottom`
 
 Unlike `userMenu`, `header` and `sidebar` injections, `everyPageBottom` will be added to the bottom of every page even when user is not logged in.
@@ -469,4 +470,23 @@ onMounted(() => {
   });
 });
 </script>
-```
+```
+
+## Sidebar Top Injection
+
+You can place compact controls on the very top line of the sidebar, next to the logo/brand name:
+
+```ts title="/index.ts"
+new AdminForth({
+  ...
+  customization: {
+    globalInjections: {
+      sidebarTop: [
+        '@@/QuickSwitch.vue',
+      ],
+    }
+  }
+})
+```
+
+If you hide the logo with `showBrandLogoInSidebar: false`, components injected via `sidebarTop` will take the whole line width.

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

@@ -797,7 +797,7 @@ const isoFlagToEmoji = (iso) => iso.toUpperCase().replace(/./g, char => String.f
 
 
 
-## Pagination
+### Pagination
 
 Table provides front-end side pagination. You can set `pageSize` (default is 10) to set how many rows to show per page.
 If there is less then `pageSize` rows, pagination will not be shown.
@@ -829,6 +829,36 @@ If there is less then `pageSize` rows, pagination will not be shown.
   </div>
 </div>
 
+### Server-side pagination
+
+To load pages dynamically, simply pass async callback to data:
+
+```ts
+async function loadPageData(offset, limit) {  
+    // in real app do await callAdminForthApi or await fetch to get date, use offset and limit value to slice data
+  return {
+    data: [
+      { name: 'John', age: offset, country: 'US' },
+      { name: 'Rick', age: offset+1, country: 'CA' },
+      { name: 'Alice', age: offset+2, country: 'BR' },
+    ],
+    total: 3 // should return total amount of records in database
+  }
+}
+
+<Table
+  :columns="[
+    { label: 'Name', fieldName: 'name' },
+    { label: 'Age', fieldName: 'age' },
+    { label: 'Country', fieldName: 'country' },
+  ]"
+//diff-remove
+  :data="[...] 
+//diff-add
+  :data="loadPageData"
+
+  :pageSize="3"
+```
 
 ## ProgressBar
 

adminforth/documentation/docs/tutorial/07-Plugins/16-email-invite.md

@@ -98,7 +98,7 @@ export default {
      //diff-add
       emailField: 'email',
      //diff-add
-      passwordField: 'password_hash',
+      passwordField: 'password',
      //diff-add
       sendFrom: 'noreply@yourapp.com',
      //diff-add
@@ -164,7 +164,7 @@ export default {
     new EmailInvitePlugin({
       emailField: 'email',
       sendFrom: 'noreply@yourapp.com',
-      passwordField: 'password_hash',
+      passwordField: 'password',
       adapter: new EmailAdapterAwsSes(/* ... */),
       //diff-add
       emailConfirmedField: 'email_confirmed', // Enable email confirmation
@@ -191,7 +191,7 @@ import EmailAdapterMailgun from "@adminforth/email-adapter-mailgun";
   plugins: [
     new EmailInvitePlugin({
       emailField: 'email',
-      passwordField: 'password_hash',
+      passwordField: 'password',
       sendFrom: 'noreply@yourapp.com',
       //diff-add
       adapter: new EmailAdapterMailgun({

adminforth/modules/configValidator.ts

@@ -134,11 +134,12 @@ export default class ConfigValidator implements IConfigValidator {
       userMenu: [],
       header: [],
       sidebar: [],
+      sidebarTop: [],
       everyPageBottom: [],
     };
 
     if (this.inputConfig.customization?.globalInjections) {
-      const ALLOWED_GLOBAL_INJECTIONS = ['userMenu', 'header', 'sidebar', 'everyPageBottom'];
+      const ALLOWED_GLOBAL_INJECTIONS = ['userMenu', 'header', 'sidebar', 'sidebarTop', 'everyPageBottom'];
       Object.keys(this.inputConfig.customization.globalInjections).forEach((injection) => {
         if (ALLOWED_GLOBAL_INJECTIONS.includes(injection)) {
           globalInjections[injection] = this.validateAndListifyInjectionNew(this.inputConfig.customization.globalInjections, injection, errors);
@@ -177,6 +178,9 @@ export default class ConfigValidator implements IConfigValidator {
     if (customization.showBrandNameInSidebar === undefined) {
       customization.showBrandNameInSidebar = true;
     }
+    if (customization.showBrandLogoInSidebar === undefined) {
+      customization.showBrandLogoInSidebar = true;
+    }
     if (customization.favicon) {
       errors.push(...this.checkCustomFileExists(customization.favicon));
     }

adminforth/modules/restApi.ts

@@ -274,6 +274,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
           loginPageInjections: this.adminforth.config.customization.loginPageInjections,
           globalInjections: {
             everyPageBottom: this.adminforth.config.customization.globalInjections.everyPageBottom,
+            sidebarTop: this.adminforth.config.customization.globalInjections.sidebarTop,
           },
           rememberMeDays: this.adminforth.config.auth.rememberMeDays,
           singleTheme: this.adminforth.config.customization.singleTheme,
@@ -363,6 +364,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
 
         const loggedInPart = {
           showBrandNameInSidebar: this.adminforth.config.customization.showBrandNameInSidebar,
+          showBrandLogoInSidebar: this.adminforth.config.customization.showBrandLogoInSidebar,
           brandLogo: this.adminforth.config.customization.brandLogo,
           datesFormat: this.adminforth.config.customization.datesFormat,
           timeFormat: this.adminforth.config.customization.timeFormat,

adminforth/modules/styles.ts

@@ -251,6 +251,9 @@ export const styles = () => ({
     lightTableOddBackground: "#FFFFFF",
     lightTablePaginationText: "#6B7280",
     lightTablePaginationNumeration: "#111827",
+    lightTablePaginationInputBackground: "#FFFFFF",
+    lightTablePaginationInputBorder: "#D1D5DB",
+    lightTablePaginationInputText: "#111827",
     lightUnactivePaginationButtonBackground: "#FFFFFF",
     lightUnactivePaginationButtonText: "#6B7280",
     lightUnactivePaginationButtonBorder: "#D1D5DB",
@@ -580,6 +583,9 @@ export const styles = () => ({
     darkTableOddBackground: "#111827",
     darkTablePaginationText: "#9CA3AF",
     darkTablePaginationNumeration: "#FFFFFF",
+    darkTablePaginationInputBackground: "#1f2937",
+    darkTablePaginationInputBorder: "#374151",
+    darkTablePaginationInputText: "#FFFFFF",
     darkUnactivePaginationButtonBackground: "#1F2937",
     darkUnactivePaginationButtonText: "#9CA3AF",
     darkUnactivePaginationButtonBorder: "#374151",

adminforth/spa/src/App.vue

@@ -78,13 +78,21 @@
     >
       <div class="h-full px-3 pb-4 overflow-y-auto bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder">
         <div class="af-logo-title-wrapper flex ms-2 m-4">
-          <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-logo h-8 me-3"  />
+          <img v-if="coreStore.config?.showBrandLogoInSidebar !== false" :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-logo h-8 me-3"  />
           <span 
             v-if="coreStore.config?.showBrandNameInSidebar"
             class="af-title self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText"
           >
             {{ coreStore.config?.brandName }}
           </span>
+          <div class="flex items-center gap-2 w-auto" :class="{'w-full justify-end': coreStore.config?.showBrandLogoInSidebar === false}">
+            <component 
+              v-for="c in coreStore?.config?.globalInjections?.sidebarTop || []"
+              :is="getCustomComponent(c)"
+              :meta="c.meta"
+              :adminUser="coreStore.adminUser"
+            />
+          </div>
         </div>
 
         <ul class="af-sidebar-container space-y-2 font-medium">

adminforth/spa/src/adminforth.ts

@@ -1,6 +1,5 @@
-import type { FilterParams, FrontendAPIInterface } from "./types/FrontendAPI";
-import type { FrontendAPIInterface, ConfirmParams, AlertParams, } from '@/types/FrontendAPI';
-import type { AdminForthFilterOperators, AdminForthResourceColumn } from '@/types/Common';
+import type { FilterParams, FrontendAPIInterface, ConfirmParams, AlertParams, } from '@/types/FrontendAPI';
+import type { AdminForthFilterOperators, AdminForthResourceColumnCommon } from '@/types/Common';
 import { useToastStore } from '@/stores/toast';
 import { useModalStore } from '@/stores/modal';
 import { useCoreStore } from '@/stores/core';
@@ -85,7 +84,7 @@ class FrontendAPI implements FrontendAPIInterface {
     }
   }
 
-  confirm(params: ConfirmParams): Promise<void> {
+  confirm(params: ConfirmParams): Promise<boolean> {
     return new Promise((resolve, reject) => {
       this.modalStore.setModalContent({ 
         content: params.message, 
@@ -112,7 +111,7 @@ class FrontendAPI implements FrontendAPIInterface {
       throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
     } else {
       console.log(this.coreStore.resourceColumnsWithFilters,'core store')
-      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumn) => col.name === filter.field)
+      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumnCommon) => col.name === filter.field)
       if(!filterField){
           throw new Error(`Field ${filter.field} is not available for filtering`)
       }
@@ -123,7 +122,7 @@ class FrontendAPI implements FrontendAPIInterface {
 
   setListFilter(filter: FilterParams): void {
     if(this.listFilterValidation(filter)){
-      if(this.filtersStore.filters.some((f) => {return f.field === filter.field && f.operator === filter.operator})){
+      if(this.filtersStore.filters.some((f: any) => {return f.field === filter.field && f.operator === filter.operator})){
         throw new Error(`Filter ${filter.field} with operator ${filter.operator} already exists`)
       } else {
       this.filtersStore.setFilter(filter)