ngx-column-filter-popup 1.0.3 → 1.0.5

package/README.md

@@ -75,6 +75,8 @@ npm install ngx-column-filter-popup
 
 ### Standalone Component (Angular 14+)
 
+#### Basic Example:
+
 ```typescript
 import { Component } from '@angular/core';
 import { ColumnFilterComponent } from 'ngx-column-filter-popup';
@@ -105,6 +107,173 @@ export class ExampleComponent {
 }
 ```
 
+#### Complete Example with New Features (Backend Mode, allowMultipleRules):
+
+```typescript
+import { Component, ViewChildren, QueryList } from '@angular/core';
+import { ColumnFilterComponent } from 'ngx-column-filter-popup';
+import { FilterConfig, applyColumnFilter } from 'ngx-column-filter-popup';
+
+interface User {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+@Component({
+  selector: 'app-example',
+  imports: [ColumnFilterComponent],
+  template: `
+    <table>
+      <thead>
+        <tr>
+          <th>
+            First Name
+            <lib-column-filter
+              columnName="first name"
+              columnKey="firstName"
+              [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"
+              [allowMultipleRules]="true"
+              [backendMode]="isBackendMode('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>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let user of filteredUsers">
+          <td>{{ user.firstName }}</td>
+          <td>{{ user.lastName }}</td>
+          <td>{{ user.email }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <button (click)="clearAllFilters()">Clear All Filters</button>
+  `
+})
+export class ExampleComponent {
+  originalData: User[] = [
+    { id: 1, firstName: 'John', lastName: 'Doe', email: 'john@example.com' }
+  ];
+  filteredData: User[] = [...this.originalData];
+
+  // ✅ Unified filter storage - single source of truth
+  filters = new Map<string, FilterConfig | null>();
+
+  // ✅ Configuration: Which columns use backend mode
+  readonly backendModeColumns = new Set<string>(['firstName', 'email']);
+
+  @ViewChildren(ColumnFilterComponent) filterComponents!: QueryList<ColumnFilterComponent>;
+
+  // ✅ Generic filter handler - works for all columns
+  onFilterApplied(columnKey: string, filterConfig: FilterConfig) {
+    this.filters.set(columnKey, filterConfig);
+    
+    if (this.isBackendMode(columnKey)) {
+      this.sendAllBackendFiltersToBackend();
+    }
+    
+    this.applyAllFilters();
+  }
+
+  // ✅ Generic filter clear handler
+  onFilterCleared(columnKey: string) {
+    this.filters.set(columnKey, null);
+    
+    if (this.isBackendMode(columnKey)) {
+      this.sendAllBackendFiltersToBackend();
+    }
+    
+    this.applyAllFilters();
+  }
+
+  // ✅ Check if column uses backend mode
+  isBackendMode(columnKey: string): boolean {
+    return this.backendModeColumns.has(columnKey);
+  }
+
+  // ✅ Apply all filters - automatically skips backend mode columns
+  private applyAllFilters() {
+    let result = [...this.originalData];
+
+    this.filters.forEach((filterConfig, columnKey) => {
+      // Skip backend mode columns (handled by backend)
+      if (filterConfig && !this.isBackendMode(columnKey)) {
+        result = applyColumnFilter(result, columnKey, filterConfig);
+      }
+    });
+
+    this.filteredData = result;
+  }
+
+  // ✅ Clear all filters programmatically
+  clearAllFilters() {
+    this.filters.clear();
+    this.sendAllBackendFiltersToBackend();
+    this.filteredData = [...this.originalData];
+
+    // 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() {
+    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);
+  }
+}
+```
+
 ### Module-Based (Optional)
 
 ```typescript

package/package.json

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