@adminforth/quick-filters 1.0.0

package/.woodpecker/buildRelease.sh

@@ -0,0 +1,13 @@
+
+#!/bin/bash
+
+# write npm run output both to console and to build.log
+npm run build 2>&1 | tee build.log
+build_status=${PIPESTATUS[0]}
+
+# if exist status from the npm run build is not 0
+# then exit with the status code from the npm run build
+if [ $build_status -ne 0 ]; then
+  echo "Build failed. Exiting with status code $build_status"
+  exit $build_status
+fi

package/.woodpecker/buildSlackNotify.sh

@@ -0,0 +1,44 @@
+#!/bin/sh
+
+set -x
+
+COMMIT_SHORT_SHA=$(echo $CI_COMMIT_SHA | cut -c1-8)
+
+
+if [ "$CI_PREV_PIPELINE_STATUS" = "success" ]; then
+  MESSAGE="Did a build without issues on \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\`. Commit: _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+
+  curl  -s -X POST -H "Content-Type: application/json" -d '{
+    "username": "'"$CI_COMMIT_AUTHOR"'",
+    "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+    "attachments": [
+      {
+          "mrkdwn_in": ["text", "pretext"],
+          "color": "#36a64f",
+          "text": "'"$MESSAGE"'"
+      }
+    ]
+  }' "$DEVELOPERS_SLACK_WEBHOOK"
+  exit 0
+fi
+export BUILD_LOG=$(cat ./build.log)
+
+BUILD_LOG=$(echo $BUILD_LOG | sed 's/"/\\"/g')
+
+MESSAGE="Broke \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\` with commit _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+CODE_BLOCK="\`\`\`$BUILD_LOG\n\`\`\`"
+
+echo "Sending slack message to developers $MESSAGE"
+# Send the message
+curl -sS -X POST -H "Content-Type: application/json" -d '{
+  "username": "'"$CI_COMMIT_AUTHOR"'",
+  "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+  "attachments": [
+    {
+        "mrkdwn_in": ["text", "pretext"],
+        "color": "#8A1C12",
+        "text": "'"$CODE_BLOCK"'",
+        "pretext": "'"$MESSAGE"'"
+    }
+  ]
+}' "$DEVELOPERS_SLACK_WEBHOOK" 2>&1

package/.woodpecker/release.yml

@@ -0,0 +1,40 @@
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      partial: false
+      depth: 5
+
+steps:
+  init-secrets:
+    when:
+      - event: push
+    image: infisical/cli
+    environment:
+      INFISICAL_TOKEN:
+        from_secret: VAULT_TOKEN
+    commands:
+      - infisical export --domain https://vault.devforth.io/api --format=dotenv-export --env="prod" > /woodpecker/deploy.vault.env
+
+  release:
+    image: node:20
+    when:
+      - event: push
+    commands:
+      - apt update && apt install -y rsync
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - npm clean-install
+      - /bin/bash ./.woodpecker/buildRelease.sh
+      - npm audit signatures
+      - npx semantic-release
+
+  slack-on-failure:
+    when:
+      - event: push
+        status: [failure, success]
+      - event: push
+    image: curlimages/curl
+    commands:
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - /bin/sh ./.woodpecker/buildSlackNotify.sh
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Devforth.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build.log

@@ -0,0 +1,11 @@
+
+> @adminforth/quick-filters@1.0.1 build
+> tsc && rsync -av --exclude 'node_modules' custom dist/
+
+sending incremental file list
+custom/
+custom/FiltersArea.vue
+custom/tsconfig.json
+
+sent 11,566 bytes  received 58 bytes  23,248.00 bytes/sec
+total size is 11,351  speedup is 0.98

package/custom/FiltersArea.vue

@@ -0,0 +1,247 @@
+<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">
+    <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 v-if="isExpanded" class="md:grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6 gap-4 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">{{ c.label }}</p>
+          <Select
+            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 ? [] : '')"
+          >
+            <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
+            :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 ? [] : '')"
+          />
+          
+          <Select
+            :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 ? [] : '')"
+          />
+
+          <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"
+            :min="getFilterMinValue(c.name)"
+            :max="getFilterMaxValue(c.name)"
+            :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>
+    </div>
+    <div v-if="isExpanded" class="flex w-full justify-end">
+      <Button 
+        class="mt-4 max-w-24" 
+        @click="filtersStore.filters = [...filtersStore.filters.filter(f => filtersStore.shouldFilterBeHidden(f.field))]" 
+        :disabled="filtersStore.filters.length === 0"  
+      >
+        Clear all
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, computed, ref, reactive } 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(false);
+
+const props = defineProps<{
+    meta: any, 
+    resource: any,
+    adminUser: any
+}>();
+
+const columnOptions = ref({});
+const columnsWithFilter = computed(
+  () => props.resource.columns?.filter(column => column.showIn.filter && props.meta.options.columns.some(c => c.column === column.name)) || []
+);
+
+onMounted(async () => {
+  console.log('FiltersArea mounted', props.resource);
+  columnsMinMax.value = await callAdminForthApi({
+    path: '/get_min_max_for_columns',
+    method: 'POST',
+    body: {
+      resourceId: route.params.resourceId
+    }
+  });
+  console.log('Fetched columnsMinMax:', columnsMinMax.value);
+});
+
+function getFilterItem({ column, operator }) {
+  const filterValue = filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value;
+  return filterValue !== undefined ? filterValue : '';
+}
+
+function getFilterMinValue(columnName) {
+  if(columnsMinMax.value && columnsMinMax.value[columnName]) {
+    return columnsMinMax.value[columnName]?.min
+  }
+}
+
+function getFilterMaxValue(columnName) {
+  if(columnsMinMax.value && columnsMinMax.value[columnName]) {
+    return columnsMinMax.value[columnName]?.max
+  }
+}
+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)])
+    }
+  }
+}
+
+</script>

package/custom/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "../../../adminforth/spa/src/*"
+      ],
+      "*": [
+        // "node_modules/adminforth/dist/spa/node_modules/*"
+        "../../../adminforth/spa/node_modules/*"
+      ],
+      "@@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "."
+      ]
+    }
+  },
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx",
+    "./**/*.vue",
+    "../**/*.ts",
+    "../**/*.tsx",
+    "../**/*.vue",
+    "../*.vue",
+    "../*.ts",
+    "../*.tsx"
+  ]
+}

package/dist/custom/FiltersArea.vue

@@ -0,0 +1,247 @@
+<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">
+    <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 v-if="isExpanded" class="md:grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6 gap-4 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">{{ c.label }}</p>
+          <Select
+            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 ? [] : '')"
+          >
+            <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
+            :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 ? [] : '')"
+          />
+          
+          <Select
+            :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 ? [] : '')"
+          />
+
+          <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"
+            :min="getFilterMinValue(c.name)"
+            :max="getFilterMaxValue(c.name)"
+            :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>
+    </div>
+    <div v-if="isExpanded" class="flex w-full justify-end">
+      <Button 
+        class="mt-4 max-w-24" 
+        @click="filtersStore.filters = [...filtersStore.filters.filter(f => filtersStore.shouldFilterBeHidden(f.field))]" 
+        :disabled="filtersStore.filters.length === 0"  
+      >
+        Clear all
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, computed, ref, reactive } 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(false);
+
+const props = defineProps<{
+    meta: any, 
+    resource: any,
+    adminUser: any
+}>();
+
+const columnOptions = ref({});
+const columnsWithFilter = computed(
+  () => props.resource.columns?.filter(column => column.showIn.filter && props.meta.options.columns.some(c => c.column === column.name)) || []
+);
+
+onMounted(async () => {
+  console.log('FiltersArea mounted', props.resource);
+  columnsMinMax.value = await callAdminForthApi({
+    path: '/get_min_max_for_columns',
+    method: 'POST',
+    body: {
+      resourceId: route.params.resourceId
+    }
+  });
+  console.log('Fetched columnsMinMax:', columnsMinMax.value);
+});
+
+function getFilterItem({ column, operator }) {
+  const filterValue = filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value;
+  return filterValue !== undefined ? filterValue : '';
+}
+
+function getFilterMinValue(columnName) {
+  if(columnsMinMax.value && columnsMinMax.value[columnName]) {
+    return columnsMinMax.value[columnName]?.min
+  }
+}
+
+function getFilterMaxValue(columnName) {
+  if(columnsMinMax.value && columnsMinMax.value[columnName]) {
+    return columnsMinMax.value[columnName]?.max
+  }
+}
+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)])
+    }
+  }
+}
+
+</script>

package/dist/custom/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "../../../adminforth/spa/src/*"
+      ],
+      "*": [
+        // "node_modules/adminforth/dist/spa/node_modules/*"
+        "../../../adminforth/spa/node_modules/*"
+      ],
+      "@@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "."
+      ]
+    }
+  },
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx",
+    "./**/*.vue",
+    "../**/*.ts",
+    "../**/*.tsx",
+    "../**/*.vue",
+    "../*.vue",
+    "../*.ts",
+    "../*.tsx"
+  ]
+}

package/dist/index.js

@@ -0,0 +1,53 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { AdminForthPlugin } from "adminforth";
+export default class extends AdminForthPlugin {
+    constructor(options) {
+        super(options, import.meta.url);
+        this.options = options;
+    }
+    modifyResourceConfig(adminforth, resourceConfig) {
+        const _super = Object.create(null, {
+            modifyResourceConfig: { get: () => super.modifyResourceConfig }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
+            // simply modify resourceConfig or adminforth.config. You can get access to plugin options via this.options;
+            if (!resourceConfig.options.pageInjections) {
+                resourceConfig.options.pageInjections = {};
+            }
+            if (!resourceConfig.options.pageInjections.list) {
+                resourceConfig.options.pageInjections.list = {};
+            }
+            if (!resourceConfig.options.pageInjections.list.afterBreadcrumbs) {
+                resourceConfig.options.pageInjections.list.afterBreadcrumbs = [];
+            }
+            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) {
+        // optional method where you can safely check field types after database discovery was performed
+    }
+    instanceUniqueRepresentation(pluginOptions) {
+        // optional method to return unique string representation of plugin instance. 
+        // Needed if plugin can have multiple instances on one resource 
+        return `single`;
+    }
+    setupEndpoints(server) {
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/example`,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body }) {
+                const { name } = body;
+                return { hey: `Hello ${name}` };
+            })
+        });
+    }
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/index.ts

