adminforth 1.0.57 → 1.0.59

package/dist/index.js

@@ -32,14 +32,24 @@ class AdminForth {
             deleteConfirmation: true,
         });
         this.config = Object.assign(Object.assign({}, __classPrivateFieldGet(this, _AdminForth_defaultConfig, "f")), config);
+        this.codeInjector = new CodeInjector(this);
         this.validateConfig();
+        this.activatePlugins();
+        this.validateConfig(); // revalidate after plugins
         this.express = new ExpressServer(this);
         this.auth = new Auth();
-        this.codeInjector = new CodeInjector(this);
         this.connectors = {};
         this.statuses = {};
         console.log(`🚀 AdminForth v${ADMINFORTH_VERSION} starting up`);
     }
+    activatePlugins() {
+        for (let resource of this.config.resources) {
+            for (let pluginInstance of resource.plugins || []) {
+                pluginInstance.modifyResourceConfig(this, resource);
+            }
+        }
+        ;
+    }
     validateConfig() {
         if (this.config.rootUser) {
             if (!this.config.rootUser.username) {
@@ -241,7 +251,11 @@ class AdminForth {
             for (const column of resource.columns) {
                 if (column.component) {
                     for (const [key, value] of Object.entries(column.component)) {
-                        // console.log(`${key}: ${value}`);
+                        if (this.codeInjector.allComponentNames[value]) {
+                            // not obvious, but if we are in this if, it means that this is plugin component
+                            // and there is no sense to check if it exists in users folder
+                            continue;
+                        }
                         const path = value.replace('@@', this.config.customization.customComponentsDir);
                         if (!fs.existsSync(path)) {
                             throw new Error(`Component file ${path} does not exist`);
@@ -456,7 +470,8 @@ class AdminForth {
                 if (!resource) {
                     return { error: `Resource ${resourceId} not found` };
                 }
-                return { resource };
+                // exclude "plugins" key
+                return { resource: Object.assign(Object.assign({}, resource), { plugins: undefined }) };
             }),
         });
         server.endpoint({

package/dist/modules/codeInjector.js

@@ -30,6 +30,8 @@ function hashify(obj) {
 }
 class CodeInjector {
     constructor(adminforth) {
+        this.allComponentNames = {};
+        this.srcFoldersToSync = {};
         this.adminforth = adminforth;
     }
     // async runShell({command, verbose = false}) {
@@ -126,7 +128,14 @@ class CodeInjector {
                 });
                 // copy whole custom directory
                 if ((_b = this.adminforth.config.customization) === null || _b === void 0 ? void 0 : _b.customComponentsDir) {
-                    yield fsExtra.copy(this.adminforth.config.customization.customComponentsDir, path.join(CodeInjector.SPA_TMP_PATH, 'src', 'custom'), {
+                    this.srcFoldersToSync[this.adminforth.config.customization.customComponentsDir] = './';
+                }
+                for (const [src, dest] of Object.entries(this.srcFoldersToSync)) {
+                    const to = path.join(CodeInjector.SPA_TMP_PATH, 'src', 'custom', dest);
+                    if (process.env.HEAVY_DEBUG) {
+                        console.log(`🪲 await fsExtra.copy from ${src}, ${to}`);
+                    }
+                    yield fsExtra.copy(src, to, {
                         recursive: true,
                     });
                 }
@@ -169,11 +178,14 @@ class CodeInjector {
                     }
                 });
             });
-            let customComponentsImports = '';
             customResourceComponents.forEach((filePath) => {
                 const componentName = getComponentNameFromPath(filePath);
-                customComponentsImports += `import ${componentName} from '${filePath}';\n`;
+                this.allComponentNames[filePath] = componentName;
             });
+            let customComponentsImports = '';
+            for (const [targetPath, component] of Object.entries(this.allComponentNames)) {
+                customComponentsImports += `import ${component} from '${targetPath}';\n`;
+            }
             // Generate Vue.component statements for each icon
             const iconComponents = uniqueIcons.map((icon) => {
                 const [collection, iconName] = icon.split(':');
@@ -184,10 +196,9 @@ class CodeInjector {
             }).join('\n');
             // Generate Vue.component statements for each custom component
             let customComponentsComponents = '';
-            customResourceComponents.forEach((filePath) => {
-                const componentName = getComponentNameFromPath(filePath);
-                customComponentsComponents += `app.component('${componentName}', ${componentName});\n`;
-            });
+            for (const name of Object.values(this.allComponentNames)) {
+                customComponentsComponents += `app.component('${name}', ${name});\n`;
+            }
             let imports = iconImports + '\n';
             imports += customComponentsImports + '\n';
             if ((_d = this.adminforth.config.customization) === null || _d === void 0 ? void 0 : _d.vueUsesFile) {

package/dist/modules/utils.js

@@ -13,13 +13,16 @@ export function guessLabelFromName(name) {
         return name.split(/(?=[A-Z])/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
     }
 }
-const __filename = fileURLToPath(import.meta.url);
-let __dirname = path.join(path.dirname(__filename), '..');
-if (__dirname.endsWith('dist')) {
-    // in prod build we are in dist also
-    __dirname = path.join(__dirname, '..');
-}
-export const ADMIN_FORTH_ABSOLUTE_PATH = __dirname;
+export const currentFileDir = (metaUrl) => {
+    const __filename = fileURLToPath(metaUrl);
+    let __dirname = path.dirname(__filename);
+    if (__dirname.endsWith('dist')) {
+        // in prod build we are in dist also
+        __dirname = path.join(__dirname, '..');
+    }
+    return __dirname;
+};
+export const ADMIN_FORTH_ABSOLUTE_PATH = path.join(currentFileDir(import.meta.url), '..');
 const package_json = JSON.parse(fs.readFileSync(path.join(ADMIN_FORTH_ABSOLUTE_PATH, 'package.json'), 'utf8'));
 export const ADMINFORTH_VERSION = package_json.version;
 export function getComponentNameFromPath(filePath) {

package/dist/plugins/ForeignInlineListPlugin/index.js

@@ -0,0 +1,24 @@
+import AdminForthPlugin from "../base.js";
+export default class ForeignInlineListPlugin extends AdminForthPlugin {
+    constructor(options) {
+        super(options, import.meta.url);
+        this.options = options;
+    }
+    modifyResourceConfig(adminforth, resourceConfig) {
+        super.modifyResourceConfig(adminforth, resourceConfig);
+        // get resource with foreignResourceId
+        this.foreignResource = adminforth.config.resources.find((resource) => resource.resourceId === this.options.foreignResourceId);
+        if (!this.foreignResource) {
+            throw new Error(`ForeignInlineListPlugin: Resource with ID "${this.options.foreignResourceId}" not found`);
+        }
+        resourceConfig.columns.push({
+            name: `foreignInlineList_${this.foreignResource.resourceId}`,
+            label: 'Foreign Inline List',
+            virtual: true,
+            showIn: ['show'],
+            component: {
+                show: this.componentPath('InlineList.vue'),
+            },
+        });
+    }
+}

package/dist/plugins/base.js

@@ -0,0 +1,30 @@
+import { getComponentNameFromPath } from '../modules/utils.js';
+import { currentFileDir } from '../modules/utils.js';
+import path from 'path';
+import fs from 'fs';
+export default class AdminForthPlugin {
+    constructor(pluginOptions, metaUrl) {
+        this.customFolderName = 'custom';
+        // set up plugin here
+        this.pluginDir = currentFileDir(metaUrl);
+    }
+    modifyResourceConfig(adminforth, resourceConfig) {
+        this.adminforth = adminforth;
+    }
+    componentPath(componentFile) {
+        const key = `@@/plugins/${this.constructor.name}/${componentFile}`;
+        const componentName = getComponentNameFromPath(key);
+        const absSrcFolder = path.join(this.pluginDir, this.customFolderName);
+        if (!this.adminforth.codeInjector.srcFoldersToSync[absSrcFolder]) {
+            this.adminforth.codeInjector.srcFoldersToSync[absSrcFolder] = `./plugins/${this.constructor.name}/`;
+        }
+        if (!this.adminforth.codeInjector.allComponentNames[key]) {
+            const absSrcPath = path.join(absSrcFolder, componentFile);
+            if (!fs.existsSync(absSrcPath)) {
+                throw new Error(`Plugin "${this.constructor.name}" tried to use file as component which does not exist at "${absSrcPath}"`);
+            }
+            this.adminforth.codeInjector.allComponentNames[key] = componentName;
+        }
+        return key;
+    }
+}

package/dist/servers/express.js

@@ -107,7 +107,14 @@ class ExpressServer {
         }
         else {
             this.expressApp.get(`${slashedPrefix}assets/*`, (req, res) => {
-                res.sendFile(path.join(CodeInjector.SPA_TMP_PATH, 'dist', replaceAtStart(req.url, prefix)));
+                res.sendFile(path.join(CodeInjector.SPA_TMP_PATH, 'dist', replaceAtStart(req.url, prefix)), {
+                    cacheControl: false,
+                    // store for a year
+                    headers: {
+                        'Cache-Control': 'public, max-age=31536000',
+                        'Pragma': 'public',
+                    }
+                });
             });
             this.expressApp.get(`${prefix}*`, (req, res) => __awaiter(this, void 0, void 0, function* () {
                 const fullPath = path.join(CodeInjector.SPA_TMP_PATH, 'dist', 'index.html');
@@ -122,7 +129,15 @@ class ExpressServer {
                     res.status(500).send(respondNoServer(`${this.adminforth.config.brandName} is still warming up`, 'Please wait a moment...'));
                     return;
                 }
-                res.sendFile(fullPath);
+                res.sendFile(fullPath, {
+                    cacheControl: false,
+                    headers: {
+                        'Content-Type': 'text/html',
+                        'Cache-Control': 'no-cache, no-store, must-revalidate',
+                        'Pragma': 'no-cache',
+                        'Expires': '0'
+                    }
+                });
             }));
         }
     }

package/dist/spa/spa/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <nav 
-    v-if="loggedIn"
-    class="fixed h-14 top-0 z-40 w-full  border-b shadow-sm bg-header-bg shadow-header-shadow dark:bg-header-bg-hover dark:border-nav-menu-devider">
+    v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
+    class="fixed h-14 top-0 z-20 w-full  border-b shadow-sm bg-header-bg shadow-header-shadow dark:bg-header-bg-hover dark:border-nav-menu-devider">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center justify-start rtl:justify-end">
@@ -55,10 +55,12 @@
 
 
   <aside 
-    v-if="loggedIn"
+
+    v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
 
     id="logo-sidebar" class="fixed border-none top-0 left-0 z-40 w-64 h-screen  transition-transform -translate-x-full bg-nav-menu-bg border-r border-  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
     <div class="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800">
+
       <div class="flex ms-2 md:me-24  m-4  ">
             <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
             <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
@@ -71,17 +73,15 @@
             <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
             <div v-else-if="item.type === 'heading'" class="flex items-center justify-left pl-2 h-8 text-gray-400 dark:text-gray-400
             ">{{ item.label }}</div>
-
-            
             <li v-else-if="item.children">
-              <button  type="button" class="flex items-center w-full p-2 text-base text-nav-menu-text rounded-default transition duration-75  group hover:bg-nav-menu-bg-hover dark:text-white dark:hover:bg-gray-700" 
+              <button @click="clickOnMenuItem(i)" type="button" class="flex items-center w-full p-2 text-base text-nav-menu-text rounded-default transition duration-75  group hover:bg-nav-menu-bg-hover dark:text-white dark:hover:bg-gray-700" 
                   :aria-controls="`dropdown-example${i}`"
                   :data-collapse-toggle="`dropdown-example${i}`"
               >
                 <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400  dark:group-hover:text-white" ></component>
 
                 <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
-                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                 </svg>
               </button>
@@ -102,16 +102,22 @@
     </div>
   </aside>
     
-  <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn">
+  <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady">
     <div class="p-0 dark:border-gray-700 mt-14">
         <RouterView/>     
     </div>
   </div> 
 
-  <div v-else-if="routerIsReady">
+  <div v-else-if="routerIsReady && loginRedirectCheckIsReady">
     <RouterView/>
   </div>
+  <div v-else class="flex items-center justify-center h-screen">
+    <div class="text-3xl text-gray-400 animate-bounce">
+      ▶️
+    </div>
+  </div>
   <AcceptModal />
+
 </template>
 
 <style scoped>
@@ -144,11 +150,14 @@ createHead()
 const route = useRoute();
 const router = useRouter();
 const title = ref('');
+//create a ref to store the opened menu items with ts type;
+const opened = ref<string[]>([]);
 
 
 const routerIsReady = ref(false);
+const loginRedirectCheckIsReady = ref(false);
 
-const loggedIn = computed(() => route.name !== 'login' && routerIsReady.value);
+const loggedIn = computed(() => route.name !== 'login');
 
 const theme = ref('light');
 
@@ -157,6 +166,15 @@ function toggleTheme() {
   document.documentElement.classList.toggle('dark');
 }
 
+function clickOnMenuItem (label: string) {
+if (opened.value.includes(label)) {
+  opened.value = opened.value.filter((item) => item !== label);
+} else {
+  opened.value.push(label);
+}
+ 
+}
+
 async function logout() {
   await coreStore.logout();
   router.push({ name: 'login' });
@@ -175,6 +193,7 @@ onMounted(async () => {
   initRouter();
   initFlowbite();
   await coreStore.fetchMenuAndResource();
+  loginRedirectCheckIsReady.value = true;
   title.value = coreStore.config.title || 'Admin Forth';
   useHead({
   title: title.value,
@@ -186,6 +205,11 @@ onMounted(async () => {
   ],
   
 })
+coreStore.menu.forEach((item, i) => {
+  if (item.open) {
+    opened.value.push(i);
+  }
+});
 })
 
 </script>

package/dist/spa/spa/src/components/Filters.vue

@@ -2,11 +2,11 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed top-14 right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-black"
+      class="fixed  right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-black"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
-      :style="{ height: `calc(100vh - 3.5rem)` }"
+      :style="{ height: `calc(100vh ` }"
   >
     <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
       Filters
@@ -92,7 +92,7 @@
    </div>
   </div>
 
-  <div v-if="show" drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"
+  <div v-if="show"  class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0  z-30"
     @click="$emit('hide')">
   </div>
 </template>

package/dist/spa/spa/src/components/ShowTableItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <td class="px-6 py-4 whitespace-nowrap">
+      {{ column.label }}
+  </td>
+  <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
+    <ValueRenderer :column="column" :row="row" />
+  </td>
+</template>
+
+<script setup>
+import ValueRenderer from '@/components/ValueRenderer.vue';
+
+defineProps(['column', 'row']);
+</script>

package/dist/spa/spa/src/router/index.ts

@@ -40,4 +40,5 @@ const router = createRouter({
   ]
 })
 
+
 export default router

package/dist/spa/spa/src/stores/core.ts

@@ -11,12 +11,16 @@ export const useCoreStore = defineStore('core', () => {
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
   const user = ref(null);
+  const flowBitIsInitialised = ref(false);
 
   async function fetchMenuAndResource() {
     const resp = await callAdminForthApi({
       path: '/get_base_config',
       method: 'GET',
     });
+    if(!resp){
+      return
+    }
     menu.value = resp.menu;
     resourceById.value = resp.resources.reduce((acc, resource) => {
       acc[resource.resourceId] = resource;
@@ -122,6 +126,7 @@ export const useCoreStore = defineStore('core', () => {
     resourceColumns, 
     fetchColumns, 
     resourceColumnsError,
+    flowBitIsInitialised,
     logout
   }
 })

package/dist/spa/spa/src/views/ListView.vue

@@ -448,10 +448,10 @@ fetchStatus.value.pending = false;
   allowedActions.value = data.options?.allowedActions;
   
 
-  setTimeout(() => {
-    initFlowbite();
-    console.log('initFlowbite');
-  });
+  // setTimeout(() => {
+  //   initFlowbite();
+  //   console.log('initFlowbite');
+  // });
 }
 
 
@@ -512,6 +512,7 @@ function addToCheckedValues(id) {
 }
 
 async function init() {
+  
   await coreStore.fetchColumns({
     resourceId: route.params.resourceId
   });
@@ -527,7 +528,13 @@ async function init() {
 }
 
 onMounted(async () => {
+  if (!coreStore.flowBitIsInitialised){
+     initFlowbite();
+     coreStore.flowBitIsInitialised = true;
+  }
+ 
   await init();
+
 });
 
 // on route param change 

package/dist/spa/spa/src/views/ShowView.vue

@@ -44,18 +44,12 @@
             <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
                 class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
-                <td class="px-6 py-4 whitespace-nowrap">
-                    {{ column.label }}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
-                    <component
-                        :is="showComponentsPerColumn[column.name] || ValueRenderer"
-                        :column="column"
-                        :row="coreStore.record"
-                    />
-                </td>
+              <component
+                  :is="showComponentsPerColumn[column.name] || ShowTableItem"
+                  :column="column"
+                  :row="coreStore.record"
+              />
             </tr>
-            
         </tbody>
     </table>
 </div>
@@ -68,6 +62,8 @@
 <script setup>
 
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
+import ShowTableItem from '@/components/ShowTableItem.vue';
+
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
 import { getCustomComponent } from '@/utils';

package/index.ts

@@ -43,7 +43,6 @@ class AdminForth {
   connectorClasses: any;
   runningHotReload?: boolean;
 
-
   statuses: {
     dbDiscover?: 'running' | 'done',
   }
@@ -51,15 +50,27 @@ class AdminForth {
 
   constructor(config: AdminForthConfig) {
     this.config = {...this.#defaultConfig,...config};
+    this.codeInjector = new CodeInjector(this);
+    
     this.validateConfig();
+    this.activatePlugins();
+    this.validateConfig(); // revalidate after plugins
+
     this.express = new ExpressServer(this);
     this.auth = new Auth();
-    this.codeInjector = new CodeInjector(this);
     this.connectors = {};
-    this.statuses = {}
+    this.statuses = {};
     console.log(`🚀 AdminForth v${ADMINFORTH_VERSION} starting up`)
   }
 
+  activatePlugins() {
+    for (let resource of this.config.resources) {
+      for (let pluginInstance of resource.plugins || []) {
+        pluginInstance.modifyResourceConfig(this, resource);
+      }
+    };
+  }
+
   validateConfig() {
     if (this.config.rootUser) {
       if (!this.config.rootUser.username) {
@@ -297,7 +308,11 @@ class AdminForth {
       for (const column of resource.columns) {
           if (column.component) {
             for (const [key, value] of Object.entries(column.component)) {
-                // console.log(`${key}: ${value}`);
+                if (this.codeInjector.allComponentNames[value]) {
+                  // not obvious, but if we are in this if, it means that this is plugin component
+                  // and there is no sense to check if it exists in users folder
+                  continue;
+                }
                 const path = value.replace('@@', this.config.customization.customComponentsDir);
                 if (!fs.existsSync(path)) {
                     throw new Error(`Component file ${path} does not exist`);
@@ -527,7 +542,8 @@ class AdminForth {
         if (!resource) {
           return { error: `Resource ${resourceId} not found` };
         }
-        return { resource };
+        // exclude "plugins" key
+        return { resource: { ...resource, plugins: undefined } };
       },
     });
     server.endpoint({

package/modules/codeInjector.ts

@@ -30,6 +30,8 @@ function hashify(obj) {
 class CodeInjector {
 
   adminforth: AdminForth;
+  allComponentNames: { [key: string]: string } = {};
+  srcFoldersToSync: { [key: string]: string } = {};
 
   static SPA_TMP_PATH = path.join(TMP_DIR, 'adminforth', 'spa_tmp');
 
@@ -139,12 +141,23 @@ class CodeInjector {
 
       // copy whole custom directory
       if (this.adminforth.config.customization?.customComponentsDir) {
-        await fsExtra.copy(this.adminforth.config.customization.customComponentsDir, path.join(CodeInjector.SPA_TMP_PATH, 'src', 'custom'), {
+        this.srcFoldersToSync[this.adminforth.config.customization.customComponentsDir] = './'
+      }
+
+      for (const [src, dest] of Object.entries(this.srcFoldersToSync)) {
+        const to = path.join(CodeInjector.SPA_TMP_PATH, 'src', 'custom', dest);
+        if (process.env.HEAVY_DEBUG) {
+          console.log(`🪲 await fsExtra.copy from ${src}, ${to}`);
+        }
+
+        await fsExtra.copy(src, to, {
           recursive: true,
         });
       }
     }
 
+
+
     //collect all 'icon' fields from resources bulkActions
     this.adminforth.config.resources.forEach((resource) => {
       if (resource.options?.bulkActions) {
@@ -189,12 +202,15 @@ class CodeInjector {
       });
     });
 
-    let customComponentsImports = '';
     customResourceComponents.forEach((filePath) => {
       const componentName = getComponentNameFromPath(filePath);
-      customComponentsImports += `import ${componentName} from '${filePath}';\n`;
+      this.allComponentNames[filePath] = componentName;
     });
-
+    
+    let customComponentsImports = '';
+    for (const [targetPath, component] of Object.entries(this.allComponentNames)) {
+      customComponentsImports += `import ${component} from '${targetPath}';\n`;
+    }
 
 
     // Generate Vue.component statements for each icon
@@ -208,11 +224,9 @@ class CodeInjector {
 
     // Generate Vue.component statements for each custom component
     let customComponentsComponents = '';
-    customResourceComponents.forEach((filePath) => {
-      const componentName = getComponentNameFromPath(filePath);
-      customComponentsComponents += `app.component('${componentName}', ${componentName});\n`;
-    })
-    
+    for (const name of Object.values(this.allComponentNames)) {
+      customComponentsComponents += `app.component('${name}', ${name});\n`;
+    }
 
     let imports = iconImports + '\n';
     imports += customComponentsImports + '\n';

package/modules/utils.ts

@@ -15,14 +15,17 @@ export function guessLabelFromName(name) {
 }
 
 
-const __filename = fileURLToPath(import.meta.url);
-let __dirname = path.join(path.dirname(__filename), '..');
-if (__dirname.endsWith('dist')) {
-  // in prod build we are in dist also
-  __dirname = path.join(__dirname, '..');
+export const currentFileDir = (metaUrl) => {
+  const __filename = fileURLToPath(metaUrl);
+  let __dirname = path.dirname(__filename);
+  if (__dirname.endsWith('dist')) {
+    // in prod build we are in dist also
+    __dirname = path.join(__dirname, '..');
+  }
+  return __dirname;
 }
 
-export const ADMIN_FORTH_ABSOLUTE_PATH = __dirname;
+export const ADMIN_FORTH_ABSOLUTE_PATH = path.join(currentFileDir(import.meta.url), '..');
 
 const package_json = JSON.parse(fs.readFileSync(path.join(ADMIN_FORTH_ABSOLUTE_PATH, 'package.json'), 'utf8'));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.0.57",
+  "version": "1.0.59",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/plugins/ForeignInlineListPlugin/custom/InlineList.vue

@@ -0,0 +1,5 @@
+<template>
+  <td colspan="2">
+    text
+  </td>
+</template>

package/plugins/ForeignInlineListPlugin/index.ts

@@ -0,0 +1,39 @@
+import { AdminForthResource } from "../../types/AdminForthConfig.js";
+import AdminForthPlugin from "../base.js";
+import AdminForth from "../../index.js";
+
+type PluginOptions = {
+  foreignResourceId: string;
+}
+
+export default class ForeignInlineListPlugin extends AdminForthPlugin {
+  foreignResource: AdminForthResource;
+  options: PluginOptions;
+
+  constructor(options: PluginOptions) {
+    super(options, import.meta.url);
+
+    this.options = options;
+
+  }
+
+  modifyResourceConfig(adminforth: AdminForth, resourceConfig: AdminForthResource) {
+    super.modifyResourceConfig(adminforth, resourceConfig);
+
+    // get resource with foreignResourceId
+    this.foreignResource = adminforth.config.resources.find((resource) => resource.resourceId === this.options.foreignResourceId);
+    if (!this.foreignResource) {
+      throw new Error(`ForeignInlineListPlugin: Resource with ID "${this.options.foreignResourceId}" not found`);
+    }
+
+    resourceConfig.columns.push({
+      name: `foreignInlineList_${this.foreignResource.resourceId}`,
+      label: 'Foreign Inline List',
+      virtual: true,
+      showIn: ['show'],
+      component: {
+        show: this.componentPath('InlineList.vue'),
+      },
+    });
+  }
+}

package/plugins/base.ts

@@ -0,0 +1,44 @@
+import { AdminForthResource } from '../types/AdminForthConfig.js';
+import AdminForth from '../index.js';
+import { getComponentNameFromPath } from '../modules/utils.js';
+import { currentFileDir } from '../modules/utils.js';
+import path from 'path';
+import fs from 'fs';
+
+export default class AdminForthPlugin {
+
+  adminforth: AdminForth;
+  pluginDir: string;
+  customFolderName: string = 'custom';
+
+  constructor(pluginOptions: any, metaUrl: string) {
+    // set up plugin here
+    this.pluginDir = currentFileDir(metaUrl);
+  }
+
+  modifyResourceConfig(adminforth: AdminForth, resourceConfig: AdminForthResource) {
+    this.adminforth = adminforth;
+  }
+
+  componentPath(componentFile: string) {
+    const key = `@@/plugins/${this.constructor.name}/${componentFile}`;
+    const componentName = getComponentNameFromPath(key);
+
+    const absSrcFolder = path.join(this.pluginDir, this.customFolderName);
+
+    if (!this.adminforth.codeInjector.srcFoldersToSync[absSrcFolder]) {
+      this.adminforth.codeInjector.srcFoldersToSync[absSrcFolder] = `./plugins/${this.constructor.name}/`;
+    }
+    
+    if (!this.adminforth.codeInjector.allComponentNames[key]) {
+      const absSrcPath = path.join(absSrcFolder, componentFile);
+      if (!fs.existsSync(absSrcPath)) {
+        throw new Error(`Plugin "${this.constructor.name}" tried to use file as component which does not exist at "${absSrcPath}"`);
+      }
+      this.adminforth.codeInjector.allComponentNames[key] = componentName;
+    }
+
+    return key;
+  }
+
+}

package/servers/express.ts

@@ -112,7 +112,17 @@ class ExpressServer {
 
     } else {
       this.expressApp.get(`${slashedPrefix}assets/*`, (req, res) => {
-        res.sendFile(path.join(CodeInjector.SPA_TMP_PATH, 'dist', replaceAtStart(req.url, prefix)))
+        res.sendFile(
+          path.join(CodeInjector.SPA_TMP_PATH, 'dist', replaceAtStart(req.url, prefix)),
+          {
+            cacheControl: false,
+            // store for a year
+            headers: {
+              'Cache-Control': 'public, max-age=31536000',
+              'Pragma': 'public',
+            }
+          }
+        )
       })
 
       this.expressApp.get(`${prefix}*`, async (req, res) => {
@@ -128,7 +138,14 @@ class ExpressServer {
           res.status(500).send(respondNoServer(`${this.adminforth.config.brandName} is still warming up`, 'Please wait a moment...'));
           return;
         }
-        res.sendFile(fullPath);
+        res.sendFile(fullPath, { 
+          cacheControl: false,
+          headers: { 
+            'Content-Type': 'text/html', 
+            'Cache-Control': 'no-cache, no-store, must-revalidate',
+            'Pragma': 'no-cache',
+            'Expires': '0'
+         } });
       });
     }
   }

package/spa/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <nav 
-    v-if="loggedIn"
-    class="fixed h-14 top-0 z-40 w-full  border-b shadow-sm bg-header-bg shadow-header-shadow dark:bg-header-bg-hover dark:border-nav-menu-devider">
+    v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
+    class="fixed h-14 top-0 z-20 w-full  border-b shadow-sm bg-header-bg shadow-header-shadow dark:bg-header-bg-hover dark:border-nav-menu-devider">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center justify-start rtl:justify-end">
@@ -55,10 +55,12 @@
 
 
   <aside 
-    v-if="loggedIn"
+
+    v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
 
     id="logo-sidebar" class="fixed border-none top-0 left-0 z-40 w-64 h-screen  transition-transform -translate-x-full bg-nav-menu-bg border-r border-  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
     <div class="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800">
+
       <div class="flex ms-2 md:me-24  m-4  ">
             <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
             <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
@@ -71,17 +73,15 @@
             <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
             <div v-else-if="item.type === 'heading'" class="flex items-center justify-left pl-2 h-8 text-gray-400 dark:text-gray-400
             ">{{ item.label }}</div>
-
-            
             <li v-else-if="item.children">
-              <button  type="button" class="flex items-center w-full p-2 text-base text-nav-menu-text rounded-default transition duration-75  group hover:bg-nav-menu-bg-hover dark:text-white dark:hover:bg-gray-700" 
+              <button @click="clickOnMenuItem(i)" type="button" class="flex items-center w-full p-2 text-base text-nav-menu-text rounded-default transition duration-75  group hover:bg-nav-menu-bg-hover dark:text-white dark:hover:bg-gray-700" 
                   :aria-controls="`dropdown-example${i}`"
                   :data-collapse-toggle="`dropdown-example${i}`"
               >
                 <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400  dark:group-hover:text-white" ></component>
 
                 <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
-                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                 </svg>
               </button>
@@ -102,16 +102,22 @@
     </div>
   </aside>
     
-  <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn">
+  <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady">
     <div class="p-0 dark:border-gray-700 mt-14">
         <RouterView/>     
     </div>
   </div> 
 
-  <div v-else-if="routerIsReady">
+  <div v-else-if="routerIsReady && loginRedirectCheckIsReady">
     <RouterView/>
   </div>
+  <div v-else class="flex items-center justify-center h-screen">
+    <div class="text-3xl text-gray-400 animate-bounce">
+      ▶️
+    </div>
+  </div>
   <AcceptModal />
+
 </template>
 
 <style scoped>
@@ -144,11 +150,14 @@ createHead()
 const route = useRoute();
 const router = useRouter();
 const title = ref('');
+//create a ref to store the opened menu items with ts type;
+const opened = ref<string[]>([]);
 
 
 const routerIsReady = ref(false);
+const loginRedirectCheckIsReady = ref(false);
 
-const loggedIn = computed(() => route.name !== 'login' && routerIsReady.value);
+const loggedIn = computed(() => route.name !== 'login');
 
 const theme = ref('light');
 
@@ -157,6 +166,15 @@ function toggleTheme() {
   document.documentElement.classList.toggle('dark');
 }
 
+function clickOnMenuItem (label: string) {
+if (opened.value.includes(label)) {
+  opened.value = opened.value.filter((item) => item !== label);
+} else {
+  opened.value.push(label);
+}
+ 
+}
+
 async function logout() {
   await coreStore.logout();
   router.push({ name: 'login' });
@@ -175,6 +193,7 @@ onMounted(async () => {
   initRouter();
   initFlowbite();
   await coreStore.fetchMenuAndResource();
+  loginRedirectCheckIsReady.value = true;
   title.value = coreStore.config.title || 'Admin Forth';
   useHead({
   title: title.value,
@@ -186,6 +205,11 @@ onMounted(async () => {
   ],
   
 })
+coreStore.menu.forEach((item, i) => {
+  if (item.open) {
+    opened.value.push(i);
+  }
+});
 })
 
 </script>

package/spa/src/components/Filters.vue

@@ -2,11 +2,11 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed top-14 right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-black"
+      class="fixed  right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-black"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
-      :style="{ height: `calc(100vh - 3.5rem)` }"
+      :style="{ height: `calc(100vh ` }"
   >
     <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
       Filters
@@ -92,7 +92,7 @@
    </div>
   </div>
 
-  <div v-if="show" drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"
+  <div v-if="show"  class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0  z-30"
     @click="$emit('hide')">
   </div>
 </template>

package/spa/src/components/ShowTableItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <td class="px-6 py-4 whitespace-nowrap">
+      {{ column.label }}
+  </td>
+  <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
+    <ValueRenderer :column="column" :row="row" />
+  </td>
+</template>
+
+<script setup>
+import ValueRenderer from '@/components/ValueRenderer.vue';
+
+defineProps(['column', 'row']);
+</script>

package/spa/src/router/index.ts

@@ -40,4 +40,5 @@ const router = createRouter({
   ]
 })
 
+
 export default router

package/spa/src/stores/core.ts

@@ -11,12 +11,16 @@ export const useCoreStore = defineStore('core', () => {
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
   const user = ref(null);
+  const flowBitIsInitialised = ref(false);
 
   async function fetchMenuAndResource() {
     const resp = await callAdminForthApi({
       path: '/get_base_config',
       method: 'GET',
     });
+    if(!resp){
+      return
+    }
     menu.value = resp.menu;
     resourceById.value = resp.resources.reduce((acc, resource) => {
       acc[resource.resourceId] = resource;
@@ -122,6 +126,7 @@ export const useCoreStore = defineStore('core', () => {
     resourceColumns, 
     fetchColumns, 
     resourceColumnsError,
+    flowBitIsInitialised,
     logout
   }
 })

package/spa/src/views/ListView.vue

@@ -448,10 +448,10 @@ fetchStatus.value.pending = false;
   allowedActions.value = data.options?.allowedActions;
   
 
-  setTimeout(() => {
-    initFlowbite();
-    console.log('initFlowbite');
-  });
+  // setTimeout(() => {
+  //   initFlowbite();
+  //   console.log('initFlowbite');
+  // });
 }
 
 
@@ -512,6 +512,7 @@ function addToCheckedValues(id) {
 }
 
 async function init() {
+  
   await coreStore.fetchColumns({
     resourceId: route.params.resourceId
   });
@@ -527,7 +528,13 @@ async function init() {
 }
 
 onMounted(async () => {
+  if (!coreStore.flowBitIsInitialised){
+     initFlowbite();
+     coreStore.flowBitIsInitialised = true;
+  }
+ 
   await init();
+
 });
 
 // on route param change 

package/spa/src/views/ShowView.vue

@@ -44,18 +44,12 @@
             <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
                 class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
-                <td class="px-6 py-4 whitespace-nowrap">
-                    {{ column.label }}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
-                    <component
-                        :is="showComponentsPerColumn[column.name] || ValueRenderer"
-                        :column="column"
-                        :row="coreStore.record"
-                    />
-                </td>
+              <component
+                  :is="showComponentsPerColumn[column.name] || ShowTableItem"
+                  :column="column"
+                  :row="coreStore.record"
+              />
             </tr>
-            
         </tbody>
     </table>
 </div>
@@ -68,6 +62,8 @@
 <script setup>
 
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
+import ShowTableItem from '@/components/ShowTableItem.vue';
+
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
 import { getCustomComponent } from '@/utils';

package/types/AdminForthConfig.ts

@@ -1,4 +1,4 @@
-
+import AdminForthPlugin from '../plugins/base.js';
 
 export type AdminForthConfigMenuItem = {
     type?: 'heading' | 'group' | 'resource' | 'page' | 'gap' | 'divider',
@@ -8,6 +8,7 @@ export type AdminForthConfigMenuItem = {
     component?: string,
     resourceId?: string,
     homepage?: boolean,
+    open?: boolean,
     children?: Array<AdminForthConfigMenuItem>,
   }
   
@@ -44,39 +45,39 @@ export type AdminForthResource = {
     dataSource: string,
     columns: Array<AdminForthResourceColumn>,
     itemLabel?: Function,
+    plugins?: Array<AdminForthPlugin>,
     hooks?: {
-        show?: {
-          beforeDatasourceRequest?: Function,
-          afterDatasourceResponse?: Function,
-        },
-        list?: {
-          beforeDatasourceRequest?: Function,
-          afterDatasourceResponse?: Function,
-        },
-        create?: {
-          beforeSave?: Function,
-          afterSave?: Function,
-        },
-        edit?: {
-          beforeSave?: Function,
-          afterSave?: Function,
-        },
-        delete?: {
-          beforeSave?: Function,
-          afterSave?: Function,
-        },
+      show?: {
+        beforeDatasourceRequest?: Function,
+        afterDatasourceResponse?: Function,
+      },
+      list?: {
+        beforeDatasourceRequest?: Function,
+        afterDatasourceResponse?: Function,
+      },
+      create?: {
+        beforeSave?: Function,
+        afterSave?: Function,
+      },
+      edit?: {
+        beforeSave?: Function,
+        afterSave?: Function,
+      },
+      delete?: {
+        beforeSave?: Function,
+        afterSave?: Function,
+      },
     },
     options?: {
-        bulkActions?: Array<{
-          label: string,
-          state: string,
-          icon: string,
-          action: Function,
-          id?: string,
-        }>,
-        allowedActions?: AllowedActions,
-        allowDelete?: boolean,
-        
+      bulkActions?: Array<{
+        label: string,
+        state: string,
+        icon: string,
+        action: Function,
+        id?: string,
+      }>,
+      allowedActions?: AllowedActions,
+      allowDelete?: boolean,
     },
   }