adminforth 2.4.0-next.29 → 2.4.0-next.290

package/dist/spa/src/components/CustomRangePicker.vue

@@ -4,27 +4,20 @@
       :min="minFormatted"
       :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="flex-1 bg-lightRangePickerInputBackground border border-lightRangePickerInputBorder text-lightRangePickerInputText placeholder-lightRangePickerInputPlaceholder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-darkRangePickerInputBackground dark:border-darkRangePickerInputBorder dark:placeholder-darkRangePickerInputPlaceholder dark:text-darkRangePickerInputText dark:focus:ring-blue-500 dark:focus:border-blue-500"
       :placeholder="$t('From')"
       v-model="start"
     >
-
+    <p>_</p>
     <input
       :min="minFormatted"
       :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="flex-1 bg-lightRangePickerInputBackground border border-lightRangePickerInputBorder text-lightRangePickerInputText placeholder-lightRangePickerInputPlaceholder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-darkRangePickerInputBackground dark:border-darkRangePickerInputBorder dark:placeholder-darkRangePickerInputPlaceholder dark:text-darkRangePickerInputText dark:focus:ring-blue-500 dark:focus:border-blue-500"
       :placeholder="$t('To')"
       v-model="end"
     >
 
-    <button
-      v-if="isChanged"
-      type="button"
-      class="flex items-center p-0.5 ml-auto px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
-      @click="clear">Clear
-    </button>
-
     <div v-if="min && max" class="w-full px-2.5">
       <vue-slider
         class="custom-slider"
