Merge pull request #98 from ghiscoding/feat/filter-placeholder

feat(filters): add optional placeholder to all Filters

Author: ghiscoding

src/app/examples/custom-inputFilter.ts

@@ -1,4 +1,14 @@
-import { Column, Filter, FilterArguments, FilterCallback, SearchTerm, OperatorType, OperatorString } from './../modules/angular-slickgrid';
+import {
+  Column,
+  ColumnFilter,
+  Filter,
+  FilterArguments,
+  FilterCallback,
+  GridOption,
+  OperatorType,
+  OperatorString,
+  SearchTerm,
+} from './../modules/angular-slickgrid';
 
 // using external non-typed js libraries
 declare var $: any;
@@ -14,6 +24,16 @@ export class CustomInputFilter implements Filter {
 
   constructor() {}
 
+  /** Getter for the Filter Operator */
+  get columnFilter(): ColumnFilter {
+    return this.columnDef && this.columnDef.filter || {};
+  }
+
+  /** Getter for the Grid Options pulled through the Grid Object */
+  get gridOptions(): GridOption {
+    return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
+  }
+
   /**
    * Initialize the Filter
    */
@@ -83,7 +103,11 @@ export class CustomInputFilter implements Filter {
    * Create the HTML template as a string
    */
   private buildTemplateHtmlString() {
-    return `<input type="text" class="form-control search-filter" placeholder="Custom Filter">`;
+    let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
+    if (this.columnFilter && this.columnFilter.placeholder) {
+      placeholder = this.columnFilter.placeholder;
+    }
+    return `<input type="text" class="form-control search-filter" placeholder="${placeholder}">`;
   }
 
   /**

src/app/examples/grid-editor.component.ts

@@ -15,6 +15,7 @@ import {
   OperatorType,
 } from './../modules/angular-slickgrid';
 import { CustomInputEditor } from './custom-inputEditor';
+import { CustomInputFilter } from './custom-inputFilter';
 import { Subject } from 'rxjs';
 
 // using external non-typed js libraries
@@ -158,6 +159,10 @@ export class GridEditorComponent implements OnInit {
           model: CustomInputEditor,
           validator: myCustomTitleValidator, // use a custom validator
         },
+        filter: {
+          model: CustomInputFilter,
+          placeholder: '🔍 custom',
+        },
       }, {
         id: 'duration',
         name: 'Duration (days)',

src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts

@@ -1,6 +1,17 @@
 import { TranslateService } from '@ngx-translate/core';
 import { mapFlatpickrDateFormatWithFieldType } from '../services/utilities';
-import { Column, Filter, FilterArguments, FilterCallback, FieldType, GridOption, OperatorString, OperatorType, SearchTerm } from './../models/index';
+import {
+  Column,
+  ColumnFilter,
+  Filter,
+  FilterArguments,
+  FilterCallback,
+  FieldType,
+  GridOption,
+  OperatorString,
+  OperatorType,
+  SearchTerm,
+} from './../models/index';
 import Flatpickr from 'flatpickr';
 
 // use Flatpickr from import or 'require', whichever works first
@@ -30,6 +41,11 @@ export class CompoundDateFilter implements Filter {
     return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
   }
 
+  /** Getter for the Filter Operator */
+  get columnFilter(): ColumnFilter {
+    return this.columnDef && this.columnDef.filter || {};
+  }
+
   set operator(op: OperatorType | OperatorString) {
     this._operator = op;
   }
@@ -133,7 +149,10 @@ export class CompoundDateFilter implements Filter {
       pickerOptions.enableTime = true;
     }
 
-    const placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
+    let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
+    if (this.columnFilter && this.columnFilter.placeholder) {
+      placeholder = this.columnFilter.placeholder;
+    }
     const $filterInputElm: any = $(`<div class="flatpickr"><input type="text" class="form-control" data-input placeholder="${placeholder}"></div>`);
     this.flatInstance = ($filterInputElm[0] && typeof $filterInputElm[0].flatpickr === 'function') ? $filterInputElm[0].flatpickr(pickerOptions) : Flatpickr($filterInputElm, pickerOptions);
     return $filterInputElm;

src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts

@@ -1,6 +1,16 @@
 import { TranslateService } from '@ngx-translate/core';
 import { FieldType } from './../models/index';
-import { Column, Filter, FilterArguments, FilterCallback, GridOption, OperatorString, OperatorType, SearchTerm } from './../models/index';
+import {
+  Column,
+  ColumnFilter,
+  Filter,
+  FilterArguments,
+  FilterCallback,
+  GridOption,
+  OperatorString,
+  OperatorType,
+  SearchTerm,
+} from './../models/index';
 
 // using external non-typed js libraries
 declare var $: any;
@@ -24,6 +34,11 @@ export class CompoundInputFilter implements Filter {
     return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
   }
 
+  /** Getter for the Filter Operator */
+  get columnFilter(): ColumnFilter {
+    return this.columnDef && this.columnDef.filter || {};
+  }
+
   /** Getter of input type (text, number, password) */
   get inputType() {
     return this._inputType;
@@ -108,7 +123,10 @@ export class CompoundInputFilter implements Filter {
   // ------------------
 
   private buildInputHtmlString() {
-    const placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
+    let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
+    if (this.columnFilter && this.columnFilter.placeholder) {
+      placeholder = this.columnFilter.placeholder;
+    }
     return `<input class="form-control" type="${this._inputType || 'text'}" placeholder="${placeholder}" />`;
   }
 

src/app/modules/angular-slickgrid/filters/inputFilter.ts

@@ -1,12 +1,13 @@
 import {
   Column,
+  ColumnFilter,
   Filter,
   FilterArguments,
   FilterCallback,
   GridOption,
   OperatorType,
   OperatorString,
-  SearchTerm
+  SearchTerm,
 } from './../models/index';
 
 // using external non-typed js libraries
@@ -23,6 +24,11 @@ export class InputFilter implements Filter {
 
   constructor() {}
 
+  /** Getter for the Filter Operator */
+  get columnFilter(): ColumnFilter {
+    return this.columnDef && this.columnDef.filter || {};
+  }
+
   /** Getter of input type (text, number, password) */
   get inputType() {
     return this._inputType;
@@ -115,7 +121,10 @@ export class InputFilter implements Filter {
    */
   private buildTemplateHtmlString() {
     const fieldId = this.columnDef && this.columnDef.id;
-    const placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
+    let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
+    if (this.columnFilter && this.columnFilter.placeholder) {
+      placeholder = this.columnFilter.placeholder;
+    }
     return `<input type="${this._inputType || 'text'}" class="form-control search-filter filter-${fieldId}" placeholder="${placeholder}">`;
   }
 

src/app/modules/angular-slickgrid/models/columnFilter.interface.ts

@@ -80,6 +80,12 @@ export interface ColumnFilter {
    */
   params?: any;
 
+  /**
+   * Placeholder text that can be used by some Filters.
+   * Note that this will override the default placeholder configured in the global config
+   */
+  placeholder?: string;
+
   /** Step value of the filter, works only with Filters supporting it (input text, number, float, range, slider) */
   valueStep?: number | string;
 }