adminforth 1.0.46 → 1.0.48

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

@@ -41,9 +41,9 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, getCustomComponent } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { defineAsyncComponent, onMounted, ref, computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 const coreStore = useCoreStore();
@@ -90,13 +90,11 @@ onMounted(async () => {
   });
 
   editComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-      if (column.component?.edit) {
-        const path = column.component.edit.replace('@@', '../custom');
-        let component = defineAsyncComponent(() => import(`${path}`))
-        acc[column.name] = component;
-    }
-    return acc;
-  }, {});
+      if (column.component?.show) {
+          acc[column.name] = getCustomComponent(column.component.edit.replace('@@', '').replace('./custom/', '')).split('.')[0];
+      }
+      return acc;
+    }, {});
   loading.value = false;
 });
 
@@ -109,13 +107,21 @@ async function saveRecord() {
   }
 
   saving.value = true;
+
+  const updates = {};
+  for (const key in record.value) {
+    if (record.value[key] !== coreStore.record[key]) {
+      updates[key] = record.value[key];
+    }
+  }
+
   await callAdminForthApi({
     method: 'POST',
     path: `/update_record`,
     body: {
       resourceId: route.params.resourceId,
       recordId: route.params.primaryKey,
-      record: record.value,
+      record: updates,
     },
   });
   saving.value = false;

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

@@ -320,10 +320,11 @@ import { useCoreStore } from '@/stores/core';
 import { useModalStore } from '@/stores/modal';
 import { callAdminForthApi, getIcon } from '@/utils';
 import { initFlowbite } from 'flowbite';
-import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
+import { getCustomComponent } from '@/utils';
 
 import {
 IconInboxOutline,
@@ -431,13 +432,11 @@ async function getList() {
     }
   });
   listComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-      if (column.component?.list) {
-        const path = column.component.list.replace('@@', '../custom');
-        let component = defineAsyncComponent(() => import(`${path}`))
-        acc[column.name] = component;
-    }
-    return acc;
-  }, {});
+      if (column.component?.show) {
+          acc[column.name] = getCustomComponent(column.component.list.replace('@@', '').replace('./custom/', '')).split('.')[0];
+      }
+      return acc;
+    }, {});
 
 fetchStatus.value.pending = false;
   rows.value = data.data?.map(row => {

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

@@ -48,7 +48,6 @@
                     {{ column.label }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
-                    <!-- if column.name in showComponentsPerColumn, render it. If not, render ValueRenderer -->
                     <component
                         :is="showComponentsPerColumn[column.name] || ValueRenderer"
                         :column="column"
@@ -71,8 +70,9 @@
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
+import { getCustomComponent } from '@/utils';
 import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
-import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 
@@ -94,14 +94,10 @@ onMounted(async () => {
   });
   showComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
       if (column.component?.show) {
-          const path = column.component.show.replace('@@', '../custom');
-          console.log('path', path);
-          let component = defineAsyncComponent(() => import(`${path}`))
-          acc[column.name] = component;
-        }
-        return acc;
+          acc[column.name] = getCustomComponent(column.component.show.replace('@@', '').replace('./custom/', '')).split('.')[0];
+      }
+      return acc;
     }, {});
-  console.log('showComponentsPerColumn', showComponentsPerColumn);
   loading.value = false;
 });
 

package/index.ts

@@ -230,6 +230,19 @@ class AdminForth {
           if (item.component && !item.path) {
             errors.push(`Menu item with component must have path : ${JSON.stringify(item)}`);
           }
+
+          if (item.type === 'resource' && !item.resourceId) {
+            errors.push(`Menu item with type 'resource' must have resourceId : ${JSON.stringify(item)}`);
+          }
+
+          if (item.resourceId && !this.config.resources.find((res) => res.resourceId === item.resourceId)) {
+            errors.push(`Menu item with type 'resourceId' has resourceId which is not in resources: ${JSON.stringify(item)}`);
+          }
+
+          if (item.type === 'component' && !item.component) {
+            errors.push(`Menu item with type 'component' must have component : ${JSON.stringify(item)}`);
+          }
+
           // make sure component starts with @@
           if (item.component) {
             if (!item.component.startsWith('@@')) {
@@ -486,6 +499,7 @@ class AdminForth {
             deleteConfirmation: this.config.deleteConfirmation,
             auth: this.config.auth,
             usernameField: this.config.auth.usernameField,
+            title: this.config?.title,
           },
           adminUser,
           version: ADMINFORTH_VERSION,
@@ -603,11 +617,20 @@ class AdminForth {
             data.data.forEach((item) => {
               item[col.name] = targetDataMap[item[col.name]];
             });
+
+            data.data.forEach((item) => {
+              Object.keys(item).forEach((key) => {
+                if (!targetResource.columns.find((col) => col.name === key) || targetResource.columns.find((col) => col.name === key && col.backendOnly)) {
+                  delete item[key];
+                }
+              })
+            });
+
           })
         );
 
         data.data.forEach((item) => {
-          item._label = resource.itemLabel(item)
+          item._label = resource.itemLabel(item);
         })
 
       
@@ -622,6 +645,15 @@ class AdminForth {
           }
         }
 