@@ -57,15 +50,15 @@ const props = defineProps({
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
 
-const minFormatted = computed(() => Math.floor(props.min));
-const maxFormatted = computed(() => Math.ceil(props.max));
+const minFormatted = computed(() => Math.floor(<number>props.min));
+const maxFormatted = computed(() => Math.ceil(<number>props.max));
 
 const isChanged = computed(() => {
   return start.value && start.value !== minFormatted.value || end.value && end.value !== maxFormatted.value;
 });
 
-const start = ref(props.valueStart);
-const end = ref(props.valueEnd);
+const start = ref<string | number>(props.valueStart);
+const end = ref<string | number>(props.valueEnd);
 
 const sliderValue = ref([minFormatted.value, maxFormatted.value]);
 
@@ -112,13 +105,7 @@ watch([minFormatted,maxFormatted], () => {
   setSliderValues(minFormatted.value, maxFormatted.value)
 })
 
-const clear = () => {
-  start.value = ''
-  end.value = ''
-  setSliderValues('', '')
-}
-
-function setSliderValues(start, end) {
+function setSliderValues(start: any, end: any) {
   sliderValue.value = [start || minFormatted.value, end || maxFormatted.value];
 }
 </script>
@@ -153,4 +140,33 @@ function setSliderValues(start, end) {
       @apply bg-lightPrimaryOpacity;
     }
 }
+
+.dark .custom-slider {
+  &:deep(.vue-slider-rail) {
+    background-color: rgb(55 65 81); // gray-700
+  }
+
+  &:deep(.vue-slider-dot-handle) {
+    @apply bg-darkPrimary;
+    border: none;
+    box-shadow: none;
+  }
+
+  &:deep(.vue-slider-dot-handle:hover) {
+    @apply bg-darkPrimary;
+    filter: brightness(1.1);
+    border: none;
+    box-shadow: none;
+  }
+
+  &:deep(.vue-slider-process) {
+    @apply bg-darkPrimaryOpacity;
+  }
+
+  &:deep(.vue-slider-process:hover) {
+    filter: brightness(1.1);
+    @apply bg-darkPrimaryOpacity;
+  }
+}
+
 </style>

package/dist/spa/src/components/ErrorMessage.vue

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="error" class="af-login-modal-error flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
+    <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+    </svg>
+    <span class="sr-only">{{ $t('Info') }}</span>
+    <div>
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+defineProps({
+  error: {
+    type: String,
+    default: null
+  }
+});
+</script>

package/dist/spa/src/components/Filters.vue

@@ -2,16 +2,16 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed  right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-gray-900"
+      class="af-filters-sidebar fixed right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-lightFiltersBackgroung w-80 dark:bg-darkFiltersBackgroung shadow-xl dark:shadow-gray-900"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
       :style="{ height: `calc(100dvh ` }"
   >
-    <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
+    <h5 id="drawer-navigation-label" class="text-base font-semibold text-lightFiltersHeaderText uppercase dark:text-darkFiltersHeaderText">
       {{ $t('Filters') }}
 
-      <button type="button" @click="$emit('hide')" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute end-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" >
+      <button type="button" @click="$emit('hide')" class="text-lightFiltersCloseIcon bg-transparent hover:bg-lightFiltersCloseIconHoverBackground hover:text-lightFiltersCloseIconHover rounded-lg text-sm p-1.5 absolute end-2.5 inline-flex items-center dark:text-darkFiltersCloseIcon dark:hover:bg-darkFiltersCloseIconHoverBackground dark:hover:text-darkFiltersCloseIconHover" >
         <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         <span class="sr-only">{{ $t('Close menu') }}</span>
       </button>
@@ -20,112 +20,141 @@
     <div class="py-4 ">
       <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-else-if="c.foreignResource"
-              :multiple="c.filterOptions.multiselect"
-              class="w-full"
-              :options="columnOptions[c.name] || []"
-              @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 ? [] : '')"
-            />
-            <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 || undefined })"
-             :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
-             @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: $event || undefined })"
-           />
-
-           <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
-            <Input
-              type="number"
-              aria-describedby="helper-text-explanation"
-              :placeholder="$t('From')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: $event || undefined })"
-              :modelValue="getFilterItem({ column: c, operator: 'gte' })"
-            />
-            <Input
-              type="number"
-              aria-describedby="helper-text-explanation"
-              :placeholder="$t('To')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: $event|| undefined })"
-              :modelValue="getFilterItem({ column: c, operator: 'lte' })"
-            />
-           </div>
-            
+            <div class="flex flex-col">
+              <div class="flex justify-between items-center">
+                <p class="dark:text-gray-400 h-7 my-1">{{ c.label }}</p>
+                <Tooltip v-if="filtersStore.filters.find(f => f.field === c.name)">
+                <button 
+                  class=" flex items-center justify-center w-7 h-7 my-1 hover:border rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+                  :disabled="!filtersStore.filters.find(f => f.field === c.name)"
+                  @click="filtersStore.clearFilter(c.name);"
+                > 
+                  <IconCloseOutline /> 
+                </button>
+                <template #tooltip>
+                  Clear filter
+                </template>
+                </Tooltip> 
+              </div>
+              <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-else-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"
+                  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"
+                  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>
          </li>
       </ul>
    </div>
 
    <div class="flex justify-end gap-2">
       <button 
-        :disabled="!filtersStore.filters.length"
+        :disabled="!filtersStore.visibleFiltersCount"
         type="button" 
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
-        @click="clear">{{ $t('Clear all') }}</button>
+        class="flex gap-1 items-center py-1 pr-3 text-sm font-medium text-lightFiltersClearAllButtonText focus:outline-none bg-lightFiltersClearAllButtonBackground rounded border border-lightFiltersClearAllButtonBorder hover:bg-lightFiltersClearAllButtonBackgroundHover hover:text-lightFiltersClearAllButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightFiltersClearAllButtonFocus dark:focus:ring-darkFiltersClearAllButtonFocus dark:bg-darkFiltersClearAllButtonBackground dark:text-darkFiltersClearAllButtonText dark:border-darkFiltersClearAllButtonBorder dark:hover:text-darkFiltersClearAllButtonTextHover dark:hover:bg-darkFiltersClearAllButtonBackgroundHover disabled:opacity-50 disabled:cursor-not-allowed"
+        @click="clear"><IconCloseOutline class="ml-3"/> {{ $t('Clear all') }}</button>
 
    </div>
   </div>
