adminforth 1.0.56 → 1.0.58

package/dist/index.js

@@ -33,6 +33,8 @@ class AdminForth {
         });
         this.config = Object.assign(Object.assign({}, __classPrivateFieldGet(this, _AdminForth_defaultConfig, "f")), config);
         this.validateConfig();
+        this.activatePlugins();
+        this.validateConfig(); // revalidate after plugins
         this.express = new ExpressServer(this);
         this.auth = new Auth();
         this.codeInjector = new CodeInjector(this);
@@ -40,6 +42,14 @@ class AdminForth {
         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) {
@@ -456,7 +466,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

@@ -91,7 +91,7 @@ class CodeInjector {
                         routes += `{
             path: '${item.path}',
             name: '${item.path}',
-            component: import('${item.component}'),
+            component: () => import('${item.component}'),
           },\n`;
                     }
                     if (item.children) {

package/dist/plugins/ForeignInlineListPlugin/index.js

@@ -0,0 +1,22 @@
+import AdminForthPlugin from "../base.js";
+export default class ForeignInlineListPlugin extends AdminForthPlugin {
+    constructor(options) {
+        super(options);
+        this.options = options;
+        console.log('ForeignInlineListPlugin', this);
+    }
+    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'],
+        });
+    }
+}

package/dist/plugins/base.js

@@ -0,0 +1,8 @@
+export default class AdminForthPlugin {
+    constructor(pluginOptions) {
+        // set up plugin here
+    }
+    modifyResourceConfig(adminforth, resourceConfig) {
+        this.adminforth = adminforth;
+    }
+}

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

@@ -55,10 +55,12 @@
 
 
   <aside 
+
     v-if="loggedIn"
 
     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>
@@ -144,6 +144,8 @@ 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);
@@ -157,6 +159,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' });
@@ -186,6 +197,11 @@ onMounted(async () => {
   ],
   
 })
+coreStore.menu.forEach((item, i) => {
+  if (item.open) {
+    opened.value.push(i);
+  }
+});
 })
 
 </script>

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

@@ -1,20 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import ResourceParent from '@/views/ResourceParent.vue'
-import ListView from '@/views/ListView.vue'
-import ShowView from '@/views/ShowView.vue'
-import EditView from '@/views/EditView.vue'
-import CreateView from '@/views/CreateView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
-      path: '/',
-      name: 'home',
-      //redirect to login 
-      /* IMPORTANT:ADMINFORTH REDIRECT */
-
-    },
     {
       path: '/login',
       name: 'login',
@@ -27,22 +16,22 @@ const router = createRouter({
       children: [
         {
           path: '',
-          component: ListView,
+          component: () => import('@/views/ListView.vue'),
           name: 'resource-list'
         },
         {
           path: 'show/:primaryKey',
-          component: ShowView,
+          component: () => import('@/views/ShowView.vue'),
           name: 'resource-show'
         },
         {
           path: 'edit/:primaryKey',
-          component: EditView,
+          component: () => import('@/views/EditView.vue'),
           name: 'resource-edit'
         },
         {
           path: 'create',
-          component: CreateView,
+          component: () => import('@/views/CreateView.vue'),
           name: 'resource-create'
         },
       ]

package/index.ts

@@ -51,15 +51,27 @@ class AdminForth {
 
   constructor(config: AdminForthConfig) {
     this.config = {...this.#defaultConfig,...config};
+    
     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) {
@@ -527,7 +539,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

@@ -100,7 +100,7 @@ class CodeInjector {
           routes += `{
             path: '${item.path}',
             name: '${item.path}',
-            component: import('${item.component}'),
+            component: () => import('${item.component}'),
           },\n`
         }
         if (item.children) {

package/package.json

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

package/plugins/ForeignInlineListPlugin/index.ts

@@ -0,0 +1,35 @@
+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);
+    this.options = options;
+    console.log('ForeignInlineListPlugin', this);
+  }
+
+  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'],
+    });
+  }
+}

package/plugins/base.ts

@@ -0,0 +1,16 @@
+import { AdminForthResource } from '../types/AdminForthConfig.js';
+import AdminForth from '../index.js';
+
+export default class AdminForthPlugin {
+
+  adminforth: AdminForth;
+
+  constructor(pluginOptions: any) {
+    // set up plugin here
+  }
+
+  modifyResourceConfig(adminforth: AdminForth, resourceConfig: AdminForthResource) {
+    this.adminforth = adminforth;
+  }
+
+}

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

@@ -55,10 +55,12 @@
 
 
   <aside 
+
     v-if="loggedIn"
 
     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>
@@ -144,6 +144,8 @@ 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);
@@ -157,6 +159,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' });
@@ -186,6 +197,11 @@ onMounted(async () => {
   ],
   
 })
+coreStore.menu.forEach((item, i) => {
+  if (item.open) {
+    opened.value.push(i);
+  }
+});
 })
 
 </script>

package/spa/src/router/index.ts

@@ -1,20 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import ResourceParent from '@/views/ResourceParent.vue'
-import ListView from '@/views/ListView.vue'
-import ShowView from '@/views/ShowView.vue'
-import EditView from '@/views/EditView.vue'
-import CreateView from '@/views/CreateView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
-      path: '/',
-      name: 'home',
-      //redirect to login 
-      /* IMPORTANT:ADMINFORTH REDIRECT */
-
-    },
     {
       path: '/login',
       name: 'login',
@@ -27,22 +16,22 @@ const router = createRouter({
       children: [
         {
           path: '',
-          component: ListView,
+          component: () => import('@/views/ListView.vue'),
           name: 'resource-list'
         },
         {
           path: 'show/:primaryKey',
-          component: ShowView,
+          component: () => import('@/views/ShowView.vue'),
           name: 'resource-show'
         },
         {
           path: 'edit/:primaryKey',
-          component: EditView,
+          component: () => import('@/views/EditView.vue'),
           name: 'resource-edit'
         },
         {
           path: 'create',
-          component: CreateView,
+          component: () => import('@/views/CreateView.vue'),
           name: 'resource-create'
         },
       ]

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,
     },
   }