Merge pull request #359 from devforth/feature/filters-visability-handling

fix: update filter logic to use appliedFiltersCount and enhance visib…

Author: NoOne7135

adminforth/spa/src/adminforth.ts

@@ -120,23 +120,27 @@ class FrontendAPI implements FrontendAPIInterface {
   listFilterValidation(filter: FilterParams): boolean {
     if(router.currentRoute.value.meta.type !== 'list'){
       throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
-    } else {
-      console.log(this.coreStore.resourceColumnsWithFilters,'core store')
-      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumnCommon) => col.name === filter.field)
-      if(!filterField){
-          throw new Error(`Field ${filter.field} is not available for filtering`)
-      }
-      
     }
     return true
   }
 
   setListFilter(filter: FilterParams): void {
     if(this.listFilterValidation(filter)){
-      if(this.filtersStore.filters.some((f: any) => {return f.field === filter.field && f.operator === filter.operator})){
-        throw new Error(`Filter ${filter.field} with operator ${filter.operator} already exists`)
+      const existingFilterIndex = this.filtersStore.filters.findIndex((f: any) => {
+        return f.field === filter.field && f.operator === filter.operator
+      });
+      
+      if(existingFilterIndex !== -1){
+        // Update existing filter instead of throwing error
+        const filters = [...this.filtersStore.filters];
+        if (filter.value === undefined) {
+          filters.splice(existingFilterIndex, 1);
+        } else {
+          filters[existingFilterIndex] = filter;
+        }
+        this.filtersStore.setFilters(filters);
       } else {
-        this.filtersStore.setFilter(filter)
+        this.filtersStore.setFilter(filter);
       }
     }
   }

adminforth/spa/src/components/Filters.vue

@@ -136,7 +136,7 @@
 
    <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-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">{{ $t('Clear all') }}</button>

adminforth/spa/src/stores/filters.ts

@@ -1,9 +1,11 @@
-import { ref, type Ref } from 'vue';
+import { ref, computed, type Ref } from 'vue';
 import { defineStore } from 'pinia';
+import { useCoreStore } from './core';
 
 export const useFiltersStore = defineStore('filters', () => {
     const filters: Ref<any[]> = ref([]);
     const sort: Ref<any> = ref({});
+    const coreStore = useCoreStore();
 
     const setSort = (s: any) => {
         sort.value = s;
@@ -23,5 +25,29 @@ export const useFiltersStore = defineStore('filters', () => {
     const clearFilters = () => {
         filters.value = [];
     }
-    return {setFilter, getFilters, clearFilters, filters, setFilters, setSort, getSort}
+
+    const shouldFilterBeHidden = (fieldName: string) => {
+        if (coreStore.resource?.columns) {
+            const column = coreStore.resource.columns.find((col: any) => col.name === fieldName);
+            if (column?.showIn?.filter !== true) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    const visibleFiltersCount = computed(() => {
+        return filters.value.filter(f => !shouldFilterBeHidden(f.field)).length;
+    });
+
+    return {
+        setFilter, 
+        getFilters, 
+        clearFilters, 
+        filters, 
+        setFilters, 
+        setSort, 
+        getSort,
+        visibleFiltersCount
+    }
 })

adminforth/spa/src/views/ListView.vue

@@ -92,8 +92,8 @@
         {{ $t('Filter') }}
         <span
           class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-          v-if="filtersStore.filters.length">
-            {{ filtersStore.filters.length }}
+          v-if="filtersStore.visibleFiltersCount">
+            {{ filtersStore.visibleFiltersCount }}
         </span>
       </button>
 

adminforth/types/FrontendAPI.ts

@@ -87,12 +87,19 @@ export interface FrontendAPIInterface {
          * Works only when user located on the list page. If filter already exists, it will be replaced with the new one.
          * Can be used to set filter from charts or other components in pageInjections.
          * 
+         * Filters are automatically marked as hidden (won't count in badge) if:
+         * - Column has showIn.filter: false
+         * 
          * Example:
          * 
          * ```ts
          * import adminforth from '@/adminforth'
          * 
+         * // Regular filter (will show in badge if column.showIn.filter !== false)
          * adminforth.list.setFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * 
+         * // Hidden filter (won't show in badge if column.showIn.filter === false)
+         * adminforth.list.setFilter({field: 'internal_status', operator: 'eq', value: 'active'})
          * ```
          * 
          * Please note that you can set/update filter even for fields which have showIn.filter=false in resource configuration.
@@ -106,6 +113,9 @@ export interface FrontendAPIInterface {
          * DEPRECATED: does the same as setFilter, kept for backward compatibility
          * Update a filter in the list
          * 
+         * Filters visibility in badge is automatically determined by column configuration:
+         * - Hidden if column has showIn.filter: false
+         * 
          * Example:
          * 
          * ```ts