@adminforth/quick-filters 1.2.10 → 2.0.0

package/build.log

@@ -5,7 +5,10 @@
 sending incremental file list
 custom/
 custom/FiltersArea.vue
+custom/QickFiltersSelect.vue
+custom/UniversalSearchInput.vue
 custom/tsconfig.json
+custom/types.ts
 
-sent 12,928 bytes  received 58 bytes  25,972.00 bytes/sec
-total size is 12,713  speedup is 0.98
+sent 5,172 bytes  received 115 bytes  10,574.00 bytes/sec
+total size is 4,745  speedup is 0.90

package/custom/FiltersArea.vue

@@ -1,305 +1,38 @@
 <template>
-  <div v-if="columnsWithFilter && columnsWithFilter.length > 0" class="flex flex-col w-full p-4 mb-4 rounded-lg border border-gray-100 dark:border-gray-700 shadow-sm dark:shadow-lg text-gray-900 dark:text-white">
-    <div class ="flex justify-end items-center">
-      <p 
-        class="hover:underline cursor-pointer text-blue-700 dark:text-blue-500 text-end"
-        @click="isExpanded = !isExpanded"
-      >
-        {{ isExpanded ? 'Hide filters' : 'Show filters' }}
-      </p>
-    </div>
-    <div v-if="isExpanded" class="md:grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6 gap-2 w-full">
-      <div class="flex flex-col" v-for="c in columnsWithFilter" :key="c">
-        <div class="min-w-48">
-          <p class="dark:text-gray-400 font-medium text-sm">{{ c.label }}</p>
-          <Select
-            :teleportToBody="true"
-            v-if="c.foreignResource"
-            :multiple="c.filterOptions.multiselect"
-            class="w-full"
-            :options="columnOptions[c.name] || []"
-            :searchDisabled="!c.foreignResource.searchableFields"
-            @scroll-near-end="loadMoreOptions(c.name)"
-            @search="(searchTerm) => {
-              if (c.foreignResource.searchableFields && onSearchInput[c.name]) {
-                onSearchInput[c.name](searchTerm);
-              }
-            }"
-            @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
-            :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
-            :teleportToTop="true"
-          >
-            <template #extra-item v-if="columnLoadingState[c.name]?.loading">
-              <div class="text-center text-gray-400 dark:text-gray-300 py-2 flex items-center justify-center gap-2">
-                <Spinner class="w-4 h-4" />
-                {{ $t('Loading...') }}
-              </div>
-            </template>
-          </Select>
-          <Select
-            :teleportToBody="true"
-            :multiple="c.filterOptions.multiselect"
-            class="w-full"
-            v-else-if="c.type === 'boolean'"
-            :options="[
-              { label: $t('Yes'), value: true }, 
-              { label: $t('No'), value: false }, 
-              // if field is not required, undefined might be there, and user might want to filter by it
-              ...(c.required ? [] : [ { label: $t('Unset'), value: undefined } ])
-            ]"
-            @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event })"
-            :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value !== undefined
-              ? filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value
-              : (c.filterOptions.multiselect ? [] : '')"
-            :teleportToTop="true"
-          />
-          
-          <Select
-            :teleportToBody="true"
-            :multiple="c.filterOptions.multiselect"
-            class="w-full"
-            v-else-if="c.enum"
-            :options="c.enum"
-            @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
-            :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
-            :teleportToTop="true"
-          />
-
-          <Input
-            v-else-if="['string', 'text', 'json', 'richtext', 'unknown'].includes(c.type)"
-            type="text"
-            full-width
-            :placeholder="$t('Search')"
-            @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions?.substringSearch ? 'ilike' : 'eq', value: $event || undefined })"
-            :modelValue="getFilterItem({ column: c, operator: c.filterOptions?.substringSearch ? 'ilike' : 'eq' })"
-          />
-
-          <CustomDateRangePicker
-            v-else-if="['datetime', 'date', 'time'].includes(c.type)"
-            :column="c"
-            :valueStart="filtersStore.filters.find(f => f.field === c.name && f.operator === 'gte')?.value || undefined"
-            @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: $event || undefined })"
-            :valueEnd="filtersStore.filters.find(f => f.field === c.name && f.operator === 'lte')?.value || undefined"
-            @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: $event || undefined })"
-          />
-
-          <CustomRangePicker
-            v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
-            :valueStart="getFilterItem({ column: c, operator: 'gte' })"
-            @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-            :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
-            @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-          />
-
-          <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
-            <Input
-              type="number"
-              full-width
-              aria-describedby="helper-text-explanation"
-              :placeholder="$t('From')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-              :modelValue="getFilterItem({ column: c, operator: 'gte' })"
-            />
-            <Input
-              type="number"
-              full-width
-              aria-describedby="helper-text-explanation"
-              :placeholder="$t('To')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-              :modelValue="getFilterItem({ column: c, operator: 'lte' })"
-            />
-          </div>
-        </div>
-      </div>
-      <template v-if="freeCells > 0" v-for="n in freeCells-1" :key="'free-cell-' + n">
-        <div></div>
-      </template>
-      <template v-if="freeCells === 0" v-for="n in cols-1" :key="'free-cell2-' + n">
-        <div></div>
-      </template>
-      <div class="flex items-end justify-end">
-      <Button 
-        class="mt-6 max-w-24" 
-        @click="filtersStore.filters = [...filtersStore.filters.filter(f => filtersStore.shouldFilterBeHidden(f.field))]" 
-        :disabled="filtersStore.filters.length === 0"  
-      >
-        Clear all
-      </Button>
+  <div class="flex gap-1">
+    <div v-for="filter in meta.options" :key="filter.name" >
+      <UniversalSearchInput 
+        v-if="filter.hasSearchInput" 
+        :meta="{ 
+          placeholder: `Search ${filter.name}`, 
+          filterField: filter.name 
+        }" 
+      />
+
+      <div v-else>
+        <QickFiltersSelect 
+          :filter="filter"
+        />
       </div>
     </div>
   </div>
