feat: add custom filter component for square meters and integrate int…

adminforth/commands/createCustomComponent/main.js

@@ -50,6 +50,7 @@ async function handleFieldComponentCreation(config, resources) {
           { name: '📃 show', value: 'show' },
           { name: '✏️ edit', value: 'edit' },
           { name: '➕ create', value: 'create' },
+          { name: '🔍 filter', value: 'filter'},
           new Separator(),
           { name: '🔙 BACK', value: '__BACK__' },
       ]

adminforth/commands/createCustomComponent/templates/customFields/filter.vue.hbs

@@ -0,0 +1,34 @@
+<template>
+  <input
+    type="text"
+    :value="localValue"
+    @input="onInput"
+    placeholder="Search"
+    aria-describedby="helper-text-explanation"
+    class="inline-flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 dark:text-white translate-y-0 rounded-l-md rounded-r-md w-full"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps<{
+  column: any;
+  meta?: any;
+  modelValue: Array<{ operator: string; value: string }> | null;
+}>();
+
+const localValue = ref(props.modelValue?.[0]?.value || '');
+
+watch(() => props.modelValue, (val) => {
+  localValue.value = val?.[0]?.value || '';
+});
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  localValue.value = target.value;
+  emit('update:modelValue', [{ operator: 'ilike', value: target.value }]);
+}
+</script>

adminforth/documentation/docs/tutorial/03-Customization/02-customFieldRendering.md

@@ -481,4 +481,119 @@ list: '@/renderers/ZeroStylesRichText.vue',
 //diff-add
 ```
 
-`ZeroStyleRichText` fits well for tasks like email templates preview fields.
+`ZeroStyleRichText` fits well for tasks like email templates preview fields.
+
+
+### Custom filter component for square meters
+
+
+Sometimes standard filters are not enough, and you want to make a convenient UI for selecting a range of apartment areas. For example, buttons with options for “Small (<25 m²)”, “Medium (25–90 m²)” and “Large (>90 m²)”.
+
+```ts title='./custom/SquareMetersFilter.vue'
+<template>
+  <div class="flex flex-col gap-2">
+    <p class="font-medium mb-1 dark:text-white">{{ $t('Square meters filter') }}</p>
+    <div class="flex gap-2">
+      <button
+        v-for="option in options"
+        :key="option.value"
+        type="button"
+        class="flex gap-1 items-center py-1 px-3 text-sm font-medium rounded-default border focus:outline-none focus:z-10 focus:ring-4"
+        :class="{
+          'text-white bg-blue-500 border-blue-500 hover:bg-blue-600 focus:ring-blue-200 dark:focus:ring-blue-800': selected === option.value,
+          'text-gray-900 bg-white border-gray-300 hover:bg-gray-100 hover:text-blue-500 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': selected !== option.value
+        }"
+        @click="select(option.value)"
+      >
+        {{ $t(option.label) }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps<{
+  modelValue: Array<{ operator: string; value: number }> | null;
+}>();
+
+const selected = ref<string | null>(null);
+
+const options = [
+  { value: 'small', label: 'Small' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'large', label: 'Large' }
+];
+
+onMounted(() => {
+  const val = props.modelValue;
+  if (!val || val.length === 0) {
+    selected.value = null;
+    return;
+  }
+
+  const ops = val.map((v) => `${v.operator}:${v.value}`);
+
+  if (ops.includes('lt:25')) selected.value = 'small';
+  else if (ops.includes('gte:25') && ops.includes('lte:90')) selected.value = 'medium';
+  else if (ops.includes('gt:90')) selected.value = 'large';
+  else selected.value = null;
+});
+
+watch(selected, (size) => {
+  if (!size) {
+    emit('update:modelValue', []);
+    return;
+  }
+
+  const filters = {
+    small: [{ operator: 'lt', value: 25 }],
+    medium: [
+      { operator: 'gte', value: 25 },
+      { operator: 'lte', value: 90 }
+    ],
+    large: [{ operator: 'gt', value: 90 }]
+  };
+
+  emit('update:modelValue', filters[size]);
+});
+
+function select(size: string) {
+  selected.value = size;
+
+  switch (size) {
+    case 'small':
+      emit('update:modelValue', [{ operator: 'lt', value: 25 }]);
+      break;
+    case 'medium':
+      emit('update:modelValue', [
+        { operator: 'gte', value: 25 },
+        { operator: 'lte', value: 90 }
+      ]);
+      break;
+    case 'large':
+      emit('update:modelValue', [{ operator: 'gt', value: 90 }]);
+      break;
+  }
+}
+</script>
+```
+
+```ts title='./resources/apartments.ts'
+  columns: [
+    ...
+    {
+      name: 'square_meter', 
+      label: 'Square',
+      //diff-add
+      components: {
+      //diff-add
+        filter: '@@/SquareMetersFilter.vue'
+      //diff-add
+      }
+    },
+    ...
+]

adminforth/spa/src/components/Filters.vue

@@ -21,9 +21,25 @@
       <ul class="space-y-3 font-medium">
          <li v-for="c in columnsWithFilter" :key="c">
             <p class="dark:text-gray-400">{{ c.label }}</p>
+            <component
+              v-if="c.components?.filter"
+              :is="getCustomComponent(c.components.filter)"
+              :meta="c?.components?.list?.meta"
+              :column="c"
+              class="w-full"
+              @update:modelValue="(filtersArray) => {
+                filtersStore.filters = filtersStore.filters.filter(f => f.field !== c.name);
 
+                for (const f of filtersArray) {
+                  filtersStore.filters.push({ field: c.name, ...f });
+                }
+                console.log('filtersStore.filters', filtersStore.filters);
+                emits('update:filters', [...filtersStore.filters]);
+              }"
+              :modelValue="filtersStore.filters.filter(f => f.field === c.name)"
+            />
             <Select
