adminforth 1.1.4 → 1.1.6

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">
 
@@ -152,7 +152,7 @@ const router = useRouter();
 
 const props = defineProps({
   loading: Boolean,
-  resourceColumns: Object,
+  resource: Object,
   record: Object,
   validating: Boolean,
   customComponentsPerColumn: Object,
@@ -228,7 +228,7 @@ onMounted(() => {
 
 const columnOptions = computedAsync(async () => { 
   return (await Promise.all(
-    Object.values(props.resourceColumns).map(async (column) => {
+    Object.values(props.resource.columns).map(async (column) => {
       if (column.foreignResource) {
         const list = await callAdminForthApi({
           method: 'POST',
@@ -251,7 +251,7 @@ const coreStore = useCoreStore();
 
 const editableColumns = computed(() => {
   const mode = props.record ? 'edit' : 'create';
-  return props.resourceColumns?.filter(column => column.showIn.includes(mode));
+  return props.resource?.columns?.filter(column => column.showIn.includes(mode));
 });
 
 const isValid = computed(() => {

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>
@@ -146,7 +146,13 @@
           <div class="flex">
           <RouterLink
             v-if="resource.options?.allowedActions.show"
-            :to="{ name: 'resource-show', params: { resourceId: $route.params.resourceId, primaryKey: row._primaryKeyValue } }"
+            :to="{ 
+              name: 'resource-show', 
+              params: { 
+                resourceId: resource.resourceId, 
+                primaryKey: row._primaryKeyValue,
+              }
+            }"
             class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
             :data-tooltip-target="`tooltip-show-${rowI}`"
           >
@@ -161,10 +167,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.resourceId,
+                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 +247,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 +262,7 @@
           </svg>
         </button>
     </div>
+
   </div>
 </template>
 
@@ -287,6 +297,7 @@ const props = defineProps([
   'rows',
   'totalRows',
   'pageSize',
+  'checkboxes'
 ])
 
 // emits, update page
@@ -297,7 +308,7 @@ const emits = defineEmits([
 
 ]);
 
-const checkboxes = ref([]);
+const checkboxesInternal = ref([]);
 const page = ref(1);
 const sort = ref([]);
 
@@ -310,32 +321,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,12 @@
-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'
+import type { AdminForthResourceColumn } from '@/types/AdminForthConfig';
+
+
 
 
 
@@ -9,13 +15,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 +37,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 +59,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: AdminForthResourceColumn) => 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: FilterParams) => 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

@@ -1,14 +1,22 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { callAdminForthApi } from '@/utils';
+import type { AdminForthResource, AdminForthResourceColumn } from '@/types/AdminForthConfig';
+import type { Ref } from 'vue'
 
 export const useCoreStore = defineStore('core', () => {
-  const resourceById = ref([]);
+  const resourceById: Ref<Object> = ref({});
   const menu = ref([]);
   const config = ref({});
   const record = ref({});
-  const resourceColumns = ref(null);
-  const resource = ref(null);
+  const resource: Ref<AdminForthResource | null> = ref(null);
+
+  const resourceColumnsWithFilters = computed(() => {
+    if (!resource.value) {
+      return [];
+    }
+    return resource.value.columns.filter((col: AdminForthResourceColumn) => col.showIn?.includes('filter'));
+  })
 
   const resourceOptions = ref(null);
   const resourceColumnsError = ref('');
@@ -24,7 +32,7 @@ export const useCoreStore = defineStore('core', () => {
       return
     }
     menu.value = resp.menu;
-    resourceById.value = resp.resources.reduce((acc, resource) => {
+    resourceById.value = resp.resources.reduce((acc: Object, resource: AdminForthResource) => {
       acc[resource.resourceId] = resource;
       return acc;
     }, {});
@@ -36,7 +44,7 @@ export const useCoreStore = defineStore('core', () => {
   async function fetchRecord({ resourceId, primaryKey }) {
     record.value = null;
     
-    if (!resourceColumns.value) {
+    if (!resource.value) {
       throw new Error('Columns not fetched yet');
     }
 
@@ -48,7 +56,7 @@ export const useCoreStore = defineStore('core', () => {
         resourceId: resourceId,
         filters: [
           {
-            field: resourceColumns.value.find((col) => col.primaryKey).name,
+            field: resource.value.columns.find((col: AdminForthResourceColumn) => col.primaryKey).name,
             operator: 'eq',
             value: primaryKey
           }
@@ -64,13 +72,12 @@ export const useCoreStore = defineStore('core', () => {
     resourceOptions.value = respData.options;
   }
 
-  async function fetchResourceFull({ resourceId }) {
-    if (resourceColumnsId.value === resourceId && resourceColumns.value) {
+  async function fetchResourceFull({ resourceId }: { resourceId: string }) {
+    if (resourceColumnsId.value === resourceId && resource.value) {
       // already fetched
       return;
     }
     resourceColumnsId.value = resourceId;
-    resourceColumns.value = null;
     resourceColumnsError.value = '';
     const res = await callAdminForthApi({
       path: '/get_resource',
@@ -82,7 +89,6 @@ export const useCoreStore = defineStore('core', () => {
     if (res.error) {
       resourceColumnsError.value = res.error;
     } else {
-      resourceColumns.value = res.resource.columns;
       resourceById.value[resourceId] = res.resource;
       resource.value = res.resource;
       resourceOptions.value = res.resource.options;
@@ -125,12 +131,12 @@ export const useCoreStore = defineStore('core', () => {
     fetchMenuAndResource, 
     fetchRecord, 
     record, 
-    resourceColumns, 
     fetchResourceFull, 
     resourceColumnsError,
     resourceOptions,
     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;