@@ -0,0 +1,53 @@
+import { AdminForthPlugin } from "adminforth";
+import type { IAdminForth, IHttpServer, AdminForthResourcePages, AdminForthResourceColumn, AdminForthDataTypes, AdminForthResource, AdminForthComponentDeclaration } from "adminforth";
+import type { PluginOptions } from './types.js';
+
+
+export default class  extends AdminForthPlugin {
+  options: PluginOptions;
+
+  constructor(options: PluginOptions) {
+    super(options, import.meta.url);
+    this.options = options;
+  }
+
+  async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
+    super.modifyResourceConfig(adminforth, resourceConfig);
+  
+    // simply modify resourceConfig or adminforth.config. You can get access to plugin options via this.options;
+    if ( !resourceConfig.options.pageInjections ) {
+      resourceConfig.options.pageInjections = {};
+    }
+    if ( !resourceConfig.options.pageInjections.list ) {
+      resourceConfig.options.pageInjections.list = {};
+    }
+    if ( !resourceConfig.options.pageInjections.list.afterBreadcrumbs ) {
+      resourceConfig.options.pageInjections.list.afterBreadcrumbs = [];
+    }
+    (resourceConfig.options.pageInjections.list.afterBreadcrumbs as AdminForthComponentDeclaration[]).push(
+      { file: this.componentPath('FiltersArea.vue'), meta: { pluginInstanceId: this.pluginInstanceId, resourceId: this.resourceConfig.resourceId, options: this.options } }
+    );
+  }
+  
+  validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
+    // optional method where you can safely check field types after database discovery was performed
+  }
+
+  instanceUniqueRepresentation(pluginOptions: any) : string {
+    // optional method to return unique string representation of plugin instance. 
+    // Needed if plugin can have multiple instances on one resource 
+    return `single`;
+  }
+
+  setupEndpoints(server: IHttpServer) {
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/example`,
+      handler: async ({ body }) => {
+        const { name } = body;
+        return { hey: `Hello ${name}` };
+      }
+    });
+  }
+
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@adminforth/quick-filters",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc && rsync -av --exclude 'node_modules' custom dist/"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@types/node": "latest",
+    "semantic-release": "^24.2.1",
+    "semantic-release-slack-bot": "^4.0.2",
+    "typescript": "^5.7.3"
+  },
+  "dependencies": {
+    "adminforth": "^2.4.0-next.254"
+  },
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      "@semantic-release/github",
+      [
+        "semantic-release-slack-bot",
+        {
+          "notifyOnSuccess": true,
+          "notifyOnFail": true,
+          "slackIcon": ":package:",
+          "markdownReleaseNotes": true
+        }
+      ]
+    ]
+  },
+  "branches": [
+    "main",
+    {
+      "name": "next",
+      "prerelease": true
+    }
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+      "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include*/ 
+      "module": "node16",                                /* Specify what module code is generated. */
+      "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
+      "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules.  */
+      "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+      "strict": false,                                     /* Enable all strict type-checking options. */
+      "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
+    },
+    "exclude": ["node_modules", "dist", "custom"],           /* Exclude files from compilation. */
+  }
+  

package/types.ts

@@ -0,0 +1,5 @@
+export interface PluginOptions {
+    columns: {
+        column: string;
+    }[];
+}