ngx-column-filter-popup 1.0.7 → 1.0.8

package/README.md

@@ -297,7 +297,8 @@ export class YourModule {}
   columnName="name"
   columnKey="name"
   fieldType="text"
-  (filterApplied)="onFilter($event)">
+  (filterApplied)="onFilterApplied('name', $event)"
+  (filterCleared)="onFilterCleared('name')">
 </lib-column-filter>
 ```
 
@@ -309,7 +310,8 @@ export class YourModule {}
   columnKey="balance"
   fieldType="currency"
   currencySymbol="$"
-  (filterApplied)="onBalanceFilter($event)">
+  (filterApplied)="onFilterApplied('balance', $event)"
+  (filterCleared)="onFilterCleared('balance')">
 </lib-column-filter>
 ```
 
@@ -320,7 +322,8 @@ export class YourModule {}
   columnName="age"
   columnKey="age"
   fieldType="age"
-  (filterApplied)="onAgeFilter($event)">
+  (filterApplied)="onFilterApplied('age', $event)"
+  (filterCleared)="onFilterCleared('age')">
 </lib-column-filter>
 ```
 
@@ -331,7 +334,8 @@ export class YourModule {}
   columnName="date"
   columnKey="date"
   fieldType="date"
-  (filterApplied)="onDateFilter($event)">
+  (filterApplied)="onFilterApplied('date', $event)"
+  (filterCleared)="onFilterCleared('date')">
 </lib-column-filter>
 ```
 
@@ -343,10 +347,13 @@ export class YourModule {}
   columnKey="status"
   fieldType="status"
   [statusOptions]="['qualified', 'unqualified', 'negotiation', 'new']"
-  (filterApplied)="onStatusFilter($event)">
+  (filterApplied)="onFilterApplied('status', $event)"
+  (filterCleared)="onFilterCleared('status')">
 </lib-column-filter>
 ```
 
+> 💡 **Note**: All examples use generic handlers `onFilterApplied(columnKey, $event)` and `onFilterCleared(columnKey)` - no need for separate functions per filter!
+
 ## API Reference
 
 ### ColumnFilterComponent
@@ -584,8 +591,11 @@ export class ExampleComponent {
 
 ## Complete Example
 
+**✅ Modern Implementation using Generic Handlers (Recommended):**
+
 ```typescript
-import { Component } from '@angular/core';
+import { Component, ViewChildren, QueryList } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ColumnFilterComponent } from 'ngx-column-filter-popup';
 import { FilterConfig, applyColumnFilter } from 'ngx-column-filter-popup';
 