+
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, computed, ref, reactive, watch } from 'vue';
-import { useFiltersStore } from '@/stores/filters';
-import { callAdminForthApi, loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers } from '@/utils';
-import { useRouter } from 'vue-router';
-import debounce from 'debounce';
-import { Select, Input, Button } from '@/afcl';
-import CustomRangePicker from "@/components/CustomRangePicker.vue";
-import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
-import { useRoute } from 'vue-router';
-
-const router = useRouter();
-const route = useRoute();
-const columnLoadingState = reactive({});
-const columnOffsets = reactive({});
-const columnEmptyResultsCount = reactive({});
-const filtersStore = useFiltersStore();
-const columnsMinMax = ref({});
-const isExpanded = ref(true);
-const freeCells = ref(0);
-const currentBreakpoint = ref("base");
-const cols = ref(1);
+import UniversalSearchInput from './UniversalSearchInput.vue';
+import QickFiltersSelect from './QickFiltersSelect.vue';
+import type { Filter } from './types';
 
 const props = defineProps<{
-    meta: any, 
+    meta: {
+      pluginInstanceId: string,
+      resourceId: string,
+      options: Filter[]
+    }, 
     resource: any,
     adminUser: any
 }>();
 
-const columnOptions = ref({});
-const columnsWithFilter = computed(
-  () => sortFilters(props.resource.columns?.filter(column => column.showIn.filter && props.meta.options.columns.some(c => c.column === column.name)), props.meta.options.columns) || []
-);
-
-onMounted(async () => {
-  // columnsMinMax.value = await callAdminForthApi({
-  //   path: '/get_min_max_for_columns',
-  //   method: 'POST',
-  //   body: {
-  //     resourceId: route.params.resourceId
-  //   }
-  // });
-  currentBreakpoint.value = getBreakpoint(window.innerWidth);
-  calculateGridCols();
-  window.addEventListener('resize', () => {
-    const newBreakpoint = getBreakpoint(window.innerWidth)
-    if (newBreakpoint !== currentBreakpoint.value) {
-      currentBreakpoint.value = newBreakpoint;
-      calculateGridCols();
-    }
-  })
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', getBreakpoint)
-})
-
-function getFilterItem({ column, operator }) {
-  const filterValue = filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value;
-  return filterValue !== undefined ? filterValue : '';
-}
-
-async function loadMoreOptions(columnName, searchTerm = '') {
-  return loadMoreForeignOptions({
-    columnName,
-    searchTerm,
-    columns: props.resource.columns,
-    resourceId: Array.isArray(router.currentRoute.value.params.resourceId) 
-      ? router.currentRoute.value.params.resourceId[0] 
-      : router.currentRoute.value.params.resourceId,
-    columnOptions,
-    columnLoadingState,
-    columnOffsets,
-    columnEmptyResultsCount
-  });
-}
-
-async function searchOptions(columnName, searchTerm) {
-  return searchForeignOptions({
-    columnName,
-    searchTerm,
-    columns: props.resource.columns,
-    resourceId: Array.isArray(router.currentRoute.value.params.resourceId) 
-      ? router.currentRoute.value.params.resourceId[0] 
-      : router.currentRoute.value.params.resourceId,
-    columnOptions,
-    columnLoadingState,
-    columnOffsets,
-    columnEmptyResultsCount
-  });
-}
-
-const onSearchInput = computed(() => {
-  return createSearchInputHandlers(
-    props.resource.columns,
-    searchOptions,
-    (column) => column.filterOptions?.debounceTimeMs || 300
-  );
-});
-
-const onFilterInput = computed(() => {
-  if (!props.resource.columns) return {};
-
-  return props.resource.columns.reduce((acc, c) => {
-    return {
-      ...acc,
-      [c.name]: debounce(({ column, operator, value }) => {
-        setFilterItem({ column, operator, value });
-      }, c.filterOptions?.debounceTimeMs || 10),
-    };
-  }, {});
-});
-
-function setFilterItem({ column, operator, value }) {
-
-  const index = filtersStore.filters.findIndex(f => f.field === column.name && f.operator === operator);
-  if (value === undefined || value === '' || value === null) {
-    if (index !== -1) {
-      filtersStore.filters.splice(index, 1);
-    }
-  } else {
-    if (index === -1) {
-      filtersStore.setFilter({ field: column.name, value, operator });
-    } else {
-      filtersStore.setFilters([...filtersStore.filters.slice(0, index), { field: column.name, value, operator }, ...filtersStore.filters.slice(index + 1)])
-    }
-  }
-}
-
-
-function getBreakpoint(width) {
-  if (width >= 1536) return '2xl'
-  if (width >= 1280) return 'xl'
-  if (width >= 1024) return 'lg'
-  if (width >= 768) return 'md'
-  if (width >= 640) return 'sm'
-  return 'base'
-}
-
-function calculateGridCols() {
-  const size = currentBreakpoint.value;
-  switch (size) {
-    case '2xl':
-      cols.value = 6;
-      break;
-    case 'xl':
-      cols.value = 3;
-      break;
-    case 'lg':
-      cols.value = 2;
-      break;
-    case 'md':
-      cols.value = 1;
-      break;
-    default:
-      cols.value = 1;
-  }
-  const rows = Math.ceil(columnsWithFilter.value.length / cols.value);
-  freeCells.value = (cols.value * rows) - columnsWithFilter.value.length;
-}
-
-function sortFilters(array, fieldsObject) {
-  let desiredOrder = [];
-  fieldsObject.forEach(element => {
-    desiredOrder.push(element.column);
-  });
-  const sortedObjects = array.sort(
-    (a, b) => desiredOrder.indexOf(a.name) - desiredOrder.indexOf(b.name)
-  );
-  return sortedObjects;
-}
 
 </script>

