adminforth 1.1.4 → 1.1.5

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

@@ -3,7 +3,6 @@
     <Teleport to="body">
       <Filters
         :columns="coreStore.resourceColumns"
-        v-model:filters="filters"
         :columnsMinMax="columnsMinMax" :show="filtersShow"
         @hide="filtersShow = false"
       />
@@ -23,7 +22,7 @@
         v-if="checkboxes.length"
         data-tooltip-target="tooltip-remove-all"
         data-tooltip-placement="bottom"
-        class="flex gap-1  items-center py-1 px-3 me-2 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"
+        class="flex gap-1  items-center py-1 px-3 me-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"
       >
         <IconBanOutline class="w-5 h-5 "/>
 
@@ -39,7 +38,7 @@
         v-for="(action,i) in coreStore.resource?.options?.bulkActions" 
         :key="action.id"
         @click="startBulkAction(action.id)"
-        class="flex gap-1 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"
+        class="flex gap-1 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"
         :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
         'bg-blue-100 text-blue-800 border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
         }"
@@ -52,24 +51,24 @@
         {{ `${action.label} (${checkboxes.length})` }}
       </button>
 
-      <RouterLink v-if="coreStore.resource?.options?.create"
+      <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        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 rounded-default"
+        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 rounded-default"
       >
         <IconPlusOutline class="w-4 h-4 me-2"/>
         Create
       </RouterLink>
 
       <button
-        class="flex gap-1 items-center py-1 px-3 me-2 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 rounded-default"
+        class="flex gap-1 items-center py-1 px-3 me-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 rounded-default"
         @click="()=>{filtersShow = !filtersShow}"
       >
         <IconFilterOutline class="w-4 h-4 me-2"/>
         Filter
         <span
           class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-          v-if="filters.length">
-            {{ filters.length }}
+          v-if="filtersStore.filters.length">
+            {{ filtersStore.filters.length }}
           </span>
       </button>
     </BreadcrumbsWithButtons>
@@ -90,6 +89,7 @@
       @update:checkboxes="checkboxes = $event"
       :pageSize="pageSize"
       :totalRows="totalRows"
+      :checkboxes="checkboxes"
     />
 
     <component 
@@ -108,6 +108,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceListTable from '@/components/ResourceListTable.vue';
 import { useCoreStore } from '@/stores/core';
 import { useModalStore } from '@/stores/modal';
+import { useFiltersStore } from '@/stores/filters';
 import { callAdminForthApi, getIcon } from '@/utils';
 import { initFlowbite } from 'flowbite';
 import { computed, onMounted, ref, watch } from 'vue';
@@ -116,17 +117,15 @@ import { useRoute } from 'vue-router';
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { getCustomComponent } from '@/utils';
 
-import {
-IconInboxOutline,
-IconPlusOutline
-} from '@iconify-prerendered/vue-flowbite';
 
 import {
-IconBanOutline,
-IconEyeSolid,
-IconFilterOutline,
-IconPenSolid,
-IconTrashBinSolid
+  IconBanOutline,
+  IconEyeSolid,
+  IconFilterOutline,
+  IconPenSolid,
+  IconTrashBinSolid,
+  IconInboxOutline,
+  IconPlusOutline
 } from '@iconify-prerendered/vue-flowbite';
 
 import Filters from '@/components/Filters.vue';
@@ -135,11 +134,12 @@ const filtersShow = ref(false);
 
 const coreStore = useCoreStore();
 const modalStore = useModalStore();
+const filtersStore = useFiltersStore();
 
 const route = useRoute();
 
 const page = ref(1);
-const filters = ref([]);
+const filters = filtersStore.filters;
 const columnsMinMax = ref({});
 const sort = ref([]);
 
@@ -157,7 +157,7 @@ watch([page], async () => {
   await getList();
 });
 
-watch([filters], async () => {
+watch(()=>filtersStore.filters, async () => {
   page.value = 1;
   await getList();
 }, {deep: true});
@@ -177,7 +177,7 @@ async function getList() {
       resourceId: route.params.resourceId,
       limit: pageSize.value,
       offset: (page.value - 1) * pageSize.value,
-      filters: filters.value,
+      filters: filtersStore.filters,
       sort: sort.value,
     }
   });
