@ssplib/react-components 0.0.124 → 0.0.126

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/components/form/table/Table.d.ts +4 -2
  2. package/components/form/table/Table.js +99 -6
  3. package/package.json +1 -1
package/components/form/table/Table.d.ts CHANGED
@@ -4,8 +4,8 @@ interface ColumnData {
4
4
  keyName: string;
5
5
  size?: number;
6
6
  }
7
- type FilterTypes = 'a-z' | 'z-a' | 'items' | 'date-interval';
8
- export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, isPublic, statusKeyName, csvExcludeKeys, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvAllButtonTitle, csvShowAllButton, itemCount, filters, }: {
7
+ type FilterTypes = 'a-z' | 'z-a' | 'items' | 'date-interval' | 'data-a-z' | 'data-z-a';
8
+ export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, isPublic, statusKeyName, csvExcludeKeys, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvAllButtonTitle, csvShowAllButton, itemCount, filters, filterSeparator, }: {
9
9
  columns: ColumnData[];
10
10
  tableName: string;
11
11
  csvShowAllButton?: boolean;
@@ -35,6 +35,7 @@ export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableNam
35
35
  type: FilterTypes;
36
36
  keyName: string;
37
37
  name: string;
38
+ referenceKey?: string;
38
39
  options?: {
39
40
  name: string;
40
41
  color: string;
@@ -42,6 +43,7 @@ export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableNam
42
43
  }[];
43
44
  }[];
44
45
  };
46
+ filterSeparator?: string;
45
47
  }): JSX.Element;
46
48
  declare const _default: React.MemoExoticComponent<typeof Table>;
47
49
  export default _default;