package/custom/QickFiltersSelect.vue

@@ -0,0 +1,46 @@
+<template>
+  <Select
+    class="w-full"
+    :options="selectOptions"
+    v-model="selected"
+    classesForInput="py-[4px] !text-sm bg-white rounded"
+    teleportToBody
+  ></Select>
+</template>
+
+
+
+<script lang="ts" setup>
+import { ref, onMounted, watch } from 'vue';
+import { Select } from '@/afcl'
+import type { Filter } from './types';
+import { useAdminforth } from '@/adminforth';
+import { AdminForthFilterOperators } from '@/types/Common';
+
+const { list } = useAdminforth();
+
+const props = defineProps<{
+  filter: Filter
+}>();
+
+const selected = ref(null);
+const selectOptions = ref<{ label: string, value: any }[]>([]);
+
+onMounted(() => {
+  selectOptions.value = props.filter.enum.map(option => ({
+    label: option.label,
+    value: option.label
+  }));
+});
+
+
+watch(selected, (newValue) => {
+  console.log('Selected value changed:', newValue);
+  list?.updateFilter?.({
+    field: `_qf_${props.filter.name}`,
+    operator: AdminForthFilterOperators.EQ,
+    value: newValue,
+  });
+})
+
+</script>

package/custom/UniversalSearchInput.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="af-universal-search flex items-center gap-1">
+    <slot name="prefix" />
+      <div class="relative w-64">
+        <input
+          v-model="localValue"
+          type="text"
+          :placeholder="props.meta?.placeholder ?? ''"
+          class="w-full border rounded text-sm dark:bg-gray-800 border-gray-300 dark:border-gray-600 dark:text-white px-2 py-1 pr-6"
+          @keyup.enter="applyImmediate"
+        >
+        <p
+          v-if="localValue"
+          @click="clear"
+          class="absolute right-2 top-1/2 -translate-y-1/2 hover:cursor-pointer hover:text-gray-600 dark:text-white dark:hover:text-gray-400  "
+        >
+          ✕
+        </p>
+      </div>
+    <slot name="suffix" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
+import adminforth from '@/adminforth';
+import { AdminForthFilterOperators } from '@/types/Common';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const props = defineProps<{ 
+  meta?: {
+    placeholder?: string,
+    debounceMs?: number,
+    filterField: string,
+  }; 
+}>();
+const localValue = ref('');
+let t: any = null;
+let blockFilterUpdate = false;
+
+onMounted(() => {
+  const filters = Object.keys(route.query).filter(k => k.startsWith('filter__')).map(k => {
+    const [_, field, operator] = k.split('__');
+    return {
+      field,
+      operator,
+      value: JSON.parse(decodeURIComponent(route.query[k] as string))
+    }
+  });
+  const isUniversalSearchFilterApplied = filters.find(f => f.field === `_universal_search_${props.meta?.filterField}`);
+  if (isUniversalSearchFilterApplied) {
+    localValue.value = isUniversalSearchFilterApplied.value;
+    blockFilterUpdate = true;
+  };
+});
+
+function send(term?: string) {
+  adminforth?.list?.updateFilter?.({
+    field: `_universal_search_${props.meta?.filterField}`,
+    operator: AdminForthFilterOperators.EQ,
+    value: term || '',
+  });
+}
+
+function apply() {
+  const term = localValue.value.trim();
+  send(term || '');
+}
+
+function applyImmediate() {
+  if (t) clearTimeout(t);
+  t = null;
+  apply();
+}
+
+watch(localValue, () => {
+  if (blockFilterUpdate) {
+    blockFilterUpdate = false;
+    return;
+  }
+  const delay = props.meta?.debounceMs ?? 500;
+  if (t) clearTimeout(t);
+  t = setTimeout(apply, delay);
+});
+
+function clear() {
+  blockFilterUpdate = true;
+  localValue.value = '';
+  applyImmediate();
+}
+</script>

package/custom/types.ts

@@ -0,0 +1,6 @@
+export interface Filter {
+  name: string,
+  icon?: string,
+  enum?: { label: string, icon?: string }[],
+  hasSearchInput?: boolean
+}

package/dist/custom/FiltersArea.vue

