@ssplib/react-components 0.0.124 → 0.0.125

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 +97 -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);
@@ -283,8 +283,8 @@ function Table({ columns, fetchFunc, emptyMsg = {
283
283
  return;
284
284
  }
285
285
  };
286
- const handleFilterOption = (type, keyName, customValue) => {
287
- const filtered = JSON.parse(JSON.stringify(list));
286
+ const handleFilterOption = (type, keyName, customValue, referencekey) => {
287
+ let filtered = JSON.parse(JSON.stringify(list));
288
288
  if (type === 'a-z') {
289
289
  filtered.sort((a, b) => {
290
290
  const aValue = a[keyName];
@@ -321,6 +321,9 @@ function Table({ columns, fetchFunc, emptyMsg = {
321
321
  const bValue = b[keyName];
322
322
  const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
323
323
  const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
324
+ // const aRKey = a[referencekey ?? '']
325
+ // const bRKey = b[referencekey ?? '']
326
+ // if (valueA === customValue) console.log(valueA, valueB, aRKey, bRKey)
324
327
  if (valueA === customValue)
325
328
  return -1;
326
329
  if (valueB === customValue)
@@ -333,6 +336,76 @@ function Table({ columns, fetchFunc, emptyMsg = {
333
336
  }
334
337
  return 0;
335
338
  });
339
+ if (referencekey) {
340
+ const data = [];
341
+ let newFiltered = filtered.filter((x) => {
342
+ const item = x[keyName];
343
+ const value = typeof item === 'number' ? item : item.toLowerCase();
344
+ if (value === customValue) {
345
+ data.push(x);
346
+ return false;
347
+ }
348
+ return true;
349
+ });
350
+ data.sort((a, b) => {
351
+ const aValue = a[referencekey];
352
+ const bValue = b[referencekey];
353
+ const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
354
+ const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
355
+ if (valueA < valueB) {
356
+ return 1;
357
+ }
358
+ if (valueA > valueB) {
359
+ return -1;
360
+ }
361
+ return 0;
362
+ });
363
+ data.forEach((x) => {
364
+ newFiltered.unshift(x);
365
+ });
366
+ console.log(newFiltered);
367
+ filtered = newFiltered;
368
+ }
369
+ } //
370
+ else if (type === 'data-a-z') {
371
+ filtered.sort((a, b) => {
372
+ const aValue = a[keyName];
373
+ const bValue = b[keyName];
374
+ const separator = filterSeparator;
375
+ 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];
376
+ 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];
377
+ if (!aDt && !bDt)
378
+ return 0;
379
+ const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
380
+ const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
381
+ if (valueA.isBefore(valueB)) {
382
+ return -1;
383
+ }
384
+ if (valueA.isAfter(valueB)) {
385
+ return 1;
386
+ }
387
+ return 0;
388
+ });
389
+ } //
390
+ else if (type === 'data-z-a') {
391
+ filtered.sort((a, b) => {
392
+ const aValue = a[keyName];
393
+ const bValue = b[keyName];
394
+ const separator = filterSeparator;
395
+ 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];
396
+ 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];
397
+ if (!aDt && !bDt)
398
+ return 0;
399
+ const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
400
+ const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
401
+ if (valueA.isBefore(valueB)) {
402
+ return 1;
403
+ }
404
+ if (valueA.isAfter(valueB)) {
405
+ return -1;
406
+ }
407
+ return 0;
408
+ });
336
409
  }
337
410
  setList(filtered);
338
411
  setFilterOpen(false);
@@ -344,7 +417,7 @@ function Table({ columns, fetchFunc, emptyMsg = {
344
417
  setFilterOpen(false);
345
418
  };
346
419
  const handleDateFilter = (from, to, keyName) => {
347
- const separator = ',';
420
+ const separator = filterSeparator;
348
421
  let filtered = JSON.parse(JSON.stringify(list));
349
422
  filtered = filtered.filter((x) => {
350
423
  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 +441,24 @@ function Table({ columns, fetchFunc, emptyMsg = {
368
441
  });
369
442
  return inside;
370
443
  });
444
+ filtered.sort((a, b) => {
445
+ const aValue = a[keyName];
446
+ const bValue = b[keyName];
447
+ const separator = filterSeparator;
448
+ 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];
449
+ 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];
450
+ if (!aDt && !bDt)
451
+ return 0;
452
+ const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
453
+ const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
454
+ if (valueA.isBefore(valueB)) {
455
+ return -1;
456
+ }
457
+ if (valueA.isAfter(valueB)) {
458
+ return 1;
459
+ }
460
+ return 0;
461
+ });
371
462
  setList(filtered);
372
463
  setPagCount(getCount(filtered));
373
464
  setCurrentPage(0);
@@ -443,14 +534,14 @@ function Table({ columns, fetchFunc, emptyMsg = {
443
534
  filterCollapse[fIndex] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null)),
444
535
  react_1.default.createElement(material_1.Collapse, { in: filterCollapse[fIndex], timeout: 'auto', unmountOnExit: true },
445
536
  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 },
537
+ 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
538
  react_1.default.createElement(FormProvider_1.default, { onSubmit: (d) => handleDateFilter(d['filterDtStart'], d['filterDtEnd'], x.keyName) },
448
539
  react_1.default.createElement(DatePicker_1.default, { name: 'filterDtStart', title: 'A partir de:', required: true }),
449
540
  react_1.default.createElement(material_1.Box, { marginTop: 2 }),
450
541
  react_1.default.createElement(DatePicker_1.default, { name: 'filterDtEnd', title: 'At\u00E9 (opcional):' }),
451
542
  react_1.default.createElement(material_1.Stack, { marginTop: 2 },
452
543
  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),
544
+ 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
545
  react_1.default.createElement(material_1.ListItemText, { primary: x.name, onClick: (e) => handleFilterOption(x.type, x.keyName) })))))))))))),
455
546
  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
547
  }
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.125",
4
4
  "description": "SSP React Components",
5
5
  "main": "index.js",
6
6
  "author": "Pedro Henrique <sr.hudrick@gmail.com>",