@@ -602,8 +612,9 @@ interface User {
 
 @Component({
   selector: 'app-user-list',
-  imports: [ColumnFilterComponent],
+  imports: [CommonModule, ColumnFilterComponent],
   template: `
+    <button (click)="clearAllFilters()">Clear All Filters</button>
     <table>
       <thead>
         <tr>
@@ -612,8 +623,29 @@ interface User {
             <lib-column-filter
               columnName="first name"
               columnKey="firstName"
-              (filterApplied)="onFirstNameFilter($event)"
-              (filterCleared)="onFirstNameClear()">
+              [allowMultipleRules]="false"
+              [backendMode]="isBackendMode('firstName')"
+              (filterApplied)="onFilterApplied('firstName', $event)"
+              (filterCleared)="onFilterCleared('firstName')">
+            </lib-column-filter>
+          </th>
+          <th>
+            Last Name
+            <lib-column-filter
+              columnName="last name"
+              columnKey="lastName"
+              (filterApplied)="onFilterApplied('lastName', $event)"
+              (filterCleared)="onFilterCleared('lastName')">
+            </lib-column-filter>
+          </th>
+          <th>
+            Email
+            <lib-column-filter
+              columnName="email"
+              columnKey="email"
+              [backendMode]="isBackendMode('email')"
+              (filterApplied)="onFilterApplied('email', $event)"
+              (filterCleared)="onFilterCleared('email')">
             </lib-column-filter>
           </th>
           <th>
@@ -622,7 +654,8 @@ interface User {
               columnName="age"
               columnKey="age"
               fieldType="age"
-              (filterApplied)="onAgeFilter($event)">
+              (filterApplied)="onFilterApplied('age', $event)"
+              (filterCleared)="onFilterCleared('age')">
             </lib-column-filter>
           </th>
           <th>
@@ -632,7 +665,8 @@ interface User {
               columnKey="balance"
               fieldType="currency"
               currencySymbol="$"
-              (filterApplied)="onBalanceFilter($event)">
+              (filterApplied)="onFilterApplied('balance', $event)"
+              (filterCleared)="onFilterCleared('balance')">
             </lib-column-filter>
           </th>
           <th>
@@ -641,7 +675,8 @@ interface User {
               columnName="join date"
               columnKey="joinDate"
               fieldType="date"
-              (filterApplied)="onDateFilter($event)">
+              (filterApplied)="onFilterApplied('joinDate', $event)"
+              (filterCleared)="onFilterCleared('joinDate')">
             </lib-column-filter>
           </th>
           <th>
@@ -651,7 +686,8 @@ interface User {
               columnKey="status"
               fieldType="status"
               [statusOptions]="statusOptions"
-              (filterApplied)="onStatusFilter($event)">
+              (filterApplied)="onFilterApplied('status', $event)"
+              (filterCleared)="onFilterCleared('status')">
             </lib-column-filter>
           </th>
         </tr>
@@ -659,6 +695,8 @@ interface User {
       <tbody>
         <tr *ngFor="let user of filteredUsers">
           <td>{{ user.firstName }}</td>
+          <td>{{ user.lastName }}</td>
+          <td>{{ user.email }}</td>
           <td>{{ user.age }}</td>
           <td>${{ user.balance }}</td>
           <td>{{ user.joinDate }}</td>
@@ -675,67 +713,109 @@ export class UserListComponent {
   
   filteredUsers: User[] = [...this.users];
   statusOptions = ['active', 'inactive', 'on-leave'];
-  
-  firstNameFilter: FilterConfig | null = null;
-  ageFilter: FilterConfig | null = null;
-  balanceFilter: FilterConfig | null = null;
-  dateFilter: FilterConfig | null = null;
-  statusFilter: FilterConfig | null = null;
-
-  onFirstNameFilter(filterConfig: FilterConfig) {
-    this.firstNameFilter = filterConfig;
-    this.applyAllFilters();
-  }
 
-  onFirstNameClear() {
-    this.firstNameFilter = null;
-    this.applyAllFilters();
-  }
+  // ✅ Unified filter storage - single source of truth
+  filters = new Map<string, FilterConfig | null>();
 
-  onAgeFilter(filterConfig: FilterConfig) {
-    this.ageFilter = filterConfig;
-    this.applyAllFilters();
-  }
+  // ✅ Configuration: Which columns use backend mode
+  readonly backendModeColumns = new Set<string>(['firstName', 'email']);
 
-  onBalanceFilter(filterConfig: FilterConfig) {
-    this.balanceFilter = filterConfig;
+  @ViewChildren(ColumnFilterComponent) filterComponents!: QueryList<ColumnFilterComponent>;
+
+  // ✅ Generic filter handler - works for ALL columns (no separate functions needed!)
+  onFilterApplied(columnKey: string, filterConfig: FilterConfig): void {
+    this.filters.set(columnKey, filterConfig);
+    
+    if (this.isBackendMode(columnKey)) {
+      this.sendAllBackendFiltersToBackend();
+    }
+    
     this.applyAllFilters();
   }
 
-  onDateFilter(filterConfig: FilterConfig) {
-    this.dateFilter = filterConfig;
+  // ✅ Generic filter clear handler - works for ALL columns
+  onFilterCleared(columnKey: string): void {
+    this.filters.set(columnKey, null);
+    
+    if (this.isBackendMode(columnKey)) {
+      this.sendAllBackendFiltersToBackend();
+    }
+    
     this.applyAllFilters();
   }
 
-  onStatusFilter(filterConfig: FilterConfig) {
-    this.statusFilter = filterConfig;
-    this.applyAllFilters();
+  // ✅ Check if column uses backend mode
+  isBackendMode(columnKey: string): boolean {
+    return this.backendModeColumns.has(columnKey);
   }
 
-  private applyAllFilters() {
+  // ✅ Apply all filters - automatically skips backend mode columns
+  private applyAllFilters(): void {
     let result = [...this.users];
 
-    if (this.firstNameFilter) {
-      result = applyColumnFilter(result, 'firstName', this.firstNameFilter);
-    }
-    if (this.ageFilter) {
-      result = applyColumnFilter(result, 'age', this.ageFilter);
-    }
-    if (this.balanceFilter) {
-      result = applyColumnFilter(result, 'balance', this.balanceFilter);
-    }
-    if (this.dateFilter) {
-      result = applyColumnFilter(result, 'joinDate', this.dateFilter);
-    }
-    if (this.statusFilter) {
-      result = applyColumnFilter(result, 'status', this.statusFilter);
-    }
+    this.filters.forEach((filterConfig, columnKey) => {
+      // Skip backend mode columns (handled by backend)
+      if (filterConfig && !this.isBackendMode(columnKey)) {
+        result = applyColumnFilter(result, columnKey, filterConfig);
+      }
+    });
 
     this.filteredUsers = result;
   }
+
+  // ✅ Clear all filters programmatically
+  clearAllFilters(): void {
+    this.filters.clear();
+    this.sendAllBackendFiltersToBackend();
+    this.filteredUsers = [...this.users];
+
+    // Clear UI state in all filter components (icons/inputs)
+    if (this.filterComponents) {
+      this.filterComponents.forEach((filter: ColumnFilterComponent) => {
+        filter.clearFilter();
+      });
+    }
+  }
+
+  // ✅ Send all backend filters to API
+  private sendAllBackendFiltersToBackend(): void {
+    const activeFilters: Array<{
+      field: string;
+      matchType: string;
+      value: string;
+      fieldType: string;
+    }> = [];
+
+    this.backendModeColumns.forEach(columnKey => {
+      const filterConfig = this.filters.get(columnKey);
+      if (filterConfig && filterConfig.rules.length > 0) {
+        filterConfig.rules.forEach(rule => {
+          if (rule.value && rule.value.trim() !== '') {
+            activeFilters.push({
+              field: columnKey,
+              matchType: rule.matchType,
+              value: rule.value.trim(),
+              fieldType: filterConfig.fieldType || 'text'
+            });
+          }
+        });
+      }
+    });
+
+    const payload = { activeFilters, count: activeFilters.length };
+    // Send to your backend API
+    console.log('Backend payload:', payload);
+  }
 }
 ```
 
+**✨ Key Benefits of This Approach:**
+- ✅ **No separate functions per filter** - One `onFilterApplied()` handles all columns
+- ✅ **Easy to add new filters** - Just add HTML, no new functions needed
+- ✅ **Clean and maintainable** - Map-based storage, generic handlers
+- ✅ **Backend mode support** - Configurable per column
+- ✅ **Single source of truth** - All filters in one Map
+
 ## 📖 Documentation
 
 ### For Beginners:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-column-filter-popup",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A powerful, reusable Angular column filter component with support for multiple field types, advanced filtering rules, and customizable match modes",
   "keywords": [
     "angular",