@@ -1,305 +1,38 @@
 <template>
-  <div v-if="columnsWithFilter && columnsWithFilter.length > 0" class="flex flex-col w-full p-4 mb-4 rounded-lg border border-gray-100 dark:border-gray-700 shadow-sm dark:shadow-lg text-gray-900 dark:text-white">
-    <div class ="flex justify-end items-center">
-      <p 
-        class="hover:underline cursor-pointer text-blue-700 dark:text-blue-500 text-end"
-        @click="isExpanded = !isExpanded"
-      >
-        {{ isExpanded ? 'Hide filters' : 'Show filters' }}
-      </p>
-    </div>
-    <div v-if="isExpanded" class="md:grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6 gap-2 w-full">
-      <div class="flex flex-col" v-for="c in columnsWithFilter" :key="c">
-        <div class="min-w-48">
-          <p class="dark:text-gray-400 font-medium text-sm">{{ c.label }}</p>
-          <Select
-            :teleportToBody="true"
-            v-if="c.foreignResource"
-            :multiple="c.filterOptions.multiselect"
-            class="w-full"
-            :options="columnOptions[c.name] || []"
-            :searchDisabled="!c.foreignResource.searchableFields"
-            @scroll-near-end="loadMoreOptions(c.name)"
-            @search="(searchTerm) => {
-              if (c.foreignResource.searchableFields && onSearchInput[c.name]) {
-                onSearchInput[c.name](searchTerm);
-              }
-            }"
-            @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
-            :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
-            :teleportToTop="true"
-          >
-            <template #extra-item v-if="columnLoadingState[c.name]?.loading">
-              <div class="text-center text-gray-400 dark:text-gray-300 py-2 flex items-center justify-center gap-2">
-                <Spinner class="w-4 h-4" />
-                {{ $t('Loading...') }}
-              </div>
-            </template>
-          </Select>
-          <Select
-            :teleportToBody="true"
-            :multiple="c.filterOptions.multiselect"
-            class="w-full"
-            v-else-if="c.type === 'boolean'"
-            :options="[
-              { label: $t('Yes'), value: true }, 
-              { label: $t('No'), value: false }, 
-              // if field is not required, undefined might be there, and user might want to filter by it
-              ...(c.required ? [] : [ { label: $t('Unset'), value: undefined } ])
-            ]"
-            @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event })"
-            :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value !== undefined
-              ? filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value
-              : (c.filterOptions.multiselect ? [] : '')"
-            :teleportToTop="true"
-          />
-          
-          <Select
-            :teleportToBody="true"
-            :multiple="c.filterOptions.multiselect"
-            class="w-full"
-            v-else-if="c.enum"
-            :options="c.enum"
-            @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
-            :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
-            :teleportToTop="true"
-          />
-
-          <Input
-            v-else-if="['string', 'text', 'json', 'richtext', 'unknown'].includes(c.type)"
-            type="text"
-            full-width
-            :placeholder="$t('Search')"
-            @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions?.substringSearch ? 'ilike' : 'eq', value: $event || undefined })"
-            :modelValue="getFilterItem({ column: c, operator: c.filterOptions?.substringSearch ? 'ilike' : 'eq' })"
-          />
-
-          <CustomDateRangePicker
-            v-else-if="['datetime', 'date', 'time'].includes(c.type)"
-            :column="c"
-            :valueStart="filtersStore.filters.find(f => f.field === c.name && f.operator === 'gte')?.value || undefined"
-            @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: $event || undefined })"
-            :valueEnd="filtersStore.filters.find(f => f.field === c.name && f.operator === 'lte')?.value || undefined"
-            @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: $event || undefined })"
-          />
-
-          <CustomRangePicker
-            v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
-            :valueStart="getFilterItem({ column: c, operator: 'gte' })"
-            @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-            :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
-            @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-          />
-
-          <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
-            <Input
-              type="number"
-              full-width
-              aria-describedby="helper-text-explanation"
-              :placeholder="$t('From')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-              :modelValue="getFilterItem({ column: c, operator: 'gte' })"
-            />
-            <Input
-              type="number"
-              full-width
-              aria-describedby="helper-text-explanation"
-              :placeholder="$t('To')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
-              :modelValue="getFilterItem({ column: c, operator: 'lte' })"
-            />
-          </div>
-        </div>
-      </div>
-      <template v-if="freeCells > 0" v-for="n in freeCells-1" :key="'free-cell-' + n">
-        <div></div>
-      </template>
-      <template v-if="freeCells === 0" v-for="n in cols-1" :key="'free-cell2-' + n">
-        <div></div>
-      </template>
-      <div class="flex items-end justify-end">
-      <Button 
-        class="mt-6 max-w-24" 
-        @click="filtersStore.filters = [...filtersStore.filters.filter(f => filtersStore.shouldFilterBeHidden(f.field))]" 
-        :disabled="filtersStore.filters.length === 0"  
-      >
-        Clear all
-      </Button>
+  <div class="flex gap-1">
+    <div v-for="filter in meta.options" :key="filter.name" >
+      <UniversalSearchInput 
+        v-if="filter.hasSearchInput" 
+        :meta="{ 
+          placeholder: `Search ${filter.name}`, 
+          filterField: filter.name 
+        }" 
+      />
+
+      <div v-else>
+        <QickFiltersSelect 
+          :filter="filter"
+        />
       </div>
     </div>
   </div>
