@bigbinary/neeto-filters-frontend 2.6.1 → 2.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +79 -56
  2. package/package.json +1 -1
  3. package/types.d.ts +3 -1
package/README.md CHANGED
@@ -1,3 +1,4 @@
1
+
1
2
  # @bigbinary/neeto-filters-frontend
2
3
 
3
4
  neetoFilters is the library that manages filters across neeto products.
@@ -11,97 +12,119 @@ yarn add @bigbinary/neeto-filters-frontend
11
12
  **neetoFilters** has a few peer dependencies that are required for the proper
12
13
  functioning of the package. Install all the peer dependencies using the below
13
14
  command:
14
-
15
15
  ```bash
16
16
  yarn add @bigbinary/neetoui @bigbinary/neeto-icons axios@0.27.2 classnames@2.3.1 dayjs@1.11.1 formik@2.2.0 ramda@0.28.0 react-router-dom@5.3.0 react-router-nav-prompt@0.4.1 react-toastify@9.0.1 yup@0.32.11
17
17
  ```
18
-
19
18
  ## Usage
20
19
 
21
- > The documentation for dropdown-type filters UI has been moved to https://github.com/bigbinary/neeto-filters-frontend/blob/main/src/components/DropdownFilter/README.md
22
-
23
- ### 1. Filters component
20
+ neeto-filters-frontend exports 2 components (`Filters` & `Bar`) and a function, `buildFiltersFromUrl()`.
21
+ ### 1. `Filters` component
24
22
 
25
23
  #### Props
26
- 1. **isOpen**: To specify whether the Pane component is open or not.
27
- 2. **setIsOpen**: To trigger the isOpen state.
28
- 3. **columns**: The list of columns that needs to be represented in the filters pane.
29
- 4. **onChange**: To specify the function that is triggered whenever a filter is applied or cleared.
30
- 5. **buttonProps**: To specify the props to be passed to the button component.
31
- 6. **paneProps**: To specify the props to be passed to the pane component.
32
- 7. **isSearchable**: To specify whether the Select input is searchable.
33
- 8. **className**: To specify classes to the Filters component.
24
+
25
+ 1. **isOpen**: To specify whether the Pane component is open or not.
26
+ 2. **setIsOpen**: To trigger the isOpen state.
27
+ 3. **columns**: The list of columns/fields that needs to be represented in the filters pane.
28
+ 4. **onChange**: To specify the callback function that is triggered whenever a filter is applied or cleared. This function will get the updated filters as argument.
29
+ 5. **buttonProps**: To specify the props to be passed to the button component.
30
+ 6. **paneProps**: To specify the props to be passed to the pane component.
31
+ 7. **isSearchable**: To specify whether you need a search bar in filters pane to search through filter fields.
32
+ 8. **className**: To specify classes to the Filters component.
33
+ 9. **keyword**: To specify the props related to searching.
34
+
35
+ Here is an example of `keyword` prop:
36
+ ```js
37
+ const [searchTerm, setSearchTerm] = useState("");
38
+ const searchKeywordProps = {
39
+ node: "name",
40
+ value: searchTerm.trim(),
41
+ setValue: setSearchTerm,
42
+ }
43
+ ```
44
+ This `searchKeywordProps` can be passed as the value to `keyword` prop.
34
45
 
35
46
  Here is an example for the `columns` prop:
36
47
  ```js
37
- export const SAMPLE_FILTER_COLUMNS = [
38
- {
39
- key: "name",
40
- node: "first_name,last_name",
41
- label: "Name",
42
- type: "single_option",
43
- values: [{label: "Oliver Smith", value: "f6a64081-85e5-4ed9-b1a0-7b2ac3ff289b"} , {label: "Eve Smith", value: "d378abe3-0c96-4a57-86dc-bea7c77d3ba0"}],
44
- },
45
- {
46
- key: "email",
47
- node: "email",
48
- label: "Email",
49
- type: "multi_option",
50
- values: [{label: "oliver@example.com", value: "f6a64081-85e5-4ed9-b1a0-7b2ac3ff289b"} , {label: "eve@example.com", value: "d378abe3-0c96-4a57-86dc-bea7c77d3ba0"}],
51
- },
52
- {
53
- key: "created_at",
54
- node: "created_at",
55
- label: "Created At",
56
- type: "date",
57
- },
48
+ export const SAMPLE_FILTER_FIELDS = [
49
+ {
50
+ key: "name",
51
+ node: "first_name,last_name",
52
+ label: "Name",
53
+ type: "text",
54
+ },
55
+ {
56
+ key: "email",
57
+ node: "email",
58
+ label: "Email",
59
+ type: "multi_option",
60
+ values: [map(toLabelAndValue,["oliver@example.com", "eve@example.com"])],
61
+ },
62
+ {
63
+ key: "createdAt",
64
+ node: "created_at",
65
+ label: "Created at",
66
+ type: "date",
67
+ },
58
68
  ];
59
69
  ```
