adminforth 1.1.4 → 1.1.6

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,8 +45,8 @@
     
     <ResourceForm 
       v-else
-      :record="{}"
-      :resourceColumns="coreStore.resourceColumns"
+      :record="initalValues"
+      :resource="coreStore.resource"
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
@@ -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,13 @@ let createComponentsPerColumn = {};
 
 const coreStore = useCoreStore();
 
+const initalValues = computed(() => {
+  if (!route.query.values) {
+    return {};
+  }
+  return JSON.parse(decodeURIComponent(route.query.values));
+});
+
 async function onUpdateRecord(newRecord) {
   console.log('newRecord', newRecord);
   record.value = newRecord;
@@ -103,7 +111,7 @@ onMounted(async () => {
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
-  createComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
+  createComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
       if (column.components?.create) {
           acc[column.name] = getCustomComponent(column.components.create);
       }
@@ -130,11 +138,17 @@ async function saveRecord() {
     },
   });
   saving.value = false;
-  router.push({ name: 'resource-show', params: { 
-    resourceId: route.params.resourceId, 
-    primaryKey: response.newRecordId
-  
-  } });
+  if (route.query.returnTo) {
+    router.push(route.query.returnTo);
+  } else {
+    router.push({ 
+      name: 'resource-show', 
+      params: { 
+        resourceId: route.params.resourceId, 
+        primaryKey: response.newRecordId
+      } 
+    });
+  }
 }
 
 

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" />
@@ -95,10 +95,10 @@ async function onUpdateRecord(newRecord) {
 
 const editableRecord = computed(() => {
   const newRecord = { ...coreStore.record };
-  if (!coreStore.resourceColumns) {
+  if (!coreStore.resource) {
     return {};
   }
-  coreStore.resourceColumns.forEach(column => {
+  coreStore.resource.columns.forEach(column => {
     if (column.foreignResource) {
       newRecord[column.name] = newRecord[column.name]?.pk
     }
@@ -119,7 +119,7 @@ onMounted(async () => {
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
 
-  editComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
+  editComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
       if (column.components?.edit) {
           acc[column.name] = getCustomComponent(column.components.edit);
       }

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

@@ -2,8 +2,7 @@
   <div class="relative">
     <Teleport to="body">
       <Filters
-        :columns="coreStore.resourceColumns"
-        v-model:filters="filters"
+        :columns="coreStore.resource.columns"
         :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,8 +157,10 @@ watch([page], async () => {
   await getList();
 });
 
-watch([filters], async () => {
+watch(()=>filtersStore.filters, async () => {
   page.value = 1;
+  checkboxes.value = [];
+
   await getList();
 }, {deep: true});
 
@@ -177,13 +179,13 @@ 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,
     }
   });
 
   rows.value = data.data?.map(row => {
-    row._primaryKeyValue = row[coreStore.resourceColumns.find(c => c.primaryKey).name];
+    row._primaryKeyValue = row[coreStore.resource.columns.find(c => c.primaryKey).name];
     return row;
   });
   totalRows.value = data.total;
@@ -265,7 +267,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
@@ -58,7 +58,7 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
+            <tr v-for="column in coreStore.resource?.columns.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"
             >
               <component
@@ -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">
@@ -145,7 +145,7 @@ onMounted(async () => {
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
 
-  showComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
+  showComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
       if (column.components?.show) {
           acc[column.name] = getCustomComponent(column.components.show);
       }

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.6",
   "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.filter((c) => c.name !== listResourceRefColumn.name)"
+      v-model:filters="filters"
+      :columnsMinMax="columnsMinMax"
+      :show="filtersShow"
+      @hide="filtersShow = false"
+    />
+  </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: { 
+            values: encodeURIComponent(JSON.stringify({[listResourceRefColumn.name]: props.record[selfPrimaryKeyColumn.name]})),
+            returnTo: $route.fullPath,
+          },
+       }"
+        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 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  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"
@@ -13,6 +88,7 @@
       @update:checkboxes="checkboxes = $event"
       :pageSize="pageSize"
       :totalRows="totalRows"
+      :checkboxes="checkboxes"
     />
   </td>
 </template>
@@ -21,6 +97,14 @@
 import { callAdminForthApi } from '@/utils';
 import { ref, onMounted, watch, computed  } from 'vue';
 import ResourceListTable from '@/components/ResourceListTable.vue';
+import Filters from '@/components/Filters.vue';
+import {
+  IconBanOutline,
+  IconFilterOutline,
+  IconPlusOutline,
+} from '@iconify-prerendered/vue-flowbite';
+
+import { getIcon } from '@/utils';
 
 const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
 
@@ -30,21 +114,34 @@ 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 columnsMinMax = ref(null);
+
+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 +151,7 @@ const filters = computed(() => {
     return [];
   }
   return [
+    ...filters.value,
     {
       field: refColumn.name,
       operator: 'eq',
@@ -70,6 +168,28 @@ watch([sort], async () => {
   await getList();
 }, {deep: true});
 
+watch([filters], async () => {
+  page.value = 1;
+  checkboxes.value = [];
+  await getList();
+}, {deep: true});
+
+
+async function startBulkAction(actionId) {
+  const data = await callAdminForthApi({
+    path: '/start_bulk_action',
+    method: 'POST',
+    body: {
+      resourceId: listResource.value.resourceId,
+      actionId: actionId,
+      recordIds: checkboxes.value
+    }
+  });
+  if (data?.status === 'success') {
+    checkboxes.value = [];
+  }
+  await getList();
+}
 
 async function getList() {
   rows.value = null;
@@ -82,7 +202,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,
     }
   });
@@ -94,17 +214,21 @@ async function getList() {
   totalRows.value = data.total;
 }
 
-
 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;
+  columnsMinMax.value = await callAdminForthApi({
+    path: '/get_min_max_for_columns',
+    method: 'POST',
+    body: {
+      resourceId: foreighResourceId,
+    }
+  });
   loading.value = false;
   await getList();
 });