adminforth 1.0.13 → 1.0.15

package/index.js

@@ -7,6 +7,7 @@ import CodeInjector from './modules/codeInjector.js';
 import { guessLabelFromName } from './modules/utils.js';
 import ExpressServer from './servers/express.js';
 import {v1 as uuid} from 'uuid';
+import fs from 'fs';
 
 
 import { AdminForthFilterOperators, AdminForthTypes } from './types.js';
@@ -63,6 +64,14 @@ class AdminForth {
       }
     }
 
+    if (!this.config.customization) {
+      this.config.customization = {};
+    }
+
+    if (!this.config.customization.customComponentsDir) {
+      this.config.customization.customComponentsDir = './custom';
+    }
+
 
     const errors = [];
     if (!this.config.baseUrl) {
@@ -176,6 +185,17 @@ class AdminForth {
           if (item.component && !item.path) {
             errors.push(`Menu item with component must have path : ${JSON.stringify(item)}`);
           }
+          // make sure component starts with @@
+          if (item.component) {
+            if (!item.component.startsWith('@@')) {
+              errors.push(`Menu item component must start with @@ : ${JSON.stringify(item)}`);
+            }
+
+            const path = item.component.replace('@@', this.config.customization.customComponentsDir);
+            if ( !fs.existsSync(path) ) {
+              errors.push(`Menu item component "${item.component.replace('@@', '')}" does not exist in "${this.config.customization.customComponentsDir}"`);
+            }
+          }
 
           if (item.homepage) {
             homepages++;
@@ -188,6 +208,7 @@ class AdminForth {
           }
         });
       };
+      browseMenu(this.config.menu);
 
     }
 

package/modules/codeInjector.js

@@ -87,7 +87,6 @@ class CodeInjector {
       await fs.promises.mkdir(spaTmpPath, { recursive: true });
     }
 
-    const customFiles = [];
     const icons = [];
     let routes = '';
 
@@ -97,11 +96,10 @@ class CodeInjector {
           icons.push(item.icon);
         }
         if (item.component) {
-          customFiles.push(item.component);
           routes += `{
             path: '${item.path}',
             name: '${item.path}',
-            component: import('@/custom/${item.component}'),
+            component: import('${item.component}'),
           },\n`
         }
         if (item.children) {
@@ -111,10 +109,6 @@ class CodeInjector {
     };
     collectAssetsFromMenu(this.adminforth.config.menu);
 
-    if (this.adminforth.config.customization?.vueUsesFile) {
-      customFiles.push(this.adminforth.config.customization.vueUsesFile);
-    }
-
     // create spa_tmp folder, or ignore if it exists
     try {
       await fs.promises.mkdir(spaTmpPath);
@@ -136,12 +130,12 @@ class CodeInjector {
         },
       });
 
-      // copy custom files
-      await Promise.all(customFiles.map(async (file) => {
-        const src = path.join(file);
-        const dest = path.join(spaTmpPath, 'src', 'custom', file);
-        await fsExtra.copy(src, dest);
-      }))
+      // copy whole custom directory
+      if (this.adminforth.config.customization?.customComponentsDir) {
+        await fsExtra.copy(this.adminforth.config.customization.customComponentsDir, path.join(spaTmpPath, 'src', 'custom'), {
+          recursive: true,
+        });
+      }
     }
 
     //collect all 'icon' fields from resources bulkActions
@@ -184,7 +178,7 @@ class CodeInjector {
     let imports = iconImports + '\n';
 
     if (this.adminforth.config.customization?.vueUsesFile) {
-      imports += `import addCustomUses from '@/custom/${this.adminforth.config.customization.vueUsesFile}';\n`;
+      imports += `import addCustomUses from '${this.adminforth.config.customization.vueUsesFile}';\n`;
     }
 
     // inject that code into spa_tmp/src/App.vue
@@ -286,11 +280,61 @@ class CodeInjector {
     });
   }
 
