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

Author: SerVitasik

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

@@ -595,15 +595,15 @@ For example "OAuth2 plugin", when registers a login button component for login p
 
 ```ts title="/index.ts"
 // plugin CODE
-YYY.push({
+adminforth.config.customization.loginPageInjections.underLoginButton.push({
     file: '@@/..vue',
     meta: {
       afOrder: this.pluginOptions.YYY || 0
     }
  })
 ```
 
-So you can jsut pass `YYY` option to the plugin to control the order of the injection.
+So you can just pass `YYY` option to the plugin to control the order of the injection.
 
 ## Custom scripts in head
 

adminforth/modules/configValidator.ts

@@ -776,6 +776,11 @@ export default class ConfigValidator implements IConfigValidator {
         return col as AdminForthResourceColumn;
       })
 
+      // Check for multiple sticky columns
+      if (res.columns.filter(c => c.listSticky).length > 1) {
+        errors.push(`Resource "${res.resourceId}" has more than one listSticky column. Only one column can be sticky in the list view.`);
+      }
+
       const options: Partial<AdminForthResource['options']> = {...resInput.options, bulkActions: undefined, allowedActions: undefined};
 
       options.allowedActions = this.validateAndNormalizeAllowedActions(resInput, errors);

adminforth/servers/express.ts

@@ -3,12 +3,13 @@ import path from 'path';
 import fs from 'fs';
 import { Express } from 'express';
 import fetch from 'node-fetch';
-import { IAdminForth, IExpressHttpServer } from '../types/Back.js';
+import { AdminUserAuthorizeFunction, IAdminForth, IExpressHttpServer, HttpExtra } from '../types/Back.js';
 import { WebSocketServer } from 'ws';
 import { WebSocketClient } from './common.js';
 import { AdminUser } from '../types/Common.js';
 import http from 'http';
 import { randomUUID } from 'crypto';
