Generic Filters Component

The GenericFiltersComponent is designed to dynamically generate and manage filter fields based on a provided schema. It integrates with Angular's reactive forms to retrieve and reset filter values while supporting additional utilities like date handling and input type customization.

How to use the component in your app :

1. import the component :

import {GenericFiltersComponent} from '@tradinos/cms-frontend-entity';

1. The selector for component , like it :

<lib-cms-generic-filters></lib-cms-generic-filters>

2. Define the filterSchema

The filterSchema defines the structure and behavior of the filters:

example

Features

1. Dynamic Filters:

   • Automatically generates filter fields based on the FilterSchema configuration.

2. Filter Retrieval:

   • Provides a method (getFilters) to retrieve the current filter values as an object.

3. Reset Filters:

   • Resets all filters to their default or empty values with the resetFilters method.

4. Date Handling:

   • Includes utilities to handle date ranges and convert dates to ISO format for consistent querying.

5. Customizable Input Types:

   • Supports various input types defined in FilterInputType for flexibility in filter field design.

6. Content Projection:

   • Allows custom templates for titles and actions using Angular content projection.

Inputs

filterSchema(optional)

A schema object defining the filter fields, their types, and configurations.

{
  inputs: FilterInput[];

  //filter transfer object,
  //if you want to add some static filters which not included in inputs 
  //you can extend BaseFilterDto and declare your own filter object
  
  filterDto: BaseFilterDto;
}

FilterInput {
  key: string;
  label: string;
  value?: any;
  value$?: BehaviorSubject<any>;
  inputType: FilterInputType;
  disabled?: boolean;
  disabled$?: BehaviorSubject<boolean>;
  dropdownConfiguration?: DropdownConfiguration;
  multiSelectConfiguration?: MultiSelectConfiguration;
  autoCompleteConfiguration?: AutoCompleteConfiguration;
  calendarConfiguration?: CalendarInputConfiguration;
}

BaseFilterDto {
  page?: number;
  per_page?: number;
  pagination?: boolean;
  search?: string;
  sortDir?: 'DESC' | 'ASC';
  sortKey?: string;
}
FilterInputType {
    text = "text",
    email = "email",
    number = "number",
    date = "date",
    time = "time",
    datetime = "datetime",
    search = "search",
    dropdown = "dropdown",
    multiSelect = "multiSelect",
    autoComplete = "autoComplete",
    timeDuration = "timeDuration"
}

Example:

user.component.ts

import {
  CMS_CRUD_CONFIG,
  CMS_FILTER_CONFIG,
  CmsService,
  CRUDConfig,
  FilterInputType,
  FilterSchema,
} from '@tradinos/cms-frontend-entity';
import {
  CMS_FORM_CONFIG,
  FormService,
  LIB_FORM_CONFIG,
} from '@tradinos/cms-frontend-form';
providers: [
    DatePipe,
    UserService,
    {
      provide: CmsService<User>,
      useExisting: UserService,
    },
    {
      provide: LIB_FORM_CRUD_SERVICE,
      useExisting: UserService,
    },
    {
      provide: CMS_CRUD_CONFIG,
      useValue: {
        openFormType: 'page',
        endPoints: { index: 'user', view: (id) => `user/byID/${id}` },
        actionsMode: 'manual',
        tableConfiguration: {
          dataKey: 'id',
          columnsMode: 'merge',
          actionsMode: 'merge',
        },
      } as CRUDConfig<User>,
    },
    {
      provide: CMS_FILTER_CONFIG,
      useValue: {
        filterDto: {
          page: 1,
        },
        inputs: [
          {
            key: 'name',
            label: 'name',
            inputType: FilterInputType.text,
          },
        ],
      } as FilterSchema,
    },
]

Methods

1. ngOnInit(): void

• Description:

  • Lifecycle hook called when the component initializes.

  • Subscribes to value changes in the filter fields for real-time updates.

• Behavior:

  • Triggers change detection to ensure the UI is updated correctly.

2. getFilters(): { [key: string]: any }

• Description:

  • Retrieves the current filter values as a key-value pair object.

  • Applies transformations such as cleaning empty values and formatting dates.

• Return Value:

  • An object where keys represent filter field names and values represent the user's input.

3. resetFilters(): void

• Description:

  • Resets all filter fields to their default or empty values.

4. Private Methods

1. clean(filters: { [key: string]: any }): { [key: string]: any }

   • Removes empty or null values from the filter object.

   • Ensures only meaningful filter criteria are submitted.

2. convertDateToIsoDate(date: Date): string

   • Converts a Date object to an ISO date string for consistent querying.

   • Used internally for date-based filters.

3. subscribeValueChanges()

   • Monitors changes to filter fields for real-time updates.