+  async watchCustomComponentsForCopy() {
+    const customComponentsDir = this.adminforth.config.customization.customComponentsDir;
+
+    // check if folder exists
+    try {
+      await fs.promises.access(customComponentsDir, fs.constants.F_OK);
+    } catch (e) {
+      return;
+    }
+
+    // get all subdirs
+    const directories = [];
+    const collectDirectories = async (dir) => {
+      directories.push(dir);
+
+      const files = await fs.promises.readdir(dir, { withFileTypes: true });
+      for (const file of files) {
+        if (file.isDirectory()) {
+          await collectDirectories(path.join(dir, file.name));
+        }
+      }
+    };
+
+    await collectDirectories(customComponentsDir);
+
+    const watcher = filewatcher();
+    directories.forEach((dir) => {
+      watcher.add(dir);
+    });
+
+    watcher.on(
+      'change',
+      async (file) => {
+        // copy one file
+        // TODO: non optimal, copy only changed file, test on both nested and parent dir
+        await fsExtra.copy(this.adminforth.config.customization.customComponentsDir, path.join(spaTmpPath, 'src', 'custom'), {
+          recursive: true,
+        });
+      }
+    )
+    process.on('exit', () => {
+      watcher.removeAll();
+    });
+  }
+
   async bundleNow({hotReload = false, verbose = false}) {
     this.adminforth.config.runningHotReload = hotReload;
 
     await this.prepareSources({ verbose });
-    await this.watchForReprepare();
+
+    if (hotReload) {
+      await this.watchForReprepare();
+      await this.watchCustomComponentsForCopy();
+    }
+
     console.log('AdminForth bundling');
     
     const cwd = CodeInjector.SPA_TMP_PATH;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "index.js",
   "scripts": {

package/spa/src/App.vue

@@ -32,7 +32,7 @@
 
                 </button>
               </div>
-              <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600" id="dropdown-user">
+              <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600 dark:shadow-xl" id="dropdown-user">
                 <div class="px-4 py-3" role="none">
                   <p class="text-sm text-gray-900 dark:text-white" role="none" v-if="coreStore.userFullname">
                     {{ coreStore.userFullname }}

package/spa/src/components/Filters.vue

@@ -2,7 +2,7 @@
   <!-- 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"
+      class="fixed top-14 right-0 z-40 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"

package/spa/src/components/ResourceForm.vue

@@ -2,7 +2,7 @@
   <div>
     
     <div 
-      class="relative shadow-md sm:rounded-lg"
+      class="relative shadow-md sm:rounded-lg dark:shadow-2xl"
     >
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">

package/spa/src/stores/core.ts

@@ -72,7 +72,6 @@ export const useCoreStore = defineStore('core', () => {
   }
 
   async function fetchColumns({ resourceId }) {
-    console.log('fetchColumns 1', resourceId, resourceColumnsId.value);
     if (resourceColumnsId.value === resourceId && resourceColumns.value) {
       // already fetched
       return;

package/spa/src/views/ListView.vue

@@ -1,67 +1,76 @@
 <template>
   <div class="relative">
     <Teleport to="body">
-      <Filters 
-        :columns="coreStore.resourceColumns" 
-        v-model:filters="filters" 
-        :columnsMinMax="columnsMinMax" :show="filtersShow" 
+      <Filters
+        :columns="coreStore.resourceColumns"
+        v-model:filters="filters"
+        :columnsMinMax="columnsMinMax" :show="filtersShow"
         @hide="filtersShow = false"
       />
     </Teleport>
 
     <BreadcrumbsWithButtons>
-      <button @click="()=>{checkboxes = []}"
+      <button
+        @click="()=>{checkboxes = []}"
         v-if="checkboxes.length"
-        :data-tooltip-target="`tooltip-remove-all`"
+        data-tooltip-target="tooltip-remove-all"
         data-tooltip-placement="bottom"
         class="flex gap-1  items-center py-1 px-3 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-       >
-        <IconBanOutline class="w-5 h-5 " /> 
-        <div :id="`tooltip-remove-all`"
-                role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                  Remove selection
-                  <div class="tooltip-arrow" data-popper-arrow></div>
-              </div>
+      >
+        <IconBanOutline class="w-5 h-5 "/>
+
+        <div id="tooltip-remove-all" role="tooltip"
+             class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+          Remove selection
+          <div class="tooltip-arrow" data-popper-arrow></div>
+        </div>
       </button>
-      <button v-if="checkboxes.length" v-for="(action,i) in allCheckedActions" :key="action.id" @click="startBulkAction(action.id)" 
+
+      <button
+        v-if="checkboxes.length" v-for="(action,i) in allCheckedActions" :key="action.id"
+        @click="startBulkAction(action.id)"
         class="flex gap-1 items-center py-1 px-3  mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
         :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
         'bg-blue-100 text-blue-800 border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
         }"
-        >
-        <component v-if="action.icon" :is="getIcon(action.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" ></component>
+      >
+        <component
+          v-if="action.icon"
+          :is="getIcon(action.icon)"
+          class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"></component>
 
         {{ `${action.label} (${checkboxes.length})` }}
       </button>
-      <RouterLink :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }" 
+
+      <RouterLink
+        :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
         class="flex items-center py-1 px-3  mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
-        <IconPlusOutline class="w-4 h-4 me-2" />
-          Create
+        <IconPlusOutline class="w-4 h-4 me-2"/>
+        Create
       </RouterLink>
-      <button 
+
+      <button
         class="flex gap-1 items-center py-1 px-3 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
         @click="()=>{filtersShow = !filtersShow}"
       >
-        <IconFilterOutline class="w-4 h-4 me-2" />
-          Filter
-          <span class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-            v-if="filters.length">
+        <IconFilterOutline class="w-4 h-4 me-2"/>
+        Filter
+        <span
+          class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
+          v-if="filters.length">
             {{ filters.length }}
           </span>
       </button>
-     
-
     </BreadcrumbsWithButtons>
 
     <!-- table -->
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+    <div class="relative overflow-x-auto shadow-md sm:rounded-lg dark:shadow-2xl">
 
-      
 
       <!-- skelet loader -->
-      <div  role="status" v-if="!coreStore.resourceColumns"
-        class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
+      <div role="status" v-if="!coreStore.resourceColumns"
+           class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
         <div class="flex items-center justify-between h-16">
           <div>
             <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
@@ -69,234 +78,262 @@
           </div>
           <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
         </div>
-        <div  class="flex items-center justify-between  h-16 pt-4" v-for="i in new Array(10)" >
+
+        <div class="flex items-center justify-between  h-16 pt-4" v-for="i in new Array(10)">
           <div>
             <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
             <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
           </div>
           <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
         </div>
-       
-        
-
         <span class="sr-only">Loading...</span>
       </div>
 
       <table v-else class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
         <thead class="text-xs text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-          <tr>
-            <th scope="col" class="p-4">
-              <div v-if="rows && rows.length" class="flex items-center">
-                <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
-                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                <label for="checkbox-all-search" class="sr-only">checkbox</label>
-              </div>
-            </th>
-
-
-            <th v-for="c in columnsListed" scope="col" class="px-6 py-3">
-              <div  @click="onSortButtonClick(c.name)" class="flex items-center">
-                {{ c.label }}
-             
-                <div  :style = "{'color':ascArr.includes(c.name)?'green':descArr.includes(c.name)?'red':'currentColor'}" ><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-                    fill='currentColor'
-                   
+        <tr>
+          <th scope="col" class="p-4">
+            <div v-if="rows && rows.length" class="flex items-center">
+              <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
+                     class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+              <label for="checkbox-all-search" class="sr-only">checkbox</label>
+            </div>
+          </th>
+
+          <th v-for="c in columnsListed" scope="col" class="px-6 py-3">
+            <div @click="() => c.sortable && onSortButtonClick(c.name)" class="flex items-center cursor-pointer">
+              {{ c.label }}
+
+              <div v-if="c.sortable"
+                   :style="{ 'color':ascArr.includes(c.name)?'green':descArr.includes(c.name)?'red':'currentColor'}">
+                <svg v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3 h-3 ms-1.5"
+                     :class="{'rotate-180':descArr.includes(c.name)}" viewBox="0 0 24 24">
+                  <path
+                    d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847"/>
+                </svg>
+                <svg v-else class="w-3 h-3 ms-1.5 opacity-30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                     fill='currentColor'
                      viewBox="0 0 24 24">
-                    <path
-                      d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z" />
-                  </svg></div>
+                  <path
+                    d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
+                </svg>
               </div>
-            </th>
-
-            <th scope="col" class="px-6 py-3">
-              Actions
-            </th>
+            </div>
+          </th>
 
-          </tr>
+          <th scope="col" class="px-6 py-3">
+            Actions
+          </th>
+        </tr>
         </thead>
         <tbody>
-          <tr v-if="!rows" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-            <td :colspan="coreStore.resourceColumns.length + 2">
-
-              <div role="status"
-                class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
-                <div class="flex items-center justify-between">
-                  <div>
-                    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-                    <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-                  </div>
-                  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+        <tr v-if="!rows" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <td :colspan="coreStore.resourceColumns.length + 2">
+
+            <div role="status"
+                 class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                  <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
                 </div>
-                <div class="flex items-center justify-between pt-4">
-                  <div>
-                    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-                    <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-                  </div>
-                  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+              </div>
+              <div class="flex items-center justify-between pt-4">
+                <div>
+                  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                  <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
                 </div>
-                <div class="flex items-center justify-between pt-4">
-                  <div>
-                    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-                    <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-                  </div>
-                  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+              </div>
+              <div class="flex items-center justify-between pt-4">
+                <div>
+                  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                  <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
                 </div>
-                <div class="flex items-center justify-between pt-4">
-                  <div>
-                    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-                    <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-                  </div>
-                  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+              </div>
+              <div class="flex items-center justify-between pt-4">
+                <div>
+                  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                  <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
                 </div>
-                <div class="flex items-center justify-between pt-4">
-                  <div>
-                    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-                    <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-                  </div>
-                  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+              </div>
+              <div class="flex items-center justify-between pt-4">
+                <div>
+                  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                  <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
                 </div>
-                <span class="sr-only">Loading...</span>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
               </div>
-            </td>
-          </tr>
-          <tr v-else-if="rows.length === 0" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-            <td :colspan="coreStore.resourceColumns.length + 2">
-              
-              <div id="toast-simple" class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200  dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800" role="alert">
-                <IconInboxOutline class="w-6 h-6 text-gray-500 dark:text-gray-400" />
-                <div class="ps-4 text-sm font-normal">No items here yet</div>
+              <span class="sr-only">Loading...</span>
+            </div>
+          </td>
+        </tr>
+        <tr v-else-if="rows.length === 0" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <td :colspan="coreStore.resourceColumns.length + 2">
+
+            <div id="toast-simple"
+                 class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200  dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
+                 role="alert">
+              <IconInboxOutline class="w-6 h-6 text-gray-500 dark:text-gray-400"/>
+              <div class="ps-4 text-sm font-normal">No items here yet</div>
             </div>
 
-            </td>
-          </tr>
+          </td>
+        </tr>
 
-          <tr v-else v-for="(row, rowI) in rows" :key="row.id" 
+        <tr v-else v-for="(row, rowI) in rows" :key="row.id"
             class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-            <td class="w-4 p-4">
-              <div class="flex items center">
-                <input id="checkbox-table-search-1"  type="checkbox" :checked="checkboxes.includes(row.id)"  @change="(e)=>{addToCheckedValues(row.id)}" 
-                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
-              </div>
-            </td>
-            <td v-for="c in columnsListed" class="px-6 py-4">
-              <ValueRenderer :column="c" :row="row" />
-            </td>
-            <td class="flex items-center px-6 py-4">
-
-              <RouterLink :to="{ name: 'resource-show', params: { resourceId: $route.params.resourceId, primaryKey: row._primaryKeyValue } }"
-                class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-                :data-tooltip-target="`tooltip-show-${rowI}`"
-              >
-                <IconEyeSolid class="w-5 h-5 me-2" />
-              </RouterLink>
-              <div :id="`tooltip-show-${rowI}`"
-                role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                  Show item
-                  <div class="tooltip-arrow" data-popper-arrow></div>
-              </div>
+          <td class="w-4 p-4">
+            <div class="flex items center">
+              <input
+                id="checkbox-table-search-1"
+                type="checkbox"
+                :checked="checkboxes.includes(row.id)"
+                @change="(e)=>{addToCheckedValues(row.id)}"
+                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+              <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
+            </div>
+          </td>
+          <td v-for="c in columnsListed" class="px-6 py-4">
+            <ValueRenderer :column="c" :row="row"/>
+          </td>
+          <td class="flex items-center px-6 py-4">
+
+            <RouterLink
+              :to="{ name: 'resource-show', params: { resourceId: $route.params.resourceId, primaryKey: row._primaryKeyValue } }"
+              class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+              :data-tooltip-target="`tooltip-show-${rowI}`"
+            >
+              <IconEyeSolid class="w-5 h-5 me-2"/>
+            </RouterLink>
+
+            <div :id="`tooltip-show-${rowI}`"
+                 role="tooltip"
+                 class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+              Show item
+              <div class="tooltip-arrow" data-popper-arrow></div>
+            </div>
 
-              <RouterLink :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: row._primaryKeyValue } }"
-                class="font-medium text-blue-600 dark:text-blue-500 hover:underline ms-3"
-                :data-tooltip-target="`tooltip-edit-${rowI}`"
-              >
-                <IconPenSolid class="w-5 h-5 me-2" />
-              </RouterLink>
-              <div :id="`tooltip-edit-${rowI}`"
-                role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                  Edit
-                  <div class="tooltip-arrow" data-popper-arrow></div>
-              </div>
+            <RouterLink
+              :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: row._primaryKeyValue } }"
+              class="font-medium text-blue-600 dark:text-blue-500 hover:underline ms-3"
+              :data-tooltip-target="`tooltip-edit-${rowI}`"
+            >
+              <IconPenSolid class="w-5 h-5 me-2"/>
+            </RouterLink>
+
+            <div :id="`tooltip-edit-${rowI}`"
+                 role="tooltip"
+                 class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+              Edit
+              <div class="tooltip-arrow" data-popper-arrow></div>
+            </div>
 
