adminforth 1.1.3 → 1.1.5

package/dist/index.js

@@ -35,6 +35,7 @@ class AdminForth {
         });
         this.config = Object.assign(Object.assign({}, __classPrivateFieldGet(this, _AdminForth_defaultConfig, "f")), config);
         this.codeInjector = new CodeInjector(this);
+        this.activatedPlugins = [];
         this.validateConfig();
         this.activatePlugins();
         this.validateConfig(); // revalidate after plugins
@@ -48,6 +49,7 @@ class AdminForth {
         for (let resource of this.config.resources) {
             for (let pluginInstance of resource.plugins || []) {
                 pluginInstance.modifyResourceConfig(this, resource);
+                this.activatedPlugins.push(pluginInstance);
             }
         }
         ;
@@ -950,6 +952,10 @@ class AdminForth {
                 };
             })
         });
+        // setup endpoints for all plugins
+        this.activatedPlugins.forEach((plugin) => {
+            plugin.setupEndpoints(server);
+        });
     }
 }
 _a = AdminForth, _AdminForth_defaultConfig = new WeakMap();

package/dist/modules/styles.js

@@ -2,19 +2,20 @@ export const styles = () => `
 
   "colors": {
     "html-bg": "#FFFFFF", // Changed to white
-    "header-bg": "#EDEDED", // Light grey
+    "header-bg": "#FFFFFF", // Light grey
     "header-bg-hover": "#D3D3D3", // Light grey hover
     "header-text": "#333333", // Dark grey text
     "header-text-hover": "#333333", // Dark grey text hover
     "header-icons": "#333333", // Dark grey icons
     "header-icons-hover": "#333333", // Dark grey icons hover
     "header-logo-color": "#333333", // Dark grey logo
-    "header-border-color": "#CCCCCC", // Light grey border
+    "header-border-color": "rgb(229 231 235)", // Light grey border
 
-    "nav-menu-bg": "#F5F5F5", // Very light grey
-    "nav-menu-bg-hover": "#E0E0E0", // Light grey hover
-    "nav-menu-bg-active": "#CCCCCC", // Light grey active
-    "nav-menu-hover": "#E0E0E0", // Light grey hover
+    "nav-menu-bg": "#f9fafb", // Very light grey
+    "nav-menu-border": "rgb(229 231 235)",
+    "nav-menu-bg-hover": "rgb(243 244 246)", // Light grey hover
+    "nav-menu-bg-active": "rgb(233, 234, 236)", // Light grey active
+    "nav-menu-hover": "#rgb(209 213 219)", // Light grey hover
     "nav-menu-active": "#CCCCCC", // Light grey active
     "nav-menu-active-text": "#333333", // Dark grey active text
     "nav-menu-text": "#333333", // Dark grey text

package/dist/plugins/ForeignInlineListPlugin/index.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { AdminForthResourcePages } from "../../types/AdminForthConfig.js";
 import AdminForthPlugin from "../base.js";
 export default class ForeignInlineListPlugin extends AdminForthPlugin {
@@ -5,8 +14,27 @@ export default class ForeignInlineListPlugin extends AdminForthPlugin {
         super(options, import.meta.url);
         this.options = options;
     }
+    setupEndpoints(server) {
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/get_resource`,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body }) {
+                const resource = this.adminforth.config.resources.find((res) => this.options.foreignResourceId === res.resourceId);
+                if (!resource) {
+                    return { error: `Resource ${this.options.foreignResourceId} not found` };
+                }
+                // exclude "plugins" key
+                const resourceCopy = Object.assign(Object.assign({}, resource), { plugins: undefined });
+                if (this.options.modifyTableResourceConfig) {
+                    this.options.modifyTableResourceConfig(resourceCopy);
+                }
+                return { resource: resourceCopy };
+            }),
+        });
+    }
     modifyResourceConfig(adminforth, resourceConfig) {
         super.modifyResourceConfig(adminforth, resourceConfig);
+        this.adminforth = adminforth;
         // get resource with foreignResourceId
         this.foreignResource = adminforth.config.resources.find((resource) => resource.resourceId === this.options.foreignResourceId);
         if (!this.foreignResource) {
@@ -19,7 +47,10 @@ export default class ForeignInlineListPlugin extends AdminForthPlugin {
             virtual: true,
             showIn: [AdminForthResourcePages.show],
             components: {
-                showRow: { file: this.componentPath('InlineList.vue'), meta: this.options }
+                showRow: {
+                    file: this.componentPath('InlineList.vue'),
+                    meta: Object.assign(Object.assign({}, this.options), { pluginInstanceId: this.pluginInstanceId })
+                }
             },
         });
     }

