Reusable Filter Documentation

Overview

The extended reusable filter component allows integration into any Angular component with minimal changes. It supports multiple filter types, dynamic options, and advanced functionalities like chips for applied filters.

Features

Supports Date Range, Primary, and More Filters
- Similar to the implementation on the 'All Orders' page.
Supports Multiple Field Types
- DATERANGE, DROPDOWN, STRING, NUMBER, BOOLEAN.
Auto Show Search Option
- Enabled if the dropdown has more than 5 values.
Chips for Applied Filters
- Displays selected filters as chips.
- Includes 'Clear' and 'Clear All' functionality.
Modify Filter Value from Chips
- Allows changing selected filter values directly from the displayed chips.

Implementation

HTML Structure


Descrition:
 -- queryFilterData: Updated filter array with value for param change
 -- emitFilterData: get updated filter array on APPLY & CLEAR action
 -- buildingBlock: Unique key for component
 -- allFilters: All filters that need to be shown on UI
 -- isHasSegment: For independent filter uses keep this as false
 
<!-- Reusable filter -->
<ng-container *ngIf="filtersArray">
  <app-reusable-filter
    [queryFilterData]="queryFilterData"
    (emitFilterData)="getFilterData($event)"
    [buildingBlock]="'custom-claims'"
    [allFilters]="filtersArray"
    [isHasSegment]="false"
  ></app-reusable-filter>
</ng-container>
<!-- Reusable filter -->

TypeScript Implementation

  dateRangeFilters = [
    {
      displayKey: 'Claim created',
      condition: ['is', 'is between'],
      fieldType: 'DateRange',
      key: 'claimCreated',
      options: '',
      filterCondition: 'is between'
    },
    {
      displayKey: 'Claim updated',
      condition: ['is', 'is between'],
      fieldType: 'DateRange',
      key: 'claimUpdated',
      options: '',
      filterCondition: 'is between'
    },
    {
      displayKey: 'Claim raised',
      condition: ['is', 'is between'],
      fieldType: 'DateRange',
      key: 'claimRaised',
      options: '',
      filterCondition: 'is between'
    }
  ];

  primaryFilters: any[] = [
    {
      displayKey: 'Claim status',
      fieldType: 'Dropdown',
      key: 'claimStatus',
      condition: ['is'],
      filterCondition: 'is',
      options: [
        'All', 'Draft', 'New', 'Raised', 'Accepted', 'Reimbursed', 'Rejected', 'Dropped', 'Reopened', 'Resolved'
      ]
    }
  ];

  filtersArray: any;

  /** @description Method To Get Claims Filter Data */
  public async getFiltersData() {
    const salesChannelFilter = this.newSegmentService.addSalesChannelFilter('salesChannel');
    const workspaceFilter = await this.newSegmentService.addWorkspaceFilter('workSpaces');

    this.primaryFilters = [...this.primaryFilters, salesChannelFilter, workspaceFilter];
    
    // ANY ONE FILTER MUST BE PRESENT FROM BELOW THREE
    this.filtersArray = {
      primaryFilters: this.primaryFilters, 
      dateRangeFilters: this.dateRangeFilters,
      moreFilters: this.moreFilters 
    };
    console.log(this.filtersArray);
  }

Sample Data

Date Sample:

[
    {
        "displayKey": "Claim created",
        "condition": ["is", "is between"],
        "fieldType": "DateRange",
        "key": "claimCreated",
        "options": "",
        "filterCondition": "is between",
        "showMultiselectWithFilterOption": true,
        "conditionType": "today",
        "isDateRangeOptionPanelOpen": false,
        "fromDate": "2025-03-06T10:30:40.384Z",
        "toDate": "2025-03-06T10:30:40.384Z"
    }
]

Dropdown Sample Response:

{
    "displayKey": "Claim status",
    "fieldType": "Dropdown",
    "key": "claimStatus",
    "condition": ["is"],
    "filterCondition": "is",
    "options": [
        {"key": "All", "label": "All", "checked": false},
        {"key": "Draft", "label": "Draft", "checked": false},
        {"key": "New", "label": "New", "checked": false},
        {"key": "Raised", "label": "Raised", "checked": false},
        {"key": "Accepted", "label": "Accepted", "checked": false},
        {"key": "Reimbursed", "label": "Reimbursed", "checked": false},
        {"key": "Rejected", "label": "Rejected", "checked": false},
        {"key": "Dropped", "label": "Dropped", "checked": false},
        {"key": "Reopened", "label": "Reopened", "checked": false},
        {"key": "Resolved", "label": "Resolved", "checked": false}
    ],
    "allSelected": false,
    "filterValue": ["New"]
}

How filters will get updated

Component Usage Requirements

The component that implements app-reusable-filter needs to handle the following:

Define the filtersArray
- Create an array of filters with applicable options for their page and pass it to app-reusable-filter.
Handle Emitted Filter Values
- Capture emitted filter values and construct query parameters as per backend API requirements.
- Call the respective API with the applied filter query.
Maintain State on Page Reload
- On initialization, check for existing query parameters.
- Map the filter values to filtersArray to preserve state across page reloads.