@bigbinary/neeto-filters-frontend 3.0.7 → 3.0.9
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.
- package/README.md +234 -286
- package/dist/index.cjs.js +10 -45
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +11 -47
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/types.d.ts +12 -0
package/README.md
CHANGED
|
@@ -1,233 +1,242 @@
|
|
|
1
1
|
# neeto-filters-nano
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
The `neeto-filters-nano` manages filters across neeto products. The nano exports the `@bigbinary/neeto-filters-frontend` NPM package and `neeto-filters-engine` Rails engine for development.
|
|
3
|
+
|
|
4
|
+
# Contents
|
|
5
|
+
1. [Development with Host Application](#development-with-host-application)
|
|
6
|
+
- [Engine](#engine)
|
|
7
|
+
- [Installation](#installation)
|
|
8
|
+
- [Usage](#usage)
|
|
9
|
+
- [Frontend package](#frontend-package)
|
|
10
|
+
- [Installation](#installation-1)
|
|
11
|
+
- [Components](#components)
|
|
12
|
+
2. [Instructions for Publishing](#instructions-for-publishing)
|
|
13
|
+
|
|
14
|
+
# Development with Host Application
|
|
15
|
+
## Engine
|
|
16
|
+
The engine is used to manage filters across neeto products.
|
|
9
17
|
|
|
10
18
|
### Installation
|
|
19
|
+
1. Add this line to your application's Gemfile:
|
|
20
|
+
```ruby
|
|
21
|
+
source "NEETO_GEM_SERVER_URL" do
|
|
22
|
+
# ..existing gems
|
|
11
23
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
24
|
+
gem 'neeto-filters-engine'
|
|
25
|
+
end
|
|
26
|
+
```
|
|
27
|
+
2. And then execute:
|
|
28
|
+
```zsh
|
|
29
|
+
bundle install
|
|
30
|
+
```
|
|
31
|
+
3. Add this line to your application's `config/routes.rb` file:
|
|
32
|
+
```ruby
|
|
33
|
+
mount NeetoFiltersEngine::Engine, at: "/neeto_filters"
|
|
34
|
+
```
|
|
35
|
+
4. Execute the following command to generate the migration to generate the `neeto_filters_engine_segments` table.
|
|
36
|
+
```zsh
|
|
37
|
+
bundle exec rails neeto_filters_engine:install:migrations
|
|
19
38
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
39
|
+
bundle exec rails db:migrate
|
|
40
|
+
```
|
|
41
|
+
5. Add the following line to `models/organization.rb` file.
|
|
42
|
+
```ruby
|
|
43
|
+
has_many :segments, class_name: "NeetoFiltersEngine::Segment", dependent: :destroy
|
|
44
|
+
```
|
|
23
45
|
|
|
24
46
|
### Usage
|
|
47
|
+
You can learn more about setup and usage here:
|
|
48
|
+
1. [Models](/docs/engine/models.md)
|
|
49
|
+
2. [Verify Installation](/docs/engine/verify_installation.md)
|
|
25
50
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
2.
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
51
|
+
## Frontend package
|
|
52
|
+
### Installation
|
|
53
|
+
1. Install the latest `neeto-filters-frontend` package using the below command:
|
|
54
|
+
```zsh
|
|
55
|
+
yarn add @bigbinary/neeto-filters-frontend
|
|
56
|
+
```
|
|
57
|
+
2. `neeto-filters-frontend` has a few peer dependencies that are required for the proper functioning of the package. Install all the peer dependencies using the below command:
|
|
58
|
+
```zsh
|
|
59
|
+
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
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Components
|
|
63
|
+
#### 1. `Filters` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/Filters.jsx))
|
|
64
|
+
|
|
65
|
+
**Props**
|
|
66
|
+
- `isOpen`: To specify whether the Pane component is open or not.
|
|
67
|
+
- `setIsOpen`: To trigger the isOpen state.
|
|
68
|
+
- `columns`: The list of columns/fields that needs to be represented in the filters pane.
|
|
69
|
+
- `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.
|
|
70
|
+
- `onSelectorsChange`: To specify the callback function that is triggered
|
|
41
71
|
whenever a selector value is changed. This function will get the updated
|
|
42
72
|
selectors as argument.
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
73
|
+
- `buttonProps`: To specify the props to be passed to the button component.
|
|
74
|
+
- `paneProps`: To specify the props to be passed to the pane component.
|
|
75
|
+
- `isSearchable`: To specify whether you need a search bar in filters pane to search through filter fields.
|
|
76
|
+
- `className`: To specify classes to the Filters component.
|
|
77
|
+
- `keyword`: To specify the props related to searching.
|
|
78
|
+
- `childrenKeys`: The list of keys which has to be cleared from url during clear filters operation.
|
|
79
|
+
- `children`: To specify the custom components specific to the host application.
|
|
80
|
+
- `size`: To specify the width of the filters pane. It accepts "xsmall" (default), "small", and "large" as value.
|
|
81
|
+
|
|
82
|
+
**Configuration**
|
|
83
|
+
- Refer to the [Filters](/docs/frontend/filters.md) section for detailed information on the available configurations for the `Filters` component.
|
|
84
|
+
|
|
85
|
+
**Usage**
|
|
86
|
+
```jsx
|
|
87
|
+
import React, { useMemo, useState } from "react";
|
|
88
|
+
|
|
89
|
+
import { Bar, Container, SubHeader } from "neetomolecules";
|
|
90
|
+
import { Filters } from "neetoFilters";
|
|
91
|
+
|
|
92
|
+
const App = () => {
|
|
93
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
94
|
+
const [showMenuBar, setShowMenuBar] = useState(false);
|
|
95
|
+
|
|
96
|
+
const { t } = useTranslation();
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<Container>
|
|
100
|
+
<SubHeader
|
|
101
|
+
rightActionBlock={
|
|
102
|
+
<Filters
|
|
103
|
+
{...{ isOpen, setIsOpen }}
|
|
104
|
+
isSearchable
|
|
105
|
+
columns={FILTER_COLUMNS}
|
|
106
|
+
keyword={SEARCH_TERM_PROPS}
|
|
107
|
+
/>
|
|
108
|
+
}
|
|
109
|
+
/>
|
|
110
|
+
</Container>
|
|
111
|
+
);
|
|
63
112
|
};
|
|
113
|
+
|
|
114
|
+
export default App;
|
|
64
115
|
```
|
|
65
116
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
> :memo: **Note:** If you wish to conduct a search for the keyword among
|
|
69
|
-
> multiple columns spanning different tables in the DB, then you should pass the
|
|
70
|
-
> name of the models corresponding to the tables as value of `models` prop.
|
|
71
|
-
>
|
|
72
|
-
> Example:
|
|
73
|
-
>
|
|
74
|
-
> If you are querying the user records and searching the keyword among users'
|
|
75
|
-
> name and users' organization name, then node will be like:
|
|
76
|
-
>
|
|
77
|
-
> `node = "first_name,last_name,organization.name"`
|
|
78
|
-
>
|
|
79
|
-
> And the model should be:
|
|
80
|
-
>
|
|
81
|
-
> `model = "User,Organization"`
|
|
82
|
-
|
|
83
|
-
Here is an example for the `columns` prop:
|
|
117
|
+
#### 2. `Bar` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/Bar/index.jsx))
|
|
84
118
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
{
|
|
96
|
-
key: "email",
|
|
97
|
-
node: "email",
|
|
98
|
-
label: "Email",
|
|
99
|
-
type: "multi_option",
|
|
100
|
-
values: [map(toLabelAndValue,["oliver@example.com", "eve@example.com"])],
|
|
101
|
-
},
|
|
102
|
-
{
|
|
103
|
-
key: "createdAt",
|
|
104
|
-
node: "created_at",
|
|
105
|
-
label: "Created at",
|
|
106
|
-
type: "date",
|
|
107
|
-
},
|
|
108
|
-
];
|
|
109
|
-
```
|
|
119
|
+
**Props**
|
|
120
|
+
- `columns`: The list of columns/fields that needs to be represented in the filters pane.
|
|
121
|
+
- `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.
|
|
122
|
+
- `setIsPaneOpen`: To trigger the isOpen state.
|
|
123
|
+
- `className`: To specify classes to the Bar component.
|
|
124
|
+
- `keyword`: To specify the props related to searching.
|
|
125
|
+
- `onSelectorsChange`: To specify the callback function that is triggered whenever a selector value is changed. This function will get the updated selectors as argument.
|
|
126
|
+
- `childrenKeys`: The list of keys which has to be cleared from url during clear filters operation.
|
|
127
|
+
- `entity`: The entity associated with the filters.
|
|
128
|
+
- `defaultSegmentName`: The name of segment which results all entities without applying any filter. Default name is "All results".
|
|
110
129
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
- `label` The label to be shown just above the field in Pane.
|
|
115
|
-
- `suffixComponent` The component to be shown at the end of the respective Block
|
|
116
|
-
in filters Bar.
|
|
117
|
-
- `preprocessor` The function to be used to preprocess the value before applying
|
|
118
|
-
the filter.
|
|
119
|
-
- `type`: The nature/type of the field needed in pane.
|
|
120
|
-
- The supported types are `text`, `number`, `decimal`, `date`, `single_date`,
|
|
121
|
-
`time`, `single_time`, `single_option`, `multi_option` and `boolean`
|
|
122
|
-
- `model`: If the node provided is **not** directly refering to the column
|
|
123
|
-
within the table being queried for the filtered results, then we need to
|
|
124
|
-
provide the **model** corresponding to the target table. - For example: We are
|
|
125
|
-
adding a filter field for querying on `users` table to list all users with
|
|
126
|
-
address containing the a certain word. Say the addresses are stored in
|
|
127
|
-
**another table `addresses`**. Then the node will be `address.line_1,line_2`.
|
|
128
|
-
In such cases we need to pass this extra prop like `model: "Address"`.
|
|
129
|
-
- Then whole object for the field might look like this
|
|
130
|
-
```js
|
|
131
|
-
{
|
|
132
|
-
key: "address",
|
|
133
|
-
label: "Address",
|
|
134
|
-
node: "address.line_1,line_2",
|
|
135
|
-
model: "Address",
|
|
136
|
-
type: "text"
|
|
137
|
-
}
|
|
138
|
-
```
|
|
139
|
-
- `values`: The list of label-value pair to be shown in dropdown, if the `type`
|
|
140
|
-
provided is `single_option` or `multi_option`.
|
|
141
|
-
- `showRuleSelector` : Boolean value, which determines whether to show a rule
|
|
142
|
-
selector above the `text` , `number` and `decimal` type fields. `false` by
|
|
143
|
-
default.
|
|
144
|
-
- `hidden`: Boolean value, which determines to show or hide field from filter
|
|
145
|
-
pane. `false ` by default.
|
|
146
|
-
- `defaultValue`: The default value that should appear as chosen one in the
|
|
147
|
-
filter fields.
|
|
148
|
-
- `defaultType`: The type of the input that should be used in the Filters pane.
|
|
149
|
-
- `isClearable`: Boolean value which specifies whether the field can be cleared
|
|
150
|
-
or not.
|
|
130
|
+
All these props must be same as that passed to the `Filters` component. The
|
|
131
|
+
option to save filters as segments will be enabled only when the entity prop is
|
|
132
|
+
passed to the component.
|
|
151
133
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
134
|
+
**Usage**
|
|
135
|
+
```jsx
|
|
136
|
+
import React, { useMemo, useState } from "react";
|
|
137
|
+
|
|
138
|
+
import Bar from "neetomolecules/SubHeader";
|
|
139
|
+
import Container from "neetomolecules/Container";
|
|
140
|
+
|
|
141
|
+
import { Segments, buildFilterColumns } from "neetoFilters";
|
|
142
|
+
import useUsers from "hooks/useUsers";
|
|
143
|
+
|
|
144
|
+
const App = () => {
|
|
145
|
+
const { usersData } = useUsers();
|
|
146
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
147
|
+
const [fields, setFields] = useState([]);
|
|
148
|
+
|
|
149
|
+
const { t } = useTranslation();
|
|
150
|
+
const filterColumns = useMemo(
|
|
151
|
+
() =>
|
|
152
|
+
buildFilterColumns({
|
|
153
|
+
names: usersData.names,
|
|
154
|
+
emails: usersData.emails,
|
|
155
|
+
fields,
|
|
156
|
+
}),
|
|
157
|
+
[usersData.users, fields]
|
|
158
|
+
);
|
|
159
|
+
|
|
160
|
+
return (
|
|
161
|
+
<Container>
|
|
162
|
+
<SubHeader
|
|
163
|
+
leftActionBlock={
|
|
164
|
+
<Bar
|
|
165
|
+
columns={filterColumns}
|
|
166
|
+
entity="User"
|
|
167
|
+
setIsPaneOpen={setIsOpen}
|
|
168
|
+
/>
|
|
169
|
+
}
|
|
170
|
+
/>
|
|
171
|
+
</Container>
|
|
172
|
+
);
|
|
173
|
+
};
|
|
160
174
|
|
|
161
|
-
|
|
162
|
-
{
|
|
163
|
-
key: "groupBy",
|
|
164
|
-
label: "Group by",
|
|
165
|
-
type: "single_option",
|
|
166
|
-
values: [
|
|
167
|
-
{
|
|
168
|
-
label: "Team",
|
|
169
|
-
value: "team"
|
|
170
|
-
},
|
|
171
|
-
{
|
|
172
|
-
label: "Location",
|
|
173
|
-
value: "location"
|
|
174
|
-
}
|
|
175
|
-
],
|
|
176
|
-
}
|
|
175
|
+
export default App;
|
|
177
176
|
```
|
|
178
177
|
|
|
179
|
-
When user selects a value from this dropdown we get that value in the
|
|
180
|
-
`selectors` state. This can be used for further computations outside the
|
|
181
|
-
neeto-filters.
|
|
182
178
|
|
|
183
|
-
####
|
|
179
|
+
#### 3. `Segments` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/Segments/index.jsx))
|
|
184
180
|
|
|
185
|
-
|
|
181
|
+
**Props**
|
|
186
182
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
argument.
|
|
192
|
-
3. **setIsPaneOpen**: To trigger the isOpen state.
|
|
193
|
-
4. **className**: To specify classes to the Bar component.
|
|
194
|
-
5. **keyword**: To specify the props related to searching.
|
|
195
|
-
6. **onSelectorsChange**: To specify the callback function that is triggered
|
|
196
|
-
whenever a selector value is changed. This function will get the updated
|
|
197
|
-
selectors as argument.
|
|
198
|
-
7. **childrenKeys** The list of keys which has to be cleared from url during
|
|
199
|
-
clear filters operation.
|
|
200
|
-
8. **entity**: The entity associated with the filters.
|
|
201
|
-
9. **defaultSegmentName**: The name of segment which results all entities
|
|
202
|
-
without applying any filter. Default name is "All results".
|
|
183
|
+
- `columns`: The list of columns/fields that needs to be represented in the filters pane.
|
|
184
|
+
- `entity`: The entity associated with the segments.
|
|
185
|
+
- `setIsPaneOpen`: To trigger the isOpen state of the filters pane.
|
|
186
|
+
- `defaultSegmentName`: The name of segment which results all entities without applying any filter. Default name is "All results".
|
|
203
187
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
188
|
+
The "columns" prop must be same as that passed to the `Filters` component.
|
|
189
|
+
|
|
190
|
+
**Usage**
|
|
191
|
+
```jsx
|
|
192
|
+
import React, { useMemo, useState } from "react";
|
|
207
193
|
|
|
208
|
-
|
|
194
|
+
import MenuBar from "neetomolecules/MenuBar";
|
|
195
|
+
import SubHeader from "neetomolecules/SubHeader";
|
|
209
196
|
|
|
210
|
-
|
|
197
|
+
import { Segments, buildFilterColumns } from "neetoFilters";
|
|
198
|
+
import useUsers from "hooks/useUsers";
|
|
211
199
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
without applying any filter. Default name is "All results".
|
|
200
|
+
const App = () => {
|
|
201
|
+
const { usersData } = useUsers();
|
|
202
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
203
|
+
const [showMenuBar, setShowMenuBar] = useState(false);
|
|
204
|
+
const [fields, setFields] = useState([]);
|
|
218
205
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
206
|
+
const filterColumns = useMemo(
|
|
207
|
+
() =>
|
|
208
|
+
buildFilterColumns({
|
|
209
|
+
names: usersData.names,
|
|
210
|
+
emails: usersData.emails,
|
|
211
|
+
fields,
|
|
212
|
+
}),
|
|
213
|
+
[usersData.users, fields]
|
|
214
|
+
);
|
|
223
215
|
|
|
224
|
-
|
|
216
|
+
return (
|
|
217
|
+
<MenuBar showMenu={showMenuBar}>
|
|
218
|
+
<Segments
|
|
219
|
+
columns={filterColumns}
|
|
220
|
+
entity="User"
|
|
221
|
+
setIsFilterPaneOpen={setIsOpen}
|
|
222
|
+
/>
|
|
223
|
+
</MenuBar>
|
|
224
|
+
|
|
225
|
+
);
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
export default App;
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
### Funtions
|
|
232
|
+
#### 1. `buildFiltersFromURL` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/utils.js#L403-#L406))
|
|
225
233
|
|
|
226
234
|
- This function takes a list as argument.
|
|
227
235
|
- This list should contains all the filter columns/fields and the value passed
|
|
228
236
|
to `keyword` prop of `Filters` and `Bar`.
|
|
229
237
|
- It builds the filter payload from the URL search params. This function should
|
|
230
238
|
be called for initializing the `filters` state.
|
|
239
|
+
- Usage in [neetoTrail](https://github.com/bigbinary/neeto-trail-web/blob/91b58802bbb5f9520d2d2f9a621b6a31358d49aa/app/javascript/src/hooks/common/useFilter.js#L22).
|
|
231
240
|
|
|
232
241
|
```js
|
|
233
242
|
const [filters, setFilters] = useState(() =>
|
|
@@ -235,7 +244,7 @@ const [filters, setFilters] = useState(() =>
|
|
|
235
244
|
);
|
|
236
245
|
```
|
|
237
246
|
|
|
238
|
-
####
|
|
247
|
+
#### 2. `buildSelectorsFromURL` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/utils.js#L408-L423))
|
|
239
248
|
|
|
240
249
|
- By `selectors` we mean the filter fields which doesn't have any relation
|
|
241
250
|
(`node`) to a DB table column.
|
|
@@ -251,6 +260,7 @@ const [filters, setFilters] = useState(() =>
|
|
|
251
260
|
should be called for initializing the `selectors` state.
|
|
252
261
|
- `selectors` will be an object with keys same as provided in filter fields and
|
|
253
262
|
selected value as its value.
|
|
263
|
+
- Usage in [neetoMonitor](https://github.com/bigbinary/neeto-monitor-web/blob/f892ccdb9c72db8ae4b9bba5fee135c45968a750/app/javascript/src/hooks/common/useFilter.js#L27-L29).
|
|
254
264
|
|
|
255
265
|
```js
|
|
256
266
|
const [selectors, setSelectors] = useState(() =>
|
|
@@ -258,7 +268,7 @@ const [selectors, setSelectors] = useState(() =>
|
|
|
258
268
|
);
|
|
259
269
|
```
|
|
260
270
|
|
|
261
|
-
####
|
|
271
|
+
#### 3. `buildFilterColumnsFromFields` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/utils.js#L550-#L579))
|
|
262
272
|
|
|
263
273
|
The `buildFilterColumnsFromFields` function is used to generate an array of
|
|
264
274
|
filter columns based on the provided fields (often referred as custom fields)
|
|
@@ -273,6 +283,7 @@ and selected field names.
|
|
|
273
283
|
to show the rule selector for each filter or not. It is `false` by default.
|
|
274
284
|
- `groupName` (string, optional): A name to be given to the group of filters
|
|
275
285
|
built from fields.
|
|
286
|
+
- Usage in [neetoTestify](https://github.com/bigbinary/neeto-testify-web/blob/1de65b93c9455a88511c5c261b474bd23d9af8e2/app/javascript/src/utils/index.js#L131).
|
|
276
287
|
|
|
277
288
|
```js
|
|
278
289
|
const fields = [
|
|
@@ -292,83 +303,26 @@ const fields = [
|
|
|
292
303
|
const selectedFields = ["name", "age"];
|
|
293
304
|
|
|
294
305
|
const filterColumns = buildFilterColumnsFromFields({ fields, selectedFields });
|
|
295
|
-
```
|
|
296
|
-
|
|
297
|
-
## neeto-filters-engine
|
|
298
306
|
|
|
299
|
-
neeto_filters is a Ruby gem that manages filters across neeto products. It
|
|
300
|
-
allows the users to filter entities with respect to its columns, associated
|
|
301
|
-
columns, or custom attributes. It is best used along with the
|
|
302
|
-
[neeto-filters-frontend](https://github.com/bigbinary/neeto-filters-frontend)
|
|
303
|
-
npm package.
|
|
304
|
-
|
|
305
|
-
### Installation
|
|
306
|
-
|
|
307
|
-
1. Add the following line to your application's Gemfile:
|
|
308
|
-
|
|
309
|
-
```zsh
|
|
310
|
-
gem "neeto-filters-engine", git: "https://github.com/bigbinary/neeto-filters-engine", branch: "stable"
|
|
311
307
|
```
|
|
312
308
|
|
|
313
|
-
|
|
309
|
+
#### 4. `useFetchSegments`([source code](https://github.com/bigbinary/neeto-filters-nano/blob/b6421775adb20ba859609e71610fad944492147e/app/javascript/src/hooks/reactQuery/useSegmentsApi.js#L10-L18))
|
|
314
310
|
|
|
315
|
-
|
|
316
|
-
bundle install
|
|
317
|
-
```
|
|
318
|
-
|
|
319
|
-
3. Add the following line to `config/routes.rb` file to mount the engine at
|
|
320
|
-
`/neeto_filters` route.
|
|
321
|
-
|
|
322
|
-
```ruby
|
|
323
|
-
mount NeetoFiltersEngine::Engine, at: "/neeto_filters"
|
|
324
|
-
```
|
|
325
|
-
|
|
326
|
-
4. Add the following line to `models/organization.rb` file.
|
|
327
|
-
|
|
328
|
-
```ruby
|
|
329
|
-
has_many :segments, class_name: "NeetoFiltersEngine::Segment", dependent: :destroy
|
|
330
|
-
```
|
|
331
|
-
|
|
332
|
-
5. Execute the following command to generate the migration to generate the
|
|
333
|
-
`neeto_filters_engine_segments` table. This table stores all the saved
|
|
334
|
-
segments.
|
|
335
|
-
|
|
336
|
-
```zsh
|
|
337
|
-
rails g neeto_filters_engine:install
|
|
338
|
-
```
|
|
311
|
+
The `useFetchSegments` hook is used to fetch the array of segments based on the provided `entity`.
|
|
339
312
|
|
|
340
|
-
####
|
|
341
|
-
|
|
342
|
-
- Assume that there is a `users` table with the `User` model associated with it.
|
|
343
|
-
It a `email` column of type `string` or `text`.
|
|
344
|
-
- Open Rails console and add the following lines:
|
|
313
|
+
#### Parameters
|
|
345
314
|
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
{
|
|
349
|
-
"conditions": [
|
|
350
|
-
{
|
|
351
|
-
"node": "email",
|
|
352
|
-
"label": "Email Address",
|
|
353
|
-
"type": "text",
|
|
354
|
-
"rule": "contains",
|
|
355
|
-
"value": "example",
|
|
356
|
-
"conditions_join_type": "AND"
|
|
357
|
-
},
|
|
358
|
-
],
|
|
359
|
-
"group_join_type": "OR"
|
|
360
|
-
},
|
|
361
|
-
]
|
|
315
|
+
- `entity`: The entity associated with the segments to be fetched.
|
|
316
|
+
- `searchTerm`: The search term for fetching the segments filtered by names containing the search term.
|
|
362
317
|
|
|
363
|
-
|
|
318
|
+
```js
|
|
319
|
+
const { data: segments = [], isLoading } = useFetchSegments({ entity: "User" });
|
|
364
320
|
```
|
|
365
321
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
### Usage
|
|
322
|
+
## Basic Usage
|
|
369
323
|
|
|
370
|
-
Here is an example of how to use the `neeto-filters-engine` gem assuming that
|
|
371
|
-
|
|
324
|
+
Here is an example of how to use the `neeto-filters-engine` gem assuming that the
|
|
325
|
+
`users` table has been created.
|
|
372
326
|
|
|
373
327
|
```rb
|
|
374
328
|
class HomeController < ApplicationController
|
|
@@ -387,9 +341,7 @@ class HomeController < ApplicationController
|
|
|
387
341
|
end
|
|
388
342
|
```
|
|
389
343
|
|
|
390
|
-
Note: If you wish to use `select()` method after calling
|
|
391
|
-
`apply_neeto_filters()`, please note to use `reselect()` since neeto-filters
|
|
392
|
-
itself performs a 'select' operation internally.
|
|
344
|
+
Note: If you wish to use `select()` method after calling `apply_neeto_filters()`, please note to use `reselect()` since neeto-filters itself performs a 'select' operation internally.
|
|
393
345
|
|
|
394
346
|
Here, the param `filters` is a hash with the following structure, where each
|
|
395
347
|
`node` corresponds to a column in the `users` table.
|
|
@@ -437,9 +389,9 @@ The gem filters the users based on the conditions in the `filters` param. In
|
|
|
437
389
|
this case, all the users whose email address contains `bigbinary` in the
|
|
438
390
|
`Asia/Kolkata` timezone or whose age is greater than 18 will be filtered.
|
|
439
391
|
|
|
440
|
-
|
|
392
|
+
## How It Works
|
|
441
393
|
|
|
442
|
-
|
|
394
|
+
### Base Types
|
|
443
395
|
|
|
444
396
|
- Base Types refers to the columns that are directly present in the table on
|
|
445
397
|
which the `apply_neeto_filters` method is called.
|
|
@@ -447,34 +399,34 @@ this case, all the users whose email address contains `bigbinary` in the
|
|
|
447
399
|
|
|
448
400
|
https://vimeo.com/724478910/e349e361bd
|
|
449
401
|
|
|
450
|
-
|
|
402
|
+
### Custom Types
|
|
451
403
|
|
|
452
404
|
- Some projects will have custom attributes to the tables that will be added or
|
|
453
|
-
updated dynamically. `NeetoFiltersEngine` can handle these attributes by
|
|
454
|
-
|
|
405
|
+
updated dynamically. `NeetoFiltersEngine` can handle these attributes by passing the
|
|
406
|
+
proper filters to the `apply_neeto_filters` method.
|
|
455
407
|
- The implementation of custom attributes is different for different projects.
|
|
456
408
|
`NeetoFiltersEngine` is built in the same way as `neetoCRM`. If the custom
|
|
457
409
|
attributes feature needs to be added to a project where the custom attributes
|
|
458
410
|
implementation is different, you need to override the
|
|
459
|
-
`NeetoFiltersEngine::Custom::BaseSearchService` class specifiying the proper
|
|
460
|
-
|
|
411
|
+
`NeetoFiltersEngine::Custom::BaseSearchService` class specifiying the proper join
|
|
412
|
+
operations.
|
|
461
413
|
- Refer to the below video for an overview of the same.
|
|
462
414
|
|
|
463
415
|
https://vimeo.com/724489868/94dfc6cd43
|
|
464
416
|
|
|
465
|
-
|
|
417
|
+
### Associated Types
|
|
466
418
|
|
|
467
419
|
- Associated types refer to the the columns that are not directly present in the
|
|
468
420
|
table on which the `apply_neeto_filters` method is applied. Instead these will
|
|
469
421
|
be present in another table to which the first table has a foreign key to. For
|
|
470
422
|
instance, the `deals` table can have an association with the `companies` table
|
|
471
|
-
and the company name can be displayed in the UI. `NeetoFiltersEngine` can be
|
|
472
|
-
|
|
423
|
+
and the company name can be displayed in the UI. `NeetoFiltersEngine` can be used to
|
|
424
|
+
filter these columns by properly specifying the filters.
|
|
473
425
|
- Refer to te below video for an overview of the same.
|
|
474
426
|
|
|
475
427
|
https://vimeo.com/724484259/f305257f37
|
|
476
428
|
|
|
477
|
-
|
|
429
|
+
### Adding a new type
|
|
478
430
|
|
|
479
431
|
- `NeetoFiltersEngine` provides the following types: `text`, `number`,
|
|
480
432
|
`single_option`, `multi_option`, `date`, `time`, `datetime`, `date_range`, and
|
|
@@ -489,17 +441,13 @@ this case, all the users whose email address contains `bigbinary` in the
|
|
|
489
441
|
|
|
490
442
|
https://vimeo.com/724499299/09e2231780
|
|
491
443
|
|
|
492
|
-
|
|
444
|
+
### Working with Dates
|
|
493
445
|
|
|
494
446
|
- Working with dates is tricky due to the involvement of timezones.
|
|
495
447
|
- Refer to the below video for a quick overview of the same.
|
|
496
448
|
|
|
497
449
|
https://vimeo.com/724495909/034668f738
|
|
498
450
|
|
|
499
|
-
## Integrations
|
|
500
451
|
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
| neeto-chat-web | /admin/contacts |
|
|
504
|
-
| neeto-crm-web | /deals, /contacts, /companies, /tasks, /mails |
|
|
505
|
-
| neeto-cal-web | /meetings, /scheduled-meetings |
|
|
452
|
+
# Instructions for Publishing
|
|
453
|
+
Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.
|