+import { listify } from '../modules/utils.js';
 
 function replaceAtStart(string, substring) {
   if (string.startsWith(substring)) {
@@ -216,6 +217,25 @@ class ExpressServer implements IExpressHttpServer {
     this.server.listen(...args);
   }
 
+  async processAuthorizeCallbacks(adminUser: AdminUser, toReturn: { error?: string, allowed: boolean }, response: Response, extra: any) {
+    const adminUserAuthorize = this.adminforth.config.auth.adminUserAuthorize as (AdminUserAuthorizeFunction[] | undefined);
+
+    for (const hook of listify(adminUserAuthorize)) {
+      const resp = await hook({ 
+        adminUser, 
+        response,
+        adminforth: this.adminforth,
+        extra,
+      });
+      if (resp?.allowed === false || resp?.error) {
+        // delete all items from toReturn and add these:
+        toReturn.allowed = resp?.allowed;
+        toReturn.error = resp?.error;
+        break;
+      }
+    }
+  }
+  
 
   authorize(handler) {
     return async (req, res, next) => {
@@ -248,7 +268,13 @@ class ExpressServer implements IExpressHttpServer {
         res.status(401).send('Unauthorized by AdminForth');
       } else {
         req.adminUser = adminforthUser;
-        handler(req, res, next);
+        const toReturn: { error?: string, allowed: boolean } = { allowed: true };
+        await this.processAuthorizeCallbacks(adminforthUser, toReturn, res, {});
+        if (!toReturn.allowed) {
+          res.status(401).send('Unauthorized by AdminForth');
+        } else {
+          handler(req, res, next);
+        }
       }
     };
   }

adminforth/spa/src/afcl/Table.vue

@@ -237,7 +237,7 @@
         isLoading.value = false;
       }
       dataResult.value = result;
-    } else {
+    } else if (typeof props.data === 'object' && Array.isArray(props.data)) {
       const start = (currentPage.value - 1) * props.pageSize;
       const end = start + props.pageSize;
       dataResult.value = { data: props.data.slice(start, end), total: props.data.length };

adminforth/spa/src/components/ResourceListTable.vue

@@ -14,8 +14,8 @@
 
       <tbody>
         <!-- table header -->
-        <tr class="t-header sticky z-10 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText">
-          <td scope="col" class="p-4">
+        <tr class="t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText">
+          <td scope="col" class="p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
             <Checkbox
               :modelValue="allFromThisPageChecked"
               :disabled="!rows || !rows.length"
@@ -25,7 +25,7 @@
             </Checkbox>
           </td>
 
-          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
+          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="px-2 md:px-3 lg:px-6 py-3" :class="{'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}">
 
             <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
                 class="flex items-center " :class="{'cursor-pointer':c.sortable}">
@@ -90,7 +90,7 @@
 
           :class="{'border-b': rowI !== rows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
         >
-        <td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
+        <td class="w-4 p-4 cursor-default sticky-column bg-lightListTable dark:bg-darkListTable" @click="(e)=>e.stopPropagation()">
           <Checkbox
             :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
             @change="(e: any)=>{addToCheckedValues(row._primaryKeyValue)}"
@@ -100,7 +100,7 @@
           </Checkbox>
         </td>
 
-          <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4">
+          <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4" :class="{'sticky-column bg-lightListTable dark:bg-darkListTable': c.listSticky}">
             <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
             <component
               :is="c?.components?.list ? getCustomComponent(typeof c.components.list === 'string' ? { file: c.components.list } : c.components.list) : ValueRenderer"
@@ -598,4 +598,15 @@ input[type="checkbox"][disabled] {
 input[type="checkbox"]:not([disabled]) {
   @apply cursor-pointer;
 }
+td.sticky-column {
+  @apply sticky left-0 z-10;
+  &:not(:first-child) {
+    @apply left-[56px];
+  }
+}
+tr:not(:first-child):hover {
+  td.sticky-column {
+    @apply bg-lightListTableRowHover dark:bg-darkListTableRowHover;
+  }
+}
 </style>

adminforth/spa/src/components/ResourceListTableVirtual.vue

@@ -19,7 +19,7 @@
       <tbody>
         <!-- table header -->
         <tr class="t-header sticky z-10 top-0 text-xs  bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
-          <td scope="col" class="p-4">
+          <td scope="col" class="p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
             <Checkbox
               :modelValue="allFromThisPageChecked"
               :disabled="!rows || !rows.length"
@@ -29,7 +29,7 @@
             </Checkbox>
           </td>
 
-          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
+          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="px-2 md:px-3 lg:px-6 py-3" :class="{'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}">
 
             <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
                 class="flex items-center " :class="{'cursor-pointer':c.sortable}">
@@ -101,7 +101,7 @@
           :class="{'border-b': rowI !== visibleRows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
           @mounted="(el: any) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
         >
-        <td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
+        <td class="w-4 p-4 cursor-default sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading" @click="(e)=>e.stopPropagation()">
           <Checkbox
             :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
             @change="(e: any)=>{addToCheckedValues(row._primaryKeyValue)}"
@@ -110,7 +110,7 @@
             <span class="sr-only">{{ $t('checkbox') }}</span>
           </Checkbox>
           </td>
-          <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4">
+          <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4" :class="{'sticky-column bg-lightListTable dark:bg-darkListTable': c.listSticky}">
             <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
             <component
               :is="c?.components?.list ? getCustomComponent(typeof c.components.list === 'string' ? { file: c.components.list } : c.components.list) : ValueRenderer"
@@ -733,4 +733,15 @@ input[type="checkbox"][disabled] {
 input[type="checkbox"]:not([disabled]) {
   @apply cursor-pointer;
 }
+td.sticky-column {
+  @apply sticky left-0 z-10;
+  &:not(:first-child) {
+    @apply left-[56px];
+  }
+}
+tr:not(:first-child):hover {
+  td.sticky-column {
+    @apply bg-lightListTableRowHover dark:bg-darkListTableRowHover;
+  }
+}
 </style>

adminforth/types/Back.ts

@@ -611,6 +611,19 @@ export type BeforeLoginConfirmationFunction = (params?: {
   }
 }>;
 
+/**
+ * Allow to make extra authorization
+ */
+export type AdminUserAuthorizeFunction = ((params?: { 
+    adminUser: AdminUser,
+    response: IAdminForthHttpResponse,
+    adminforth: IAdminForth,
+    extra?: HttpExtra,
+}) => Promise<{
+  error?: string,
+  allowed?: boolean,
+}>);
+
 
 /**
  * Data source describes database connection which will be used to fetch data for resources.
@@ -1009,6 +1022,11 @@ export interface AdminForthInputConfig {
        */
       beforeLoginConfirmation?: BeforeLoginConfirmationFunction | Array<BeforeLoginConfirmationFunction>,
 
+      /**
+       * Array of functions which will be called before any request to AdminForth API.
+       */
+      adminUserAuthorize?: AdminUserAuthorizeFunction | Array<AdminUserAuthorizeFunction>,
+
       /**
        * Optionally if your users table has a field(column) with full name, you can set it here.
        * This field will be used to display user name in the top right corner of the admin panel.

adminforth/types/Common.ts

@@ -872,6 +872,10 @@ export interface AdminForthResourceColumnInputCommon {
    */
   masked?: boolean,
 
+  /**
+   * Sticky position for column
+   */
+  listSticky?: boolean;
 }
 
 export interface AdminForthResourceColumnCommon extends AdminForthResourceColumnInputCommon {

dev-demo/package-lock.json

@@ -139,6 +139,7 @@ export default {
     },
     {
       name: "country",
+      listSticky: true,
       components: {
         list: {
           file: "@/renderers/CountryFlag.vue",