adminforth 1.0.67 → 1.0.69

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

@@ -65,7 +65,7 @@
     </BreadcrumbsWithButtons>
 
     <!-- table -->
-    <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	  dark:s">
+    <div class="relative overflow-x-auto shadow-md sm:rounded-lg dark:shadow-2xl">
 
 
       <!-- skelet loader -->
@@ -90,7 +90,7 @@
       </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-view-table-heading-text bg-list-view-table-heading dark:bg-gray-700 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">
@@ -127,7 +127,7 @@
         </tr>
         </thead>
         <tbody>
-        <tr v-if="!rows" class="bg-list-view-table-bg border-b dark:bg-gray-800 dark:border-gray-700">
+        <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"
@@ -171,7 +171,7 @@
             </div>
           </td>
         </tr>
-        <tr v-else-if="rows.length === 0" class="bg-list-view-table-bg border-b dark:bg-gray-800 dark:border-gray-700">
+        <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"
@@ -185,7 +185,7 @@
         </tr>
 
         <tr v-else v-for="(row, rowI) in rows" :key="row.id"
-            class="bg-list-view-table-bg border-b dark:bg-gray-800 border-list-view-border-color dark:border-gray-700 hover:bg-list-view-table-row-hover dark:hover:bg-gray-600">
+            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
@@ -198,12 +198,7 @@
             </div>
           </td>
           <td v-for="c in columnsListed" class="px-6 py-4">
-            <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
-            <component
-              :is="listComponentsPerColumn[c.name] || ValueRenderer"
-              :column="c"
-              :row="row"
-            />
+            <ValueRenderer :column="c" :row="row"/>
           </td>
           <td class="flex items-center px-6 py-4">
 
@@ -315,28 +310,29 @@
 </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 BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-import { useCoreStore } from '@/stores/core';