60
-
61
- - The supported types are `text`, `number`, `decimal`, `date`, `single_option`, `multi_option` and their custom attribute and associated attribute counterparts.
62
-
63
- ### 2. Bar component
70
+ - `key` : A unique identifier provided to each columns/field.
71
+ - `node`: The column in DB table corresponding to the field.
72
+ - `label` The label to be shown just above the field in Pane.
73
+ - `type`: The nature/type of the field needed in pane.
74
+ - The supported types are `text`, `number`, `decimal`, `date`, `single_date`, `time`, `single_time`, `single_option`, `multi_option` and `boolean`
75
+ - `model`: If the node provided is **not** directly refering to the column within the table being queried for the filtered results, then we need to provide the **model** corresponding to the target table.
76
+ - For example: We are adding a filter field for querying on `users` table to list all users with address containing the a certain word. Say the addresses are stored in **another table `addresses`**.
77
+ Then the node will be `address.line_1,line_2`. In such cases we need to pass this extra prop like `model: "Address"`.
78
+ - Then whole object for the field might look like this
79
+ ```js
80
+ {
81
+ key: "address",
82
+ label: "Address",
83
+ node: "address.line_1,line_2",
84
+ model: "Address",
85
+ type: "text"
86
+ }
87
+ ```
88
+ - `values`: The list of label-value pair to be shown in dropdown, if the `type` provided is `single_option` or `multi_option`.
89
+ - `showRuleSelector` : Boolean value, which determines whether to show a rule selector above the `text` , `number` and `decimal` type fields. `false` by default.
90
+ - `hidden`: Boolean value, which determines to show or hide field from filter pane. `false ` by default.
91
+
92
+ ### 2. `Bar` component
64
93
 
65
94
  #### Props
66
95
 
67
- 1. **columns**: The list of columns that needs to be represented in the filters pane.
68
- 2. **onChange**: To specify the function that is triggered whenever a filter is applied or cleared.
69
- 3. **setIsPaneOpen**: To trigger the isOpen state.
70
- 4. **className**: To specify classes to the Bar component.
96
+ 1. **columns**: The list of columns/fields that needs to be represented in the filters pane.
97
+ 2. **onChange**: To specify the callback function that is triggered whenever a filter is applied or cleared. This function will get the updated filters as argument.
98
+ 3. **setIsPaneOpen**: To trigger the isOpen state.
99
+ 4. **className**: To specify classes to the Bar component.
100
+ 5. **keyword**: To specify the props related to searching.
71
101
 
72
102
  All these props must be same as that passed to the `Filters` component.
73
103
 
74
- ### 3. buildFiltersFromURL function
104
+ ### 3. `buildFiltersFromURL` function
75
105
 
76
- - This function takes the list of all filter columns as argument.
106
+ - This function takes a list as argument.
107
+ - This list should contains all the filter columns/fields and the value passed to `keyword` prop of `Filters` and `Bar`.
77
108
  - It builds the filter payload from the URL search params. This function should be called for initizing the `filters` state.
78
-
79
109
  ```js
80
- const [filters, setFilters] = useState(() => buildFiltersFromURL(SAMPLE_FILTER_COLUMNS));
110
+ const [filters, setFilters] = useState(() => buildFiltersFromURL([...SAMPLE_FILTER_COLUMNS, searchKeywordProps]));
81
111
  ```
82
112
 
83
113
  ## Development
84
114
 
85
115
  Install all the dependencies by executing the following command
86
-
87
116
  ```bash
88
117
  yarn install
89
118
  ```
90
-
91
119
  Start the development server using the `yarn start` command.
92
-
93
120
  In order to run the application you need to run the Rails server of the
94
- neetoFilters engine's dummy application as well. This is necessary to make sure
95
- that all the APIs and React Query hooks are working as per the requirement.
96
-
121
+ [neeto-filters-engine](https://github.com/bigbinary/neeto-filters-engine)'s dummy application as well. This is necessary to make sure that all the APIs and React Query hooks are working as per the requirement.
97
122
  ```bash
98
123
  git clone https://github.com/bigbinary/neeto-filters-engine.git
99
124
  ./test/dummy/bin/setup
100
125
  rails server
101
126
  ```
102
127
 
103
- ## Building
128
+ ## Building & releasing
104
129
 
105
- The neetoFilters package gets auto-published to npm for every new merge to the
106
- main branch. You can checkout the `publish` workflow in git actions to get a
107
- live update.
130
+ The neeto-filters-frontend package gets auto-published to npm for every new merge to the `main` branch. You can checkout the `publish` workflow in git actions to get a live update.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigbinary/neeto-filters-frontend",
3
- "version": "2.6.1",
3
+ "version": "2.6.2",
4
4
  "description": "Manage filters across neeto products.",
5
5
  "author": "BigBinary",
6
6
  "license": "MIT",
package/types.d.ts CHANGED
@@ -7,9 +7,11 @@ interface ColumnType {
7
7
  model?: string;
8
8
  values?: (string | number)[];
9
9
  hidden?: boolean;
10
+ showRuleSelector?: boolean;
10
11
  [otherProps: string]: any;
11
12
  }
12
13
 
14
+
13
15
  interface KeywordType {
14
16
  node: string;
15
17
  value: string;
@@ -80,4 +82,4 @@ export function Bar(
80
82
  }
81
83
  ): JSX.Element;
82
84
 
83
- export function buildFiltersFromURL(columns: ColumnType[]): string;
85
+ export function buildFiltersFromURL(columns: Array<ColumnType | KeywordType>): string;