-              <button v-if = "allowDelete"
-                class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3"
-                :data-tooltip-target="`tooltip-delete-${rowI}`"
-                @click="showDeleteModal(row)"
-              >
-                <IconTrashBinSolid class="w-5 h-5 me-2" />
-              </button>
-              <div :id="`tooltip-delete-${rowI}`"
-                role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                  Delete
-                  <div class="tooltip-arrow" data-popper-arrow></div>
-              </div>
-            </td>
-          </tr>
+            <button v-if="allowDelete"
+                    class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3"
+                    :data-tooltip-target="`tooltip-delete-${rowI}`"
+                    @click="showDeleteModal(row)"
+            >
+              <IconTrashBinSolid class="w-5 h-5 me-2"/>
+            </button>
+
+            <div :id="`tooltip-delete-${rowI}`"
+                 role="tooltip"
+                 class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+              Delete
+              <div class="tooltip-arrow" data-popper-arrow></div>
+            </div>
+          </td>
+        </tr>
         </tbody>
       </table>
     </div>
     <!-- pagination -->
     <div class="flex flex-col items-center mt-4 xs:flex-row xs:justify-between xs:items-center"
-      v-if="rows && totalRows >= pageSize && totalRows > 0"
+         v-if="rows && totalRows >= pageSize && totalRows > 0"
     >
