cr-dynamic-filter
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0 • Public • Published

    CrDynamicFilter

    A angular library that provides a filter and facetting component for the cr-rest-client.

    Screenshot

    This library was generated with Angular CLI version 8.2.14.

    Installation

    Installation is done using npm install command:

    # install library 
    $ npm install --save cr-dynamic-filter
     
    # install depency 
    $ ng add @angular/material

    Features

    • create filter ui
    • save filter
    • delete filter

    Quick Start

    app.module.ts

    ...
    import { CrDynamicFilterComponent } from 'cr-dynamic-filter'
    ...
     
    @NgModule({
      declarations: [
        AppComponent,
        ...
        CrDynamicFilterComponent,
        ...
      ],
      imports: [
        ...
        // add the angular material dependencies
        MatButtonModule,
        Mat...
      ],
      providers: [],
      bootstrap: [AppComponent],
    })
    export class AppModule { }
     
     
     

    HTML

    <cr-dynamic-filter [filter]="filter" (submit)="onSubmit($event)" (reset)="onReset($event)" (save)="onSave($event)" (delete)="onDelete($event)" [filterStore]="customFilter"></cr-dynamic-filter>

    TS

      /**
       * Describes the filter. 
       * The only type that is currently supported is text.
       * More should follow in future versions.
       * e.g. Time, Date, Range, Number
       */
      public filter = [{
          'label': 'Name',
          'name': 'name',
          'type': 'text'
        }];
     
      /**
       * A store for the saved filter.
       */ 
      private customFilter = [];
     
      /**
       * This method will be triggered, if the submit button would be clicked. 
       * 
       * Example for param data:
       * {
       *   "name": {
       *     "type": "text",
       *     "value": "Stephan"
       *   }
       * }
       * 
       * @param data    contains an object with the current filter
       */
      public onSubmit (dataany) : void {
        // write some custom code here
      }
     
      /**
       * This method will be triggered, if the reset button would be clicked. 
       */
      public onReset () : void {
        // write some custom code here
      }
     
      /**
       * This method will be triggered, if the 
       * save filter configuration button would be clicked. 
       * 
       * Example for param data:
       * {
       *   "name": "Searching for Stephan",
       *   "model": {
       *     "name": {
       *       "type": "text",
       *       "value": "Stephan"
       *     }
       *   },
       *   "filter": [
       *     {
       *       "label": "Name",
       *       "name": "name",
       *       "type": "text"
       *     }
       *   ]
       * }
       * 
       * @param data    contains an object with the current filter settings
       */
      public onSave (dataany) : void {
        // write some custom code here
      }
     
      /**
       * This method will be triggered, if the 
       * Delete: Filtername button would be clicked. 
       * 
       * Example for param data:
       * {
       *   "name": "Searching for Stephan",
       *   "model": {
       *     "name": {
       *       "type": "text",
       *       "value": "Stephan"
       *     }
       *   },
       *   "filter": [
       *     {
       *       "label": "name",
       *       "name": "name",
       *       "type": "text"
       *     }
       *   ]
       * }
       */
      public onDelete (dataany) : void {
        // write some custom code here
      }
     

    License

    MIT

    Keywords

    none

    Install

    npm i cr-dynamic-filter

    DownloadsWeekly Downloads

    1

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    313 kB

    Total Files

    33

    Last publish

    Collaborators

    • avatar