adminforth 1.0.47 → 1.0.49

package/dataConnectors/sqlite.ts

@@ -138,7 +138,6 @@ class SQLiteConnector {
     
 
     getData({ resource, limit, offset, sort, filters }) {
-      console.log('SQLITE getData', { resource, limit, offset, sort, filters });
       const columns = resource.dataSourceColumns.map((col) => col.name).join(', ');
       const tableName = resource.table;
 

package/dist/dataConnectors/sqlite.js

@@ -148,7 +148,6 @@ class SQLiteConnector {
         return value;
     }
     getData({ resource, limit, offset, sort, filters }) {
-        console.log('SQLITE getData', { resource, limit, offset, sort, filters });
         const columns = resource.dataSourceColumns.map((col) => col.name).join(', ');
         const tableName = resource.table;
         const where = filters.length ? `WHERE ${filters.map((f, i) => {

package/dist/index.js

@@ -193,6 +193,15 @@ 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('@@')) {
@@ -548,6 +557,15 @@ class AdminForth {
                         return { error: resp.error };
                     }
                 }
+                // 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];
+                        }
+                    });
+                });
+                console.log('data', data);
                 return Object.assign(Object.assign({}, data), { options: resource === null || resource === void 0 ? void 0 : resource.options });
             }),
         });
@@ -647,7 +665,6 @@ class AdminForth {
             }),
         });
         server.endpoint({
-            noAuth: true, // TODO
             method: 'POST',
             path: '/create_record',
             handler: (_y) => __awaiter(this, [_y], void 0, function* ({ body, adminUser }) {
@@ -716,7 +733,6 @@ class AdminForth {
             })
         });
         server.endpoint({
-            noAuth: true, // TODO
             method: 'POST',
             path: '/update_record',
             handler: (_8) => __awaiter(this, [_8], void 0, function* ({ body, adminUser }) {
@@ -744,11 +760,18 @@ 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) {
                     yield connector.updateRecord({ resource, recordId, record, newValues });
                 }
@@ -768,7 +791,6 @@ class AdminForth {
             })
         });
         server.endpoint({
-            noAuth: true, // TODO
             method: 'POST',
             path: '/delete_record',
             handler: (_17) => __awaiter(this, [_17], void 0, function* ({ body, adminUser }) {
@@ -806,7 +828,6 @@ class AdminForth {
             })
         });
         server.endpoint({
-            noAuth: true, // TODO
             method: 'POST',
             path: '/start_bulk_action',
             handler: (_26) => __awaiter(this, [_26], void 0, function* ({ body }) {

package/dist/modules/codeInjector.js

@@ -7,14 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-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 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 { ADMIN_FORTH_ABSOLUTE_PATH } from './utils.js';
 let TMP_DIR;
 try {
@@ -71,7 +71,7 @@ class CodeInjector {
     }
     prepareSources(_a) {
         return __awaiter(this, arguments, void 0, function* ({ filesUpdated, verbose = false }) {
-            var _b, _c, _d, _e, _f, _g;
+            var _b, _c, _d, _e, _f, _g, _h;
             // check SPA_TMP_PATH exists and create if not
             try {
                 yield fs.promises.access(CodeInjector.SPA_TMP_PATH, fs.constants.F_OK);
@@ -154,6 +154,25 @@ class CodeInjector {
                 }).join('');
                 return `import { ${PascalIconName} } from '@iconify-prerendered/vue-${collection}';`;
             }).join('\n');
+            // for each custom component generate import statement
+            const customComponentsDir = (_c = this.adminforth.config.customization) === null || _c === void 0 ? void 0 : _c.customComponentsDir;
+            let customComponentsImports = '';
+            if (customComponentsDir) {
+                // if file - return, if dir - go recursively
+                const customComponents = yield 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(':');
@@ -162,26 +181,44 @@ class CodeInjector {
                 }).join('');
                 return `app.component('${PascalIconName}', ${PascalIconName});`;
             }).join('\n');
+            // Generate Vue.component statements for each custom component
+            let customComponentsComponents = '';
+            if (customComponentsDir) {
+                const customComponents = yield 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';
-            if ((_c = this.adminforth.config.customization) === null || _c === void 0 ? void 0 : _c.vueUsesFile) {
+            imports += customComponentsImports + '\n';
+            if ((_d = this.adminforth.config.customization) === null || _d === void 0 ? void 0 : _d.vueUsesFile) {
                 imports += `import addCustomUses from '${this.adminforth.config.customization.vueUsesFile}';\n`;
             }
             // inject that code into spa_tmp/src/App.vue
             const appVuePath = path.join(CodeInjector.SPA_TMP_PATH, 'src', 'main.ts');
             let appVueContent = yield fs.promises.readFile(appVuePath, 'utf-8');
             appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH IMPORTS */', imports);
-            appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */', iconComponents + '\n');
-            if ((_d = this.adminforth.config.customization) === null || _d === void 0 ? void 0 : _d.vueUsesFile) {
+            appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */', iconComponents + '\n' + customComponentsComponents + '\n');
+            if ((_e = this.adminforth.config.customization) === null || _e === void 0 ? void 0 : _e.vueUsesFile) {
                 appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH CUSTOM USES */', 'addCustomUses(app);');
             }
             yield fs.promises.writeFile(appVuePath, appVueContent);
             /* generate custom rotes */
             const homepageMenuItem = this.adminforth.config.menu.find((mi) => mi.homepage);
             let childrenHomePageMenuItem = this.adminforth.config.menu.find((mi) => { var _a; return mi.children && ((_a = mi.children) === null || _a === void 0 ? void 0 : _a.find((mi) => mi.homepage)); });
-            let childrenHomepage = (_e = childrenHomePageMenuItem === null || childrenHomePageMenuItem === void 0 ? void 0 : childrenHomePageMenuItem.children) === null || _e === void 0 ? void 0 : _e.find((mi) => mi.homepage);
+            let childrenHomepage = (_f = childrenHomePageMenuItem === null || childrenHomePageMenuItem === void 0 ? void 0 : childrenHomePageMenuItem.children) === null || _f === void 0 ? void 0 : _f.find((mi) => mi.homepage);
             let homePagePath = (homepageMenuItem === null || homepageMenuItem === void 0 ? void 0 : homepageMenuItem.path) || `/resource/${childrenHomepage === null || childrenHomepage === void 0 ? void 0 : childrenHomepage.resourceId}`;
             if (!homePagePath) {
-                homePagePath = ((_f = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _f === void 0 ? void 0 : _f.path) || `/resource/${(_g = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _g === void 0 ? void 0 : _g.resourceId}`;
+                homePagePath = ((_g = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _g === void 0 ? void 0 : _g.path) || `/resource/${(_h = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _h === void 0 ? void 0 : _h.resourceId}`;
             }
             routes += `{
       path: '/',

package/dist/spa/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/dist/spa/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?.create) {
+          acc[column.name] = getCustomComponent(column.component.create.replace('@@', '').replace('./custom/', '')).split('.')[0];
+      }
+      return acc;
     }, {});
   loading.value = false;
 });

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();
@@ -91,12 +91,10 @@ 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;
-  }, {});
+          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,
@@ -432,12 +433,10 @@ 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;
-  }, {});
+          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('@@')) {
@@ -608,7 +621,7 @@ class AdminForth {
         );
 
         data.data.forEach((item) => {
-          item._label = resource.itemLabel(item)
+          item._label = resource.itemLabel(item);
         })
 
       
@@ -623,6 +636,16 @@ 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];
+            }
+          })
+        });
+        console.log('data', data);
+
         return {...data, options: resource?.options };
       },
     });
