adminforth 1.1.4 → 1.1.5

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

package/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/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/types/AdminForthConfig.ts

@@ -19,6 +19,17 @@ export interface GenericHttpServer {
    */
   setupSpaServer(): void;
 
+  /**
+   * Method which should register endpoint in HTTP server.
+   * 
+   * @param options : Object with method, path and handler properties.
+   */
+  endpoint(options: {
+    method: string,
+    path: string,
+    handler: Function,
+  }): void;
+
 }
 
 export interface ExpressHttpServer extends GenericHttpServer {
@@ -53,6 +64,7 @@ export interface AdminForthClass {
   codeInjector: CodeInjectorType;
   express: GenericHttpServer;
 
+
   auth: {
 
     verify(jwt : string): any;
@@ -91,8 +103,26 @@ export interface AdminForthPluginType {
   adminforth: AdminForthClass;
   pluginDir: string;
   customFolderName: string;
+  pluginInstanceId: string;
+
+  /**
+   * AdminForth plugins concept is based on modification of full AdminForth configuration
+   * to add some custom functionality. For example plugin might simply add custom field to resource by reusing 
+   * {@link AdminForthResourceColumn.components} object, then add some hook which will modify record before getting or saving it to database.
+   * 
+   * So this method is core of AdminForth plugins. It allows to modify full resource configuration.
+   * @param adminforth Instance of AdminForthClass
+   * @param resourceConfig Resource configuration object which will be modified by plugin
+   */
   modifyResourceConfig(adminforth: AdminForthClass, resourceConfig: AdminForthResource): void;
   componentPath(componentFile: string): string;
+
+  /**
+   * Here you can register custom endpoints for your plugin.
+   * 
+   * @param server 
+   */
+  setupEndpoints(server: GenericHttpServer): void;
 }
 
 export enum AdminForthMenuTypes {
@@ -450,9 +480,10 @@ export type AdminForthResource = {
       bulkActions?: Array<{
         label: string,
         state: string,
-        icon: string,
+        icon?: string,
         action: Function,
         id?: string,
+        confirm?: string,
       }>,
       allowedActions?: AllowedActions,
 

package/types/FrontendAPI.ts

@@ -33,6 +33,35 @@ export interface FrontendAPIInterface {
      * @param params - The parameters of the alert
      */
     alert(params:AlertParams): void;
+    /**
+     * Add a filter to the list of filters
+     * 
+     * Example:
+     * 
+     * ```ts
+     * window.adminforth.updateListFilter({field: 'name', operator: 'ilike', value: 'john'})
+     * ```
+     * 
+     * @param filter - The filter to add
+     */
+    setListFilter(filter: any): void;
+    /**
+     * Update a filter in the list of filters
+     * 
+     * Example:
+     * 
+     * ```ts
+     * window.adminforth.updateListFilter({field: 'name', operator: 'ilike', value: 'john'})
+     * ```
+     * 
+     * @param filter - The filter to update
+     */
+    updateListFilter(filter: any): void;
+    /**
+     * Clear all filters from the list
+     */
+    clearListFilters(): void;
+
 }
 
 export type ConfirmParams = {
@@ -62,12 +91,30 @@ export type AlertParams = {
     variant?: AlertVariant;
 }
 
+export type FilterParams = {
+    /**
+     * Field of resource to filter
+     */
+    field: string;
+    /**
+     * Operator of filter
+     */
+    operator: Operator;
+    /**
+     * Value of filter
+     */
+    value: string | number | boolean ;
+}
+
 export enum AlertVariant {
     Danger = 'danger',
     Success = 'success',
     Warning = 'warning',
     Info = 'info'
   }
+
+export type Operator = 'in' | 'ilike' | 'gte' | 'lte'  ;
+