@eqproject/eqp-filters-next v0.1.69

Table of contents

• Getting started
• API
• Use cases
• Credits

Required

• Angular Material installed and imported
• @angular-material-components/datetime-picker (v2.0.4)
• @angular-material-components/moment-adapter
• Moment.js

Getting started

This package allows the definition of filters to be used on a data list of any type. With eqp-filters you can configure different types of filters (to choose from a predefined set) or create a custom filter to inject into the directive itself.

Notes

The directive does not really apply the filter but dynamically composes the filter to be returned to the user.

Step 1: Install eqp-dynamic-filters:

NPM

npm install --save @eqproject/eqp-filters

Step 2: Import the EqpDashboardModule :

import { EqpFiltersModule } from '@eqproject/eqp-filters';

@NgModule({
  declarations: [AppComponent],
  imports: [EqpFiltersModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

API

Inputs

Outputs

Models used

FilterConfig Model: class for configure each individual filter

Enums description

Static exposed functions

FilterCvlConfig Model: class for configure the eqp-select for the filter of types: Cvl, CvlEnum or BooleanCvl

Static exposed functions

Use cases

Use Example in class :

Define selector in html

<eqp-dynamic-filters [filtersConfig]="filters" (filtersSelected)="filtersSelected($event)"></eqp-dashboard>

CASE 1:Text type filter configuration

    filters: FilterConfig[];
    
    let textFilter: FilterConfig = FilterConfig.CreateStandardFilterConfig("TEXT_FILTER", "Name", "Name", InputType.Text, WherePartType.Equal);
    this.filters.push(textFilter);

CASE 2: Number type filter configuration

    filters: FilterConfig[];
    
    let numberFilter: FilterConfig = FilterConfig.CreateStandardFilterConfig("NUMBER_FILTER", "Counter", "Filtro Numero", InputType.Number, WherePartType.Equal);
    this.filters.push(numberFilter);

CASE 3: Boolean type filter configuration

    filters: FilterConfig[];
    
    let booleanFilter: FilterConfig = FilterConfig.CreateStandardFilterConfig("BOOLEAN_FILTER","Bool Filter", "IsValid", InputType.Boolean, WherePartType.Equal);
     this.filters.push(booleanFilter);

CASE 4: CVL Enum type filter configuration

    filters: FilterConfig[];
    
    //Assuming you define a GenderEnum type enumerator with the values MALE and FEMALE
    
    let enumCvlConfig: FilterCvlConfig = FilterCvlConfig.CreateFilterCVLConfig(GenderEnum, null, null, null, false, true, true);
    let enumFilter: FilterConfig = FilterConfig.CreateStandardFilterConfig("CVL_ENUM_FILTER", "Gender", "Gender", InputType.CvlEnum, WherePartType.Equal, null, enumCvlConfig);
    this.filters.push(enumFilter);

CASE 5: Date type filter configuration

    filters: FilterConfig[];
    
    let filterDateStart: FilterConfig = FilterConfig.CreateStandardFilterConfig("DATE_FILTER", "Start date","StartDate", InputType.Date, WherePartType.GreaterThanOrEqual, FilterSizeClass.SMALL);
    this.filters.push(filterDateStart);

CASE 6: Datetime type filter configuration

    filters: FilterConfig[];
    
    let filterDateStart: FilterConfig = FilterConfig.CreateStandardFilterConfig("DATETIME_FILTER", "Start datetime","StartDatetime", InputType.Datetime, WherePartType.GreaterThanOrEqual, FilterSizeClass.SMALL);
    this.filters.push(filterDateStart);

CASE 7: CVL type filter configuration

    filters: FilterConfig[];
    
    let cvlConfig: FilterCvlConfig = FilterCvlConfig.CreateFilterCVLConfig(null, [{ key: 1, value: "Value 1"}, { key: 2, value: "Value 2"}, { key: 3, value: "Value 3"}], "key", "value", false, true, true, null, true);
    let cvlFilter: FilterConfig = FilterConfig.CreateStandardFilterConfig("CVL_FILTER", "Cvl", "CvlValue", InputType.Cvl, WherePartType.Equal, null, cvlConfig);
    this.filters.push(cvlFilter);

CASE 8: Boolean CVL type filter configuration (this is the typical case of a non-mandatory Boolean)

    filters: FilterConfig[];
    
    let booleanCvlConfig: FilterCvlConfig = FilterCvlConfig.CreateFilterCVLConfig(null, [{ key: true, value: "Yes"}, { key: false, value: "No"}], "key", "value", false, true, true, null, false);
    let booleanCvlFilter: FilterConfig = FilterConfig.CreateStandardFilterConfig("CVL_BOOLEAN_FILTER", "Boolean Cvl", "BooleanCvlValue", InputType.BooleanCvl, WherePartType.Equal, null, booleanCvlConfig);
    this.filters.push(booleanCvlFilter);

CASE 9: Custom Template type filter configuration (this is the typical case of a non-mandatory Boolean)

    <ng-template #externalFilter let-filter="filter">
        <mat-form-field>
            <mat-label>{{ filter.Label }}</mat-label>
            <input matInput [(ngModel)]="filter.PropertyObject">
      </mat-form-field>
    </ng-template>

    
    //Define this ViewChild on ts
    @ViewChild('externalFilter', { static: true }) externalFilter: TemplateRef<any>;
    
    //Define this function on ts
    createCustomFilterValue(filterConfig, context) {
        let result = {};

        result[filterConfig.PropertyName] = filterConfig.PropertyObject;
        return result;
    }
    
    //On the filter configuring method
    filters: FilterConfig[];
    
    let filterExternal: FilterConfig = FilterConfig.CreateStandardFilterConfig("PROVA_TEMPLATE_ESTERNO","Template esterno","Surname", InputType.CustomTemplate, WherePartType.Equal, FilterSizeClass.SMALL);
    filterExternal.Externaltemplate = this.externalFilter;
    filterExternal.CustomWherePartFunction = (config, context) => this.createCustomFilterValue(config, this);

    this.filters.push(filterExternal);
    

CASE 10: eqp-filters with active save functionality

    <eqp-dynamic-filters [filtersConfig]="filters" [saveFilter]="true" [saveFilterID]="'testFiltri'"                            [saveFilterID]="'provaFiltri'" (filtersSelected)="filtersSelected($event)"                     (customFiltersSavedValueLoaded)="customFiltersSavedValueLoaded($event)" [usingMode]="2" [resultType]="2" [applyOnInit]="true" ></eqp-dynamic-filters>

    
    //On the filter configuring method
    filters: FilterConfig[];
    
    let textFilter: FilterConfig = FilterConfig.CreateStandardFilterConfig("PROVA_TEXT_ID", "Nome", "Name", InputType.Text, WherePartType.Equal);
    this.filters.push(textFilter);

    
    customFiltersSavedValueLoaded(filterConfig:FilterConfig) {
    if(!filterConfig)
      return;

    //If the current filter has an external template (with custom function defined) then 
    //here the value of the PropertyObject property of filterConfig must be forced with the value of the properties 
    //used inside the external template. In this way eqp-filters will be able to retrieve the value to be saved also 
    //for custom filters
    //For example: filterConfig.PropertyObject = context.customFilterPropertyValue;
  }
    

Credits

This library has been developed by EqProject SRL, for more info contact: info@eqproject.it