+        // remove all columns which are not defined in resources, or defined but backendOnly
+        data.data.forEach((item) => {
+          Object.keys(item).forEach((key) => {
+            if (!resource.columns.find((col) => col.name === key) || resource.columns.find((col) => col.name === key && col.backendOnly)) {
+              delete item[key];
+            }
+          })
+        });
+
         return {...data, options: resource?.options };
       },
     });
@@ -725,7 +757,6 @@ class AdminForth {
     });
 
     server.endpoint({
-        noAuth: true, // TODO
         method: 'POST',
         path: '/create_record',
         handler: async ({ body, adminUser }) => {
@@ -800,7 +831,6 @@ class AdminForth {
         }
     });
     server.endpoint({
-        noAuth: true, // TODO
         method: 'POST',
         path: '/update_record',
         handler: async ({ body, adminUser }) => {
@@ -831,11 +861,19 @@ class AdminForth {
             }
 
             const newValues = {};
-            for (const col of resource.columns.filter((col) => !col.virtual)) {
-                if (record[col.name] !== oldRecord[col.name]) {
-                    newValues[col.name] = connector.setFieldValue(col, record[col.name]);
+
+            for (const recordField in record) {
+              if (record[recordField] !== oldRecord[recordField]) {
+                const column = resource.columns.find((col) => col.name === recordField);
+                if (column) {
+                  newValues[recordField] = connector.setFieldValue(column, record[recordField]);
+                } else {
+                  newValues[recordField] = record[recordField];
                 }
-            }
+              }
+            } 
+
+            console.log('✅ newValues', newValues)
             if (Object.keys(newValues).length > 0) {
                 await connector.updateRecord({ resource, recordId, record, newValues});
             }
@@ -858,7 +896,6 @@ class AdminForth {
         }
     });
     server.endpoint({
-        noAuth: true, // TODO
         method: 'POST',
         path: '/delete_record',
         handler: async ({ body, adminUser }) => {
@@ -900,7 +937,6 @@ class AdminForth {
         }
     });
     server.endpoint({
-        noAuth: true, // TODO
         method: 'POST',
         path: '/start_bulk_action',
         handler: async ({ body }) => {

package/modules/codeInjector.ts

@@ -1,12 +1,11 @@
-import fs from 'fs';
-import fsExtra from 'fs-extra';
-import filewatcher from 'filewatcher';
 import { exec, spawn } from 'child_process';
-import { promisify } from 'util';
-import path from 'path';
-import { fileURLToPath } from 'url';
 import crypto from 'crypto';
+import filewatcher from 'filewatcher';
+import fs from 'fs';
+import fsExtra from 'fs-extra';
 import os from 'os';
+import path from 'path';
+import { promisify } from 'util';
 import AdminForth from '../index.js';
 import { ADMIN_FORTH_ABSOLUTE_PATH } from './utils.js';
 
@@ -173,6 +172,26 @@ class CodeInjector {
       return `import { ${PascalIconName} } from '@iconify-prerendered/vue-${collection}';`;
     }).join('\n');
 
+    // for each custom component generate import statement
+    const customComponentsDir = this.adminforth.config.customization?.customComponentsDir;
+    let customComponentsImports = '';
+    if (customComponentsDir) {
+        // if file - return, if dir - go recursively
+        const customComponents = await fs.promises.readdir(customComponentsDir);
+        for (const filePath of customComponents) {
+            fs.stat(`${customComponentsDir}/${filePath}`, (err, data) => {
+                if (err) {
+                    console.log(err);
+                    return;
+                }
+                if (data.isFile()) {
+                    const componentName = filePath.split('.')[0].replace('/', '');
+                    customComponentsImports += `import ${componentName} from '@/custom/${filePath}';\n`;
+                }
+            })
+        }
+    }
+
     // Generate Vue.component statements for each icon
     const iconComponents = uniqueIcons.map((icon) => {
       const [ collection, iconName ] = icon.split(':');
@@ -182,7 +201,28 @@ class CodeInjector {
       return `app.component('${PascalIconName}', ${PascalIconName});`;
     }).join('\n');
 
+    // Generate Vue.component statements for each custom component
+    let customComponentsComponents = '';
+    if (customComponentsDir) {
+        const customComponents = await fs.promises.readdir(customComponentsDir);
+        for (const filePath of customComponents) {
+            fs.stat(`${customComponentsDir}/${filePath}`, (err, data) => {
+                if (err) {
+                    console.log('Custom components importing error: ', err);
+                    return;
+                }
+                if (data.isFile()) {
+                    const componentName = filePath.split('.')[0].replace('/', '');
+                    customComponentsComponents += `app.component('${componentName}', ${componentName});\n`;
+                }
+            })
+        }
+    }
+    
+
     let imports = iconImports + '\n';
+    imports += customComponentsImports + '\n';
+
 
     if (this.adminforth.config.customization?.vueUsesFile) {
       imports += `import addCustomUses from '${this.adminforth.config.customization.vueUsesFile}';\n`;
@@ -192,7 +232,7 @@ class CodeInjector {
     const appVuePath = path.join(CodeInjector.SPA_TMP_PATH, 'src', 'main.ts');
     let appVueContent = await fs.promises.readFile(appVuePath, 'utf-8');
     appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH IMPORTS */', imports);
-    appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */', iconComponents + '\n' );
+    appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */', iconComponents + '\n' + customComponentsComponents + '\n');
     if (this.adminforth.config.customization?.vueUsesFile) {
       appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH CUSTOM USES */', 'addCustomUses(app);');
     }

package/package.json

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

package/spa/package-lock.json

@@ -15,6 +15,7 @@
         "flowbite": "^2.3.0",
         "flowbite-datepicker": "^1.2.6",
         "pinia": "^2.1.7",
+        "unhead": "^1.9.12",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0",
         "vue-slider-component": "^4.1.0-beta.7"
@@ -1149,6 +1150,41 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@unhead/dom": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.9.12.tgz",
+      "integrity": "sha512-3MY1TbZmEjGNZapi3wvJW0vWNS2CLKHt7/m57sScDHCNvNBe1mTwrIOhtZFDgAndhml2EVQ68RMa0Vhum/M+cw==",
+      "dependencies": {
+        "@unhead/schema": "1.9.12",
+        "@unhead/shared": "1.9.12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/schema": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.9.12.tgz",
+      "integrity": "sha512-ue2FKyIZKsuZDpWJBMlBGwMm4s+vFeU3NUWsNt8Z+2JkOUIqO/VG43LxNgY1M595bOS71Gdxk+G9VtzfKJ5uEA==",
+      "dependencies": {
+        "hookable": "^5.5.3",
+        "zhead": "^2.2.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/shared": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.9.12.tgz",
+      "integrity": "sha512-72wlLXG3FP3sXUrwd42Uv8jYpHSg4R6IFJcsl+QisRjKM89JnjOFSw1DqWO4IOftW5xOxS4J5v7SQyJ4NJo7Bw==",
+      "dependencies": {
+        "@unhead/schema": "1.9.12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
@@ -2471,6 +2507,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3914,6 +3955,20 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
+    "node_modules/unhead": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.9.12.tgz",
+      "integrity": "sha512-s6VxcTV45hy8c/IioKQOonFnAO+kBOSpgDfqEHhnU0YVSQYaRPEp9pzW1qSPf0lx+bg9RKeOQyNNbSGGUP26aQ==",
+      "dependencies": {
+        "@unhead/dom": "1.9.12",
+        "@unhead/schema": "1.9.12",
+        "@unhead/shared": "1.9.12",
+        "hookable": "^5.5.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
@@ -4260,6 +4315,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zhead": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
+      "integrity": "sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==",
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
     }
   }
 }

package/spa/package.json

@@ -19,6 +19,7 @@
     "flowbite": "^2.3.0",
     "flowbite-datepicker": "^1.2.6",
     "pinia": "^2.1.7",
+    "unhead": "^1.9.12",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
     "vue-slider-component": "^4.1.0-beta.7"

package/spa/src/App.vue

@@ -64,6 +64,7 @@
     </div>
   </nav>
 
+
   <aside 
     v-if="loggedIn"
 
@@ -132,10 +133,22 @@ import AcceptModal from './components/AcceptModal.vue';
 import MenuLink from './components/MenuLink.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { getIcon } from '@/utils';
+import { useHead } from 'unhead'
+import { createHead } from 'unhead'
+const coreStore = useCoreStore();
+
+
+createHead()
+
+
+
+
 
 
 const route = useRoute();
 const router = useRouter();
+const title = ref('');
+
 
 const routerIsReady = ref(false);
 
@@ -153,7 +166,6 @@ async function logout() {
   router.push({ name: 'login' });
 }
 
-const coreStore = useCoreStore();
 
 
 
@@ -167,6 +179,11 @@ onMounted(async () => {
   initRouter();
   initFlowbite();
   await coreStore.fetchMenuAndResource();
+  title.value = coreStore.config.title || 'Admin Forth';
+  useHead({
+  title: title.value,
+  
+})
 })
 
 </script>

package/spa/src/utils.ts

@@ -29,9 +29,9 @@ export async function callAdminForthApi({ path, method, body=undefined }) {
   }
 }
 
-
-
-
+export function getCustomComponent(name) {
+    return resolveComponent(name);
+}
 
 export function getIcon(icon: string) {
   // icon format is "feather:icon-name". We need to get IconName in pascal case

package/spa/src/views/CreateView.vue

@@ -45,9 +45,9 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, getCustomComponent } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 const isValid = ref(false);
@@ -75,12 +75,10 @@ onMounted(async () => {
     resourceId: route.params.resourceId
   });
   createComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-    if (column.component?.create) {
-      const path = column.component.create.replace('@@', '../custom');
-      let component = defineAsyncComponent(() => import(`${path}`))
-      acc[column.name] = component;
-    }
-    return acc;
+      if (column.component?.show) {
+          acc[column.name] = getCustomComponent(column.component.create.replace('@@', '').replace('./custom/', '')).split('.')[0];
+      }
+      return acc;
     }, {});
   loading.value = false;
 });

package/spa/src/views/EditView.vue

@@ -41,9 +41,9 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, getCustomComponent } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { defineAsyncComponent, onMounted, ref, computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 const coreStore = useCoreStore();
@@ -90,13 +90,11 @@ onMounted(async () => {
   });
 
   editComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-      if (column.component?.edit) {
-        const path = column.component.edit.replace('@@', '../custom');
-        let component = defineAsyncComponent(() => import(`${path}`))
-        acc[column.name] = component;
-    }
-    return acc;
-  }, {});
+      if (column.component?.show) {
+          acc[column.name] = getCustomComponent(column.component.edit.replace('@@', '').replace('./custom/', '')).split('.')[0];
+      }
+      return acc;
+    }, {});
   loading.value = false;
 });
 