-import { useModalStore } from '@/stores/modal';
-import { callAdminForthApi, getIcon } from '@/utils';
-import { initFlowbite } from 'flowbite';
-import { computed, onMounted, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import {initFlowbite} from 'flowbite'
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
-import { getCustomComponent } from '@/utils';
 
 import {
-IconInboxOutline,
-IconPlusOutline
+  IconChevronDoubleLeftOutline,
+  IconChevronDoubleRightOutline,
+  IconInboxFullSolid,
+  IconInboxOutline,
+  IconPlusOutline
 } from '@iconify-prerendered/vue-flowbite';
 
 import {
-IconBanOutline,
-IconEyeSolid,
-IconFilterOutline,
-IconPenSolid,
-IconTrashBinSolid
+  IconEyeSolid,
+  IconTrashBinSolid,
+  IconPenSolid,
+  IconFilterOutline, IconBanOutline
 } from '@iconify-prerendered/vue-flowbite';
 
 import Filters from '@/components/Filters.vue';
@@ -361,6 +357,7 @@ const totalRows = ref(0);
 const allCheckedActions = ref([]);
 const allowedActions = ref({});
 
+
 const DEFAULT_PAGE_SIZE = 10;
 
 const columnsListed = computed(() => coreStore.resourceColumns?.filter(c => c.showIn.includes('list')));
@@ -379,7 +376,6 @@ async function selectAll(value) {
 
 const pageSize = computed(() => coreStore.resourceById[route.params.resourceId]?.pageSize || DEFAULT_PAGE_SIZE);
 const totalPages = computed(() => Math.ceil(totalRows.value / pageSize.value));
-let listComponentsPerColumn = {};
 const allFromThisPageChecked = computed(() => {
   if (!rows.value) return false;
   return rows.value.every((r) => checkboxes.value.includes(r.id));
@@ -423,7 +419,6 @@ async function getList() {
     path: '/get_resource_data',
     method: 'POST',
     body: {
-      source: 'list',
       resourceId: route.params.resourceId,
       limit: pageSize.value,
       offset: (page.value - 1) * pageSize.value,
@@ -431,14 +426,7 @@ async function getList() {
       sort: sort.value,
     }
   });
-  listComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-      if (column.component?.list) {
-          acc[column.name] = getCustomComponent(column.component.list);
-      }
-      return acc;
-    }, {});
-
-fetchStatus.value.pending = false;
+  fetchStatus.value.pending = false;
   rows.value = data.data?.map(row => {
     row._primaryKeyValue = row[coreStore.resourceColumns.find(c => c.primaryKey).name];
     return row;

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

@@ -11,7 +11,7 @@
     <div id="authentication-modal" tabindex="-1" class=" overflow-y-auto overflow-x-hidden z-50 min-w-[400px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-w-md max-h-full">
             <!-- Modal content -->
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
+            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                 <!-- Modal header -->
                 <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                     <h3 class="text-xl font-semibold text-gray-900 dark:text-white">

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

@@ -1,5 +1,5 @@
 <template>
-  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`">
+  <div>
     <RouterView/>
   </div>
 </template>

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

@@ -27,10 +27,10 @@
     </div>
     <div 
       v-else
-      class="relative overflow-x-auto shadow-resourse-form-shadow "
+      class="relative overflow-x-auto shadow-md sm:rounded-lg"
     >
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-        <thead class="text-xs text-gray-700 uppercase bg-form-view-heading dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
             <tr>
                 <th scope="col" class="px-6 py-3">
                     Field
@@ -42,17 +42,13 @@
         </thead>
         <tbody>
             <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
-                class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
+                class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
             >
                 <td class="px-6 py-4 whitespace-nowrap">
                     {{ column.label }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
-                    <component
-                        :is="showComponentsPerColumn[column.name] || ValueRenderer"
-                        :column="column"
-                        :row="coreStore.record"
-                    />
+                    <ValueRenderer :column="column" :row="coreStore.record" />
                 </td>
             </tr>
             
@@ -67,19 +63,18 @@
 
 <script setup>
 
+import { ref, computed, onMounted } from 'vue';  
+import { useRoute } from 'vue-router';
+import { callAdminForthApi } from '@/utils';
 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 { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useCoreStore } from '@/stores/core';
+import ValueRenderer from '@/components/ValueRenderer.vue';
 
 
 const item = ref(null);
 const route = useRoute();
 const loading = ref(false);
-let showComponentsPerColumn = {};
 
 const coreStore = useCoreStore();
 
@@ -92,12 +87,6 @@ onMounted(async () => {
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
   });
-  showComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-      if (column.component?.show) {
-          acc[column.name] = getCustomComponent(column.component.show);
-      }
-      return acc;
-    }, {});
   loading.value = false;
 });
 

package/dist/spa/tailwind.config.js

@@ -1,12 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content:  ["./src/**/*.{vue, js}","./src/*.{vue, js}", "./index.html", "./node_modules/flowbite/**/*.js"],
+  content:  ["./src/**/*.{vue, js}", "./node_modules/flowbite/**/*.js"],
   theme: {
-    extend: {
-      /* IMPORTANT:ADMINFORTH TAILWIND STYLES */
-  }
+    extend: {},
   },
-
   darkMode: 'class',
   plugins: [
     require('flowbite/plugin'),

package/documentation/docusaurus.config.ts

@@ -92,9 +92,9 @@ const config: Config = {
         },
         {
           type: 'docSidebar',
-          sidebarId: 'tutorialSidebar',
+          sidebarId: 'apiSidebar',
           position: 'left',
-          label: 'Tutorial',
+          label: 'API',
         },
         {to: '/blog', label: 'Blog', position: 'left'},
         {

package/documentation/sidebars.ts

@@ -20,7 +20,7 @@ const sidebars: SidebarsConfig = {
     },
   ],
 
-  mySidebar: [
+  apiSidebar: [
     {
       type: "category",
       label: "API",

package/index.ts

@@ -110,12 +110,21 @@ class AdminForth {
     if (!this.config.baseUrl) {
       this.config.baseUrl = '';
     }
-    if (!this.config.brandName) {
-      this.config.brandName = 'AdminForth';
+    if (!this.config?.customization.brandName) {
+      this.config.customization.brandName = 'AdminForth';
     }
+    if (this.config.customization.brandLogo) {
+      if (!this.config.customization.brandLogo.startsWith('@@/')) {
+        errors.push(`Brand logo must start with @@ and be placed in custom directory`);
+      }
+      // todo check file exist
+    }
+    
+
 
-    if (!this.config.datesFormat) {
-      this.config.datesFormat = 'MMM D, YYYY HH:mm:ss';
+
+    if (!this.config.customization.datesFormat) {
+      this.config.customization.datesFormat = 'MMM D, YYYY HH:mm:ss';
     }
 
     if (this.config.resources) {
@@ -469,10 +478,10 @@ class AdminForth {
         const usernameColumn = resource.columns.find((col) => col.name === usernameField);
 
         return {
-          brandName: this.config.brandName,
+          brandName: this.config.customization.brandName,
           usernameFieldName: usernameColumn.label,
           loginBackgroundImage: this.config.auth.loginBackgroundImage,
-          title: this.config?.title,
+          title: this.config.customization?.title,
         };
       },
     });
@@ -516,12 +525,13 @@ class AdminForth {
           })),
           menu: this.config.menu,
           config: { 
-            brandName: this.config.brandName,
-            datesFormat: this.config.datesFormat,
+            brandName: this.config.customization.brandName,
+            brandLogo: this.config.customization.brandLogo,
+            datesFormat: this.config.customization.datesFormat,
             deleteConfirmation: this.config.deleteConfirmation,
             auth: this.config.auth,
             usernameField: this.config.auth.usernameField,
-            title: this.config?.title,
+            title: this.config.customization?.title,
           },
           adminUser,
           version: ADMINFORTH_VERSION,
@@ -643,10 +653,6 @@ class AdminForth {
           })
         );
 
-        data.data.forEach((item) => {
-          item._label = resource.itemLabel(item);
-        })
-
         for (const hook of getFunctionList(resource.hooks?.[source]?.afterDatasourceResponse)) {
           const resp = await hook({ resource, response: data.data, adminUser });
           if (!resp || (!resp.ok && !resp.error)) {
@@ -667,6 +673,10 @@ class AdminForth {
           })
         });
 
+        data.data.forEach((item) => {
+          item._label = resource.itemLabel(item);
+        });
+
         return {
           ...data, 
           options: resource?.options,

package/modules/codeInjector.ts

@@ -107,11 +107,13 @@ class CodeInjector {
               path: '${item.path}',
               name: '${item.path}',
               component: () => import('${item.component}'),
+              meta: { title: '${item?.meta?.title}'}
             },\n`} else {
               routes += `{
                 path: '${item.path}',
                 name: '${item.path}',
                 component: ${getComponentNameFromPath(item.component)},
+                meta: { title: '${item?.meta?.title}'}
               },\n`
               const componentName = `${getComponentNameFromPath(item.component)}`;
               routerComponents += `import ${componentName} from '${item.component}';\n`;
@@ -122,6 +124,7 @@ class CodeInjector {
                 path: '${item.path}',
                 name: '${item.path}',
                 component: ${getComponentNameFromPath(item.component)},
+                meta: { title: '${item?.meta?.title}'}
               },\n`
               const componentName = `${getComponentNameFromPath(item.component)}`;
               routerComponents += `import ${componentName} from '${item.component}';\n`;}
@@ -129,7 +132,8 @@ class CodeInjector {
               routes += `{
                 path: '${item.path}',
                 name: '${item.path}',
-                component: () => import('${item.component}'),
+                component: () => import('${item.component}'),}
+                meta: { title: '${item?.meta?.title}'
               },\n` 
               
             }
@@ -239,7 +243,7 @@ class CodeInjector {
       this.allComponentNames[filePath] = componentName;
     });
 
-    console.log('🔧 Injecting code into Vue sources...', this.allComponentNames);
+    // console.log('🔧 Injecting code into Vue sources...', this.allComponentNames);
     
     let customComponentsImports = '';
     for (const [targetPath, component] of Object.entries(this.allComponentNames)) {
@@ -299,7 +303,7 @@ class CodeInjector {
     // inject title to index.html
     const indexHtmlPath = path.join(CodeInjector.SPA_TMP_PATH, 'index.html');
     let indexHtmlContent = await fs.promises.readFile(indexHtmlPath, 'utf-8');
-    indexHtmlContent = indexHtmlContent.replace('/* IMPORTANT:ADMINFORTH TITLE */', `${this.adminforth.config.title || 'AdminForth'}`);
+    indexHtmlContent = indexHtmlContent.replace('/* IMPORTANT:ADMINFORTH TITLE */', `${this.adminforth.config.customization.title || 'AdminForth'}`);
     await fs.promises.writeFile(indexHtmlPath, indexHtmlContent);
 
 

package/package.json

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

package/servers/express.ts

@@ -135,7 +135,7 @@ class ExpressServer {
           fileExists = false;
         }
         if (!fileExists) {
-          res.status(500).send(respondNoServer(`${this.adminforth.config.brandName} is still warming up`, 'Please wait a moment...'));
+          res.status(500).send(respondNoServer(`${this.adminforth.config.customization.brandName} is still warming up`, 'Please wait a moment...'));
           return;
         }
         res.sendFile(fullPath, { 

package/spa/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/favicon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>/* IMPORTANT:ADMINFORTH TITLE */</title>
 <!--     

package/spa/package-lock.json

@@ -36,7 +36,7 @@
         "sass": "^1.77.2",
         "tailwindcss": "^3.4.3",
         "typescript": "~5.4.0",
-        "vite": "^5.2.12",
+        "vite": "^5.2.13",
         "vue-tsc": "^2.0.11"
       }
     },
@@ -4033,9 +4033,9 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "5.2.12",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.12.tgz",
-      "integrity": "sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==",
+      "version": "5.2.13",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.13.tgz",
+      "integrity": "sha512-SSq1noJfY9pR3I1TUENL3rQYDQCFqgD+lM6fTRAM8Nv6Lsg5hDLaXkjETVeBt+7vZBCMoibD+6IWnT2mJ+Zb/A==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",

package/spa/package.json

@@ -40,7 +40,7 @@
     "sass": "^1.77.2",
     "tailwindcss": "^3.4.3",
     "typescript": "~5.4.0",
-    "vite": "^5.2.12",
+    "vite": "^5.2.13",
     "vue-tsc": "^2.0.11"
   }
 }

package/spa/src/App.vue

@@ -66,11 +66,11 @@
     <div class="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800">
 
       <div class="flex ms-2 md:me-24  m-4  ">
-            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
-            <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
-              {{ coreStore.config?.brandName }}
-            </span>
-          </div>
+        <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="h-8 me-3"  />
+        <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
+          {{ coreStore.config?.brandName }}
+        </span>
+      </div>
         <ul class="space-y-2 font-medium">
           <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
             <div v-if="item.type === 'divider'" class="border-t border-nav-menu-devider dark:border-gray-700"></div>
@@ -151,6 +151,27 @@ import { createHead } from 'unhead'
 const coreStore = useCoreStore();
 
 
+const splitAtLast = (str: string, separator: string) => {
+  const index = str.lastIndexOf(separator);
+  return [str.slice(0, index), str.slice(index + 1)];
+}
+
+const loadFile = (file: string) => {
+  let path;
+  let baseUrl = '';
+  if (file.startsWith('@/')) {
+    path = file.replace('@/', '');
+    baseUrl = new URL(`./${path}`, import.meta.url).href;
+  } else if (file.startsWith('@@/')) {
+    path = file.replace('@@/', '');
+    baseUrl = new URL(`./custom/${path}`, import.meta.url).href;
+  } else {
+    baseUrl = new URL(`./${file}`, import.meta.url).href;
+  }
+  return baseUrl;
+}
+
+
 createHead()
 
 
@@ -159,6 +180,13 @@ const sideBarOpen = ref(false);
 
 
 const route = useRoute();
+watch(route, () => {
+  title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
+  useHead({
+  title: title.value,
+})
+});
+
 const router = useRouter();
 const title = ref('');
 //create a ref to store the opened menu items with ts type;
@@ -207,17 +235,7 @@ onMounted(async () => {
     }, 100); 
   await coreStore.fetchMenuAndResource();
   loginRedirectCheckIsReady.value = true;
-  title.value = coreStore.config?.title || 'AdminForth';
-//   useHead({
-//   title: title.value,
-//   link: [
-//     {
-//       rel: 'icon',
-//       href: coreStore.config.favicon || '/favicon.ico',
-//     },
-//   ],
-  
-// })
+ 
 coreStore.menu.forEach((item, i) => {
   if (item.open) {
     opened.value.push(i);

package/spa/src/assets/logo.svg

@@ -1 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_8)">
+<path d="M8.034 6.006V13H6.097V12.194C5.59433 12.8007 4.86633 13.104 3.913 13.104C3.25433 13.104 2.65633 12.9567 2.119 12.662C1.59033 12.3673 1.17433 11.947 0.871 11.401C0.567667 10.855 0.416 10.2223 0.416 9.503C0.416 8.78367 0.567667 8.151 0.871 7.605C1.17433 7.059 1.59033 6.63867 2.119 6.344C2.65633 6.04933 3.25433 5.902 3.913 5.902C4.80567 5.902 5.50333 6.18367 6.006 6.747V6.006H8.034ZM4.264 11.44C4.77533 11.44 5.2 11.2667 5.538 10.92C5.876 10.5647 6.045 10.0923 6.045 9.503C6.045 8.91367 5.876 8.44567 5.538 8.099C5.2 7.74367 4.77533 7.566 4.264 7.566C3.744 7.566 3.315 7.74367 2.977 8.099C2.639 8.44567 2.47 8.91367 2.47 9.503C2.47 10.0923 2.639 10.5647 2.977 10.92C3.315 11.2667 3.744 11.44 4.264 11.44Z" fill="url(#paint0_linear_1_8)"/>
+<path d="M13.317 5.538C12.589 5.538 12.0387 5.69833 11.666 6.019C11.2933 6.331 11.107 6.80333 11.107 7.436V7.995H14.851V9.685H11.107V13H9.001V7.449C9.001 6.279 9.365 5.369 10.093 4.719C10.8297 4.069 11.8567 3.744 13.174 3.744C13.694 3.744 14.1837 3.80033 14.643 3.913C15.1023 4.017 15.501 4.173 15.839 4.381L15.189 6.045C14.669 5.707 14.045 5.538 13.317 5.538Z" fill="url(#paint1_linear_1_8)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1_8" x1="1.5" y1="6.93333" x2="7.31883" y2="11.8926" gradientUnits="userSpaceOnUse">
+<stop stop-color="#656E7A"/>
+<stop offset="1" stop-color="#99A6B8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_8" x1="12.5" y1="3.73333" x2="9.68642" y2="12.7016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#48C5FF"/>
+<stop offset="1" stop-color="#A1E1FF"/>
+</linearGradient>
+<clipPath id="clip0_1_8">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/spa/src/router/index.ts

@@ -8,7 +8,8 @@ const router = createRouter({
     {
       path: '/login',
       name: 'login',
-      component: () => import('@/views/LoginView.vue')
+      component: () => import('@/views/LoginView.vue'),
+      meta: { title: 'login' }
     },
     {
       path: '/resource/:resourceId',
@@ -18,22 +19,28 @@ const router = createRouter({
         {
           path: '',
           component: () => import('@/views/ListView.vue'),
-          name: 'resource-list'
+          name: 'resource-list',
+          meta: { title: 'list' }
         },
         {
           path: 'show/:primaryKey',
           component: () => import('@/views/ShowView.vue'),
-          name: 'resource-show'
+          name: 'resource-show',
+          meta: { title: 'show' }
+
         },
         {
           path: 'edit/:primaryKey',
           component: () => import('@/views/EditView.vue'),
-          name: 'resource-edit'
+          name: 'resource-edit',
+          meta: { title: 'edit' }
         },
         {
           path: 'create',
           component: () => import('@/views/CreateView.vue'),
-          name: 'resource-create'
+          name: 'resource-create',
+          meta: { title: 'create' }
+
         },
       ]
     }, 

package/spa/src/stores/core.ts

@@ -66,7 +66,7 @@ export const useCoreStore = defineStore('core', () => {
     resourceOptions.value = respData.options;
   }
 
-  async function fetchColumns({ resourceId }) {
+  async function fetchResourceFull({ resourceId }) {
     if (resourceColumnsId.value === resourceId && resourceColumns.value) {
       // already fetched
       return;
@@ -86,6 +86,7 @@ export const useCoreStore = defineStore('core', () => {
       resourceColumnsError.value = res.error;
     } else {
       resourceColumns.value = res.resource.columns;
+      resourceById.value[resourceId] = res.resource;
     }
   }
 
@@ -126,7 +127,7 @@ export const useCoreStore = defineStore('core', () => {
     fetchRecord, 
     record, 
     resourceColumns, 
-    fetchColumns, 
+    fetchResourceFull, 
     resourceColumnsError,
     flowBitIsInitialised,
     resourceOptions,

package/spa/src/views/CreateView.vue

@@ -71,7 +71,7 @@ async function onUpdateRecord(newRecord) {
 
 onMounted(async () => {
   loading.value = true;
-  await coreStore.fetchColumns({
+  await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
   createComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {

package/spa/src/views/EditView.vue

@@ -81,7 +81,7 @@ const editableRecord = computed(() => {
 onMounted(async () => {
   loading.value = true;
 
-  await coreStore.fetchColumns({
+  await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
   await coreStore.fetchRecord({