@@ -726,7 +749,6 @@ class AdminForth {
     });
 
     server.endpoint({
-        noAuth: true, // TODO
         method: 'POST',
         path: '/create_record',
         handler: async ({ body, adminUser }) => {
@@ -801,7 +823,6 @@ class AdminForth {
         }
     });
     server.endpoint({
-        noAuth: true, // TODO
         method: 'POST',
         path: '/update_record',
         handler: async ({ body, adminUser }) => {
@@ -832,11 +853,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});
             }
@@ -859,7 +888,6 @@ class AdminForth {
         }
     });
     server.endpoint({
-        noAuth: true, // TODO
         method: 'POST',
         path: '/delete_record',
         handler: async ({ body, adminUser }) => {
@@ -901,7 +929,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.47",
+  "version": "1.0.49",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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?.create) {
+          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();
@@ -91,12 +91,10 @@ 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;
-  }, {});
+          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,
@@ -432,12 +433,10 @@ 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;
-  }, {});
+          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;
 });
 

package/types/AdminForthConfig.ts

@@ -1,8 +1,8 @@
 
 
 export type AdminForthConfigMenuItem = {
-    type: 'heading' | 'group' | 'resource' | 'page' | undefined,
-    label: string,
+    type?: 'heading' | 'group' | 'resource' | 'page' | 'gap' | 'divider',
+    label?: string,
     icon?: string,
     path?: string,
     component?: string,
@@ -34,6 +34,7 @@ export type AdminForthResourceColumn = {
     enum?: Array<AdminForthResourceColumnEnumElement>,
     foreignResource?:AdminForthResourceColumnForeignResource,
     sortable?: boolean,
+    backendOnly?: boolean, // if true field will not be passed to UI under no circumstances, but will be presented in hooks
   } 
   
 export type AdminForthResource = {