-              v-if="c.foreignResource"
+              v-else-if="c.foreignResource"
               :multiple="c.filterOptions.multiselect"
               class="w-full"
               :options="columnOptions[c.name] || []"
@@ -128,6 +144,7 @@ import { useRouter } from 'vue-router';
 import { computedAsync } from '@vueuse/core'
 import CustomRangePicker from "@/components/CustomRangePicker.vue";
 import { useFiltersStore } from '@/stores/filters';
+import { getCustomComponent } from '@/utils';
 import Input from '@/afcl/Input.vue';
 import Select from '@/afcl/Select.vue';
 import debounce from 'debounce';

adminforth/types/Common.ts

@@ -187,6 +187,12 @@ export interface AdminForthFieldComponents {
    * emptiness emit is optional and required for complex cases. For example for virtual columns where initial value is not set.
    */
   list?: AdminForthComponentDeclaration,
+
+  /**
+   * Filter component is used to redefine input field in filter view.
+   * Component accepts next properties: [record, column, resource, adminUser].
+   */
+  filter?: AdminForthComponentDeclaration,
 }
 
 

dev-demo/custom/CustomSqueareMetersFilter.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <!-- Label for the filter section -->
+    <p class="font-medium mb-1 dark:text-white">{{ $t('Square meters filter') }}</p>
+
+    <!-- Button group for filter options -->
+    <div class="flex gap-2">
+      <button
+        :class="[
+          baseBtnClass,
+          selected === 'small' ? activeBtnClass : inactiveBtnClass
+        ]"
+        @click="select('small')"
+        type="button"
+      >
+        {{ $t('Small (<25)') }}
+      </button>
+      <button
+        :class="[
+          baseBtnClass,
+          selected === 'medium' ? activeBtnClass : inactiveBtnClass
+        ]"
+        @click="select('medium')"
+        type="button"
+      >
+        {{ $t('Medium (25–90)') }}
+      </button>
+      <button
+        :class="[
+          baseBtnClass,
+          selected === 'large' ? activeBtnClass : inactiveBtnClass
+        ]"
+        @click="select('large')"
+        type="button"
+      >
+        {{ $t('Large (>90)') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps<{
+  modelValue: Array<{ operator: string; value: number }> | null;
+}>();
+
+// Track selected filter option
+const selected = ref<string | null>(null);
+
+// Button classes
+const baseBtnClass =
+  'flex gap-1 items-center py-1 px-3 text-sm font-medium rounded-default border focus:outline-none focus:z-10 focus:ring-4';
+const activeBtnClass =
+  'text-white bg-blue-500 border-blue-500 hover:bg-blue-600 focus:ring-blue-200 dark:focus:ring-blue-800';
+const inactiveBtnClass =
+  'text-gray-900 bg-white border-gray-300 hover:bg-gray-100 hover:text-blue-500 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';
+
+// Watch for external changes to the modelValue prop and update selected button accordingly
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!val || val.length === 0) {
+      selected.value = null;
+      return;
+    }
+
+    const ops = val.map((v) => `${v.operator}:${v.value}`);
+
+    if (ops.includes('lt:25')) selected.value = 'small';
+    else if (ops.includes('gte:25') && ops.includes('lte:90')) selected.value = 'medium';
+    else if (ops.includes('gt:90')) selected.value = 'large';
+    else selected.value = null;
+  },
+  { immediate: true }
+);
+
+// Emit corresponding value array depending on selected size
+function select(size: string) {
+  selected.value = size;
+
+  switch (size) {
+    case 'small':
+      emit('update:modelValue', [{ operator: 'lt', value: 25 }]);
+      break;
+    case 'medium':
+      emit('update:modelValue', [
+        { operator: 'gte', value: 25 },
+        { operator: 'lte', value: 90 }
+      ]);
+      break;
+    case 'large':
+      emit('update:modelValue', [{ operator: 'gt', value: 90 }]);
+      break;
+  }
+}
+</script>

dev-demo/resources/apartments.ts

@@ -254,6 +254,7 @@ export default {
             showCountryName: true,
           },
         },
+        filter: "@@/CustomSqueareMetersFilter.vue",
       },
     },
     {