@@ -136,18 +165,20 @@
 </template>
 
 <script setup>
-import { watch, computed } from 'vue';
+import { watch, computed, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers } from '@/utils';
 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 Spinner from '@/afcl/Spinner.vue';
 import debounce from 'debounce';
+import { Tooltip } from '@/afcl';
+import { IconCloseOutline } from '@iconify-prerendered/vue-flowbite';
 
 const filtersStore = useFiltersStore();
 const { t } = useI18n();
@@ -165,31 +196,54 @@ const columnsWithFilter = computed(
   () => props.columns?.filter(column => column.showIn.filter) || []
 );
 
-const columnOptions = computedAsync(async () => {
-  const ret = {};
-  if (!props.columns) {
-    return ret;
-  }
-  await Promise.all(
-    Object.values(props.columns).map(async (column) => {
-      if (column.foreignResource) {
-        const list = await callAdminForthApi({
-          method: 'POST',
-          path: `/get_resource_foreign_data`,
-          body: {
-            resourceId: router.currentRoute.value.params.resourceId,
-            column: column.name,
-            limit: 10000,
-            offset: 0,
-          },
-        });
-        ret[column.name] = list.items;
+const columnOptions = ref({});
+const columnLoadingState = reactive({});
+const columnOffsets = reactive({});
+const columnEmptyResultsCount = reactive({});
+
+watch(() => props.columns, async (newColumns) => {
+  if (!newColumns) return;
+  
+  for (const column of newColumns) {
+    if (column.foreignResource) {
+      if (!columnOptions.value[column.name]) {
+        columnOptions.value[column.name] = [];
+        columnLoadingState[column.name] = { loading: false, hasMore: true };
+        columnOffsets[column.name] = 0;
+        columnEmptyResultsCount[column.name] = 0;
+        
+        await loadMoreOptions(column.name);
       }
-    })
-  );
+    }
+  }
+}, { immediate: true });
+
+// Function to load more options for a specific column
+async function loadMoreOptions(columnName, searchTerm = '') {
+  return loadMoreForeignOptions({
+    columnName,
+    searchTerm,
+    columns: props.columns,
+    resourceId: router.currentRoute.value.params.resourceId,
+    columnOptions,
+    columnLoadingState,
+    columnOffsets,
+    columnEmptyResultsCount
+  });
+}
 
-  return ret;
-}, {});
+async function searchOptions(columnName, searchTerm) {
+  return searchForeignOptions({
+    columnName,
+    searchTerm,
+    columns: props.columns,
+    resourceId: router.currentRoute.value.params.resourceId,
+    columnOptions,
+    columnLoadingState,
+    columnOffsets,
+    columnEmptyResultsCount
+  });
+}
 
 
 // sync 'body' class 'overflow-hidden' with show prop show
@@ -221,10 +275,18 @@ const onFilterInput = computed(() => {
   }, {});
 });
 