+
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, computed, ref, reactive, watch } from 'vue';
-import { useFiltersStore } from '@/stores/filters';
-import { callAdminForthApi, loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers } from '@/utils';
-import { useRouter } from 'vue-router';
-import debounce from 'debounce';
-import { Select, Input, Button } from '@/afcl';
-import CustomRangePicker from "@/components/CustomRangePicker.vue";
-import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
-import { useRoute } from 'vue-router';
-
-const router = useRouter();
-const route = useRoute();
-const columnLoadingState = reactive({});
-const columnOffsets = reactive({});
-const columnEmptyResultsCount = reactive({});
-const filtersStore = useFiltersStore();
-const columnsMinMax = ref({});
-const isExpanded = ref(true);
-const freeCells = ref(0);
-const currentBreakpoint = ref("base");
-const cols = ref(1);
+import UniversalSearchInput from './UniversalSearchInput.vue';
+import QickFiltersSelect from './QickFiltersSelect.vue';
+import type { Filter } from './types';
 
 const props = defineProps<{
-    meta: any, 
+    meta: {
+      pluginInstanceId: string,
+      resourceId: string,
+      options: Filter[]
+    }, 
     resource: any,
     adminUser: any
 }>();
 
-const columnOptions = ref({});
-const columnsWithFilter = computed(
-  () => sortFilters(props.resource.columns?.filter(column => column.showIn.filter && props.meta.options.columns.some(c => c.column === column.name)), props.meta.options.columns) || []
-);
-
-onMounted(async () => {
-  // columnsMinMax.value = await callAdminForthApi({
-  //   path: '/get_min_max_for_columns',
-  //   method: 'POST',
-  //   body: {
-  //     resourceId: route.params.resourceId
-  //   }
-  // });
-  currentBreakpoint.value = getBreakpoint(window.innerWidth);
-  calculateGridCols();
-  window.addEventListener('resize', () => {
-    const newBreakpoint = getBreakpoint(window.innerWidth)
-    if (newBreakpoint !== currentBreakpoint.value) {
-      currentBreakpoint.value = newBreakpoint;
-      calculateGridCols();
-    }
-  })
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', getBreakpoint)
-})
-
-function getFilterItem({ column, operator }) {
-  const filterValue = filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value;
-  return filterValue !== undefined ? filterValue : '';
-}
-
-async function loadMoreOptions(columnName, searchTerm = '') {
-  return loadMoreForeignOptions({
-    columnName,
-    searchTerm,
-    columns: props.resource.columns,
-    resourceId: Array.isArray(router.currentRoute.value.params.resourceId) 
-      ? router.currentRoute.value.params.resourceId[0] 
-      : router.currentRoute.value.params.resourceId,
-    columnOptions,
-    columnLoadingState,
-    columnOffsets,
-    columnEmptyResultsCount
-  });
-}
-
-async function searchOptions(columnName, searchTerm) {
-  return searchForeignOptions({
-    columnName,
-    searchTerm,
-    columns: props.resource.columns,
-    resourceId: Array.isArray(router.currentRoute.value.params.resourceId) 
-      ? router.currentRoute.value.params.resourceId[0] 
-      : router.currentRoute.value.params.resourceId,
-    columnOptions,
-    columnLoadingState,
-    columnOffsets,
-    columnEmptyResultsCount
-  });
-}
-
-const onSearchInput = computed(() => {
-  return createSearchInputHandlers(
-    props.resource.columns,
-    searchOptions,
-    (column) => column.filterOptions?.debounceTimeMs || 300
-  );
-});
-
-const onFilterInput = computed(() => {
-  if (!props.resource.columns) return {};
-
-  return props.resource.columns.reduce((acc, c) => {
-    return {
-      ...acc,
-      [c.name]: debounce(({ column, operator, value }) => {
-        setFilterItem({ column, operator, value });
-      }, c.filterOptions?.debounceTimeMs || 10),
-    };
-  }, {});
-});
-
-function setFilterItem({ column, operator, value }) {
-
-  const index = filtersStore.filters.findIndex(f => f.field === column.name && f.operator === operator);
-  if (value === undefined || value === '' || value === null) {
-    if (index !== -1) {
-      filtersStore.filters.splice(index, 1);
-    }
-  } else {
-    if (index === -1) {
-      filtersStore.setFilter({ field: column.name, value, operator });
-    } else {
-      filtersStore.setFilters([...filtersStore.filters.slice(0, index), { field: column.name, value, operator }, ...filtersStore.filters.slice(index + 1)])
-    }
-  }
-}
-
-
-function getBreakpoint(width) {
-  if (width >= 1536) return '2xl'
-  if (width >= 1280) return 'xl'
-  if (width >= 1024) return 'lg'
-  if (width >= 768) return 'md'
-  if (width >= 640) return 'sm'
-  return 'base'
-}
-
-function calculateGridCols() {
-  const size = currentBreakpoint.value;
-  switch (size) {
-    case '2xl':
-      cols.value = 6;
-      break;
-    case 'xl':
-      cols.value = 3;
-      break;
-    case 'lg':
-      cols.value = 2;
-      break;
-    case 'md':
-      cols.value = 1;
-      break;
-    default:
-      cols.value = 1;
-  }
-  const rows = Math.ceil(columnsWithFilter.value.length / cols.value);
-  freeCells.value = (cols.value * rows) - columnsWithFilter.value.length;
-}
-
-function sortFilters(array, fieldsObject) {
-  let desiredOrder = [];
-  fieldsObject.forEach(element => {
-    desiredOrder.push(element.column);
-  });
-  const sortedObjects = array.sort(
-    (a, b) => desiredOrder.indexOf(a.name) - desiredOrder.indexOf(b.name)
-  );
-  return sortedObjects;
-}
 
 </script>