package/dist/plugins/base.js

@@ -2,11 +2,15 @@ import { getComponentNameFromPath } from '../modules/utils.js';
 import { currentFileDir } from '../modules/utils.js';
 import path from 'path';
 import fs from 'fs';
+import { v4 as uuidv4 } from 'uuid';
 export default class AdminForthPlugin {
     constructor(pluginOptions, metaUrl) {
         this.customFolderName = 'custom';
         // set up plugin here
         this.pluginDir = currentFileDir(metaUrl);
+        this.pluginInstanceId = uuidv4();
+    }
+    setupEndpoints(server) {
     }
     modifyResourceConfig(adminforth, resourceConfig) {
         this.adminforth = adminforth;

package/dist/spa/spa/src/App.vue

@@ -59,7 +59,7 @@
 
     v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
 
-    id="logo-sidebar" class="fixed border-none top-0 left-0 z-50 w-64 h-screen  transition-transform bg-nav-menu-bg border-r border-  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" 
+    id="logo-sidebar" class="fixed border-none top-0 left-0 z-20 w-64 h-screen  transition-transform bg-nav-menu-bg border-r border-nav-menu-border  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" 
     :class="{ '-translate-x-full': !sideBarOpen, 'transform-none': sideBarOpen }"
     aria-label="Sidebar"
   >
@@ -136,7 +136,7 @@
   <div v-if="sideBarOpen" 
   @click="sideBarOpen = false"
   
-  drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"></div>
+  drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-5"></div>
 
 
 

package/dist/spa/spa/src/components/BreadcrumbsWithButtons.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="flex items-center justify-between mb-3 flex-wrap gap-y-2">
       <Breadcrumbs />
-      <div class="flex items-center space-x-1">
+      <div class="flex items-center space-x-1 flex-wrap gap-y-1">
         <slot></slot>
       </div>
     </div>

package/dist/spa/spa/src/components/Filters.vue

@@ -26,13 +26,13 @@
               v-if="c.foreignResource"
               :options="columnOptions[c.name] || []"
               @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
-              :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
             <Dropdown
               v-else-if="c.type === 'boolean'"
               :options="[{ label: 'Yes', value: true }, { label: 'No', value: false }, { label: 'Unset', value: null }]"
               @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
-              :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
             
             <Dropdown 
@@ -40,7 +40,7 @@
               :options="c.enum"
               :allowCustom="c.allowCustom"
               @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
-              :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
 
            <input
@@ -54,9 +54,9 @@
            <CustomDateRangePicker
              v-else-if="['datetime'].includes(c.type)"
              :column="c"
-             :valueStart="filters.find(f => f.field === c.name && f.operator === 'gte')?.value || undefined"
+             :valueStart="filtersStore.filters.find(f => f.field === c.name && f.operator === 'gte')?.value || undefined"
              @update:valueStart="setFilterItem({ column: c, operator: 'gte', value: $event || undefined })"
-             :valueEnd="filters.find(f => f.field === c.name && f.operator === 'lte')?.value || undefined"
+             :valueEnd="filtersStore.filters.find(f => f.field === c.name && f.operator === 'lte')?.value || undefined"
              @update:valueEnd="setFilterItem({ column: c, operator: 'lte', value: $event || undefined })"
            />
 
@@ -101,9 +101,9 @@
 
    <div class="flex justify-end gap-2">
       <button 
-        :disabled="!filters.length"
+        :disabled="!filtersStore.filters.length"
         type="button" 
-        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 disabled:opacity-50 disabled:cursor-not-allowed"
+        class="flex items-center py-1 px-3 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 disabled:opacity-50 disabled:cursor-not-allowed"
         @click="clear">Clear all</button>
 
    </div>
@@ -122,6 +122,10 @@ import { callAdminForthApi } from '@/utils';
 import { useRouter } from 'vue-router';
 import { computedAsync } from '@vueuse/core'
 import CustomRangePicker from "@/components/CustomRangePicker.vue";
+import { useFiltersStore } from '@/stores/filters';
+
+const filtersStore = useFiltersStore();
+
 
 // props: columns
 // add support for v-model:filers
@@ -180,28 +184,28 @@ watch(() => props.show, (show) => {
 
 function setFilterItem({ column, operator, value }) {
 
-  const index = props.filters.findIndex(f => f.field === column.name && f.operator === operator);
+  const index = filtersStore.filters.findIndex(f => f.field === column.name && f.operator === operator);
   if (value === undefined) {
     if (index !== -1) {
-      props.filters.splice(index, 1);
+      filtersStore.filters.splice(index, 1);
     }
-    emits('update:filters', [...props.filters]);
+    emits('update:filters', [...filtersStore.filters]);
     return;
   } else {
     if (index === -1) {
-      props.filters.push({ field: column.name, value, operator });
+      filtersStore.setFilter({ field: column.name, value, operator });
     } else {
-      props.filters[index].value = value;
+      filtersStore.setFilters([...filtersStore.filters.slice(0, index), { field: column.name, value, operator }, ...filtersStore.filters.slice(index + 1)])
     }
   }
-  emits('update:filters', [...props.filters]);
+  emits('update:filters', [...filtersStore.filters]);
 }
 
 function getFilterItem({ column, operator }) {
-  return props.filters.find(f => f.field === column.name && f.operator === operator)?.value || '';
+  return filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value || '';
 }
 
 async function clear() {
-  emits('update:filters', []);
+  filtersStore.clearFilters();
 }
 </script>

package/dist/spa/spa/src/components/ResourceForm.vue

@@ -30,18 +30,18 @@
                     />
                 </template>
                 <template v-else>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                    {{ column.label }}
-                    <span :data-tooltip-target="`tooltip-show-${i}`" class="relative inline-block">
-                        <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
-                        :class="(columnError(column) && validating) ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'"
-                        />
-                    </span>
-                    <div :id="`tooltip-show-${i}`"
-                        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">
-                        Required field
-                        <div class="tooltip-arrow" data-popper-arrow></div>
-                    </div>
+                    <td class="px-6 py-4 whitespace-nowrap "> <!--align-top-->
+                      {{ column.label }}
+                      <span :data-tooltip-target="`tooltip-show-${i}`" class="relative inline-block">
+                          <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
+                          :class="(columnError(column) && validating) ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'"
+                          />
+                      </span>
+                      <div :id="`tooltip-show-${i}`"
+                          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">
+                          Required field
+                          <div class="tooltip-arrow" data-popper-arrow></div>
+                      </div>
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative">
 

package/dist/spa/spa/src/components/ResourceListTable.vue

@@ -125,7 +125,7 @@
             <input
               id="checkbox-table-search-1"
               type="checkbox"
-              :checked="checkboxes.includes(row.id)"
+              :checked="checkboxesInternal.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>
@@ -161,10 +161,12 @@
           </div>
 
           <RouterLink v-if="resource.options?.allowedActions.edit"
-            :to="{ name: 'resource-edit', params: { 
-              resourceId: resource.id,
-              primaryKey: row._primaryKeyValue 
-            } 
+            :to="{
+              name: 'resource-edit',
+              params: { 
+                resourceId: resource.id,
+                primaryKey: row._primaryKeyValue 
+              } 
             }"
             class="font-medium text-blue-600 dark:text-blue-500 hover:underline ms-3"
             :data-tooltip-target="`tooltip-edit-${rowI}`"
@@ -239,6 +241,7 @@
           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
@@ -253,6 +256,7 @@
           </svg>
         </button>
     </div>
+
   </div>
 </template>
 
@@ -287,6 +291,7 @@ const props = defineProps([
   'rows',
   'totalRows',
   'pageSize',
+  'checkboxes'
 ])
 
 // emits, update page
@@ -297,7 +302,7 @@ const emits = defineEmits([
 
 ]);
 
-const checkboxes = ref([]);
+const checkboxesInternal = ref([]);
 const page = ref(1);
 const sort = ref([]);
 
@@ -310,32 +315,41 @@ watch(() => sort.value, (newSort) => {
   emits('update:sort', newSort);
 });
 
-watch(() => checkboxes.value, (newCheckboxes) => {
+watch(() => checkboxesInternal.value, (newCheckboxes) => {
+  console.log('checkboxesInternal ch changed, emiting', newCheckboxes)
+
   emits('update:checkboxes', newCheckboxes);
 });
 
+watch(() => props.checkboxes, (newCheckboxes) => {
+  console.log('Props ch changed', newCheckboxes)
+  checkboxesInternal.value = newCheckboxes;
+});
+
 function addToCheckedValues(id) {
-  if (checkboxes.value.includes(id)) {
-    checkboxes.value = checkboxes.value.filter((item) => item !== id);
+  if (checkboxesInternal.value.includes(id)) {
+    checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
   } else {
-    checkboxes.value.push(id);
+    checkboxesInternal.value.push(id);
   }
+  checkboxesInternal.value = [ ...checkboxesInternal.value ]
 }
 
 const columnsListed = computed(() => props.resource?.columns?.filter(c => c.showIn.includes('list')));
 
 async function selectAll(value) {
-  rows.value.forEach((r) => {
-    if (!checkboxes.value.includes(r.id)) {
-      checkboxes.value.push(r.id)
+  props.rows.forEach((r) => {
+    if (!checkboxesInternal.value.includes(r.id)) {
+      checkboxesInternal.value.push(r.id)
     } else {
-      checkboxes.value = checkboxes.value.filter((item) => item !== r.id)
+      checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== r.id)
     }
   });
+  checkboxesInternal.value = [ ...checkboxesInternal.value ]
   // checkboxes.value = rows.value.map((v) => v.id);
 }
 
-const totalPages = computed(() => Math.ceil(props.totalRows.value / props.pageSize.value));
+const totalPages = computed(() => Math.ceil(props.totalRows / props.pageSize));
 
 
 const allFromThisPageChecked = computed(() => {

package/dist/spa/spa/src/composables/useStores.ts

@@ -1,6 +1,11 @@
-import type { FrontendAPIInterface, ConfirmParams, AlertParams } from '../types/FrontendAPI';
+import type { FrontendAPIInterface, ConfirmParams, AlertParams, FilterParams,Operator } from '../types/FrontendAPI';
 import { useToastStore } from '../stores/toast';
 import { useModalStore } from '../stores/modal';
+import { useCoreStore } from '@/stores/core';
+import { useFiltersStore } from '@/stores/filters';
+import router from '@/router'
+
+
 
 
 
@@ -9,13 +14,19 @@ declare global {
     adminforth: {
       confirm: (params: ConfirmParams) => Promise<void>;
       alert: (params: AlertParams) => void;
+      setListFilter: (filter: any) => void;
+      updateListFilter: (filter: any) => void;
+      clearListFilters: () => void;
     };
   }
 }
 
 export class FrontendAPI implements FrontendAPIInterface {
+  private validOperators: Operator[] = ['lte', 'gte', 'in','ilike'];
   private toastStore:any
   private modalStore:any
+  private filtersStore:any  
+  private coreStore:any
   init() {
     if (window.adminforth) {
       throw new Error('adminforth already initialized');
@@ -25,7 +36,10 @@ export class FrontendAPI implements FrontendAPIInterface {
     console.log(this.toastStore, this.modalStore,'init of adminforth frontend api')
     window.adminforth = {
       confirm: this.confirm.bind(this),
-      alert: this.alert.bind(this)
+      alert: this.alert.bind(this),
+      setListFilter: this.setListFilter.bind(this),
+      updateListFilter: this.updateListFilter.bind(this),
+      clearListFilters: this.clearListFilters.bind(this),
     }
   }
 
@@ -44,8 +58,54 @@ export class FrontendAPI implements FrontendAPIInterface {
       variant: params.variant
     })
   }
-}
 
+  listFilterValidation(filter: FilterParams): boolean {
+    if(router.currentRoute.value.meta.type !== 'list'){
+      throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
+    } else {
+      if(!this.coreStore) this.coreStore = useCoreStore()
+      console.log(this.coreStore.resourceColumnsWithFilters,'core store')
+      const filterField = this.coreStore.resourceColumnsWithFilters.find((col) => col.name === filter.field)
+      if(!filterField){
+          throw new Error(`Field ${filter.field} is not available for filtering`)
+        }
+      if(filterField) {
+        if(!this.validOperators.includes(filter.operator)){
+          throw new Error(`Operator ${filter.operator} is not valid`)
+        } 
+      }
+    }
+    return true
+  }
+
+  setListFilter(filter: FilterParams): void {
+    if(this.listFilterValidation(filter)){
+      this.filtersStore = useFiltersStore()
+      if(this.filtersStore.filters.some((f) => {return f.field === filter.field && f.operator === filter.operator})){
+        throw new Error(`Filter ${filter.field} with operator ${filter.operator} already exists`)
+      } else {
+      this.filtersStore.setFilter(filter)
+      }
+    }
+  }
+
+  clearListFilters(): void {
+    this.filtersStore = useFiltersStore()
+    this.filtersStore.clearFilters()
+  }
+
+  updateListFilter(filter: FilterParams): void {
+    if(this.listFilterValidation(filter)){
+      this.filtersStore = useFiltersStore()
+      const index = this.filtersStore.filters.findIndex((f) => f.field === filter.field)
+      if(index === -1) {
+        this.filtersStore.setFilter(filter)
+      } else {
+      this.filtersStore.setFilters([...this.filtersStore.filters.slice(0, index), filter, ...this.filtersStore.filters.slice(index + 1)])
+      }
+    }
+  }
 
 
 
+}

package/dist/spa/spa/src/stores/core.ts

@@ -9,6 +9,12 @@ export const useCoreStore = defineStore('core', () => {
   const record = ref({});
   const resourceColumns = ref(null);
   const resource = ref(null);
+  const resourceColumnsWithFilters = computed(() => {
+    if (!resourceColumns.value) {
+      return [];
+    }
+    return resourceColumns.value.filter((col) => col.showIn.includes('filter'));
+  })
 
   const resourceOptions = ref(null);
   const resourceColumnsError = ref('');
@@ -132,5 +138,6 @@ export const useCoreStore = defineStore('core', () => {
     logout,
     resource,
     adminUser,
+    resourceColumnsWithFilters
   }
 })

package/dist/spa/spa/src/stores/filters.ts

@@ -0,0 +1,22 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { callAdminForthApi } from '@/utils';
+
+export const useFiltersStore = defineStore('filters', () => {
+    const filters = ref([]);
+    const setFilter = (filter: any) => {
+        filters.value = [...filters.value, filter];
+    }
+    const setFilters = (f: any) => {
+        filters.value = [...f];
+    }
+    const getFilters = () => {
+        return filters.value;
+    }
+    const clearFilters = () => {
+        filters.value = [];
+    }
+    return {setFilter, getFilters,clearFilters, filters,setFilters}
+    })
+
+    

package/dist/spa/spa/src/stores/modal.ts

@@ -1,6 +1,5 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import { callAdminForthApi } from '@/utils';
 
  type ModalContentType = {
   title?: string;

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

@@ -13,13 +13,13 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 mb-2 text-sm font-medium rounded-default 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="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default 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"
       >
         Cancel
       </button>
 
       <button  @click="saveRecord"
-        class="flex items-center py-1 px-3 mb-2 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+        class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
         :disabled="saving || (validating && !isValid)"
       > 
         <svg v-if="saving" x
@@ -45,7 +45,7 @@
     
     <ResourceForm 
       v-else
-      :record="{}"
+      :record="initalValues"
       :resourceColumns="coreStore.resourceColumns"
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
@@ -77,6 +77,7 @@ import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { computed } from 'vue';
 
 
 const isValid = ref(false);
@@ -93,6 +94,10 @@ let createComponentsPerColumn = {};
 
 const coreStore = useCoreStore();
 
+const initalValues = computed(() => {
+  return route.query || {};
+});
+
 async function onUpdateRecord(newRecord) {
   console.log('newRecord', newRecord);
   record.value = newRecord;

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

@@ -12,13 +12,13 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 mb-2 text-sm font-medium text-gray-900  rounded-default 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="flex items-center py-1 px-3 me-2 text-sm font-medium text-gray-900  rounded-default 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"
       >
         Cancel
       </button>
 
       <button  @click="saveRecord"
-        class="flex items-center py-1 px-3 mb-2 text-sm font-medium  rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center py-1 px-3 text-sm font-medium  rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
         :disabled="saving || (validating && !isValid)"
       >
         <IconFloppyDiskSolid class="w-4 h-4" />