+const onSearchInput = computed(() => {
+  return createSearchInputHandlers(
+    props.columns,
+    searchOptions,
+    (column) => column.filterOptions?.debounceTimeMs || 300
+  );
+});
+
 function setFilterItem({ column, operator, value }) {
 
   const index = filtersStore.filters.findIndex(f => f.field === column.name && f.operator === operator);
-  if (value === undefined) {
+  if (value === undefined || value === '' || value === null) {
     if (index !== -1) {
       filtersStore.filters.splice(index, 1);
     }
@@ -239,11 +301,12 @@ function setFilterItem({ column, operator, value }) {
 }
 
 function getFilterItem({ column, operator }) {
-  return filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value || '';
+  const filterValue = filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value;
+  return filterValue !== undefined ? filterValue : '';
 }
 
 async function clear() {
-  filtersStore.clearFilters();
+  filtersStore.filters = [...filtersStore.filters.filter(f => filtersStore.shouldFilterBeHidden(f.field))];
   emits('update:filters', [...filtersStore.filters]);
 }
 

package/dist/spa/src/components/GroupsTable.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="rounded-lg shadow-resourseFormShadow dark:shadow-darkResourseFormShadow dark:shadow-2xl">
-    <div v-if="group.groupName && !group.noTitle" class="text-md font-semibold px-6 py-3 flex flex-1 items-center dark:border-gray-600 text-gray-700 bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 rounded-t-lg">
+    <div v-if="group.groupName && !group.noTitle" class="text-md font-semibold px-6 py-3 flex flex-1 items-center dark:border-darkFormBorder text-lightListTableHeadingText bg-lightFormHeading dark:bg-darkFormHeading dark:text-darkListTableHeadingText rounded-t-lg">
       {{ group.groupName }}
     </div>
-    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-      <thead v-if="!allColumnsHaveCustomComponent" class="text-xs text-gray-700 uppercase dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group ">
+    <table class="w-full text-sm text-left rtl:text-right text-lightFormFieldTextColor dark:text-darkFormFieldTextColor">
+      <thead v-if="!allColumnsHaveCustomComponent" class="text-xs text-lightListTableHeadingText uppercase dark:text-darkListTableHeadingText bg-lightFormHeading dark:bg-darkFormHeading block md:table-row-group ">
         <tr>
           <th scope="col" :class="{'rounded-tl-lg': !group.groupName}" class="px-6 py-3 hidden md:w-52 md:table-cell">
               {{ $t('Field') }}
@@ -19,7 +19,7 @@
           v-for="(column, i) in group.columns"
           :key="column.name"
           v-if="currentValues !== null"
-          class="bg-ligftForm dark:bg-gray-800 dark:border-gray-700 block md:table-row"
+          class="bg-lightForm dark:bg-darkForm dark:border-darkFormBorder block md:table-row"
           :class="{ 'border-b': i !== group.columns.length - 1}"
         >
           <td class="px-6 py-4 flex items-center block md:table-cell pb-0 md:pb-4" 
@@ -29,7 +29,7 @@
               <Tooltip v-if="column.required[mode]">
 
                 <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
-                  :class="(columnError(column) && validating) ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'"
+                  :class="(columnError(column) && validating) ? 'text-lightInputErrorColor dark:text-darkInputErrorColor' : 'text-lightRequiredIconColor dark:text-darkRequiredIconColor'"
                 />
 
                 <template #tooltip>
@@ -55,8 +55,8 @@
               @update:emptiness="customComponentsEmptiness[$event.name] = $event.value"
               :readonly="readonlyColumns?.includes(column.name)"
             />
-            <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
-            <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
+            <div v-if="columnError(column) && validating" class="mt-1 text-xs text-lightInputErrorColor dark:text-darkInputErrorColor">{{ columnError(column) }}</div>
+            <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-lightFormFieldTextColor dark:text-darkFormFieldTextColor">{{ column.editingNote[mode] }}</div>
           </td>
         </tr>
       </tbody>
@@ -70,6 +70,7 @@
   import { ref, computed, watch, nextTick, type Ref } from 'vue';
   import { useI18n } from 'vue-i18n';
   import ColumnValueInputWrapper from "@/components/ColumnValueInputWrapper.vue";
+  import type { AdminForthResourceColumnInputCommon } from '@/types/Common';
 
   const { t } = useI18n();
 
@@ -89,7 +90,7 @@
   const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
   const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
   const allColumnsHaveCustomComponent = computed(() => {
-    return props.group.columns.every(column => {
+    return props.group.columns.every((column: AdminForthResourceColumnInputCommon) => {
       const componentKey = `${props.source}Row` as keyof typeof column.components;
       return column.components?.[componentKey];
     });