fixed-filter-dialog v0.0.3

fixed-filter-dialog

The lms-fixed-filter-dialog can be used to filter based on multiple items on multiple categories. It can come handy as user themself can view specific items on their needs. It can be used by any developer who needs to have filter feature in their application.

Table of Contents

• Installation
• Usage
• Inputs

Installation

You can install the package using following command.

$ npm install fixed-filter-dialog

Usage

app.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FixedFilterDialogModule } from 'fixed-filter-dialog'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    FixedFilterDialogModule
  ],
  providers: [],

})
export class AppModule { }

app.component.html

    <lms-fixed-filter-dialog style="position:fixed;right:0;top:0;" 
      [columnLoadUrl]="columnLoadUrl" [token]="token" [itemData]="itemData" 
      (filterResponse)="getFilterRes($event)">
    </lms-fixed-filter-dialog>

app.component.ts

  token = "eyJ0eXAiOiJKV1QiL";
  columnLoadUrl ="/urlPath";
  itemData =   {
    "_id": "99999",
    "is_variant_allowed": false,
    "variant_type": "single",
    "is_pagination_allowed": true,
    "no_of_rows_per_column": 10,
    "filter_columns": [
      {
        "filter_id": "999",
        "filter_name": "By Rating",
        "field_ref": "rating",
        "sort_order": 4,
        "api_url_path": "/url",
        "is_search_alllowed": true,
        "search_value": "",
        "is_pagination_allowed": true,
        "pagination_value": 1,
        "sort_value": "asc",
        "is_active": true,
        "total_items": 5,
        "filter_data": [
          {
            "id": 5,
            "name": "5 Star",
            "is_selected": false
          },
          {
            "id": 4,
            "name": "4 Star",
            "is_selected": false
          },
          {
            "id": 3,
            "name": "3 Star",
            "is_selected": false
          },
          {
            "id": 2,
            "name": "2 Star",
            "is_selected": false
          },
          {
            "id": 1,
            "name": "1 Star",
            "is_selected": false
          }
        ]
      }
    ],
    "name": "table_name",
    "filter_url_path": "/url/"
  };

Inputs

Output