-        <!-- Help text -->
-        <span class="text-sm text-gray-700 dark:text-gray-400">
+      <!-- Help text -->
+      <span class="text-sm text-gray-700 dark:text-gray-400">
             Showing <span class="font-semibold text-gray-900 dark:text-white">
               {{ (page - 1) * pageSize + 1 }}
             </span> to <span class="font-semibold text-gray-900 dark:text-white">
               {{ Math.min(page * pageSize, totalRows) }}
             </span> of <span class="font-semibold text-gray-900 dark:text-white">{{
-              totalRows
-            }}</span> Entries
+          totalRows
+        }}</span> Entries
         </span>
-        <div class="inline-flex mt-2 xs:mt-0">
-          <!-- Buttons -->
-          <button 
-              class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
-            @click="page--" :disabled="page <= 1">
-              <svg class="w-3.5 h-3.5 me-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/>
-              </svg>
-              Prev
-          </button>
-          <button
-              class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
-            @click="page = 1" :disabled="page <= 1">
-            <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
-              1
-          </button>
-          <input type="text" class="w-10 py-1.5  px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10" 
-            v-model="page" />
-
-          <button 
-              class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0  border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
-            @click="page = totalPages" :disabled="page >= totalPages">
-              {{ totalPages }}
-              <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
-          </button>
-          <button 
-              class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
-
-            @click="page++" :disabled="page >= totalPages">
-              Next
-              <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
-            </svg>
-          </button>
-        </div>
+      <div class="inline-flex mt-2 xs:mt-0">
+        <!-- Buttons -->
+        <button
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          @click="page--" :disabled="page <= 1">
+          <svg class="w-3.5 h-3.5 me-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+               viewBox="0 0 14 10">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M13 5H1m0 0 4 4M1 5l4-4"/>
+          </svg>
+          Prev
+        </button>
+        <button
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          @click="page = 1" :disabled="page <= 1">
+          <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
+          1
+        </button>
+        <input type="text"
+               class="w-10 py-1.5  px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
+               v-model="page"/>
+
+        <button
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0  border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          @click="page = totalPages" :disabled="page >= totalPages">
+          {{ totalPages }}
+          <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
+        </button>
+        <button
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+
+          @click="page++" :disabled="page >= totalPages">
+          Next
+          <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+               viewBox="0 0 14 10">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M1 5h12m0 0L9 1m4 4L9 9"/>
+          </svg>
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, computed } from 'vue';
-import { callAdminForthApi,getIcon } from '@/utils';
-import { useRoute } from 'vue-router';
-import { useCoreStore } from '@/stores/core';
-import { useModalStore } from '@/stores/modal';
+import {ref, onMounted, watch, computed} from 'vue';
+import {callAdminForthApi, getIcon} from '@/utils';
+import {useRoute} from 'vue-router';
+import {useCoreStore} from '@/stores/core';
+import {useModalStore} from '@/stores/modal';
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-import { initFlowbite } from 'flowbite'
+import {initFlowbite} from 'flowbite'
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
 