package/dist/custom/QickFiltersSelect.vue

@@ -0,0 +1,46 @@
+<template>
+  <Select
+    class="w-full"
+    :options="selectOptions"
+    v-model="selected"
+    classesForInput="py-[4px] !text-sm bg-white rounded"
+    teleportToBody
+  ></Select>
+</template>
+
+
+
+<script lang="ts" setup>
+import { ref, onMounted, watch } from 'vue';
+import { Select } from '@/afcl'
+import type { Filter } from './types';
+import { useAdminforth } from '@/adminforth';
+import { AdminForthFilterOperators } from '@/types/Common';
+
+const { list } = useAdminforth();
+
+const props = defineProps<{
+  filter: Filter
+}>();
+
+const selected = ref(null);
+const selectOptions = ref<{ label: string, value: any }[]>([]);
+
+onMounted(() => {
+  selectOptions.value = props.filter.enum.map(option => ({
+    label: option.label,
+    value: option.label
+  }));
+});
+
+
+watch(selected, (newValue) => {
+  console.log('Selected value changed:', newValue);
+  list?.updateFilter?.({
+    field: `_qf_${props.filter.name}`,
+    operator: AdminForthFilterOperators.EQ,
+    value: newValue,
+  });
+})
+
+</script>

package/dist/custom/UniversalSearchInput.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="af-universal-search flex items-center gap-1">
+    <slot name="prefix" />
+      <div class="relative w-64">
+        <input
+          v-model="localValue"
+          type="text"
+          :placeholder="props.meta?.placeholder ?? ''"
+          class="w-full border rounded text-sm dark:bg-gray-800 border-gray-300 dark:border-gray-600 dark:text-white px-2 py-1 pr-6"
+          @keyup.enter="applyImmediate"
+        >
+        <p
+          v-if="localValue"
+          @click="clear"
+          class="absolute right-2 top-1/2 -translate-y-1/2 hover:cursor-pointer hover:text-gray-600 dark:text-white dark:hover:text-gray-400  "
+        >
+          ✕
+        </p>
+      </div>
+    <slot name="suffix" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
+import adminforth from '@/adminforth';
+import { AdminForthFilterOperators } from '@/types/Common';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const props = defineProps<{ 
+  meta?: {
+    placeholder?: string,
+    debounceMs?: number,
+    filterField: string,
+  }; 
+}>();
+const localValue = ref('');
+let t: any = null;
+let blockFilterUpdate = false;
+
+onMounted(() => {
+  const filters = Object.keys(route.query).filter(k => k.startsWith('filter__')).map(k => {
+    const [_, field, operator] = k.split('__');
+    return {
+      field,
+      operator,
+      value: JSON.parse(decodeURIComponent(route.query[k] as string))
+    }
+  });
+  const isUniversalSearchFilterApplied = filters.find(f => f.field === `_universal_search_${props.meta?.filterField}`);
+  if (isUniversalSearchFilterApplied) {
+    localValue.value = isUniversalSearchFilterApplied.value;
+    blockFilterUpdate = true;
+  };
+});
+
+function send(term?: string) {
+  adminforth?.list?.updateFilter?.({
+    field: `_universal_search_${props.meta?.filterField}`,
+    operator: AdminForthFilterOperators.EQ,
+    value: term || '',
+  });
+}
+
+function apply() {
+  const term = localValue.value.trim();
+  send(term || '');
+}
+
+function applyImmediate() {
+  if (t) clearTimeout(t);
+  t = null;
+  apply();
+}
+
+watch(localValue, () => {
+  if (blockFilterUpdate) {
+    blockFilterUpdate = false;
+    return;
+  }
+  const delay = props.meta?.debounceMs ?? 500;
+  if (t) clearTimeout(t);
+  t = setTimeout(apply, delay);
+});
+
+function clear() {
+  blockFilterUpdate = true;
+  localValue.value = '';
+  applyImmediate();
+}
+</script>

package/dist/custom/types.ts

@@ -0,0 +1,6 @@
+export interface Filter {
+  name: string,
+  icon?: string,
+  enum?: { label: string, icon?: string }[],
+  hasSearchInput?: boolean
+}