@@ -109,13 +107,21 @@ async function saveRecord() {
   }
 
   saving.value = true;
+
+  const updates = {};
+  for (const key in record.value) {
+    if (record.value[key] !== coreStore.record[key]) {
+      updates[key] = record.value[key];
+    }
+  }
+
   await callAdminForthApi({
     method: 'POST',
     path: `/update_record`,
     body: {
       resourceId: route.params.resourceId,
       recordId: route.params.primaryKey,
-      record: record.value,
+      record: updates,
     },
   });
   saving.value = false;

package/spa/src/views/ListView.vue

@@ -320,10 +320,11 @@ import { useCoreStore } from '@/stores/core';
 import { useModalStore } from '@/stores/modal';
 import { callAdminForthApi, getIcon } from '@/utils';
 import { initFlowbite } from 'flowbite';
-import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
+import { getCustomComponent } from '@/utils';
 
 import {
 IconInboxOutline,
@@ -431,13 +432,11 @@ async function getList() {
     }
   });
   listComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-      if (column.component?.list) {
-        const path = column.component.list.replace('@@', '../custom');
-        let component = defineAsyncComponent(() => import(`${path}`))
-        acc[column.name] = component;
-    }
-    return acc;
-  }, {});
+      if (column.component?.show) {
+          acc[column.name] = getCustomComponent(column.component.list.replace('@@', '').replace('./custom/', '')).split('.')[0];
+      }
+      return acc;
+    }, {});
 
 fetchStatus.value.pending = false;
   rows.value = data.data?.map(row => {

package/spa/src/views/ShowView.vue

@@ -48,7 +48,6 @@
                     {{ column.label }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
-                    <!-- if column.name in showComponentsPerColumn, render it. If not, render ValueRenderer -->
                     <component
                         :is="showComponentsPerColumn[column.name] || ValueRenderer"
                         :column="column"
@@ -71,8 +70,9 @@
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
+import { getCustomComponent } from '@/utils';
 import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
-import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 
@@ -94,14 +94,10 @@ onMounted(async () => {
   });
   showComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
       if (column.component?.show) {
-          const path = column.component.show.replace('@@', '../custom');
-          console.log('path', path);
-          let component = defineAsyncComponent(() => import(`${path}`))
-          acc[column.name] = component;
-        }
-        return acc;
+          acc[column.name] = getCustomComponent(column.component.show.replace('@@', '').replace('./custom/', '')).split('.')[0];
+      }
+      return acc;
     }, {});
-  console.log('showComponentsPerColumn', showComponentsPerColumn);
   loading.value = false;
 });