Sidebar Filter

Description

Sidebar filter is usually used on consolidated pages as it is used to filter statuses, date, and the ascending and descending orders.

System Dependencies

Installation

The package can be installed via npm:

npm install empower-sidebar-filter --save

Configuration

import SidebarFilter from 'empower-sidebar-filter';

..............
const sampleProps = {
    statusOptions: [
      {
        value:'all-templates',
        label:'All templates',
      },
      {
        value:'active',
        label:'Active',
      },
      {
        value:'deactivated',
        label:'Deactivated',
      },
    ],
    preSelectedStatus: 'active',
    dateFiltering: true,
    preSelectedDate: "2022-04-03",
    categoryOptions:[
      {
        label: "Category 1",
        value: "categ-1",       // string optional
    
      },
      {
        label: "Category 2",
        value: "categ-2",       // string optional
    
      },
      {
        label: "Category 3",
        value: "categ-3",       // string optional
    
      },
      {
        label: "Category 4",
        value: "categ-4",    // string optional
      },
    ],
    preSelectedCategory: 'categ-2',
    preSelectedSort:'asc',
  };

const getValue = (val) => {
  // insert any logical functions here
}
..............      
      

<div className="v2-side">
    <SidebarFilter
        {...sampleProps}
        getValue={val => getValue(val)}
    />
</div>

Properties

Parameter	Data Type	Constraint	Description

Parameter	Data Type	Constraint	Description
statusOptions	Array	Required	This is the value label for options consist of label value
preSelectedStatus	String	Optional	This is the preselected status, can be empty or unset, value string should be based on the statusOptions provided.
dateFiltering	Boolean	Optional	This just a toggle if the date filtering shows or not.
preSelectedDate	String	Optional	Date string if you wish to have pre selected date, format should be "2022-04-21"
categoryOptions	Array	Required	This is the category select, value label array same with the statusOptions, can be unset.
preSelectedCategory	String	Optional	If you wish to have a preselected category, you can add this property, take note that it should match the value from categoryOptions props.
preSelectedSort	String	Optional	This is a preselected sort, value can be "asc" or "desc".

References

Repository Link: https://bitbucket.org/empowerteams/empower-sidebar-filter/src/master/

NPM Package: https://www.npmjs.com/package/empower-sidebar-filter

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git

Front End