package/dist/index.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { AdminForthPlugin } from "adminforth";
-import { suggestIfTypo } from "adminforth";
+import { AdminForthFilterOperators } from "adminforth";
 export default class extends AdminForthPlugin {
     constructor(options) {
         super(options, import.meta.url);
@@ -20,6 +20,20 @@ export default class extends AdminForthPlugin {
         });
         return __awaiter(this, void 0, void 0, function* () {
             _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
+            const frontendOptions = this.options.filters.map(f => {
+                if (!f.enum && !f.searchInput) {
+                    throw new Error(`Filter ${f.name} should have either enum or searchInput property`);
+                }
+                if (f.enum && f.searchInput) {
+                    throw new Error(`Filter ${f.name} should not have both enum and searchInput properties, choose one of them`);
+                }
+                return {
+                    name: f.name,
+                    icon: f.icon,
+                    enum: f.enum ? f.enum.map(e => ({ label: e.label, icon: e.icon })) : undefined,
+                    hasSearchInput: !!f.searchInput,
+                };
+            });
             // simply modify resourceConfig or adminforth.config. You can get access to plugin options via this.options;
             if (!resourceConfig.options.pageInjections) {
                 resourceConfig.options.pageInjections = {};
@@ -27,20 +41,65 @@ export default class extends AdminForthPlugin {
             if (!resourceConfig.options.pageInjections.list) {
                 resourceConfig.options.pageInjections.list = {};
             }
-            if (!resourceConfig.options.pageInjections.list.afterBreadcrumbs) {
-                resourceConfig.options.pageInjections.list.afterBreadcrumbs = [];
+            if (!resourceConfig.options.pageInjections.list.beforeActionButtons) {
+                resourceConfig.options.pageInjections.list.beforeActionButtons = [];
+            }
+            resourceConfig.options.pageInjections.list.beforeActionButtons.push({
+                file: this.componentPath('FiltersArea.vue'),
+                meta: {
+                    pluginInstanceId: this.pluginInstanceId,
+                    resourceId: this.resourceConfig.resourceId,
+                    options: frontendOptions
+                }
+            });
+            const normalizeFilterValue = (filters) => {
+                var _a, _b;
+                const filtersToReturn = [];
+                for (const filter of filters) {
+                    if (filter.field.startsWith('_universal_search_')) {
+                        const searchTerm = filter.value;
+                        if (!searchTerm)
+                            continue;
+                        const searchFieldName = filter.field.replace('_universal_search_', '');
+                        const filterFromSearch = ((_b = (_a = this.options.filters.find(f => f.name === searchFieldName)) === null || _a === void 0 ? void 0 : _a.searchInput) === null || _b === void 0 ? void 0 : _b.call(_a, searchTerm)) || { field: searchFieldName, operator: AdminForthFilterOperators.EQ, value: searchTerm };
+                        filtersToReturn.push(filterFromSearch);
+                    }
+                    else if (filter.field.startsWith('_qf_')) {
+                        const quickFilter = this.options.filters.find(f => `_qf_${f.name}` === filter.field);
+                        if (quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.enum) {
+                            const enumOption = quickFilter.enum.find(e => e.label === filter.value);
+                            if (enumOption) {
+                                const filterFromEnum = enumOption.filters();
+                                filtersToReturn.push(filterFromEnum);
+                            }
+                        }
+                    }
+                    else {
+                        filtersToReturn.push(filter);
+                    }
+                }
+                return filtersToReturn;
+            };
+            const transformer = (_a) => __awaiter(this, [_a], void 0, function* ({ query }) {
+                const normalizedFilters = normalizeFilterValue(query.filters);
+                query.filters = normalizedFilters;
+                console.log('Transformed filters', query.filters);
+                return { ok: true, error: '' };
+            });
+            const originalBefore = this.resourceConfig.hooks.list.beforeDatasourceRequest;
+            if (!originalBefore) {
+                this.resourceConfig.hooks.list.beforeDatasourceRequest = [transformer];
+            }
+            else if (Array.isArray(originalBefore)) {
+                originalBefore.push(transformer);
+                this.resourceConfig.hooks.list.beforeDatasourceRequest = originalBefore;
+            }
+            else {
+                this.resourceConfig.hooks.list.beforeDatasourceRequest = [originalBefore, transformer];
             }
-            resourceConfig.options.pageInjections.list.afterBreadcrumbs.push({ file: this.componentPath('FiltersArea.vue'), meta: { pluginInstanceId: this.pluginInstanceId, resourceId: this.resourceConfig.resourceId, options: this.options } });
         });
     }
     validateConfigAfterDiscover(adminforth, resourceConfig) {
-        for (const colOpt of this.options.columns) {
-            const column = resourceConfig.columns.find(c => c.name === colOpt.column);
-            if (!column) {
-                const similar = suggestIfTypo(resourceConfig.columns.map((column) => column.name), colOpt.column);
-                throw new Error(`QuickFilters plugin: column '${colOpt.column}' not found in resource '${resourceConfig.resourceId}'. Did you mean '${similar}'?`);
-            }
-        }
     }
     instanceUniqueRepresentation(pluginOptions) {
         // optional method to return unique string representation of plugin instance. 

package/index.ts

@@ -1,7 +1,7 @@
 import { AdminForthPlugin } from "adminforth";
-import type { IAdminForth, IHttpServer, AdminForthResourcePages, AdminForthResourceColumn, AdminForthDataTypes, AdminForthResource, AdminForthComponentDeclaration } from "adminforth";
+import type { IAdminForth, AdminForthResource, AdminForthComponentDeclaration } from "adminforth";
+import { AdminForthFilterOperators } from "adminforth";
 import type { PluginOptions } from './types.js';
-import { suggestIfTypo } from "adminforth";
 
 export default class  extends AdminForthPlugin {
   options: PluginOptions;
@@ -14,6 +14,20 @@ export default class  extends AdminForthPlugin {
   async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
     super.modifyResourceConfig(adminforth, resourceConfig);
   
+    const frontendOptions = this.options.filters.map(f => {
+      if (!f.enum && !f.searchInput) {
+        throw new Error(`Filter ${f.name} should have either enum or searchInput property`);
+      }
+      if (f.enum && f.searchInput) {
+        throw new Error(`Filter ${f.name} should not have both enum and searchInput properties, choose one of them`);
+      }
+      return {
+        name: f.name,
+        icon: f.icon,
+        enum: f.enum ? f.enum.map(e => ({ label: e.label, icon: e.icon })) : undefined,
+        hasSearchInput: !!f.searchInput,
+      };
+    });
     // simply modify resourceConfig or adminforth.config. You can get access to plugin options via this.options;
     if ( !resourceConfig.options.pageInjections ) {
       resourceConfig.options.pageInjections = {};
@@ -21,22 +35,66 @@ export default class  extends AdminForthPlugin {
     if ( !resourceConfig.options.pageInjections.list ) {
       resourceConfig.options.pageInjections.list = {};
     }
-    if ( !resourceConfig.options.pageInjections.list.afterBreadcrumbs ) {
-      resourceConfig.options.pageInjections.list.afterBreadcrumbs = [];
+    if ( !resourceConfig.options.pageInjections.list.beforeActionButtons ) {
+      resourceConfig.options.pageInjections.list.beforeActionButtons = [];
     }
-    (resourceConfig.options.pageInjections.list.afterBreadcrumbs as AdminForthComponentDeclaration[]).push(
-      { file: this.componentPath('FiltersArea.vue'), meta: { pluginInstanceId: this.pluginInstanceId, resourceId: this.resourceConfig.resourceId, options: this.options } }
+    (resourceConfig.options.pageInjections.list.beforeActionButtons as AdminForthComponentDeclaration[]).push(
+      { 
+        file: this.componentPath('FiltersArea.vue'), 
+        meta: {
+          pluginInstanceId: this.pluginInstanceId, 
+          resourceId: this.resourceConfig.resourceId, 
+          options: frontendOptions
+        } 
+      }
     );
+
+    const normalizeFilterValue = (filters: any[]) => {
+      const filtersToReturn = [];
+      for (const filter of filters) {
+        if (filter.field.startsWith('_universal_search_')) {
+          const searchTerm = filter.value as string;
+          if (!searchTerm) continue;
+          const searchFieldName = filter.field.replace('_universal_search_', '');
+          const filterFromSearch = this.options.filters.find(f => f.name === searchFieldName)?.searchInput?.(searchTerm) || { field: searchFieldName, operator: AdminForthFilterOperators.EQ, value: searchTerm }; 
+          filtersToReturn.push(filterFromSearch);
+        } else if (filter.field.startsWith('_qf_')) {
+          const quickFilter = this.options.filters.find(f => `_qf_${f.name}` === filter.field);
+          if (quickFilter?.enum) {
+            const enumOption = quickFilter.enum.find(e => e.label === filter.value);
+            if (enumOption) {
+              const filterFromEnum = enumOption.filters();
+              filtersToReturn.push(filterFromEnum);
+            }
+          }
+        } else {
+          filtersToReturn.push(filter);
+        }
+      }
+      return filtersToReturn;
+    } 
+    
+    const transformer = async ({ query }: { query: any }) => {
+      const normalizedFilters = normalizeFilterValue(query.filters);
+      query.filters = normalizedFilters;
+      console.log('Transformed filters', query.filters);
+      return { ok: true, error: '' };
+    };
+
+    const originalBefore = this.resourceConfig.hooks.list.beforeDatasourceRequest;
+
+    if (!originalBefore) {
+      this.resourceConfig.hooks.list.beforeDatasourceRequest = [transformer];
+    } else if (Array.isArray(originalBefore)) {
+      originalBefore.push(transformer);
+      this.resourceConfig.hooks.list.beforeDatasourceRequest = originalBefore;
+    } else {
+      this.resourceConfig.hooks.list.beforeDatasourceRequest = [originalBefore, transformer];
+    }
   }
   
   validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
-    for ( const colOpt of this.options.columns ) {
-      const column = resourceConfig.columns.find(c => c.name === colOpt.column);
-      if ( !column ) {
-        const similar = suggestIfTypo(resourceConfig.columns.map((column: any) => column.name), colOpt.column);
-        throw new Error(`QuickFilters plugin: column '${colOpt.column}' not found in resource '${resourceConfig.resourceId}'. Did you mean '${similar}'?`);
-      }
-    }
+
   }
 
   instanceUniqueRepresentation(pluginOptions: any) : string {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/quick-filters",
-  "version": "1.2.10",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/types.ts

@@ -1,5 +1,14 @@
+import { Filters, type IAdminForthSingleFilter } from "adminforth"
+interface IFilter {
+    name: string;
+    icon?: string;
+    enum?: {
+        label: string;
+        icon?: string;
+        filters: () =>  IAdminForthSingleFilter | Promise<IAdminForthSingleFilter>;
+    }[]; 
+    searchInput?: (searchVal: string) =>  IAdminForthSingleFilter | Promise<IAdminForthSingleFilter>;
+}
 export interface PluginOptions {
-    columns: {
-        column: string;
-    }[];
+    filters: IFilter[]
 }