Filtering System - fairmutex/FTable GitHub Wiki

Usage

''' <ft-ffilter [source]='"frontend"' [filterType]='filters[index]' [columnName]='column.name' [otherData]='column.filterData' [debounce]='500' (filter)='filter($event)'>
'''

FTable comes with default filters

string
number
checkbox
date

However the filtering system is designed in a way that one can create Custom filter and inject it in the library on the fly. This is demonstrated in the Sample

Creating a custom filter

import { FFilterBase } from 'ftable';

The filter must implement FFilterBase To check if Front End 'frontend' is passed (subject to change)

  @Input() public source: string;

Other data that might be required by the filter

  @Input() public otherData: any;

For instance checkbox filter requires an array of strings

  otherData = ['Enabled','Disabled']

Column name the filter is to be applied on

  @Input() public columnName: string;

This is the emitter that will send the event for the filter to be applied

  @Output() filter: EventEmitter<any> = new EventEmitter<any>();

The filter must always fire an event to be applied.

Take for instance this filter Template will fire an event on keyup

  <input type='text' [(ngModel)]='value' (keyup)='onKeyUp($event)'/>

The event will differ for Front End and Back End.

For front End the apply property must be a function to be applied to the column and this must return true or false.

    const fn = function (name, searchValue) {
      return d => {
        return (<any[]>d).filter(x => String(x[name]).toLowerCase().indexOf(String(searchValue).toLowerCase()) !== -1);
      };
    };
    this.filter.emit({ columnName: this.columnName, apply: fn(this.columnName, event.target.value) });

For Back End the apply property must be an object holding the properties that are required to apply such filter and the filtering logic is to be implemented at Back end

    var result =  {value:event.target.value};
    this.filter.emit({ columnName: this.columnName,type:'string', apply: result });

Filter Logic

onKeyUp(event) {
    if (this.source === 'frontend') {
    const fn = function (name, searchValue) {
      return d => {
        return (<any[]>d).filter(x => String(x[name]).toLowerCase().indexOf(String(searchValue).toLowerCase()) !== -1);
      };
    };
    this.filter.emit({ columnName: this.columnName, apply: fn(this.columnName, event.target.value) });
  }else{
    var result =  {value:event.target.value};
    this.filter.emit({ columnName: this.columnName,type:'string', apply: result });
  }
}

Reset Method

This is the basic reset method (apply:null) means reset filtering

  reset() {
   // reset internal filter properties here
   this.filter.emit({ columnName: this.columnName, apply: null });
  }

Since our [(ngModel)]='value' this property is cleared in the reset method

  reset() {
   this.value = '';
   this.filter.emit({ columnName: this.columnName, apply: null });
  }

Filters are dynamically loaded

Since Filters are dynamically loaded, Custom filters must be in the entryComponents array in the module. ( Refer to Sample)

  entryComponents: [
    EmailFFilterComponent
  ]