@@ -265,7 +265,7 @@ onMounted(async () => {
 
 // on route param change 
 watch(() => route.params.resourceId, async () => {
-  filters.value = [];
+  filtersStore.setFilters([]);
   checkboxes.value = [];
   sort.value = [];
   await init();

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

@@ -10,14 +10,14 @@
     />
     <BreadcrumbsWithButtons>
       <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
-        class="flex items-center py-1 px-3 me-2 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"
+        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"
       >
         <IconPenSolid class="w-4 h-4" />
         Edit
       </RouterLink>
 
       <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="showDeleteModal"
-        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"
       >
         <IconTrashBinSolid class="w-4 h-4" />
         Delete
@@ -70,7 +70,7 @@
                   :record="coreStore.record"
               />
               <template v-else>
-                <td class="px-6 py-4 whitespace-nowrap">
+                <td class="px-6 py-4 whitespace-nowrap "> <!--align-top-->
                   {{ column.label }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">

package/index.ts

@@ -13,6 +13,7 @@ import { AdminForthConfig, AdminForthClass, AdminForthComponentDeclaration,
   AdminForthFilterOperators, AdminForthDataTypes, AdminForthResourcePages } from './types/AdminForthConfig.js';
 import { getFunctionList } from './modules/utils.js';
 import path from 'path';
+import AdminForthPlugin from './plugins/base.js';
 
 
 //get array from enum AdminForthResourcePages
@@ -40,6 +41,7 @@ class AdminForth implements AdminForthClass {
   connectors: any;
   connectorClasses: any;
   runningHotReload: boolean;
+  activatedPlugins: Array<AdminForthPlugin>;
 
   statuses: {
     dbDiscover?: 'running' | 'done',
@@ -48,6 +50,7 @@ class AdminForth implements AdminForthClass {
   constructor(config: AdminForthConfig) {
     this.config = {...this.#defaultConfig,...config};
     this.codeInjector = new CodeInjector(this);
+    this.activatedPlugins = [];
     
     this.validateConfig();
     this.activatePlugins();
@@ -57,6 +60,7 @@ class AdminForth implements AdminForthClass {
     this.auth = new Auth();
     this.connectors = {};
     this.statuses = {};
+
     console.log(`🚀 AdminForth v${ADMINFORTH_VERSION} starting up`)
   }
 
@@ -64,6 +68,7 @@ class AdminForth implements AdminForthClass {
     for (let resource of this.config.resources) {
       for (let pluginInstance of resource.plugins || []) {
         pluginInstance.modifyResourceConfig(this, resource);
+        this.activatedPlugins.push(pluginInstance);
       }
     };
   }
@@ -1062,6 +1067,11 @@ class AdminForth implements AdminForthClass {
             }
         }
     })
+
+    // setup endpoints for all plugins
+    this.activatedPlugins.forEach((plugin) => {
+      plugin.setupEndpoints(server);
+    });
   }
 }
 

package/modules/styles.ts

@@ -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/package.json

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

package/plugins/ForeignInlineListPlugin/custom/InlineList.vue

@@ -1,9 +1,84 @@
 <template>
-  <td colspan="2">
-    <h4 v-if="listResource"
-        class="px-6 py-4"
+  <Teleport to="body">
+    <!-- todo exclude foreign column-->
+    <Filters
+      v-if="listResource"
+      :columns="listResource.columns"  
+      v-model:filters="filters"
+      :columnsMinMax="columnsMinMax"
+      :show="filtersShow"
+      @hide="filtersShow = false"
+    />
+    {{ listResource?.columns}}
+  </Teleport>
     
-    >{{ listResource.label }} inline records</h4>
+  <td colspan="2">
+    <div class="flex items-center gap-1">
+      <h4 v-if="listResource"
+          class="px-6 py-4"
+      >{{ listResource.label }} inline records</h4>
+
+      <button
+        @click="()=>{checkboxes = []}"
+        v-if="checkboxes.length"
+        data-tooltip-target="tooltip-remove-all"
+        data-tooltip-placement="bottom"
+        class="flex gap-1  items-center py-1 px-3 me-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"
+      >
+        <IconBanOutline class="w-5 h-5 "/>
+        <div id="tooltip-remove-all" 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">
+          Remove selection
+          <div class="tooltip-arrow" data-popper-arrow></div>
+        </div>
+      </button>
+
+      <button
+        v-if="checkboxes.length" 
+        v-for="(action,i) in listResource?.options?.bulkActions" 
+        :key="action.id"
+        @click="startBulkAction(action.id)"
+        class="flex gap-1 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"
+        :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
+        'bg-blue-100 text-blue-800 border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
+        }"
+      >
+        <component
+          v-if="action.icon"
+          :is="getIcon(action.icon)"
+          class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"></component>
+
+        {{ `${action.label} (${checkboxes.length})` }}
+      </button>
+
+      <RouterLink v-if="listResource?.options?.allowedActions?.create"
+        :to="{ 
+          name: 'resource-create', 
+          params: { resourceId: listResource.resourceId }, 
+          query: { 
+            [listResourceRefColumn.name]: props.record[selfPrimaryKeyColumn.name]
+          }
+       }"
+        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 rounded-default"
+      >
+        <IconPlusOutline class="w-4 h-4 me-2"/>
+        Create
+      </RouterLink>
+
+      <button
+        class="flex gap-1 items-center py-1 px-3 me-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 rounded-default"
+        @click="()=>{filtersShow = !filtersShow}"
+      >
+        <IconFilterOutline class="w-4 h-4 me-2"/>
+        Filter
+        <span
+          class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
+          v-if="filters.length">
+            {{ filters.length }}
+          </span>
+      </button>
+
+    </div>
 
     <ResourceListTable
       :resource="listResource"
@@ -22,6 +97,12 @@ import { callAdminForthApi } from '@/utils';
 import { ref, onMounted, watch, computed  } from 'vue';
 import ResourceListTable from '@/components/ResourceListTable.vue';
 
+import {
+  IconBanOutline,
+  IconFilterOutline,
+  IconPlusOutline,
+} from '@iconify-prerendered/vue-flowbite';
+
 const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
 
 const listResource = ref(null);
@@ -30,21 +111,33 @@ const loading = ref(true);
 const page = ref(1);
 const sort = ref([]);
 const checkboxes = ref([]);
-const pageSize = computed(() => props.meta.tablePageSize || 10);
+const pageSize = computed(() => props.meta.listPageSize || 10);
 
 const rows = ref(null);
 const totalRows = ref(0);
 
+const filters = ref([]);
+const filtersShow = ref(false);
 
+const listResourceRefColumn = computed(() => {
+  if (!listResource.value) {
+    return null;
+  }
+  return listResource.value.columns.find(c => c.foreignResource?.resourceId === props.resource.resourceId);
+});
+
+const selfPrimaryKeyColumn = computed(() => {
+  return props.resource.columns.find(c => c.primaryKey);
+});
 
-const filters = computed(() => {
+const endFilters = computed(() => {
   if (!listResource.value) {
     return [];
   }
   // get name of the column that is foreign key
-  const refColumn = listResource.value.columns.find(c => c.foreignResource?.resourceId === props.resource.resourceId);
+  const refColumn = listResourceRefColumn.value;
 
-  const primaryKeyColumn = listResource.value.columns.find(c => c.primaryKey);
+  const primaryKeyColumn = selfPrimaryKeyColumn.value;
 
   if (!refColumn) {
     window.adminforth.alert({
@@ -54,6 +147,7 @@ const filters = computed(() => {
     return [];
   }
   return [
+    ...filters.value,
     {
       field: refColumn.name,
       operator: 'eq',
@@ -82,7 +176,7 @@ async function getList() {
       resourceId: listResource.value.resourceId,
       limit: pageSize.value,
       offset: (page.value - 1) * pageSize.value,
-      filters: filters.value,
+      filters: endFilters.value,
       sort: sort.value,
     }
   });
@@ -99,11 +193,9 @@ onMounted( async () => {
   loading.value = true;
   const foreighResourceId = props.meta.foreignResourceId;
   listResource.value = (await callAdminForthApi({
-      path: '/get_resource',
+      path: `/plugin/${props.meta.pluginInstanceId}/get_resource`,
       method: 'POST',
-      body: {
-        resourceId: foreighResourceId,
-      },
+      body: {},
   })).resource;
   loading.value = false;
   await getList();

package/plugins/ForeignInlineListPlugin/index.ts

@@ -1,24 +1,45 @@
-import { AdminForthResource, AdminForthResourcePages } from "../../types/AdminForthConfig.js";
+import { AdminForthResource, AdminForthResourcePages, AdminForthClass, GenericHttpServer } from "../../types/AdminForthConfig.js";
 import AdminForthPlugin from "../base.js";
-import AdminForth from "../../index.js";
 
 type PluginOptions = {
   foreignResourceId: string;
-  tablePageSize: number;
+  listPageSize?: number;
   modifyTableResourceConfig?: (resourceConfig: AdminForthResource) => void;
 }
 
 export default class ForeignInlineListPlugin extends AdminForthPlugin {
   foreignResource: AdminForthResource;
   options: PluginOptions;
+  adminforth: AdminForthClass;
 
   constructor(options: PluginOptions) {
     super(options, import.meta.url);
     this.options = options;
   }
 
-  modifyResourceConfig(adminforth: AdminForth, resourceConfig: AdminForthResource) {
+  setupEndpoints(server: GenericHttpServer) {
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/get_resource`,
+      handler: async ({ 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 = { ...resource, plugins: undefined };
+        if (this.options.modifyTableResourceConfig) {
+          this.options.modifyTableResourceConfig(resourceCopy);
+        }
+        return { resource: resourceCopy };
+      },
+    });
+
+  }
+
+  modifyResourceConfig(adminforth: AdminForthClass, resourceConfig: AdminForthResource) {
     super.modifyResourceConfig(adminforth, resourceConfig);
+    this.adminforth = adminforth;
 
     // get resource with foreignResourceId
     this.foreignResource = adminforth.config.resources.find((resource) => resource.resourceId === this.options.foreignResourceId);
@@ -32,7 +53,13 @@ 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: {
+            ...this.options, 
+            pluginInstanceId: this.pluginInstanceId
+          }
+        }
       },
     });
   }

package/plugins/base.ts

@@ -3,16 +3,23 @@ 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 implements AdminForthPluginType {
 
   adminforth: AdminForthClass;
   pluginDir: string;
   customFolderName: string = 'custom';
+  pluginInstanceId: string;
 
   constructor(pluginOptions: any, metaUrl: string) {
     // set up plugin here
     this.pluginDir = currentFileDir(metaUrl);
+    this.pluginInstanceId = uuidv4();
+  }
+
+  setupEndpoints(server: any) {
+    
   }
 
   modifyResourceConfig(adminforth: AdminForthClass, resourceConfig: AdminForthResource) {

package/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/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/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>