@bigbinary/neeto-filters-frontend 3.0.4 → 3.0.5
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 +216 -43
- package/dist/index.cjs.js +218 -1857
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +152 -1786
- package/dist/index.js.map +1 -1
- package/package.json +131 -95
- /package/{src → app/javascript/src}/translations/en.json +0 -0
- /package/{src → app/javascript/src}/translations/index.js +0 -0
package/README.md
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
#
|
|
1
|
+
# neeto-filters-nano
|
|
2
|
+
|
|
3
|
+
1. [Engine and package installation](./docs/engine-and-package-installation.md)
|
|
4
|
+
2. [Building and releasing](./docs/building-and-releasing.md)
|
|
5
|
+
|
|
6
|
+
## @bigbinary/neeto-filters-frontend
|
|
2
7
|
|
|
3
8
|
neetoFilters is the library that manages filters across neeto products.
|
|
4
9
|
|
|
5
|
-
|
|
10
|
+
### Installation
|
|
6
11
|
|
|
7
12
|
```bash
|
|
8
13
|
yarn add @bigbinary/neeto-filters-frontend
|
|
@@ -16,12 +21,12 @@ command:
|
|
|
16
21
|
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
22
|
```
|
|
18
23
|
|
|
19
|
-
|
|
24
|
+
### Usage
|
|
20
25
|
|
|
21
26
|
neeto-filters-frontend exports 2 components (`Filters` & `Bar`) and 2 functions
|
|
22
27
|
(`buildFiltersFromURL()` & `buildSelectorsFromURL()`).
|
|
23
28
|
|
|
24
|
-
|
|
29
|
+
#### 1. `Filters` component
|
|
25
30
|
|
|
26
31
|
#### Props
|
|
27
32
|
|
|
@@ -175,7 +180,7 @@ When user selects a value from this dropdown we get that value in the
|
|
|
175
180
|
`selectors` state. This can be used for further computations outside the
|
|
176
181
|
neeto-filters.
|
|
177
182
|
|
|
178
|
-
|
|
183
|
+
#### 2. `Bar` component
|
|
179
184
|
|
|
180
185
|
#### Props
|
|
181
186
|
|
|
@@ -198,7 +203,7 @@ All these props must be same as that passed to the `Filters` component. The
|
|
|
198
203
|
option to save filters as segments will be enabled only when the entity prop is
|
|
199
204
|
passed to the component.
|
|
200
205
|
|
|
201
|
-
|
|
206
|
+
#### 3. `Segments` component
|
|
202
207
|
|
|
203
208
|
#### Props
|
|
204
209
|
|
|
@@ -212,7 +217,7 @@ set up the neeto-filters-engine with support for Segments, please follow the
|
|
|
212
217
|
instructions provided in the installation
|
|
213
218
|
[documentation](https://github.com/bigbinary/neeto-filters-engine#installation).
|
|
214
219
|
|
|
215
|
-
|
|
220
|
+
#### 3. `buildFiltersFromURL` function
|
|
216
221
|
|
|
217
222
|
- This function takes a list as argument.
|
|
218
223
|
- This list should contains all the filter columns/fields and the value passed
|
|
@@ -226,7 +231,7 @@ const [filters, setFilters] = useState(() =>
|
|
|
226
231
|
);
|
|
227
232
|
```
|
|
228
233
|
|
|
229
|
-
|
|
234
|
+
#### 4. `buildSelectorsFromURL` function
|
|
230
235
|
|
|
231
236
|
- By `selectors` we mean the filter fields which doesn't have any relation
|
|
232
237
|
(`node`) to a DB table column.
|
|
@@ -249,7 +254,7 @@ const [selectors, setSelectors] = useState(() =>
|
|
|
249
254
|
);
|
|
250
255
|
```
|
|
251
256
|
|
|
252
|
-
|
|
257
|
+
#### 5. `buildFilterColumnsFromFields` function
|
|
253
258
|
|
|
254
259
|
The `buildFilterColumnsFromFields` function is used to generate an array of
|
|
255
260
|
filter columns based on the provided fields (often referred as custom fields)
|
|
@@ -285,44 +290,212 @@ const selectedFields = ["name", "age"];
|
|
|
285
290
|
const filterColumns = buildFilterColumnsFromFields({ fields, selectedFields });
|
|
286
291
|
```
|
|
287
292
|
|
|
288
|
-
##
|
|
293
|
+
## neeto-filters-engine
|
|
289
294
|
|
|
290
|
-
|
|
295
|
+
neeto_filters is a Ruby gem that manages filters across neeto products. It
|
|
296
|
+
allows the users to filter entities with respect to its columns, associated
|
|
297
|
+
columns, or custom attributes. It is best used along with the
|
|
298
|
+
[neeto-filters-frontend](https://github.com/bigbinary/neeto-filters-frontend)
|
|
299
|
+
npm package.
|
|
291
300
|
|
|
292
|
-
|
|
293
|
-
|
|
301
|
+
### Installation
|
|
302
|
+
|
|
303
|
+
1. Add the following line to your application's Gemfile:
|
|
304
|
+
|
|
305
|
+
```zsh
|
|
306
|
+
gem "neeto-filters-engine", git: "https://github.com/bigbinary/neeto-filters-engine", branch: "stable"
|
|
294
307
|
```
|
|
295
308
|
|
|
296
|
-
|
|
297
|
-
application you need to run the Rails server of the
|
|
298
|
-
[neeto-filters-engine](https://github.com/bigbinary/neeto-filters-engine)'s
|
|
299
|
-
dummy application as well. This is necessary to make sure that all the APIs and
|
|
300
|
-
React Query hooks are working as per the requirement.
|
|
309
|
+
2. Execute the following command:
|
|
301
310
|
|
|
302
|
-
```
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
311
|
+
```zsh
|
|
312
|
+
bundle install
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
3. Add the following line to `config/routes.rb` file to mount the engine at
|
|
316
|
+
`/neeto_filters` route.
|
|
317
|
+
|
|
318
|
+
```ruby
|
|
319
|
+
mount NeetoFiltersEngine::Engine, at: "/neeto_filters"
|
|
320
|
+
```
|
|
321
|
+
|
|
322
|
+
4. Add the following line to `models/organization.rb` file.
|
|
323
|
+
|
|
324
|
+
```ruby
|
|
325
|
+
has_many :segments, class_name: "NeetoFiltersEngine::Segment", dependent: :destroy
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
5. Execute the following command to generate the migration to generate the
|
|
329
|
+
`neeto_filters_engine_segments` table. This table stores all the saved
|
|
330
|
+
segments.
|
|
331
|
+
|
|
332
|
+
```zsh
|
|
333
|
+
rails g neeto_filters_engine:install
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
#### Verify that the installation is successful.
|
|
337
|
+
|
|
338
|
+
- Assume that there is a `users` table with the `User` model associated with it.
|
|
339
|
+
It a `email` column of type `string` or `text`.
|
|
340
|
+
- Open Rails console and add the following lines:
|
|
341
|
+
|
|
342
|
+
```ruby
|
|
343
|
+
filters = [
|
|
344
|
+
{
|
|
345
|
+
"conditions": [
|
|
346
|
+
{
|
|
347
|
+
"node": "email",
|
|
348
|
+
"label": "Email Address",
|
|
349
|
+
"type": "text",
|
|
350
|
+
"rule": "contains",
|
|
351
|
+
"value": "example",
|
|
352
|
+
"conditions_join_type": "AND"
|
|
353
|
+
},
|
|
354
|
+
],
|
|
355
|
+
"group_join_type": "OR"
|
|
356
|
+
},
|
|
357
|
+
]
|
|
358
|
+
|
|
359
|
+
User.all.apply_neeto_filters(filters)
|
|
306
360
|
```
|
|
307
361
|
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
`
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
362
|
+
- If the above lines returns zero or more users, the installation is successful.
|
|
363
|
+
|
|
364
|
+
### Usage
|
|
365
|
+
|
|
366
|
+
Here is an example of how to use the `neeto-filters-engine` gem assuming that
|
|
367
|
+
the `users` table has been created.
|
|
368
|
+
|
|
369
|
+
```rb
|
|
370
|
+
class HomeController < ApplicationController
|
|
371
|
+
before_action :load_users
|
|
372
|
+
|
|
373
|
+
def index
|
|
374
|
+
@filtered_users = @users.apply_neeto_filters(params[:filters])
|
|
375
|
+
@total_count = @filtered_users.count
|
|
376
|
+
end
|
|
377
|
+
|
|
378
|
+
private
|
|
379
|
+
|
|
380
|
+
def load_users
|
|
381
|
+
@users = @organization.users
|
|
382
|
+
end
|
|
383
|
+
end
|
|
384
|
+
```
|
|
385
|
+
|
|
386
|
+
Note: If you wish to use `select()` method after calling
|
|
387
|
+
`apply_neeto_filters()`, please note to use `reselect()` since neeto-filters
|
|
388
|
+
itself performs a 'select' operation internally.
|
|
389
|
+
|
|
390
|
+
Here, the param `filters` is a hash with the following structure, where each
|
|
391
|
+
`node` corresponds to a column in the `users` table.
|
|
392
|
+
|
|
393
|
+
```json
|
|
394
|
+
[
|
|
395
|
+
{
|
|
396
|
+
"conditions": [
|
|
397
|
+
{
|
|
398
|
+
"node": "email",
|
|
399
|
+
"label": "Email Address",
|
|
400
|
+
"type": "text",
|
|
401
|
+
"rule": "contains",
|
|
402
|
+
"value": "bigbinary",
|
|
403
|
+
"conditions_join_type": "AND"
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
"node": "timezone",
|
|
407
|
+
"label": "Timezone",
|
|
408
|
+
"type": "text",
|
|
409
|
+
"rule": "is",
|
|
410
|
+
"value": "Asia/Kolkata",
|
|
411
|
+
"conditions_join_type": "AND"
|
|
412
|
+
}
|
|
413
|
+
],
|
|
414
|
+
"group_join_type": "OR"
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
"conditions": [
|
|
418
|
+
{
|
|
419
|
+
"node": "age",
|
|
420
|
+
"label": "Age",
|
|
421
|
+
"type": "number",
|
|
422
|
+
"rule": "greater_than",
|
|
423
|
+
"value": "18",
|
|
424
|
+
"conditions_join_type": "AND"
|
|
425
|
+
}
|
|
426
|
+
],
|
|
427
|
+
"group_join_type": "AND"
|
|
428
|
+
}
|
|
429
|
+
]
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
The gem filters the users based on the conditions in the `filters` param. In
|
|
433
|
+
this case, all the users whose email address contains `bigbinary` in the
|
|
434
|
+
`Asia/Kolkata` timezone or whose age is greater than 18 will be filtered.
|
|
435
|
+
|
|
436
|
+
### How It Works
|
|
437
|
+
|
|
438
|
+
#### Base Types
|
|
439
|
+
|
|
440
|
+
- Base Types refers to the columns that are directly present in the table on
|
|
441
|
+
which the `apply_neeto_filters` method is called.
|
|
442
|
+
- Refer to this video for an overview of the same.
|
|
443
|
+
|
|
444
|
+
https://vimeo.com/724478910/e349e361bd
|
|
445
|
+
|
|
446
|
+
#### Custom Types
|
|
447
|
+
|
|
448
|
+
- Some projects will have custom attributes to the tables that will be added or
|
|
449
|
+
updated dynamically. `NeetoFiltersEngine` can handle these attributes by
|
|
450
|
+
passing the proper filters to the `apply_neeto_filters` method.
|
|
451
|
+
- The implementation of custom attributes is different for different projects.
|
|
452
|
+
`NeetoFiltersEngine` is built in the same way as `neetoCRM`. If the custom
|
|
453
|
+
attributes feature needs to be added to a project where the custom attributes
|
|
454
|
+
implementation is different, you need to override the
|
|
455
|
+
`NeetoFiltersEngine::Custom::BaseSearchService` class specifiying the proper
|
|
456
|
+
join operations.
|
|
457
|
+
- Refer to the below video for an overview of the same.
|
|
458
|
+
|
|
459
|
+
https://vimeo.com/724489868/94dfc6cd43
|
|
460
|
+
|
|
461
|
+
#### Associated Types
|
|
462
|
+
|
|
463
|
+
- Associated types refer to the the columns that are not directly present in the
|
|
464
|
+
table on which the `apply_neeto_filters` method is applied. Instead these will
|
|
465
|
+
be present in another table to which the first table has a foreign key to. For
|
|
466
|
+
instance, the `deals` table can have an association with the `companies` table
|
|
467
|
+
and the company name can be displayed in the UI. `NeetoFiltersEngine` can be
|
|
468
|
+
used to filter these columns by properly specifying the filters.
|
|
469
|
+
- Refer to te below video for an overview of the same.
|
|
470
|
+
|
|
471
|
+
https://vimeo.com/724484259/f305257f37
|
|
472
|
+
|
|
473
|
+
#### Adding a new type
|
|
474
|
+
|
|
475
|
+
- `NeetoFiltersEngine` provides the following types: `text`, `number`,
|
|
476
|
+
`single_option`, `multi_option`, `date`, `time`, `datetime`, `date_range`, and
|
|
477
|
+
`time_range`.
|
|
478
|
+
- Sometimes we need to filter attributes that are not present in the available
|
|
479
|
+
types. In this case a new type needs to be created.
|
|
480
|
+
- In this case, the type needs to be specified to the NPM package by passing the
|
|
481
|
+
`type` name and `filters` prop in the list of columns. The corresponding
|
|
482
|
+
search service must be created in the `app/services/neeto_filters/` folder as
|
|
483
|
+
well.
|
|
484
|
+
- Refer to te below video for an overview of the same.
|
|
485
|
+
|
|
486
|
+
https://vimeo.com/724499299/09e2231780
|
|
487
|
+
|
|
488
|
+
#### Working with Dates
|
|
489
|
+
|
|
490
|
+
- Working with dates is tricky due to the involvement of timezones.
|
|
491
|
+
- Refer to the below video for a quick overview of the same.
|
|
492
|
+
|
|
493
|
+
https://vimeo.com/724495909/034668f738
|
|
494
|
+
|
|
495
|
+
## Integrations
|
|
496
|
+
|
|
497
|
+
| Project | Routes |
|
|
498
|
+
| -------------- | --------------------------------------------- |
|
|
499
|
+
| neeto-chat-web | /admin/contacts |
|
|
500
|
+
| neeto-crm-web | /deals, /contacts, /companies, /tasks, /mails |
|
|
501
|
+
| neeto-cal-web | /meetings, /scheduled-meetings |
|