@visns-studio/visns-components 1.3.13 → 1.3.15
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.
|
@@ -5,6 +5,10 @@ import debounce from "lodash.debounce";
|
|
|
5
5
|
import moment from "moment";
|
|
6
6
|
import numeral from "numeral";
|
|
7
7
|
import Popup from "reactjs-popup";
|
|
8
|
+
import parse from "html-react-parser";
|
|
9
|
+
import NumberFilter from "@inovua/reactdatagrid-community/NumberFilter";
|
|
10
|
+
import SelectFilter from "@inovua/reactdatagrid-community/SelectFilter";
|
|
11
|
+
import DateFilter from "@inovua/reactdatagrid-community/DateFilter";
|
|
8
12
|
import ReactDataGrid from "@inovua/reactdatagrid-community";
|
|
9
13
|
import { confirmAlert } from "react-confirm-alert";
|
|
10
14
|
import { toast } from "react-toastify";
|
|
@@ -13,9 +17,15 @@ import {
|
|
|
13
17
|
Check,
|
|
14
18
|
Clock,
|
|
15
19
|
CloudDownload,
|
|
20
|
+
Copy,
|
|
16
21
|
Edit,
|
|
22
|
+
Folder,
|
|
23
|
+
Inbox,
|
|
24
|
+
Network,
|
|
17
25
|
Ribbon,
|
|
18
26
|
Search,
|
|
27
|
+
ShippingBoxV1,
|
|
28
|
+
TriangleAlert,
|
|
19
29
|
} from "akar-icons";
|
|
20
30
|
|
|
21
31
|
import "@inovua/reactdatagrid-community/index.css";
|
|
@@ -24,11 +34,14 @@ import "react-confirm-alert/src/react-confirm-alert.css";
|
|
|
24
34
|
import CustomFetch from "../crm/visns-fetch";
|
|
25
35
|
import Form from "./visns-form";
|
|
26
36
|
|
|
27
|
-
const loadData = async (
|
|
37
|
+
const loadData = async (
|
|
38
|
+
{ skip, limit, sortInfo, currentData, filterValue, groupBy },
|
|
39
|
+
search,
|
|
40
|
+
ajaxSetting
|
|
41
|
+
) => {
|
|
28
42
|
const url = ajaxSetting.url;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
let params = { page, sortInfo, take: limit, search: search };
|
|
43
|
+
const page = Math.floor(skip / limit) + 1;
|
|
44
|
+
const params = { page, sortInfo, take: limit, search: search, where: [] };
|
|
32
45
|
|
|
33
46
|
if (sortInfo) {
|
|
34
47
|
params.sortBy = sortInfo.name;
|
|
@@ -39,6 +52,31 @@ const loadData = async ({ skip, limit, sortInfo }, search, ajaxSetting) => {
|
|
|
39
52
|
params.where = ajaxSetting.where;
|
|
40
53
|
}
|
|
41
54
|
|
|
55
|
+
if (filterValue) {
|
|
56
|
+
filterValue.forEach((fv) => {
|
|
57
|
+
const identifier = fv.key ? fv.key : fv.name;
|
|
58
|
+
const existingIndex = params.where.findIndex(
|
|
59
|
+
(w) => w.id === identifier
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
if (fv.value !== null && fv.value !== "") {
|
|
63
|
+
if (existingIndex !== -1) {
|
|
64
|
+
params.where[existingIndex].value = fv.value;
|
|
65
|
+
} else {
|
|
66
|
+
params.where.push({
|
|
67
|
+
id: identifier,
|
|
68
|
+
value: fv.value,
|
|
69
|
+
operator: fv.operator,
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
} else {
|
|
73
|
+
if (existingIndex !== -1) {
|
|
74
|
+
params.where.splice(existingIndex, 1);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
|
|
42
80
|
try {
|
|
43
81
|
const response = await axios.post(url, params);
|
|
44
82
|
const { data, total } = response.data;
|
|
@@ -49,8 +87,17 @@ const loadData = async ({ skip, limit, sortInfo }, search, ajaxSetting) => {
|
|
|
49
87
|
}
|
|
50
88
|
};
|
|
51
89
|
|
|
52
|
-
const DataGrid = (
|
|
53
|
-
|
|
90
|
+
const DataGrid = ({
|
|
91
|
+
ajaxSetting,
|
|
92
|
+
form,
|
|
93
|
+
columns,
|
|
94
|
+
settings,
|
|
95
|
+
setFilterData,
|
|
96
|
+
style,
|
|
97
|
+
tableFilters,
|
|
98
|
+
historySearch,
|
|
99
|
+
historyUrl,
|
|
100
|
+
}) => {
|
|
54
101
|
const navigate = useNavigate();
|
|
55
102
|
|
|
56
103
|
/** Modal States */
|
|
@@ -91,8 +138,9 @@ const DataGrid = (props) => {
|
|
|
91
138
|
(params) => loadData(params, dSearch, ajaxSetting),
|
|
92
139
|
[ajaxSetting, dataReload, dSearch]
|
|
93
140
|
);
|
|
141
|
+
const [filterDataSource, setFilterDataSource] = useState([]);
|
|
142
|
+
const [filterValue, setFilterValue] = useState([]);
|
|
94
143
|
const [gridColumns, setGridColumns] = useState([]);
|
|
95
|
-
const [gridHeight, setGridHeight] = useState(550);
|
|
96
144
|
const limit = ajaxSetting.take || 10;
|
|
97
145
|
const [search, setSearch] = useState("");
|
|
98
146
|
const sortInfo =
|
|
@@ -207,35 +255,30 @@ const DataGrid = (props) => {
|
|
|
207
255
|
cellElement
|
|
208
256
|
);
|
|
209
257
|
|
|
210
|
-
if (
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
"/" +
|
|
221
|
-
rowProps.columns[columnIndex].link.folder;
|
|
222
|
-
} else {
|
|
223
|
-
navigate(
|
|
224
|
-
`${rowProps.columns[columnIndex].link.url}${
|
|
225
|
-
rowProps.data[
|
|
226
|
-
rowProps.columns[columnIndex].link.key
|
|
227
|
-
]
|
|
228
|
-
}`,
|
|
229
|
-
{
|
|
230
|
-
state: {
|
|
231
|
-
form: form,
|
|
232
|
-
},
|
|
233
|
-
}
|
|
234
|
-
);
|
|
235
|
-
}
|
|
258
|
+
if (
|
|
259
|
+
rowProps.columns[columnIndex].link &&
|
|
260
|
+
rowProps.columns[columnIndex].link.url
|
|
261
|
+
) {
|
|
262
|
+
if (rowProps.columns[columnIndex].link.folder) {
|
|
263
|
+
window.location.href =
|
|
264
|
+
rowProps.columns[columnIndex].link.url +
|
|
265
|
+
rowProps.data[rowProps.columns[columnIndex].link.key] +
|
|
266
|
+
"/" +
|
|
267
|
+
rowProps.columns[columnIndex].link.folder;
|
|
236
268
|
} else {
|
|
237
|
-
|
|
269
|
+
navigate(
|
|
270
|
+
`${rowProps.columns[columnIndex].link.url}${
|
|
271
|
+
rowProps.data[rowProps.columns[columnIndex].link.key]
|
|
272
|
+
}`,
|
|
273
|
+
{
|
|
274
|
+
state: {
|
|
275
|
+
form: form,
|
|
276
|
+
},
|
|
277
|
+
}
|
|
278
|
+
);
|
|
238
279
|
}
|
|
280
|
+
} else {
|
|
281
|
+
modalOpen("update", rowProps.data[form.primaryKey]);
|
|
239
282
|
}
|
|
240
283
|
}, []);
|
|
241
284
|
|
|
@@ -343,43 +386,186 @@ const DataGrid = (props) => {
|
|
|
343
386
|
|
|
344
387
|
useEffect(() => {
|
|
345
388
|
const renderColumn = (column) => {
|
|
389
|
+
let childValue;
|
|
390
|
+
let date;
|
|
391
|
+
let filterEditor = null;
|
|
392
|
+
let filterEditorProps = null;
|
|
393
|
+
let icons = [];
|
|
394
|
+
let match;
|
|
395
|
+
let relationName;
|
|
396
|
+
let selectedDataSource = null;
|
|
397
|
+
let stage;
|
|
398
|
+
let style;
|
|
399
|
+
let value;
|
|
400
|
+
|
|
401
|
+
const commonProps = {
|
|
402
|
+
header: column.label,
|
|
403
|
+
defaultFlex: 1,
|
|
404
|
+
link: column.link ? column.link : {},
|
|
405
|
+
minWidth:
|
|
406
|
+
column.minWidth && column.minWidth > 0
|
|
407
|
+
? column.minWidth
|
|
408
|
+
: undefined,
|
|
409
|
+
maxWidth:
|
|
410
|
+
column.maxWidth && column.maxWidth > 0
|
|
411
|
+
? column.maxWidth
|
|
412
|
+
: undefined,
|
|
413
|
+
};
|
|
414
|
+
|
|
346
415
|
switch (column.type) {
|
|
416
|
+
case "age":
|
|
417
|
+
return {
|
|
418
|
+
...commonProps,
|
|
419
|
+
name: `${column.type}.${column.id}`,
|
|
420
|
+
render: ({ data }) => {
|
|
421
|
+
value = column.id.reduce((acc, id) => {
|
|
422
|
+
if (acc === "") {
|
|
423
|
+
return data[id];
|
|
424
|
+
} else {
|
|
425
|
+
return acc[id];
|
|
426
|
+
}
|
|
427
|
+
}, "");
|
|
428
|
+
|
|
429
|
+
if (value !== "" && value !== null) {
|
|
430
|
+
date = moment(value);
|
|
431
|
+
|
|
432
|
+
return (
|
|
433
|
+
<span>{moment().diff(date, "years")}</span>
|
|
434
|
+
);
|
|
435
|
+
} else {
|
|
436
|
+
return null;
|
|
437
|
+
}
|
|
438
|
+
},
|
|
439
|
+
};
|
|
440
|
+
case "arrayCount":
|
|
441
|
+
return {
|
|
442
|
+
...commonProps,
|
|
443
|
+
name: `${column.type}.${column.id}`,
|
|
444
|
+
sortable: false,
|
|
445
|
+
render: ({ data }) => {
|
|
446
|
+
if (data && data[column.id]) {
|
|
447
|
+
return data[column.id].length;
|
|
448
|
+
} else {
|
|
449
|
+
return null;
|
|
450
|
+
}
|
|
451
|
+
},
|
|
452
|
+
};
|
|
453
|
+
case "coding":
|
|
454
|
+
return {
|
|
455
|
+
...commonProps,
|
|
456
|
+
name: "audits.name",
|
|
457
|
+
sortable: false,
|
|
458
|
+
render: ({ data }) => {
|
|
459
|
+
if (data) {
|
|
460
|
+
return handleCoding(column, data);
|
|
461
|
+
} else {
|
|
462
|
+
return null;
|
|
463
|
+
}
|
|
464
|
+
},
|
|
465
|
+
};
|
|
466
|
+
case "created_by":
|
|
467
|
+
return {
|
|
468
|
+
...commonProps,
|
|
469
|
+
name: "audits.name",
|
|
470
|
+
sortable: false,
|
|
471
|
+
render: ({ data }) => {
|
|
472
|
+
if (
|
|
473
|
+
data.audits[0] &&
|
|
474
|
+
data.audits[0].user &&
|
|
475
|
+
data.audits[0].user.name
|
|
476
|
+
) {
|
|
477
|
+
value = data.audits[0].user.name;
|
|
478
|
+
|
|
479
|
+
return <span>{value}</span>;
|
|
480
|
+
} else {
|
|
481
|
+
return null;
|
|
482
|
+
}
|
|
483
|
+
},
|
|
484
|
+
};
|
|
347
485
|
case "currency":
|
|
348
486
|
return {
|
|
487
|
+
...commonProps,
|
|
349
488
|
name: column.id,
|
|
350
|
-
header: column.label,
|
|
351
|
-
defaultFlex: 1,
|
|
352
|
-
link: column.link ? column.link : {},
|
|
353
489
|
render: ({ data }) => {
|
|
354
490
|
if (data) {
|
|
355
491
|
data = numeral(data[column.id]).format(
|
|
356
492
|
"$0,0.00"
|
|
357
493
|
);
|
|
494
|
+
|
|
495
|
+
return <span>{data}</span>;
|
|
496
|
+
} else {
|
|
497
|
+
return null;
|
|
358
498
|
}
|
|
359
|
-
return <span>{data}</span>;
|
|
360
499
|
},
|
|
361
500
|
};
|
|
362
501
|
case "date":
|
|
502
|
+
if (column.filter && column.filter.type) {
|
|
503
|
+
filterEditor = DateFilter;
|
|
504
|
+
filterEditorProps = (props, { index }) => {
|
|
505
|
+
return {
|
|
506
|
+
dateFormat: "DD-MM-YYYY",
|
|
507
|
+
placeholder: "All Dates",
|
|
508
|
+
};
|
|
509
|
+
};
|
|
510
|
+
} else {
|
|
511
|
+
filterEditor = null;
|
|
512
|
+
filterEditorProps = null;
|
|
513
|
+
}
|
|
514
|
+
|
|
363
515
|
return {
|
|
516
|
+
...commonProps,
|
|
364
517
|
name: column.id,
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
link: column.link ? column.link : {},
|
|
518
|
+
filterEditor: filterEditor,
|
|
519
|
+
filterEditorProps: filterEditorProps,
|
|
368
520
|
render: ({ data }) => {
|
|
369
521
|
if (data && data[column.id]) {
|
|
370
|
-
|
|
371
|
-
column.format
|
|
522
|
+
const value = moment(data[column.id]).format(
|
|
523
|
+
column.format || "DD-MM-YYYY"
|
|
372
524
|
);
|
|
525
|
+
style = {};
|
|
526
|
+
|
|
527
|
+
if (
|
|
528
|
+
column.active &&
|
|
529
|
+
column.active.id &&
|
|
530
|
+
column.active.value === "expired"
|
|
531
|
+
) {
|
|
532
|
+
if (
|
|
533
|
+
data[column.active.id] &&
|
|
534
|
+
moment(data[column.active.id]).isBefore(
|
|
535
|
+
moment()
|
|
536
|
+
)
|
|
537
|
+
) {
|
|
538
|
+
style = {
|
|
539
|
+
color: column.active.colour,
|
|
540
|
+
};
|
|
541
|
+
}
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
return <span style={style}>{value}</span>;
|
|
545
|
+
} else {
|
|
546
|
+
return null;
|
|
373
547
|
}
|
|
374
|
-
return <span>{data}</span>;
|
|
375
548
|
},
|
|
376
549
|
};
|
|
377
550
|
case "datetime":
|
|
551
|
+
if (column.filter && column.filter.type) {
|
|
552
|
+
filterEditor = DateFilter;
|
|
553
|
+
filterEditorProps = (props, { index }) => {
|
|
554
|
+
return {
|
|
555
|
+
dateFormat: "DD-MM-YYYY",
|
|
556
|
+
placeholder: "All Dates",
|
|
557
|
+
};
|
|
558
|
+
};
|
|
559
|
+
} else {
|
|
560
|
+
filterEditor = null;
|
|
561
|
+
filterEditorProps = null;
|
|
562
|
+
}
|
|
563
|
+
|
|
378
564
|
return {
|
|
565
|
+
...commonProps,
|
|
379
566
|
name: column.id,
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
link: column.link ? column.link : {},
|
|
567
|
+
filterEditor: filterEditor,
|
|
568
|
+
filterEditorProps: filterEditorProps,
|
|
383
569
|
render: ({ data }) => {
|
|
384
570
|
if (data && data[column.id]) {
|
|
385
571
|
data = moment(data[column.id]).format(
|
|
@@ -387,16 +573,18 @@ const DataGrid = (props) => {
|
|
|
387
573
|
? column.format
|
|
388
574
|
: "DD-MM-YYYY hh:mm A"
|
|
389
575
|
);
|
|
576
|
+
|
|
577
|
+
return <span>{data}</span>;
|
|
578
|
+
} else {
|
|
579
|
+
return null;
|
|
390
580
|
}
|
|
391
|
-
return <span>{data}</span>;
|
|
392
581
|
},
|
|
393
582
|
};
|
|
394
583
|
case "file":
|
|
395
584
|
return {
|
|
585
|
+
...commonProps,
|
|
396
586
|
name: column.id,
|
|
397
|
-
|
|
398
|
-
defaultFlex: 1,
|
|
399
|
-
link: column.link ? column.link : {},
|
|
587
|
+
sortable: false,
|
|
400
588
|
render: ({ data }) => {
|
|
401
589
|
if (data) {
|
|
402
590
|
return (
|
|
@@ -415,55 +603,348 @@ const DataGrid = (props) => {
|
|
|
415
603
|
}
|
|
416
604
|
},
|
|
417
605
|
};
|
|
418
|
-
case "
|
|
606
|
+
case "icons":
|
|
419
607
|
return {
|
|
608
|
+
...commonProps,
|
|
420
609
|
name: column.id,
|
|
421
|
-
|
|
422
|
-
defaultFlex: 1,
|
|
423
|
-
link: column.link ? column.link : {},
|
|
610
|
+
sortable: false,
|
|
424
611
|
render: ({ data }) => {
|
|
612
|
+
icons = [];
|
|
613
|
+
|
|
614
|
+
if (column.icons && column.icons.length > 0) {
|
|
615
|
+
column.icons.forEach((icon) => {
|
|
616
|
+
icons.push(
|
|
617
|
+
<img
|
|
618
|
+
src={icon.url}
|
|
619
|
+
alt={icon.name}
|
|
620
|
+
data-tooltip-id="system-tooltip"
|
|
621
|
+
data-tooltip-content={icon.name}
|
|
622
|
+
/>
|
|
623
|
+
);
|
|
624
|
+
});
|
|
625
|
+
}
|
|
626
|
+
|
|
425
627
|
if (data) {
|
|
628
|
+
return <span>{icons}</span>;
|
|
629
|
+
} else {
|
|
630
|
+
return null;
|
|
631
|
+
}
|
|
632
|
+
},
|
|
633
|
+
};
|
|
634
|
+
case "json":
|
|
635
|
+
return {
|
|
636
|
+
...commonProps,
|
|
637
|
+
name: column.id,
|
|
638
|
+
render: ({ data }) => {
|
|
639
|
+
if (
|
|
640
|
+
data &&
|
|
641
|
+
data[column.id] &&
|
|
642
|
+
data[column.id][column.jsonData]
|
|
643
|
+
) {
|
|
644
|
+
data = data[column.id][column.jsonData];
|
|
645
|
+
|
|
646
|
+
return <span>{data}</span>;
|
|
647
|
+
} else {
|
|
648
|
+
return null;
|
|
649
|
+
}
|
|
650
|
+
},
|
|
651
|
+
};
|
|
652
|
+
case "number":
|
|
653
|
+
return {
|
|
654
|
+
...commonProps,
|
|
655
|
+
name: column.id,
|
|
656
|
+
type: "number",
|
|
657
|
+
};
|
|
658
|
+
case "option":
|
|
659
|
+
selectedDataSource = filterDataSource.reduce((acc, fds) => {
|
|
660
|
+
if (fds.id === column.id) {
|
|
661
|
+
return fds.dataset;
|
|
662
|
+
}
|
|
663
|
+
return acc;
|
|
664
|
+
}, null);
|
|
665
|
+
|
|
666
|
+
if (
|
|
667
|
+
column.filter &&
|
|
668
|
+
column.filter.type &&
|
|
669
|
+
column.filter.type === "select"
|
|
670
|
+
) {
|
|
671
|
+
filterEditor = SelectFilter;
|
|
672
|
+
filterEditorProps = {
|
|
673
|
+
placeholder: column.filter.placeholder
|
|
674
|
+
? column.filter.placeholder
|
|
675
|
+
: "All Options",
|
|
676
|
+
dataSource: selectedDataSource,
|
|
677
|
+
};
|
|
678
|
+
} else {
|
|
679
|
+
filterEditor = null;
|
|
680
|
+
filterEditorProps = null;
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
return {
|
|
684
|
+
...commonProps,
|
|
685
|
+
name: column.id,
|
|
686
|
+
filterEditor: filterEditor,
|
|
687
|
+
filterEditorProps: filterEditorProps,
|
|
688
|
+
render: ({ data }) => {
|
|
689
|
+
if (
|
|
690
|
+
data &&
|
|
691
|
+
column.options &&
|
|
692
|
+
column.options[data[column.id]]
|
|
693
|
+
) {
|
|
426
694
|
data = column.options[data[column.id]];
|
|
695
|
+
|
|
696
|
+
return <span>{data}</span>;
|
|
697
|
+
} else {
|
|
698
|
+
return null;
|
|
699
|
+
}
|
|
700
|
+
},
|
|
701
|
+
};
|
|
702
|
+
case "placeholder":
|
|
703
|
+
return {
|
|
704
|
+
...commonProps,
|
|
705
|
+
name: column.id,
|
|
706
|
+
sortable: false,
|
|
707
|
+
render: ({ data }) => {
|
|
708
|
+
if (data) {
|
|
709
|
+
return <span>{column.placeholder}</span>;
|
|
710
|
+
} else {
|
|
711
|
+
return null;
|
|
427
712
|
}
|
|
428
|
-
return <span>{data}</span>;
|
|
429
713
|
},
|
|
430
714
|
};
|
|
431
715
|
case "relation":
|
|
432
|
-
|
|
716
|
+
relationName = column.id.reduce(
|
|
433
717
|
(acc, id) => acc + `${id}.`,
|
|
434
718
|
""
|
|
435
719
|
);
|
|
436
720
|
relationName += column.nameFrom;
|
|
437
721
|
|
|
722
|
+
selectedDataSource = filterDataSource.reduce((acc, fds) => {
|
|
723
|
+
if (fds.id === relationName) {
|
|
724
|
+
return fds.dataset;
|
|
725
|
+
}
|
|
726
|
+
return acc;
|
|
727
|
+
}, null);
|
|
728
|
+
|
|
729
|
+
if (
|
|
730
|
+
column.filter &&
|
|
731
|
+
column.filter.type &&
|
|
732
|
+
column.filter.type === "select"
|
|
733
|
+
) {
|
|
734
|
+
filterEditor = SelectFilter;
|
|
735
|
+
filterEditorProps = {
|
|
736
|
+
placeholder: column.filter.placeholder
|
|
737
|
+
? column.filter.placeholder
|
|
738
|
+
: "All Options",
|
|
739
|
+
dataSource: selectedDataSource,
|
|
740
|
+
};
|
|
741
|
+
} else {
|
|
742
|
+
filterEditor = null;
|
|
743
|
+
filterEditorProps = null;
|
|
744
|
+
}
|
|
745
|
+
|
|
438
746
|
return {
|
|
747
|
+
...commonProps,
|
|
439
748
|
name: relationName,
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
749
|
+
sortable: false,
|
|
750
|
+
filterEditor: filterEditor,
|
|
751
|
+
filterEditorProps: filterEditorProps,
|
|
443
752
|
render: ({ data }) => {
|
|
444
|
-
|
|
753
|
+
value = column.id.reduce((acc, id) => {
|
|
445
754
|
if (acc === "") {
|
|
446
755
|
return data[id];
|
|
447
756
|
} else {
|
|
448
|
-
|
|
757
|
+
if (acc && acc[id]) {
|
|
758
|
+
return acc[id];
|
|
759
|
+
} else {
|
|
760
|
+
return "";
|
|
761
|
+
}
|
|
449
762
|
}
|
|
450
763
|
}, "");
|
|
451
764
|
|
|
452
765
|
if (value) {
|
|
453
|
-
|
|
766
|
+
if (Array.isArray(column.nameFrom)) {
|
|
767
|
+
value = column.nameFrom
|
|
768
|
+
.map((nf) => value[nf])
|
|
769
|
+
.join(" ");
|
|
770
|
+
} else {
|
|
771
|
+
value = value[column.nameFrom];
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
if (
|
|
775
|
+
column.placeholder &&
|
|
776
|
+
column.placeholder !== ""
|
|
777
|
+
) {
|
|
778
|
+
return <span>{column.placeholder}</span>;
|
|
779
|
+
} else {
|
|
780
|
+
return <span>{value}</span>;
|
|
781
|
+
}
|
|
782
|
+
} else {
|
|
783
|
+
return null;
|
|
454
784
|
}
|
|
785
|
+
},
|
|
786
|
+
};
|
|
787
|
+
case "relationArray":
|
|
788
|
+
relationName =
|
|
789
|
+
column.id.reduce((acc, id) => acc + `${id}.`, "") +
|
|
790
|
+
column.nameFrom;
|
|
455
791
|
|
|
456
|
-
|
|
792
|
+
selectedDataSource = filterDataSource.reduce((acc, fds) => {
|
|
793
|
+
if (fds.id === relationName) {
|
|
794
|
+
return fds.dataset;
|
|
795
|
+
}
|
|
796
|
+
return acc;
|
|
797
|
+
}, null);
|
|
798
|
+
|
|
799
|
+
if (
|
|
800
|
+
column.filter &&
|
|
801
|
+
column.filter.type &&
|
|
802
|
+
column.filter.type === "select"
|
|
803
|
+
) {
|
|
804
|
+
filterEditor = SelectFilter;
|
|
805
|
+
filterEditorProps = {
|
|
806
|
+
placeholder: column.filter.placeholder
|
|
807
|
+
? column.filter.placeholder
|
|
808
|
+
: "All Options",
|
|
809
|
+
dataSource: selectedDataSource,
|
|
810
|
+
};
|
|
811
|
+
} else {
|
|
812
|
+
filterEditor = null;
|
|
813
|
+
filterEditorProps = null;
|
|
814
|
+
}
|
|
815
|
+
|
|
816
|
+
return {
|
|
817
|
+
...commonProps,
|
|
818
|
+
name: relationName,
|
|
819
|
+
sortable: false,
|
|
820
|
+
filterEditor: filterEditor,
|
|
821
|
+
filterEditorProps: filterEditorProps,
|
|
822
|
+
render: ({ data }) => {
|
|
823
|
+
const relationValue = column.id.reduce(
|
|
824
|
+
(acc, id) =>
|
|
825
|
+
acc === ""
|
|
826
|
+
? data[id]
|
|
827
|
+
: acc && acc[id]
|
|
828
|
+
? acc[id]
|
|
829
|
+
: "",
|
|
830
|
+
""
|
|
831
|
+
);
|
|
832
|
+
|
|
833
|
+
if (relationValue && Array.isArray(relationValue)) {
|
|
834
|
+
const nameProperties = Array.isArray(
|
|
835
|
+
column.nameFrom
|
|
836
|
+
)
|
|
837
|
+
? column.nameFrom
|
|
838
|
+
: [column.nameFrom];
|
|
839
|
+
|
|
840
|
+
const values = relationValue
|
|
841
|
+
.map((rv) => {
|
|
842
|
+
if (
|
|
843
|
+
column.childId &&
|
|
844
|
+
Array.isArray(column.childId)
|
|
845
|
+
) {
|
|
846
|
+
childValue = rv;
|
|
847
|
+
|
|
848
|
+
column.childId.forEach((a) => {
|
|
849
|
+
if (childValue[a]) {
|
|
850
|
+
childValue = childValue[a];
|
|
851
|
+
}
|
|
852
|
+
});
|
|
853
|
+
|
|
854
|
+
if (childValue) {
|
|
855
|
+
const propertyValues =
|
|
856
|
+
nameProperties
|
|
857
|
+
.map(
|
|
858
|
+
(prop) =>
|
|
859
|
+
childValue[prop]
|
|
860
|
+
)
|
|
861
|
+
.filter(
|
|
862
|
+
(value) =>
|
|
863
|
+
value !==
|
|
864
|
+
undefined &&
|
|
865
|
+
value !== null
|
|
866
|
+
);
|
|
867
|
+
return propertyValues.join(" ");
|
|
868
|
+
}
|
|
869
|
+
} else {
|
|
870
|
+
const propertyValues =
|
|
871
|
+
nameProperties
|
|
872
|
+
.map((prop) => rv[prop])
|
|
873
|
+
.filter(
|
|
874
|
+
(value) =>
|
|
875
|
+
value !==
|
|
876
|
+
undefined &&
|
|
877
|
+
value !== null
|
|
878
|
+
);
|
|
879
|
+
return propertyValues.join(" ");
|
|
880
|
+
}
|
|
881
|
+
})
|
|
882
|
+
.filter((value) => value !== "");
|
|
883
|
+
|
|
884
|
+
if (values.length > 0) {
|
|
885
|
+
let result = "";
|
|
886
|
+
|
|
887
|
+
if (
|
|
888
|
+
column.relation?.id &&
|
|
889
|
+
column.relation?.key
|
|
890
|
+
) {
|
|
891
|
+
const relationValue =
|
|
892
|
+
column.relation.key.reduce(
|
|
893
|
+
(acc, id) =>
|
|
894
|
+
acc === ""
|
|
895
|
+
? data[id]
|
|
896
|
+
: acc && acc[id]
|
|
897
|
+
? acc[id]
|
|
898
|
+
: "",
|
|
899
|
+
""
|
|
900
|
+
);
|
|
901
|
+
|
|
902
|
+
result = `${
|
|
903
|
+
relationValue[column.relation.id]
|
|
904
|
+
}<br />`;
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
if (
|
|
908
|
+
column.where &&
|
|
909
|
+
column.where.id &&
|
|
910
|
+
column.where.value
|
|
911
|
+
) {
|
|
912
|
+
if (
|
|
913
|
+
data[column.where.id] ===
|
|
914
|
+
column.where.value
|
|
915
|
+
) {
|
|
916
|
+
result += values.join("<br />");
|
|
917
|
+
}
|
|
918
|
+
} else {
|
|
919
|
+
result += values.join("<br />");
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
return <span>{parse(result)}</span>;
|
|
923
|
+
}
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
return null;
|
|
927
|
+
},
|
|
928
|
+
};
|
|
929
|
+
case "richtext":
|
|
930
|
+
return {
|
|
931
|
+
...commonProps,
|
|
932
|
+
name: column.id,
|
|
933
|
+
render: ({ data }) => {
|
|
934
|
+
if (data && data[column.id]) {
|
|
935
|
+
return <span>{parse(data[column.id])}</span>;
|
|
936
|
+
} else {
|
|
937
|
+
return null;
|
|
938
|
+
}
|
|
457
939
|
},
|
|
458
940
|
};
|
|
459
941
|
case "stage":
|
|
460
942
|
return {
|
|
943
|
+
...commonProps,
|
|
461
944
|
name: column.id,
|
|
462
|
-
|
|
463
|
-
defaultFlex: 1,
|
|
464
|
-
link: column.link ? column.link : {},
|
|
945
|
+
sortable: false,
|
|
465
946
|
render: ({ data }) => {
|
|
466
|
-
|
|
947
|
+
stage = "";
|
|
467
948
|
|
|
468
949
|
column.keyIds.forEach((a, b) => {
|
|
469
950
|
if (data[a] === 1) {
|
|
@@ -476,25 +957,75 @@ const DataGrid = (props) => {
|
|
|
476
957
|
};
|
|
477
958
|
case "time":
|
|
478
959
|
return {
|
|
960
|
+
...commonProps,
|
|
479
961
|
name: column.id,
|
|
480
|
-
header: column.label,
|
|
481
|
-
defaultFlex: 1,
|
|
482
|
-
link: column.link ? column.link : {},
|
|
483
962
|
render: ({ data }) => {
|
|
484
963
|
if (data && data[column.id]) {
|
|
485
964
|
data = moment(data[column.id]).format(
|
|
486
965
|
column.format ? column.format : "hh:mm A"
|
|
487
966
|
);
|
|
967
|
+
|
|
968
|
+
return <span>{data}</span>;
|
|
969
|
+
} else {
|
|
970
|
+
return null;
|
|
971
|
+
}
|
|
972
|
+
},
|
|
973
|
+
};
|
|
974
|
+
case "url":
|
|
975
|
+
return {
|
|
976
|
+
...commonProps,
|
|
977
|
+
name: column.id,
|
|
978
|
+
render: ({ data }) => {
|
|
979
|
+
if (data && data[column.id]) {
|
|
980
|
+
return (
|
|
981
|
+
<span>
|
|
982
|
+
<a
|
|
983
|
+
href={data[column.id]}
|
|
984
|
+
target="_blank"
|
|
985
|
+
>
|
|
986
|
+
Link
|
|
987
|
+
</a>
|
|
988
|
+
</span>
|
|
989
|
+
);
|
|
990
|
+
} else {
|
|
991
|
+
return null;
|
|
488
992
|
}
|
|
489
|
-
return <span>{data}</span>;
|
|
490
993
|
},
|
|
491
994
|
};
|
|
492
995
|
default:
|
|
996
|
+
selectedDataSource = filterDataSource.reduce((acc, fds) => {
|
|
997
|
+
if (fds.id === column.id) {
|
|
998
|
+
return fds.dataset;
|
|
999
|
+
}
|
|
1000
|
+
return acc;
|
|
1001
|
+
}, null);
|
|
1002
|
+
|
|
1003
|
+
if (column.filter && column.filter.type) {
|
|
1004
|
+
switch (column.filter.type) {
|
|
1005
|
+
case "select":
|
|
1006
|
+
filterEditor = SelectFilter;
|
|
1007
|
+
filterEditorProps = {
|
|
1008
|
+
placeholder: column.filter.placeholder
|
|
1009
|
+
? column.filter.placeholder
|
|
1010
|
+
: "All Options",
|
|
1011
|
+
dataSource: selectedDataSource,
|
|
1012
|
+
};
|
|
1013
|
+
break;
|
|
1014
|
+
default:
|
|
1015
|
+
filterEditor = null;
|
|
1016
|
+
filterEditorProps = null;
|
|
1017
|
+
break;
|
|
1018
|
+
}
|
|
1019
|
+
} else {
|
|
1020
|
+
filterEditor = null;
|
|
1021
|
+
filterEditorProps = null;
|
|
1022
|
+
}
|
|
1023
|
+
|
|
493
1024
|
return {
|
|
1025
|
+
...commonProps,
|
|
494
1026
|
name: column.id,
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
link: column.link ? column.link : {},
|
|
1027
|
+
filterEditor: filterEditor,
|
|
1028
|
+
filterEditorProps: filterEditorProps,
|
|
498
1029
|
};
|
|
499
1030
|
}
|
|
500
1031
|
};
|
|
@@ -504,7 +1035,7 @@ const DataGrid = (props) => {
|
|
|
504
1035
|
if (settings.length > 0) {
|
|
505
1036
|
newColumns.push({
|
|
506
1037
|
name: "setting",
|
|
507
|
-
header: "",
|
|
1038
|
+
header: "Action",
|
|
508
1039
|
defaultWidth: 100,
|
|
509
1040
|
textAlign: "center",
|
|
510
1041
|
render: ({ data }) => {
|
|
@@ -529,10 +1060,114 @@ const DataGrid = (props) => {
|
|
|
529
1060
|
}
|
|
530
1061
|
|
|
531
1062
|
setGridColumns(newColumns);
|
|
532
|
-
|
|
1063
|
+
|
|
1064
|
+
const newFilterValue = columns
|
|
1065
|
+
.filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
|
|
1066
|
+
.map((column) => {
|
|
1067
|
+
// Map these filtered columns to a new object array
|
|
1068
|
+
const filterName = Array.isArray(column.id)
|
|
1069
|
+
? column.id.reduce((acc, id) => acc + `${id}.`, "") +
|
|
1070
|
+
column.nameFrom
|
|
1071
|
+
: column.id;
|
|
1072
|
+
|
|
1073
|
+
return {
|
|
1074
|
+
key: column.filter.key ? column.filter.key : null,
|
|
1075
|
+
name: filterName,
|
|
1076
|
+
operator: column.filter.operator,
|
|
1077
|
+
type: column.filter.type,
|
|
1078
|
+
value: column.filter.value ? column.filter.value : "",
|
|
1079
|
+
};
|
|
1080
|
+
});
|
|
1081
|
+
|
|
1082
|
+
setFilterValue(newFilterValue);
|
|
1083
|
+
}, [columns, filterDataSource]);
|
|
1084
|
+
|
|
1085
|
+
useEffect(() => {
|
|
1086
|
+
if (setFilterData) {
|
|
1087
|
+
setFilterData(filterValue);
|
|
1088
|
+
}
|
|
1089
|
+
}, [filterValue]);
|
|
1090
|
+
|
|
1091
|
+
useEffect(() => {
|
|
1092
|
+
columns.forEach((column) => {
|
|
1093
|
+
if (column.filter && column.filter.url) {
|
|
1094
|
+
CustomFetch(
|
|
1095
|
+
column.filter.url,
|
|
1096
|
+
"POST",
|
|
1097
|
+
column.filter.where ? { where: column.filter.where } : {},
|
|
1098
|
+
(res) => {
|
|
1099
|
+
const filterName = Array.isArray(column.id)
|
|
1100
|
+
? column.id.reduce(
|
|
1101
|
+
(acc, id) => acc + `${id}.`,
|
|
1102
|
+
""
|
|
1103
|
+
) + column.nameFrom
|
|
1104
|
+
: column.id;
|
|
1105
|
+
|
|
1106
|
+
const filterIndex = filterDataSource.findIndex(
|
|
1107
|
+
(filter) => filter.id === filterName
|
|
1108
|
+
);
|
|
1109
|
+
|
|
1110
|
+
if (filterIndex >= 0) {
|
|
1111
|
+
const updatedFilter = {
|
|
1112
|
+
...filterDataSource[filterIndex],
|
|
1113
|
+
dataset: res.data,
|
|
1114
|
+
};
|
|
1115
|
+
const updatedDataSource = [
|
|
1116
|
+
...filterDataSource.slice(0, filterIndex),
|
|
1117
|
+
updatedFilter,
|
|
1118
|
+
...filterDataSource.slice(filterIndex + 1),
|
|
1119
|
+
];
|
|
1120
|
+
setFilterDataSource(updatedDataSource);
|
|
1121
|
+
} else {
|
|
1122
|
+
const newFilter = {
|
|
1123
|
+
id: filterName,
|
|
1124
|
+
dataset: res.data,
|
|
1125
|
+
};
|
|
1126
|
+
setFilterDataSource((prevState) => [
|
|
1127
|
+
...prevState,
|
|
1128
|
+
newFilter,
|
|
1129
|
+
]);
|
|
1130
|
+
}
|
|
1131
|
+
}
|
|
1132
|
+
);
|
|
1133
|
+
} else if (column.filter && column.filter.options) {
|
|
1134
|
+
const filterName = Array.isArray(column.id)
|
|
1135
|
+
? column.id.reduce((acc, id) => acc + `${id}.`, "") +
|
|
1136
|
+
column.nameFrom
|
|
1137
|
+
: column.id;
|
|
1138
|
+
|
|
1139
|
+
const newFilter = {
|
|
1140
|
+
id: filterName,
|
|
1141
|
+
dataset: column.filter.options,
|
|
1142
|
+
};
|
|
1143
|
+
|
|
1144
|
+
setFilterDataSource((prevState) => [...prevState, newFilter]);
|
|
1145
|
+
}
|
|
1146
|
+
});
|
|
1147
|
+
}, []);
|
|
533
1148
|
|
|
534
1149
|
// Data Grid Styling
|
|
535
|
-
const
|
|
1150
|
+
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
|
|
1151
|
+
const gridStyle = {
|
|
1152
|
+
minHeight: windowHeight * 0.7 > 550 ? windowHeight * 0.7 : 550,
|
|
1153
|
+
boxShadow: "none",
|
|
1154
|
+
};
|
|
1155
|
+
const headerProps = {
|
|
1156
|
+
style: style ? style : {},
|
|
1157
|
+
};
|
|
1158
|
+
|
|
1159
|
+
useEffect(() => {
|
|
1160
|
+
const handleResize = () => {
|
|
1161
|
+
setWindowHeight(window.innerHeight);
|
|
1162
|
+
};
|
|
1163
|
+
|
|
1164
|
+
window.addEventListener("resize", handleResize);
|
|
1165
|
+
|
|
1166
|
+
// Clean up the event listener
|
|
1167
|
+
return () => {
|
|
1168
|
+
window.removeEventListener("resize", handleResize);
|
|
1169
|
+
};
|
|
1170
|
+
}, []);
|
|
536
1171
|
|
|
537
1172
|
return (
|
|
538
1173
|
<>
|
|
@@ -328,7 +328,7 @@ function Form(props) {
|
|
|
328
328
|
<div className="grid">
|
|
329
329
|
<div className="grid__row">
|
|
330
330
|
<div className="grid__full cmstitle">
|
|
331
|
-
<h1>{data.title}</h1>
|
|
331
|
+
<h1>{data.title ? data.title : form.update.title}</h1>
|
|
332
332
|
<div className="cmstitle__actions">
|
|
333
333
|
<button
|
|
334
334
|
className="btn actionbtn"
|
package/package.json
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"react-dom": "^17.0.1"
|
|
35
35
|
},
|
|
36
36
|
"name": "@visns-studio/visns-components",
|
|
37
|
-
"version": "1.3.
|
|
37
|
+
"version": "1.3.15",
|
|
38
38
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
39
39
|
"main": "index.js",
|
|
40
40
|
"devDependencies": {},
|