@ssplib/react-components 0.0.137 → 0.0.138

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 (2) hide show
  1. package/components/form/table/Table.js +183 -153
  2. package/package.json +1 -1
package/components/form/table/Table.js CHANGED
@@ -57,6 +57,7 @@ function Table({ columns, fetchFunc, emptyMsg = {
57
57
  const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
58
58
  const [paginationCount, setPagCount] = (0, react_1.useState)(1);
59
59
  const [listPage, setListPage] = (0, react_1.useState)(1);
60
+ const [appliedFilters, setAppliedFilters] = (0, react_1.useState)([]);
60
61
  // filters states
61
62
  const [filterCollapse, setFilterCollapse] = (0, react_1.useState)(Array(Object.keys(filters).length).fill(false));
62
63
  const [filterOpen, setFilterOpen] = (0, react_1.useState)(false);
@@ -83,7 +84,6 @@ function Table({ columns, fetchFunc, emptyMsg = {
83
84
  setData(j);
84
85
  startData = JSON.parse(JSON.stringify(j));
85
86
  }
86
- console.log(j.statusCode);
87
87
  setIsLoading(false);
88
88
  });
89
89
  })
@@ -126,8 +126,6 @@ function Table({ columns, fetchFunc, emptyMsg = {
126
126
  return;
127
127
  }
128
128
  const listData = getData(data);
129
- // setList([])
130
- // setListPage(1)
131
129
  console.log(listData);
132
130
  const newList = [];
133
131
  listData.forEach((x) => {
@@ -177,6 +175,11 @@ function Table({ columns, fetchFunc, emptyMsg = {
177
175
  exists = true;
178
176
  }
179
177
  return;
178
+ case 'FP':
179
+ if ('fora do prazo'.includes(searchValue.toLowerCase())) {
180
+ exists = true;
181
+ }
182
+ return;
180
183
  }
181
184
  }
182
185
  if (key.toLowerCase().includes(searchValue.toLowerCase())) {
@@ -337,78 +340,33 @@ function Table({ columns, fetchFunc, emptyMsg = {
337
340
  return (react_1.default.createElement(Typography_1.default, { color: '#991b1b', fontWeight: 600, fontFamily: 'Inter' }, "FORA DO PRAZO"));
338
341
  }
339
342
  }, []);
340
- const toggleDrawer = (open) => (event) => {
341
- if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
343
+ (0, react_1.useEffect)(() => {
344
+ filterBasedOnList(appliedFilters);
345
+ }, [appliedFilters]);
346
+ const filterBasedOnList = (filteredList) => {
347
+ if (filteredList.length === 0)
342
348
  return;
343
- }
344
- };
345
- const handleFilterOption = (type, keyName, customValue, referencekey) => {
346
- let filtered = JSON.parse(JSON.stringify(list));
347
- if (type === 'a-z') {
348
- filtered.sort((a, b) => {
349
- const aValue = a[keyName];
350
- const bValue = b[keyName];
351
- const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
352
- const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
353
- if (valueA < valueB) {
354
- return -1;
355
- }
356
- if (valueA > valueB) {
357
- return 1;
358
- }
359
- return 0;
360
- });
361
- } //
362
- else if (type === 'z-a') {
363
- filtered.sort((a, b) => {
364
- const aValue = a[keyName];
365
- const bValue = b[keyName];
366
- const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
367
- const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
368
- if (valueA < valueB) {
369
- return 1;
370
- }
371
- if (valueA > valueB) {
372
- return -1;
373
- }
374
- return 0;
375
- });
376
- } //
377
- else if (type === 'items') {
378
- filtered.sort((a, b) => {
379
- const aValue = a[keyName];
380
- const bValue = b[keyName];
381
- const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
382
- const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
383
- // const aRKey = a[referencekey ?? '']
384
- // const bRKey = b[referencekey ?? '']
385
- // if (valueA === customValue) console.log(valueA, valueB, aRKey, bRKey)
386
- if (valueA === customValue)
387
- return -1;
388
- if (valueB === customValue)
389
- return 1;
390
- if (valueA < valueB) {
391
- return -1;
392
- }
393
- if (valueA > valueB) {
394
- return 1;
395
- }
396
- return 0;
397
- });
398
- if (referencekey) {
399
- const data = [];
400
- let newFiltered = filtered.filter((x) => {
401
- const item = x[keyName];
402
- const value = typeof item === 'number' ? item : item.toLowerCase();
403
- if (value === customValue) {
404
- data.push(x);
405
- return false;
349
+ let rawList = Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath);
350
+ function category(type, keyName, uniqueName, customValue, referencekey) {
351
+ if (type === 'a-z') {
352
+ rawList = rawList.sort((a, b) => {
353
+ const aValue = a[keyName];
354
+ const bValue = b[keyName];
355
+ const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
356
+ const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
357
+ if (valueA < valueB) {
358
+ return -1;
406
359
  }
407
- return true;
360
+ if (valueA > valueB) {
361
+ return 1;
362
+ }
363
+ return 0;
408
364
  });
409
- data.sort((a, b) => {
410
- const aValue = a[referencekey];
411
- const bValue = b[referencekey];
365
+ } //
366
+ else if (type === 'z-a') {
367
+ rawList = rawList.sort((a, b) => {
368
+ const aValue = a[keyName];
369
+ const bValue = b[keyName];
412
370
  const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
413
371
  const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
414
372
  if (valueA < valueB) {
@@ -419,15 +377,122 @@ function Table({ columns, fetchFunc, emptyMsg = {
419
377
  }
420
378
  return 0;
421
379
  });
422
- data.forEach((x) => {
423
- newFiltered.unshift(x);
380
+ } //
381
+ else if (type === 'items') {
382
+ rawList = rawList
383
+ .filter((x) => x[keyName].toLowerCase() === customValue)
384
+ .sort((a, b) => {
385
+ const aValue = a[keyName];
386
+ const bValue = b[keyName];
387
+ const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
388
+ const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
389
+ // const aRKey = a[referencekey ?? '']
390
+ // const bRKey = b[referencekey ?? '']
391
+ // if (valueA === customValue) console.log(valueA, valueB, aRKey, bRKey)
392
+ if (valueA === customValue)
393
+ return -1;
394
+ if (valueB === customValue)
395
+ return 1;
396
+ if (valueA < valueB) {
397
+ return -1;
398
+ }
399
+ if (valueA > valueB) {
400
+ return 1;
401
+ }
402
+ return 0;
403
+ });
404
+ if (referencekey) {
405
+ const data = [];
406
+ let newFiltered = rawList.filter((x) => {
407
+ const item = x[keyName];
408
+ const value = typeof item === 'number' ? item : item.toLowerCase();
409
+ if (value === customValue) {
410
+ data.push(x);
411
+ return false;
412
+ }
413
+ return true;
414
+ });
415
+ data.sort((a, b) => {
416
+ const aValue = a[referencekey];
417
+ const bValue = b[referencekey];
418
+ const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
419
+ const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
420
+ if (valueA < valueB) {
421
+ return 1;
422
+ }
423
+ if (valueA > valueB) {
424
+ return -1;
425
+ }
426
+ return 0;
427
+ });
428
+ data.forEach((x) => {
429
+ newFiltered.unshift(x);
430
+ });
431
+ rawList = newFiltered;
432
+ }
433
+ } //
434
+ else if (type === 'data-a-z') {
435
+ rawList = rawList.sort((a, b) => {
436
+ const aValue = a[keyName];
437
+ const bValue = b[keyName];
438
+ const separator = filterSeparator;
439
+ const aDt = aValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
440
+ const bDt = bValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
441
+ if (!aDt && !bDt)
442
+ return 0;
443
+ const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
444
+ const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
445
+ if (valueA.isBefore(valueB)) {
446
+ return -1;
447
+ }
448
+ if (valueA.isAfter(valueB)) {
449
+ return 1;
450
+ }
451
+ return 0;
452
+ });
453
+ } //
454
+ else if (type === 'data-z-a') {
455
+ rawList = rawList.sort((a, b) => {
456
+ const aValue = a[keyName], bValue = b[keyName], separator = filterSeparator, aDt = aValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0], bDt = bValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
457
+ if (!aDt && !bDt)
458
+ return 0;
459
+ const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
460
+ const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
461
+ if (valueA.isBefore(valueB)) {
462
+ return 1;
463
+ }
464
+ if (valueA.isAfter(valueB)) {
465
+ return -1;
466
+ }
467
+ return 0;
424
468
  });
425
- console.log(newFiltered);
426
- filtered = newFiltered;
427
469
  }
428
- } //
429
- else if (type === 'data-a-z') {
430
- filtered.sort((a, b) => {
470
+ }
471
+ function date(from, to, keyName) {
472
+ const separator = filterSeparator;
473
+ rawList = rawList.filter((x) => {
474
+ const dts = x[keyName].split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; });
475
+ let inside = false;
476
+ dts.forEach((k) => {
477
+ if (inside)
478
+ return;
479
+ const dt = (0, dayjs_1.default)(k, 'D/M/YYYY');
480
+ const dtFrom = (0, dayjs_1.default)(from, 'D/M/YYYY');
481
+ if (to) {
482
+ const dtTo = (0, dayjs_1.default)(to, 'D/M/YYYY');
483
+ if ((dtFrom.isBefore(dt) || dtFrom.isSame(dt)) && (dtTo.isAfter(dt) || dtTo.isSame(dt))) {
484
+ inside = true;
485
+ }
486
+ } //
487
+ else {
488
+ if (dtFrom.isBefore(dt) || dtFrom.isSame(dt)) {
489
+ inside = true;
490
+ }
491
+ }
492
+ });
493
+ return inside;
494
+ });
495
+ rawList = rawList.sort((a, b) => {
431
496
  const aValue = a[keyName];
432
497
  const bValue = b[keyName];
433
498
  const separator = filterSeparator;
@@ -445,84 +510,46 @@ function Table({ columns, fetchFunc, emptyMsg = {
445
510
  }
446
511
  return 0;
447
512
  });
448
- } //
449
- else if (type === 'data-z-a') {
450
- filtered.sort((a, b) => {
451
- const aValue = a[keyName];
452
- const bValue = b[keyName];
453
- const separator = filterSeparator;
454
- const aDt = aValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
455
- const bDt = bValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
456
- if (!aDt && !bDt)
457
- return 0;
458
- const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
459
- const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
460
- if (valueA.isBefore(valueB)) {
461
- return 1;
462
- }
463
- if (valueA.isAfter(valueB)) {
464
- return -1;
465
- }
466
- return 0;
467
- });
468
513
  }
469
- setList(filtered);
514
+ appliedFilters.map((x) => {
515
+ if (!x.isDate)
516
+ category(x.type, x.keyName, x.uniqueName, x.customValue, x.referencekey);
517
+ else
518
+ date(x.from, x.to, x.keyName);
519
+ });
520
+ setList(rawList);
521
+ setPagCount(getCount(rawList));
522
+ setCurrentPage(0);
523
+ setListPage(1);
470
524
  setFilterOpen(false);
471
525
  };
526
+ const handleFilterOption = (type, keyName, uniqueName, customValue, referencekey) => {
527
+ setAppliedFilters((s) => [
528
+ ...s.filter((x) => x.type !== type),
529
+ {
530
+ type,
531
+ keyName,
532
+ uniqueName,
533
+ customValue,
534
+ referencekey,
535
+ },
536
+ ]);
537
+ };
472
538
  const handleFilterReset = () => {
473
539
  const value = Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath);
474
- console.log(value);
475
540
  setList(value);
476
- setFilterOpen(false);
541
+ setAppliedFilters([]);
477
542
  };
478
543
  const handleDateFilter = (from, to, keyName) => {
479
- const separator = filterSeparator;
480
- let filtered = JSON.parse(JSON.stringify(list));
481
- filtered = filtered.filter((x) => {
482
- const dts = x[keyName].split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; });
483
- let inside = false;
484
- dts.forEach((k) => {
485
- if (inside)
486
- return;
487
- const dt = (0, dayjs_1.default)(k, 'D/M/YYYY');
488
- const dtFrom = (0, dayjs_1.default)(from, 'D/M/YYYY');
489
- if (to) {
490
- const dtTo = (0, dayjs_1.default)(to, 'D/M/YYYY');
491
- if ((dtFrom.isBefore(dt) || dtFrom.isSame(dt)) && (dtTo.isAfter(dt) || dtTo.isSame(dt))) {
492
- inside = true;
493
- }
494
- } //
495
- else {
496
- if (dtFrom.isBefore(dt) || dtFrom.isSame(dt)) {
497
- inside = true;
498
- }
499
- }
500
- });
501
- return inside;
502
- });
503
- filtered.sort((a, b) => {
504
- const aValue = a[keyName];
505
- const bValue = b[keyName];
506
- const separator = filterSeparator;
507
- const aDt = aValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
508
- const bDt = bValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
509
- if (!aDt && !bDt)
510
- return 0;
511
- const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
512
- const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
513
- if (valueA.isBefore(valueB)) {
514
- return -1;
515
- }
516
- if (valueA.isAfter(valueB)) {
517
- return 1;
518
- }
519
- return 0;
520
- });
521
- setList(filtered);
522
- setPagCount(getCount(filtered));
523
- setCurrentPage(0);
524
- setListPage(1);
525
- setFilterOpen(false);
544
+ setAppliedFilters((s) => [
545
+ ...s.filter((x) => !x.isDate),
546
+ {
547
+ isDate: true,
548
+ from,
549
+ to,
550
+ keyName,
551
+ },
552
+ ]);
526
553
  };
527
554
  if (error)
528
555
  return (react_1.default.createElement(material_1.Box, { bgcolor: '#E2E8F0', padding: 2, marginX: 2 },
@@ -579,7 +606,7 @@ function Table({ columns, fetchFunc, emptyMsg = {
579
606
  csvShowAllButton && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSVAll, sx: { backgroundColor: '#64748B', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvAllButtonTitle)),
580
607
  react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSV, sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvButtonTitle)))))),
581
608
  react_1.default.createElement(material_1.SwipeableDrawer, { anchor: isSmall ? 'bottom' : 'right', open: filterOpen, onClose: (e) => setFilterOpen(false), onOpen: (e) => setFilterOpen(true) },
582
- react_1.default.createElement(material_1.List, { sx: { minWidth: 300 } }, Object.keys(filters).map((f, fIndex) => (react_1.default.createElement(react_1.default.Fragment, null,
609
+ react_1.default.createElement(material_1.List, { sx: { minWidth: 310 } }, Object.keys(filters).map((f, fIndex) => (react_1.default.createElement(react_1.default.Fragment, null,
583
610
  react_1.default.createElement(material_1.ListItemButton, { onClick: (e) => setFilterCollapse((s) => s.map((x, idx) => {
584
611
  if (idx === fIndex)
585
612
  return !x;
@@ -593,7 +620,7 @@ function Table({ columns, fetchFunc, emptyMsg = {
593
620
  filterCollapse[fIndex] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null)),
594
621
  react_1.default.createElement(material_1.Collapse, { in: filterCollapse[fIndex], timeout: 'auto', unmountOnExit: true },
595
622
  react_1.default.createElement(material_1.List, { component: 'div', disablePadding: true, sx: { backgroundColor: 'white' } }, filters[f].map((x) => (react_1.default.createElement(react_1.default.Fragment, null, x.options ? (x.options.map((o) => (react_1.default.createElement(material_1.ListItemButton, { sx: { pl: 4, borderBottom: 1, borderColor: '#ebeef2' } },
596
- react_1.default.createElement(material_1.ListItemText, { primary: o.name, onClick: (e) => handleFilterOption(x.type, x.keyName, o.key, x.referenceKey), sx: { color: o.color, fontWeight: 600 } }))))) : x.type === 'date-interval' ? (react_1.default.createElement(material_1.Box, { padding: 2 },
623
+ react_1.default.createElement(material_1.ListItemText, { primary: o.name, onClick: (e) => handleFilterOption(x.type, x.keyName, `${f}:${JSON.stringify(o)}`, o.key, x.referenceKey), sx: { color: o.color, fontWeight: 600 } }))))) : x.type === 'date-interval' ? (react_1.default.createElement(material_1.Box, { padding: 2 },
597
624
  react_1.default.createElement(FormProvider_1.default, { onSubmit: (d) => handleDateFilter(d['filterDtStart'], d['filterDtEnd'], x.keyName) },
598
625
  react_1.default.createElement(DatePicker_1.default, { name: 'filterDtStart', title: 'A partir de:', required: true }),
599
626
  react_1.default.createElement(material_1.Box, { marginTop: 2 }),
@@ -601,8 +628,11 @@ function Table({ columns, fetchFunc, emptyMsg = {
601
628
  react_1.default.createElement(material_1.Stack, { marginTop: 2 },
602
629
  react_1.default.createElement(material_1.Button, { type: 'submit', variant: 'outlined', startIcon: react_1.default.createElement(icons_material_1.CalendarToday, null) }, "Filtrar por Data"))))) : (react_1.default.createElement(material_1.ListItemButton, { sx: { pl: 4, borderBottom: 1, borderColor: '#ebeef2' } },
603
630
  react_1.default.createElement(material_1.ListItemIcon, { sx: { minWidth: '25px' } }, x.type === 'a-z' || x.type === 'data-a-z' ? (react_1.default.createElement(icons_material_1.South, { transform: 'scale(0.5)' })) : x.type === 'z-a' || x.type === 'data-z-a' ? (react_1.default.createElement(icons_material_1.North, { transform: 'scale(0.5)' })) : null),
604
- react_1.default.createElement(material_1.ListItemText, { primary: x.name, onClick: (e) => handleFilterOption(x.type, x.keyName) })))))))))))),
605
- react_1.default.createElement(material_1.Button, { variant: 'contained', onClick: handleFilterReset, startIcon: react_1.default.createElement(icons_material_1.RestartAlt, null), sx: { marginX: 2, marginBottom: 2 } }, "Reiniciar"))));
631
+ react_1.default.createElement(material_1.ListItemText, { primary: x.name, onClick: (e) => handleFilterOption(x.type, x.keyName, `${f}:${JSON.stringify(x)}`) })))))))))))),
632
+ react_1.default.createElement(material_1.Button, { variant: 'contained', onClick: handleFilterReset, startIcon: react_1.default.createElement(icons_material_1.RestartAlt, null), sx: { marginX: 2, marginBottom: 2 } }, "Reiniciar"),
633
+ react_1.default.createElement(material_1.Box, null,
634
+ react_1.default.createElement(Typography_1.default, null, "Filtros aplicados:"),
635
+ react_1.default.createElement(material_1.Stack, null, appliedFilters.map((x) => (react_1.default.createElement(material_1.Box, null, JSON.stringify(x)))))))));
606
636
  }
607
637
  exports.Table = Table;
608
638
  exports.default = react_1.default.memo(Table);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssplib/react-components",
3
- "version": "0.0.137",
3
+ "version": "0.0.138",
4
4
  "description": "SSP React Components",
5
5
  "main": "index.js",
6
6
  "author": "Pedro Henrique <sr.hudrick@gmail.com>",