-import { IconChevronDoubleLeftOutline, IconChevronDoubleRightOutline, IconInboxFullSolid, IconInboxOutline, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+import {
+  IconChevronDoubleLeftOutline,
+  IconChevronDoubleRightOutline,
+  IconInboxFullSolid,
+  IconInboxOutline,
+  IconPlusOutline
+} from '@iconify-prerendered/vue-flowbite';
 
-import { 
-  IconEyeSolid, 
+import {
+  IconEyeSolid,
   IconTrashBinSolid,
   IconPenSolid,
-  IconFilterOutline,IconBanOutline
- } from '@iconify-prerendered/vue-flowbite';
+  IconFilterOutline, IconBanOutline
+} from '@iconify-prerendered/vue-flowbite';
 
 import Filters from '@/components/Filters.vue';
 
@@ -313,6 +350,7 @@ const page = ref(1);
 const filters = ref([]);
 const columnsMinMax = ref({});
 const sort = ref([]);
+const fetchStatus = ref({pending: false, error: null, success: false});
 
 const rows = ref(null);
 const totalRows = ref(0);
@@ -325,7 +363,13 @@ const columnsListed = computed(() => coreStore.resourceColumns?.filter(c => c.sh
 
 async function selectAll(value) {
   console.log('select all');
-  rows.value.forEach((r)=>{if(!checkboxes.value.includes(r.id)){checkboxes.value.push(r.id)}else{checkboxes.value = checkboxes.value.filter((item) => item !== r.id)}});
+  rows.value.forEach((r) => {
+    if (!checkboxes.value.includes(r.id)) {
+      checkboxes.value.push(r.id)
+    } else {
+      checkboxes.value = checkboxes.value.filter((item) => item !== r.id)
+    }
+  });
   // checkboxes.value = rows.value.map((v) => v.id);
 }
 
@@ -345,17 +389,18 @@ watch([page], async () => {
 watch([filters], async () => {
   page.value = 1;
   await getList();
-}, { deep: true });
+}, {deep: true});
 
 watch([sort], async () => {
   await init();
-}, { deep: true });
+}, {deep: true});
 
 function onSortButtonClick(field) {
+  if (fetchStatus.value.pending) return;
   const sortIndex = sort.value.findIndex((s) => s.field === field);
   console.log('sortIndex', sortIndex);
   if (sortIndex === -1) {
-    sort.value = [{ field, direction: 'asc' }, ...sort.value];
+    sort.value = [{field, direction: 'asc'}, ...sort.value];
   } else {
     const sortField = sort.value[sortIndex];
     if (sortField.direction === 'asc') {
@@ -368,6 +413,7 @@ function onSortButtonClick(field) {
 
 async function getList() {
   rows.value = null;
+  fetchStatus.value.pending = true;
   const data = await callAdminForthApi({
     path: '/get_resource_data',
     method: 'POST',
@@ -379,12 +425,13 @@ async function getList() {
       sort: sort.value,
     }
   });
+  fetchStatus.value.pending = false;
   rows.value = data.data?.map(row => {
     row._primaryKeyValue = row[coreStore.resourceColumns.find(c => c.primaryKey).name];
     return row;
   });
   totalRows.value = data.total;
-  allCheckedActions.value = data.options?.bulkActions||[];
+  allCheckedActions.value = data.options?.bulkActions || [];
   allowDelete.value = data.options?.allowDelete;
 
 
@@ -395,7 +442,7 @@ async function getList() {
 }
 
 
-function showDeleteModal (row){
+function showDeleteModal(row) {
   if (!coreStore.config?.deleteConfirmation) {
     return deleteRecord(row);
   }
@@ -404,11 +451,13 @@ function showDeleteModal (row){
     acceptText: 'Delete',
     cancelText: 'Cancel',
   });
-  modalStore.setOnAcceptFunction(()=>{return deleteRecord(row)})
+  modalStore.setOnAcceptFunction(() => {
+    return deleteRecord(row)
+  })
   console.log('row', row);
   modalStore.togleModal();
 
-} 
+}
 
 async function deleteRecord(row) {
   await callAdminForthApi({
@@ -417,32 +466,32 @@ async function deleteRecord(row) {
     body: {
       resourceId: route.params.resourceId,
       primaryKey: row._primaryKeyValue,
-      recordId:row.id
+      recordId: row.id
     }
   });
   await getList();
   modalStore.resetmodalState()
 }
 
-async function startBulkAction(actionId){
-  const data =await callAdminForthApi({
+async function startBulkAction(actionId) {
+  const data = await callAdminForthApi({
     path: '/start_bulk_action',
     method: 'POST',
     body: {
       resourceId: route.params.resourceId,
       actionId: actionId,
       recordIds: checkboxes.value
-      
+
     }
   });
-  if (data?.status === 'success'){
+  if (data?.status === 'success') {
     checkboxes.value = [];
   }
   await getList();
 }
 
-function addToCheckedValues(id){
-  if (checkboxes.value.includes(id)){
+function addToCheckedValues(id) {
+  if (checkboxes.value.includes(id)) {
     checkboxes.value = checkboxes.value.filter((item) => item !== id);
   } else {
     checkboxes.value.push(id);
@@ -463,9 +512,10 @@ async function init() {
     }
   });
 }
+
 onMounted(async () => {
   await init();
-}); 
+});
 
 // on route param change 
 watch(() => route.params.resourceId, async () => {

package/spa/vite.config.ts

@@ -36,7 +36,8 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@@': fileURLToPath(new URL('./src/custom', import.meta.url)),
     }
   }
 })