package/components/form/table/Table.js CHANGED
@@ -45,7 +45,7 @@ let startData = [];
45
45
  function Table({ columns, fetchFunc, emptyMsg = {
46
46
  user: 'Nenhum dado encontrado',
47
47
  public: 'Nenhum dado encontrado',
48
- }, dataPath = '', tableName = 'Dados', csv, columnSize, action, isPublic = false, statusKeyName = '', csvExcludeKeys = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', csvShowAllButton = false, itemCount = 10, filters = {}, }) {
48
+ }, dataPath = '', tableName = 'Dados', csv, columnSize, action, isPublic = false, statusKeyName = '', csvExcludeKeys = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', csvShowAllButton = false, itemCount = 10, filters = {}, filterSeparator = '|', }) {
49
49
  const [isLoading, setIsLoading] = (0, react_1.useState)(true);
50
50
  const [error, setError] = (0, react_1.useState)(null);
51
51
  const [data, setData] = (0, react_1.useState)(null);
@@ -276,6 +276,8 @@ function Table({ columns, fetchFunc, emptyMsg = {
276
276
  return (react_1.default.createElement(Typography_1.default, { color: '#22C55E', fontWeight: 600, fontFamily: 'Inter' }, "LICENCIADO"));
277
277
  case 'PA':
278
278
  return (react_1.default.createElement(Typography_1.default, { color: '#6366F1', fontWeight: 600, fontFamily: 'Inter' }, "PR\u00C9 APROVADO"));
279
+ case 'FP':
280
+ return (react_1.default.createElement(Typography_1.default, { color: '#991b1b', fontWeight: 600, fontFamily: 'Inter' }, "FORA DO PRAZO"));
279
281
  }
280
282
  }, []);
281
283
  const toggleDrawer = (open) => (event) => {
@@ -283,8 +285,8 @@ function Table({ columns, fetchFunc, emptyMsg = {
283
285
  return;
284
286
  }
285
287
  };
286
- const handleFilterOption = (type, keyName, customValue) => {
287
- const filtered = JSON.parse(JSON.stringify(list));
288
+ const handleFilterOption = (type, keyName, customValue, referencekey) => {
289
+ let filtered = JSON.parse(JSON.stringify(list));
288
290
  if (type === 'a-z') {
289
291
  filtered.sort((a, b) => {
290
292
  const aValue = a[keyName];
@@ -321,6 +323,9 @@ function Table({ columns, fetchFunc, emptyMsg = {
321
323
  const bValue = b[keyName];
322
324
  const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
323
325
  const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
326
+ // const aRKey = a[referencekey ?? '']
327
+ // const bRKey = b[referencekey ?? '']
328
+ // if (valueA === customValue) console.log(valueA, valueB, aRKey, bRKey)
324
329
  if (valueA === customValue)
325
330
  return -1;
326
331
  if (valueB === customValue)
@@ -333,6 +338,76 @@ function Table({ columns, fetchFunc, emptyMsg = {
333
338
  }
334
339
  return 0;
335
340
  });
341
+ if (referencekey) {
342
+ const data = [];
343
+ let newFiltered = filtered.filter((x) => {
344
+ const item = x[keyName];
345
+ const value = typeof item === 'number' ? item : item.toLowerCase();
346
+ if (value === customValue) {
347
+ data.push(x);
348
+ return false;
349
+ }
350
+ return true;
351
+ });
352
+ data.sort((a, b) => {
353
+ const aValue = a[referencekey];
354
+ const bValue = b[referencekey];
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;
359
+ }
360
+ if (valueA > valueB) {
361
+ return -1;
362
+ }
363
+ return 0;
364
+ });
365
+ data.forEach((x) => {
366
+ newFiltered.unshift(x);
367
+ });
368
+ console.log(newFiltered);
369
+ filtered = newFiltered;
370
+ }
371
+ } //
372
+ else if (type === 'data-a-z') {
373
+ filtered.sort((a, b) => {
374
+ const aValue = a[keyName];
375
+ const bValue = b[keyName];
376
+ const separator = filterSeparator;
377
+ 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];
378
+ 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];
379
+ if (!aDt && !bDt)
380
+ return 0;
381
+ const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
382
+ const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
383
+ if (valueA.isBefore(valueB)) {
384
+ return -1;
385
+ }
386
+ if (valueA.isAfter(valueB)) {
387
+ return 1;
388
+ }
389
+ return 0;
390
+ });
391
+ } //
392
+ else if (type === 'data-z-a') {
393
+ filtered.sort((a, b) => {
394
+ const aValue = a[keyName];
395
+ const bValue = b[keyName];
396
+ const separator = filterSeparator;
397
+ 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];
398
+ 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];
399
+ if (!aDt && !bDt)
400
+ return 0;
401
+ const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
402
+ const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
403
+ if (valueA.isBefore(valueB)) {
404
+ return 1;
405
+ }
406
+ if (valueA.isAfter(valueB)) {
407
+ return -1;
408
+ }
409
+ return 0;
410
+ });
336
411
  }
337
412
  setList(filtered);
338
413
  setFilterOpen(false);
@@ -344,7 +419,7 @@ function Table({ columns, fetchFunc, emptyMsg = {
344
419
  setFilterOpen(false);
345
420
  };
346
421
  const handleDateFilter = (from, to, keyName) => {
347
- const separator = ',';
422
+ const separator = filterSeparator;
348
423
  let filtered = JSON.parse(JSON.stringify(list));
349
424
  filtered = filtered.filter((x) => {
350
425
  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]; });
@@ -368,6 +443,24 @@ function Table({ columns, fetchFunc, emptyMsg = {
368
443
  });
369
444
  return inside;
370
445
  });
446
+ filtered.sort((a, b) => {
447
+ const aValue = a[keyName];
448
+ const bValue = b[keyName];
449
+ const separator = filterSeparator;
450
+ 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];
451
+ 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];
452
+ if (!aDt && !bDt)
453
+ return 0;
454
+ const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
455
+ const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
456
+ if (valueA.isBefore(valueB)) {
457
+ return -1;
458
+ }
459
+ if (valueA.isAfter(valueB)) {
460
+ return 1;
461
+ }
462
+ return 0;
463
+ });
371
464
  setList(filtered);
372
465
  setPagCount(getCount(filtered));
373
466
  setCurrentPage(0);
@@ -443,14 +536,14 @@ function Table({ columns, fetchFunc, emptyMsg = {
443
536
  filterCollapse[fIndex] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null)),
444
537
  react_1.default.createElement(material_1.Collapse, { in: filterCollapse[fIndex], timeout: 'auto', unmountOnExit: true },
445
538
  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' } },
446
- react_1.default.createElement(material_1.ListItemText, { primary: o.name, onClick: (e) => handleFilterOption(x.type, x.keyName, o.key), sx: { color: o.color, fontWeight: 600 } }))))) : x.type === 'date-interval' ? (react_1.default.createElement(material_1.Box, { padding: 2 },
539
+ 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 },
447
540
  react_1.default.createElement(FormProvider_1.default, { onSubmit: (d) => handleDateFilter(d['filterDtStart'], d['filterDtEnd'], x.keyName) },
448
541
  react_1.default.createElement(DatePicker_1.default, { name: 'filterDtStart', title: 'A partir de:', required: true }),
449
542
  react_1.default.createElement(material_1.Box, { marginTop: 2 }),
450
543
  react_1.default.createElement(DatePicker_1.default, { name: 'filterDtEnd', title: 'At\u00E9 (opcional):' }),
451
544
  react_1.default.createElement(material_1.Stack, { marginTop: 2 },
452
545
  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' } },
453
- react_1.default.createElement(material_1.ListItemIcon, { sx: { minWidth: '25px' } }, x.type === 'a-z' ? react_1.default.createElement(icons_material_1.South, { transform: 'scale(0.5)' }) : x.type === 'z-a' ? react_1.default.createElement(icons_material_1.North, { transform: 'scale(0.5)' }) : null),
546
+ 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),
454
547
  react_1.default.createElement(material_1.ListItemText, { primary: x.name, onClick: (e) => handleFilterOption(x.type, x.keyName) })))))))))))),
455
548
  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"))));
456
549
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssplib/react-components",
3
- "version": "0.0.124",
3
+ "version": "0.0.126",
4
4
  "description": "SSP React Components",
5
5
  "main": "index.js",
6
6
  "author": "Pedro Henrique <sr.hudrick@gmail.com>",