@visns-studio/visns-components 1.5.11 → 1.6.1

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/crm/visns-data-grid.jsx +1664 -1644
  2. package/package.json +53 -53
package/components/crm/visns-data-grid.jsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import React, {
2
- forwardRef,
3
- useCallback,
4
- useEffect,
5
- useImperativeHandle,
6
- useState,
2
+ forwardRef,
3
+ useCallback,
4
+ useEffect,
5
+ useImperativeHandle,
6
+ useState,
7
7
  } from "react";
8
8
  import { useNavigate } from "react-router-dom";
9
9
  import axios from "axios";
@@ -19,20 +19,20 @@ import ReactDataGrid from "@inovua/reactdatagrid-community";
19
19
  import { confirmAlert } from "react-confirm-alert";
20
20
  import { toast } from "react-toastify";
21
21
  import {
22
- ArrowCounterClockwise,
23
- Backspace,
24
- Check,
25
- Clock,
26
- CloudDownload,
27
- Copy,
28
- Edit,
29
- Folder,
30
- Inbox,
31
- Network,
32
- Ribbon,
33
- Search,
34
- ShippingBoxV1,
35
- TriangleAlert,
22
+ ArrowCounterClockwise,
23
+ Backspace,
24
+ Check,
25
+ Clock,
26
+ CloudDownload,
27
+ Copy,
28
+ Edit,
29
+ Folder,
30
+ Inbox,
31
+ Network,
32
+ Ribbon,
33
+ Search,
34
+ ShippingBoxV1,
35
+ TriangleAlert,
36
36
  } from "akar-icons";
37
37
 
38
38
  import "@inovua/reactdatagrid-community/index.css";
@@ -42,1635 +42,1655 @@ import CustomFetch from "./visns-fetch";
42
42
  import Form from "./visns-form";
43
43
 
44
44
  const loadData = async (
45
- { skip, limit, sortInfo, currentData, filterValue, groupBy },
46
- search,
47
- ajaxSetting
45
+ { skip, limit, sortInfo, currentData, filterValue, groupBy },
46
+ search,
47
+ ajaxSetting
48
48
  ) => {
49
- const url = ajaxSetting.url;
50
- const page = Math.floor(skip / limit) + 1;
51
- const params = { page, sortInfo, take: limit, search: search, where: [] };
52
-
53
- if (sortInfo) {
54
- params.sortBy = sortInfo.name;
55
- params.sort = sortInfo.dir === 1 ? "asc" : "desc";
56
- }
57
-
58
- if (ajaxSetting && ajaxSetting.where) {
59
- params.where = ajaxSetting.where;
60
- }
61
-
62
- if (filterValue) {
63
- filterValue.forEach((fv) => {
64
- const identifier = fv.key ? fv.key : fv.name;
65
- const existingIndex = params.where.findIndex(
66
- (w) => w.id === identifier
67
- );
68
-
69
- if (fv.value !== null && fv.value !== "") {
70
- if (existingIndex !== -1) {
71
- params.where[existingIndex].value = fv.value;
72
- } else {
73
- params.where.push({
74
- id: identifier,
75
- value: fv.value,
76
- operator: fv.operator,
77
- });
78
- }
79
- } else {
80
- if (existingIndex !== -1) {
81
- params.where.splice(existingIndex, 1);
82
- }
83
- }
84
- });
85
- }
86
-
87
- try {
88
- const response = await axios.post(url, params);
89
- const { data, total } = response.data;
90
- return { data, count: total };
91
- } catch (error) {
92
- console.error("Error fetching data:", error);
93
- return { data: [], count: 0 };
94
- }
49
+ const url = ajaxSetting.url;
50
+ const page = Math.floor(skip / limit) + 1;
51
+ const params = { page, sortInfo, take: limit, search: search, where: [] };
52
+
53
+ if (sortInfo) {
54
+ params.sortBy = sortInfo.name;
55
+ params.sort = sortInfo.dir === 1 ? "asc" : "desc";
56
+ }
57
+
58
+ if (ajaxSetting && ajaxSetting.where) {
59
+ params.where = ajaxSetting.where;
60
+ }
61
+
62
+ if (filterValue) {
63
+ filterValue.forEach((fv) => {
64
+ const identifier = fv.key ? fv.key : fv.name;
65
+ const existingIndex = params.where.findIndex(
66
+ (w) => w.id === identifier
67
+ );
68
+
69
+ if (fv.value !== null && fv.value !== "") {
70
+ if (existingIndex !== -1) {
71
+ params.where[existingIndex].value = fv.value;
72
+ } else {
73
+ params.where.push({
74
+ id: identifier,
75
+ value: fv.value,
76
+ operator: fv.operator,
77
+ });
78
+ }
79
+ } else {
80
+ if (existingIndex !== -1) {
81
+ params.where.splice(existingIndex, 1);
82
+ }
83
+ }
84
+ });
85
+ }
86
+
87
+ try {
88
+ const response = await axios.post(url, params);
89
+ const { data, total } = response.data;
90
+ return { data, count: total };
91
+ } catch (error) {
92
+ console.error("Error fetching data:", error);
93
+ return { data: [], count: 0 };
94
+ }
95
95
  };
96
96
 
97
97
  const DataGrid = forwardRef(
98
- (
99
- {
100
- ajaxSetting,
101
- form,
102
- columns,
103
- settings,
104
- setFilterData,
105
- style,
106
- tableFilters,
107
- historySearch,
108
- historyUrl,
109
- },
110
- ref
111
- ) => {
112
- const navigate = useNavigate();
113
-
114
- /** Modal States */
115
- const [formData, setFormData] = useState({});
116
- const [formType, setFormType] = useState("");
117
- const [formId, setFormId] = useState(0);
118
- const [modalShow, setModalShow] = useState(false);
119
-
120
- /** Modal Functions */
121
- const childDropdownCallback = (data) => {
122
- let _form = { ...formData };
123
-
124
- if (formData.fields.length > 0) {
125
- formData.fields.forEach((a, b) => {
126
- if (a.id === data.id) {
127
- _form.fields[b].options = data.data;
128
- }
129
- });
130
- }
131
-
132
- setFormData(_form);
133
- };
134
-
135
- const modalOpen = (formType, formId) => {
136
- setModalShow(true);
137
- setFormType(formType);
138
- setFormId(formId);
139
- };
140
-
141
- const modalClose = () => {
142
- setModalShow(false);
143
- };
144
-
145
- useEffect(() => {
146
- setFormData(form);
147
- }, [form]);
148
-
149
- /** Table States */
150
- const [dataReload, setDataReload] = useState(0);
151
- const [dSearch, setDSearch] = useState("");
152
- const data = useCallback(
153
- (params) => loadData(params, dSearch, ajaxSetting),
154
- [ajaxSetting, dataReload, dSearch]
155
- );
156
- const [filterDataSource, setFilterDataSource] = useState([]);
157
- const [filterValue, setFilterValue] = useState([]);
158
- const [gridColumns, setGridColumns] = useState([]);
159
- const limit = ajaxSetting.take || 10;
160
- const [search, setSearch] = useState("");
161
- const sortInfo =
162
- ajaxSetting.sortBy && ajaxSetting.sort
163
- ? {
164
- name: ajaxSetting.sortBy,
165
- dir: ajaxSetting.sort === "asc" ? 1 : -1,
166
- }
167
- : null;
168
-
169
- /** Table Functions */
170
- useImperativeHandle(ref, () => ({
171
- reload: () => {
172
- handleReload();
173
- },
174
- }));
175
-
176
- const handleChangeSearch = (e) => {
177
- const { value } = e.target;
178
- setSearch(value);
179
- };
180
-
181
- const handleSettingClick = (s, d) => {
182
- switch (s.id) {
183
- case "update":
184
- modalOpen("update", d.id);
185
- break;
186
- case "delete":
187
- confirmAlert({
188
- title: "Delete Item",
189
- message: `Are you sure you want to delete ${
190
- d.name ? d.name : d.label ? d.label : "this item"
191
- }?`,
192
- buttons: [
193
- {
194
- label: "Yes",
195
- onClick: () =>
196
- CustomFetch(
197
- form.url + "/" + d[form.primaryKey],
198
- "DELETE",
199
- {},
200
- (result) => {
201
- if (result.error === "") {
202
- const min = 0;
203
- const max = 999999999;
204
- const randomNumber = Math.floor(
205
- Math.random() *
206
- (max - min + 1) +
207
- min
208
- );
209
-
210
- setDataReload(randomNumber);
211
-
212
- toast.success(
213
- `The selected item has been deleted.`
214
- );
215
- } else {
216
- toast.error(
217
- <div>
218
- {parse(result.error)}
219
- </div>
220
- );
221
- }
222
- }
223
- ),
224
- },
225
- {
226
- label: "No",
227
- onClick: () => close(),
228
- },
229
- ],
230
- });
231
- break;
232
- default:
233
- confirmAlert({
234
- title: s.title,
235
- message: "",
236
- buttons: [
237
- {
238
- label: "Yes",
239
- onClick: () =>
240
- CustomFetch(
241
- s.url + "/" + d[form.primaryKey],
242
- s.method,
243
- {},
244
- function (result) {
245
- if (result.error === "") {
246
- const min = 0;
247
- const max = 999999999;
248
- const randomNumber = Math.floor(
249
- Math.random() *
250
- (max - min + 1) +
251
- min
252
- );
253
-
254
- setDataReload(randomNumber);
255
-
256
- toast.success(String(s.title));
257
- } else {
258
- toast.error(
259
- <div>
260
- {parse(result.error)}
261
- </div>
262
- );
263
- }
264
- }
265
- ),
266
- },
267
- {
268
- label: "No",
269
- onClick: () => close(),
270
- },
271
- ],
272
- });
273
- break;
274
- }
275
- };
276
-
277
- const handleReload = () => {
278
- const min = 0;
279
- const max = 999999999;
280
- const randomNumber = Math.floor(
281
- Math.random() * (max - min + 1) + min
282
- );
283
-
284
- setDataReload(randomNumber);
285
- };
286
-
287
- const onRowClick = useCallback((rowProps, event) => {
288
- const cellElement = event.target.closest(
289
- ".InovuaReactDataGrid__cell"
290
- );
291
- const columnIndex = Array.from(
292
- cellElement.parentNode.children
293
- ).indexOf(cellElement);
294
-
295
- if (columnIndex === rowProps.columns.length - 1) {
296
- } else {
297
- if (
298
- rowProps.columns[columnIndex].link &&
299
- rowProps.columns[columnIndex].link.url
300
- ) {
301
- if (rowProps.columns[columnIndex].link.folder) {
302
- window.location.href =
303
- rowProps.columns[columnIndex].link.url +
304
- rowProps.data[
305
- rowProps.columns[columnIndex].link.key
306
- ] +
307
- "/" +
308
- rowProps.columns[columnIndex].link.folder;
309
- } else {
310
- navigate(
311
- `${rowProps.columns[columnIndex].link.url}${
312
- rowProps.data[
313
- rowProps.columns[columnIndex].link.key
314
- ]
315
- }`
316
- );
317
- }
318
- } else if (rowProps.columns[columnIndex].link.popup) {
319
- window.open(
320
- `${rowProps.columns[columnIndex].link.popup}/${
321
- rowProps.data[
322
- rowProps.columns[columnIndex].link.key
323
- ]
324
- }`,
325
- "",
326
- "width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
327
- );
328
- } else {
329
- modalOpen("update", rowProps.data[form.primaryKey]);
330
- }
331
- }
332
- }, []);
333
-
334
- const onRenderRow = useCallback((rowProps) => {
335
- // save the original handlers to be called later
336
- const { onClick } = rowProps;
337
-
338
- rowProps.onClick = (event) => {
339
- onRowClick(rowProps, event);
340
- if (onClick) {
341
- onClick(event);
342
- }
343
- };
344
- }, []);
345
-
346
- const renderCreateButton = () => {
347
- if (form.createDisable && form.createDisable === true) {
348
- return null;
349
- }
350
-
351
- return (
352
- <div className="filterAction--alt">
353
- <button
354
- className="btn"
355
- onClick={() => {
356
- if (form.create) {
357
- modalOpen("create", 0);
358
- } else {
359
- if (form.url) {
360
- window.open(
361
- form.url,
362
- "",
363
- "width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
364
- );
365
- }
366
- }
367
- }}
368
- >
369
- <div className="icon-plus"></div> Create
370
- </button>
371
- </div>
372
- );
373
- };
374
-
375
- const renderSearch = () => {
376
- const searchEnable = !(
377
- form.searchDisable && form.searchDisable === true
378
- );
379
-
380
- return searchEnable ? (
381
- <div className="filterInput--alt">
382
- <div className="icon-search">
383
- <Search strokeWidth={2} size={18} />
384
- </div>
385
- <input
386
- type="text"
387
- placeholder="Search"
388
- value={search}
389
- onChange={handleChangeSearch}
390
- />
391
- </div>
392
- ) : null;
393
- };
394
-
395
- const handleCoding = (c, data) => {
396
- const icons = [];
397
- const assetPath =
398
- import.meta.env.REACT_APP_ASSET_PATH !== undefined
399
- ? import.meta.env.REACT_APP_ASSET_PATH
400
- : "";
401
-
402
- const addIcon = (src, icon, alt, tooltipContent, key) => {
403
- if (src && src !== "") {
404
- icons.push(
405
- <img
406
- src={`${assetPath}${src}`}
407
- alt={alt}
408
- data-tooltip-id="system-tooltip"
409
- data-tooltip-content={tooltipContent}
410
- key={key}
411
- />
412
- );
413
- } else {
414
- let IconComponent = null;
415
-
416
- if (icon === "archive") {
417
- IconComponent = ShippingBoxV1;
418
- } else if (icon === "folder") {
419
- IconComponent = Folder;
420
- } else if (icon === "inbox") {
421
- IconComponent = Inbox;
422
- } else if (icon === "network") {
423
- IconComponent = Network;
424
- } else if (icon === "urgent") {
425
- IconComponent = TriangleAlert;
426
- }
427
-
428
- if (IconComponent) {
429
- icons.push(
430
- <IconComponent
431
- data-tooltip-id="system-tooltip"
432
- data-tooltip-content={tooltipContent}
433
- strokeWidth={2}
434
- size={18}
435
- className="tdaction"
436
- key={key}
437
- />
438
- );
439
- }
440
- }
441
- };
442
-
443
- c.config.forEach((config, configKey) => {
444
- const fieldValue = config.id.reduce((acc, id) => {
445
- if (acc === "") {
446
- return data[id];
447
- } else {
448
- return acc[id];
449
- }
450
- }, "");
451
-
452
- const iconData = config.icons.find(
453
- (icon) => icon.value === fieldValue
454
- );
455
-
456
- if (
457
- iconData &&
458
- (iconData.src || iconData.icon) &&
459
- iconData.alt &&
460
- iconData.tooltipContent
461
- ) {
462
- addIcon(
463
- iconData.src ? iconData.src : null,
464
- iconData.icon ? iconData.icon : null,
465
- iconData.alt,
466
- iconData.tooltipContent,
467
- `coding-${config.id[0]}-${configKey}`
468
- );
469
- }
470
- });
471
-
472
- return icons;
473
- };
474
-
475
- /** Table Hooks */
476
- useEffect(() => {
477
- const delayedSetDSearch = debounce(() => {
478
- setDSearch(search);
479
- }, 300); // Adjust the delay (in milliseconds) according to your needs
480
-
481
- delayedSetDSearch();
482
-
483
- return delayedSetDSearch.cancel; // Cleanup the debounce timer on unmount
484
- }, [search, setDSearch]);
485
-
486
- const renderSetting = (s, d) => {
487
- let iconStyle = {};
488
- let allow = true;
489
-
490
- if (s.active) {
491
- if (
492
- d.hasOwnProperty(s.active.id) &&
493
- d[s.active.id] === s.active.value
494
- ) {
495
- iconStyle = {
496
- color: s.active.colour,
497
- };
498
- } else if (
499
- s.active.type === "greater" &&
500
- d[s.active.id] > s.active.value
501
- ) {
502
- iconStyle = {
503
- color: s.active.colour,
504
- };
505
- } else if (
506
- s.active.type === "not null" &&
507
- d[s.active.id] !== null
508
- ) {
509
- iconStyle = {
510
- color: s.active.colour,
511
- };
512
- }
513
- }
514
-
515
- const handleIconClick = (e) => {
516
- e.preventDefault();
517
- e.stopPropagation();
518
- handleSettingClick(s, d);
519
- };
520
-
521
- const tooltipContent =
522
- iconStyle && iconStyle.color ? s.active.title : s.title;
523
-
524
- if (s.hide && s.hide.id && s.hide.value >= 0) {
525
- if (
526
- d.hasOwnProperty(s.hide.id) &&
527
- d[s.hide.id] === s.hide.value
528
- ) {
529
- allow = false;
530
- }
531
- }
532
-
533
- if (allow) {
534
- switch (s.id) {
535
- case "archive":
536
- return getIconComponent(ShippingBoxV1);
537
- case "complete":
538
- return getIconComponent(Check);
539
- case "copy":
540
- return getIconComponent(Copy);
541
- case "delete":
542
- return getIconComponent(Backspace);
543
- case "family":
544
- return getIconComponent(Network);
545
- case "primary":
546
- return getIconComponent(Ribbon);
547
- case "restore":
548
- return getIconComponent(ArrowCounterClockwise);
549
- case "ssa":
550
- return getIconComponent(Clock);
551
- case "update":
552
- return getIconComponent(Edit);
553
- default:
554
- return null;
555
- }
556
- } else {
557
- return null;
558
- }
559
-
560
- function getIconComponent(IconComponent) {
561
- return (
562
- <span key={`setting-${s.id}`} onClick={handleIconClick}>
563
- <IconComponent
564
- data-tooltip-id="system-tooltip"
565
- data-tooltip-content={tooltipContent}
566
- strokeWidth={2}
567
- size={18}
568
- className="tdaction"
569
- style={iconStyle}
570
- />
571
- </span>
572
- );
573
- }
574
- };
575
-
576
- const renderColumnContextMenu = useCallback(
577
- (menuProps, { cellProps }) => {
578
- const filteredItems = menuProps.items
579
- .map((item, key) => {
580
- if (key >= 6 && key <= 9) {
581
- return null; // Skip items with keys 6-9 [lock columns setting]
582
- }
583
- return item;
584
- })
585
- .filter(Boolean); // Filter out any null items
586
-
587
- menuProps.items = filteredItems;
588
- },
589
- []
590
- );
591
-
592
- useEffect(() => {
593
- const renderColumn = (column) => {
594
- let childValue;
595
- let date;
596
- let filterEditor = null;
597
- let filterEditorProps = null;
598
- let fileUrl = null;
599
- let icons = [];
600
- let relationName;
601
- let selectedDataSource = null;
602
- let stage;
603
- let style;
604
- let value;
605
-
606
- const commonProps = {
607
- header: column.label,
608
- defaultFlex: 1,
609
- link: column.link ? column.link : {},
610
- minWidth:
611
- column.minWidth && column.minWidth > 0
612
- ? column.minWidth
613
- : undefined,
614
- maxWidth:
615
- column.maxWidth && column.maxWidth > 0
616
- ? column.maxWidth
617
- : undefined,
618
- };
619
-
620
- switch (column.type) {
621
- case "address":
622
- return {
623
- ...commonProps,
624
- name: `${column.type}.${column.id}`,
625
- render: ({ data }) => {
626
- value = "";
627
-
628
- if (data.address1) {
629
- value += `${data.address1} `;
630
- }
631
-
632
- if (data.address2) {
633
- value += `${data.address2} `;
634
- }
635
-
636
- if (data.suburb) {
637
- value += `${data.suburb} `;
638
- }
639
-
640
- if (data.postcode) {
641
- value += `${data.postcode} `;
642
- }
643
-
644
- return <span>{value}</span>;
645
- },
646
- };
647
- case "age":
648
- if (column.filter && column.filter.type) {
649
- switch (column.filter.type) {
650
- case "number":
651
- filterEditor = NumberFilter;
652
- break;
653
- default:
654
- filterEditor = null;
655
- break;
656
- }
657
- } else {
658
- filterEditor = null;
659
- }
660
-
661
- return {
662
- ...commonProps,
663
- type: "number",
664
- filterEditor: filterEditor,
665
- name: `${column.type}.${column.id}`,
666
- render: ({ data }) => {
667
- value = column.id.reduce((acc, id) => {
668
- if (acc === "") {
669
- return data[id];
670
- } else {
671
- return acc[id];
672
- }
673
- }, "");
674
-
675
- if (value !== "" && value !== null) {
676
- date = moment(value);
677
-
678
- return (
679
- <span>
680
- {moment().diff(
681
- date,
682
- column.duration
683
- ? column.duration
684
- : "years"
685
- )}
686
- </span>
687
- );
688
- } else {
689
- return null;
690
- }
691
- },
692
- };
693
- case "arrayCount":
694
- return {
695
- ...commonProps,
696
- name: `${column.type}.${column.id}`,
697
- sortable: false,
698
- render: ({ data }) => {
699
- if (data && data[column.id]) {
700
- return data[column.id].length;
701
- } else {
702
- return null;
703
- }
704
- },
705
- };
706
- case "coding":
707
- return {
708
- ...commonProps,
709
- name: `${column.type}.${column.id}`,
710
- sortable: false,
711
- render: ({ data }) => {
712
- if (data) {
713
- return handleCoding(column, data);
714
- } else {
715
- return null;
716
- }
717
- },
718
- };
719
- case "created_by":
720
- return {
721
- ...commonProps,
722
- name: `${column.type}.${column.id}`,
723
- sortable: false,
724
- render: ({ data }) => {
725
- if (
726
- data.audits[0] &&
727
- data.audits[0].user &&
728
- data.audits[0].user.name
729
- ) {
730
- value = data.audits[0].user.name;
731
-
732
- return <span>{value}</span>;
733
- } else {
734
- return null;
735
- }
736
- },
737
- };
738
- case "currency":
739
- return {
740
- ...commonProps,
741
- name: column.id,
742
- render: ({ data }) => {
743
- if (data) {
744
- data = numeral(data[column.id]).format(
745
- "$0,0.00"
746
- );
747
-
748
- return <span>{data}</span>;
749
- } else {
750
- return null;
751
- }
752
- },
753
- };
754
- case "date":
755
- if (column.filter && column.filter.type) {
756
- filterEditor = DateFilter;
757
- filterEditorProps = (props, { index }) => {
758
- return {
759
- dateFormat: "DD-MM-YYYY",
760
- placeholder: "All Dates",
761
- };
762
- };
763
- } else {
764
- filterEditor = null;
765
- filterEditorProps = null;
766
- }
767
-
768
- return {
769
- ...commonProps,
770
- name: column.id,
771
- filterEditor: filterEditor,
772
- filterEditorProps: filterEditorProps,
773
- render: ({ data }) => {
774
- if (
775
- data &&
776
- data[column.id] &&
777
- moment(data[column.id]).isValid() &&
778
- moment(data[column.id]).format(
779
- "YYYY-MM-DD"
780
- ) !== "1970-01-01"
781
- ) {
782
- const value = moment(
783
- data[column.id]
784
- ).format(column.format || "DD-MM-YYYY");
785
- style = {};
786
-
787
- if (
788
- column.active &&
789
- column.active.id &&
790
- column.active.value === "expired"
791
- ) {
792
- if (
793
- data[column.active.id] &&
794
- moment(
795
- data[column.active.id]
796
- ).isBefore(moment())
797
- ) {
798
- style = {
799
- color: column.active.colour,
800
- };
801
- }
802
- }
803
-
804
- return <span style={style}>{value}</span>;
805
- } else {
806
- return null;
807
- }
808
- },
809
- };
810
- case "daterange":
811
- if (column.filter && column.filter.type) {
812
- filterEditor = DateFilter;
813
- filterEditorProps = (props, { index }) => {
814
- return {
815
- dateFormat: "DD-MM-YYYY",
816
- placeholder: "All Dates",
817
- };
818
- };
819
- } else {
820
- filterEditor = null;
821
- filterEditorProps = null;
822
- }
823
-
824
- return {
825
- ...commonProps,
826
- name: `${column.id[0]}.${column.id[1]}.`,
827
- filterEditor: filterEditor,
828
- filterEditorProps: filterEditorProps,
829
- render: ({ data }) => {
830
- if (
831
- data &&
832
- data[column.id[0]] &&
833
- moment(data[column.id[0]]).isValid() &&
834
- moment(data[column.id[0]]).format(
835
- "YYYY-MM-DD"
836
- ) !== "1970-01-01"
837
- ) {
838
- value = moment(data[column.id[0]]).format(
839
- column.format || "DD-MM-YYYY"
840
- );
841
- }
842
-
843
- if (
844
- data &&
845
- data[column.id[1]] &&
846
- moment(data[column.id[1]]).isValid() &&
847
- moment(data[column.id[1]]).format(
848
- "YYYY-MM-DD"
849
- ) !== "1970-01-01"
850
- ) {
851
- value += ` - ${moment(
852
- data[column.id[1]]
853
- ).format(column.format || "DD-MM-YYYY")}`;
854
- }
855
-
856
- return <span>{value}</span>;
857
- },
858
- };
859
- case "datetime":
860
- if (column.filter && column.filter.type) {
861
- filterEditor = DateFilter;
862
- filterEditorProps = (props, { index }) => {
863
- return {
864
- dateFormat: "DD-MM-YYYY",
865
- placeholder: "All Dates",
866
- };
867
- };
868
- } else {
869
- filterEditor = null;
870
- filterEditorProps = null;
871
- }
872
-
873
- return {
874
- ...commonProps,
875
- name: column.id,
876
- filterEditor: filterEditor,
877
- filterEditorProps: filterEditorProps,
878
- render: ({ data }) => {
879
- if (
880
- data &&
881
- data[column.id] &&
882
- moment(data[column.id]).isValid() &&
883
- moment(data[column.id]).format(
884
- "YYYY-MM-DD"
885
- ) !== "1970-01-01"
886
- ) {
887
- data = moment(data[column.id]).format(
888
- column.format
889
- ? column.format
890
- : "DD-MM-YYYY hh:mm A"
891
- );
892
-
893
- return <span>{data}</span>;
894
- } else {
895
- return null;
896
- }
897
- },
898
- };
899
- case "file":
900
- return {
901
- ...commonProps,
902
- name: column.id,
903
- sortable: false,
904
- render: ({ data }) => {
905
- if (data) {
906
- return (
907
- <span>
908
- <CloudDownload
909
- data-tooltip-id="system-tooltip"
910
- data-tooltip-content="Download File"
911
- strokeWidth={2}
912
- size={18}
913
- className="tdaction"
914
- />
915
- </span>
916
- );
917
- } else {
918
- return null;
919
- }
920
- },
921
- };
922
- case "icons":
923
- return {
924
- ...commonProps,
925
- name: column.id,
926
- sortable: false,
927
- render: ({ data }) => {
928
- icons = [];
929
-
930
- if (column.icons && column.icons.length > 0) {
931
- column.icons.forEach((icon) => {
932
- icons.push(
933
- <img
934
- src={icon.url}
935
- alt={icon.name}
936
- data-tooltip-id="system-tooltip"
937
- data-tooltip-content={icon.name}
938
- />
939
- );
940
- });
941
- }
942
-
943
- if (data) {
944
- return <span>{icons}</span>;
945
- } else {
946
- return null;
947
- }
948
- },
949
- };
950
- case "image":
951
- return {
952
- ...commonProps,
953
- name: column.id,
954
- render: ({ data }) => {
955
- if (data && data[column.id]) {
956
- const fileUrl =
957
- data[column.id][0]?.file_url ||
958
- data[column.id]?.file_url;
959
-
960
- if (fileUrl) {
961
- return (
962
- <span>
963
- {parse(
964
- `<img width="150" src="${fileUrl}" />`
965
- )}
966
- </span>
967
- );
968
- }
969
- }
970
-
971
- return null;
972
- },
973
- };
974
- case "json":
975
- return {
976
- ...commonProps,
977
- name: column.id,
978
- render: ({ data }) => {
979
- if (
980
- data &&
981
- data[column.id] &&
982
- data[column.id][column.jsonData]
983
- ) {
984
- data = data[column.id][column.jsonData];
985
-
986
- return <span>{data}</span>;
987
- } else {
988
- return null;
989
- }
990
- },
991
- };
992
- case "number":
993
- return {
994
- ...commonProps,
995
- name: column.id,
996
- type: "number",
997
- };
998
- case "option":
999
- selectedDataSource = filterDataSource.reduce(
1000
- (acc, fds) => {
1001
- if (fds.id === column.id) {
1002
- return fds.dataset;
1003
- }
1004
- return acc;
1005
- },
1006
- null
1007
- );
1008
-
1009
- if (
1010
- column.filter &&
1011
- column.filter.type &&
1012
- column.filter.type === "select"
1013
- ) {
1014
- filterEditor = SelectFilter;
1015
- filterEditorProps = {
1016
- placeholder: column.filter.placeholder
1017
- ? column.filter.placeholder
1018
- : "All Options",
1019
- dataSource: selectedDataSource,
1020
- };
1021
- } else {
1022
- filterEditor = null;
1023
- filterEditorProps = null;
1024
- }
1025
-
1026
- return {
1027
- ...commonProps,
1028
- name: column.id,
1029
- filterEditor: filterEditor,
1030
- filterEditorProps: filterEditorProps,
1031
- render: ({ data }) => {
1032
- if (
1033
- data &&
1034
- column.options &&
1035
- column.options[data[column.id]]
1036
- ) {
1037
- data = column.options[data[column.id]];
1038
-
1039
- return <span>{data}</span>;
1040
- } else {
1041
- return null;
1042
- }
1043
- },
1044
- };
1045
- case "placeholder":
1046
- return {
1047
- ...commonProps,
1048
- name: column.id,
1049
- sortable: false,
1050
- render: ({ data }) => {
1051
- if (data) {
1052
- return <span>{column.placeholder}</span>;
1053
- } else {
1054
- return null;
1055
- }
1056
- },
1057
- };
1058
- case "relation":
1059
- relationName = column.id.reduce(
1060
- (acc, id) => acc + `${id}.`,
1061
- ""
1062
- );
1063
- relationName += column.nameFrom;
1064
-
1065
- selectedDataSource = filterDataSource.reduce(
1066
- (acc, fds) => {
1067
- if (fds.id === relationName) {
1068
- return fds.dataset;
1069
- }
1070
- return acc;
1071
- },
1072
- null
1073
- );
1074
-
1075
- if (
1076
- column.filter &&
1077
- column.filter.type &&
1078
- column.filter.type === "select"
1079
- ) {
1080
- filterEditor = SelectFilter;
1081
- filterEditorProps = {
1082
- multiple:
1083
- column.filter.operator === "inlist"
1084
- ? true
1085
- : false,
1086
- wrapMultiple:
1087
- column.filter.operator === "inlist"
1088
- ? false
1089
- : true,
1090
- placeholder: column.filter.placeholder
1091
- ? column.filter.placeholder
1092
- : "All Options",
1093
- dataSource: selectedDataSource,
1094
- };
1095
- } else {
1096
- filterEditor = null;
1097
- filterEditorProps = null;
1098
- }
1099
-
1100
- return {
1101
- ...commonProps,
1102
- name: relationName,
1103
- sortable: false,
1104
- filterEditor: filterEditor,
1105
- filterEditorProps: filterEditorProps,
1106
- render: ({ data }) => {
1107
- value = column.id.reduce((acc, id) => {
1108
- if (acc === "") {
1109
- return data[id];
1110
- } else {
1111
- if (acc && acc[id]) {
1112
- return acc[id];
1113
- } else {
1114
- return "";
1115
- }
1116
- }
1117
- }, "");
1118
-
1119
- if (value) {
1120
- if (Array.isArray(column.nameFrom)) {
1121
- value = column.nameFrom
1122
- .map((nf) => value[nf])
1123
- .join(" ");
1124
- } else {
1125
- value = value[column.nameFrom];
1126
- }
1127
-
1128
- if (
1129
- column.placeholder &&
1130
- column.placeholder !== ""
1131
- ) {
1132
- return (
1133
- <span>{column.placeholder}</span>
1134
- );
1135
- } else {
1136
- return <span>{value}</span>;
1137
- }
1138
- } else {
1139
- return null;
1140
- }
1141
- },
1142
- };
1143
- case "relationArray":
1144
- relationName =
1145
- column.id.reduce((acc, id) => acc + `${id}.`, "") +
1146
- column.nameFrom;
1147
-
1148
- selectedDataSource = filterDataSource.reduce(
1149
- (acc, fds) => {
1150
- if (fds.id === relationName) {
1151
- return fds.dataset;
1152
- }
1153
- return acc;
1154
- },
1155
- null
1156
- );
1157
-
1158
- if (
1159
- column.filter &&
1160
- column.filter.type &&
1161
- column.filter.type === "select"
1162
- ) {
1163
- filterEditor = SelectFilter;
1164
- filterEditorProps = {
1165
- multiple:
1166
- column.filter.operator === "inlist"
1167
- ? true
1168
- : false,
1169
- wrapMultiple:
1170
- column.filter.operator === "inlist"
1171
- ? false
1172
- : true,
1173
- placeholder: column.filter.placeholder
1174
- ? column.filter.placeholder
1175
- : "All Options",
1176
- dataSource: selectedDataSource,
1177
- };
1178
- } else {
1179
- filterEditor = null;
1180
- filterEditorProps = null;
1181
- }
1182
-
1183
- return {
1184
- ...commonProps,
1185
- name: relationName,
1186
- sortable: false,
1187
- filterEditor: filterEditor,
1188
- filterEditorProps: filterEditorProps,
1189
- render: ({ data }) => {
1190
- const relationValue = column.id.reduce(
1191
- (acc, id) =>
1192
- acc === ""
1193
- ? data[id]
1194
- : acc && acc[id]
1195
- ? acc[id]
1196
- : "",
1197
- ""
1198
- );
1199
-
1200
- if (
1201
- relationValue &&
1202
- Array.isArray(relationValue) &&
1203
- relationValue.length > 0
1204
- ) {
1205
- const nameProperties = Array.isArray(
1206
- column.nameFrom
1207
- )
1208
- ? column.nameFrom
1209
- : [column.nameFrom];
1210
-
1211
- const values = relationValue
1212
- .map((rv) => {
1213
- if (
1214
- column.childId &&
1215
- Array.isArray(column.childId)
1216
- ) {
1217
- childValue = rv;
1218
-
1219
- column.childId.forEach((a) => {
1220
- if (childValue[a]) {
1221
- childValue =
1222
- childValue[a];
1223
- }
1224
- });
1225
-
1226
- if (childValue) {
1227
- const propertyValues =
1228
- nameProperties
1229
- .map(
1230
- (prop) =>
1231
- childValue[
1232
- prop
1233
- ]
1234
- )
1235
- .filter(
1236
- (value) =>
1237
- value !==
1238
- undefined &&
1239
- value !==
1240
- null
1241
- );
1242
- return propertyValues.join(
1243
- " "
1244
- );
1245
- }
1246
- } else {
1247
- const propertyValues =
1248
- nameProperties
1249
- .map((prop) => rv[prop])
1250
- .filter(
1251
- (value) =>
1252
- value !==
1253
- undefined &&
1254
- value !== null
1255
- );
1256
- return propertyValues.join(" ");
1257
- }
1258
- })
1259
- .filter((value) => value !== "");
1260
-
1261
- // if (values.length > 0) {
1262
- let result = "";
1263
-
1264
- if (
1265
- column.relation?.id &&
1266
- column.relation?.key
1267
- ) {
1268
- const relationValue =
1269
- column.relation.key.reduce(
1270
- (acc, id) =>
1271
- acc === ""
1272
- ? data[id]
1273
- : acc && acc[id]
1274
- ? acc[id]
1275
- : "",
1276
- ""
1277
- );
1278
-
1279
- result = `${
1280
- relationValue[column.relation.id]
1281
- }<br />`;
1282
- }
1283
-
1284
- if (
1285
- column.where &&
1286
- column.where.id &&
1287
- column.where.value
1288
- ) {
1289
- if (
1290
- data[column.where.id] ===
1291
- column.where.value
1292
- ) {
1293
- result += values.join("<br />");
1294
- }
1295
- } else {
1296
- result += values.join("<br />");
1297
- }
1298
-
1299
- return <span>{parse(result)}</span>;
1300
- // }
1301
- } else {
1302
- let result = "";
1303
-
1304
- if (
1305
- column.relation?.id &&
1306
- column.relation?.key
1307
- ) {
1308
- const relationValue =
1309
- column.relation.key.reduce(
1310
- (acc, id) =>
1311
- acc === ""
1312
- ? data[id]
1313
- : acc && acc[id]
1314
- ? acc[id]
1315
- : "",
1316
- ""
1317
- );
1318
-
1319
- result =
1320
- relationValue &&
1321
- relationValue[column.relation.id]
1322
- ? relationValue[
1323
- column.relation.id
1324
- ]
1325
- : "";
1326
- }
1327
-
1328
- return <span>{parse(result)}</span>;
1329
- }
1330
-
1331
- return null;
1332
- },
1333
- };
1334
- case "richtext":
1335
- return {
1336
- ...commonProps,
1337
- name: column.id,
1338
- render: ({ data }) => {
1339
- if (data && data[column.id]) {
1340
- return (
1341
- <span>{parse(data[column.id])}</span>
1342
- );
1343
- } else {
1344
- return null;
1345
- }
1346
- },
1347
- };
1348
- case "stage":
1349
- return {
1350
- ...commonProps,
1351
- name: column.id,
1352
- sortable: false,
1353
- render: ({ data }) => {
1354
- stage = "";
1355
-
1356
- column.keyIds.forEach((a, b) => {
1357
- if (data[a] === 1) {
1358
- stage = column.valueIds[b];
1359
- }
1360
- });
1361
-
1362
- return <span>{stage}</span>;
1363
- },
1364
- };
1365
- case "time":
1366
- return {
1367
- ...commonProps,
1368
- name: column.id,
1369
- render: ({ data }) => {
1370
- if (
1371
- data &&
1372
- data[column.id] &&
1373
- moment(data[column.id]).isValid() &&
1374
- moment(data[column.id]).format(
1375
- "YYYY-MM-DD"
1376
- ) !== "1970-01-01"
1377
- ) {
1378
- data = moment(data[column.id]).format(
1379
- column.format
1380
- ? column.format
1381
- : "hh:mm A"
1382
- );
1383
-
1384
- return <span>{data}</span>;
1385
- } else {
1386
- return null;
1387
- }
1388
- },
1389
- };
1390
- case "url":
1391
- return {
1392
- ...commonProps,
1393
- name: column.id,
1394
- render: ({ data }) => {
1395
- if (data && data[column.id]) {
1396
- return (
1397
- <span>
1398
- <a
1399
- href={data[column.id]}
1400
- target="_blank"
1401
- >
1402
- Link
1403
- </a>
1404
- </span>
1405
- );
1406
- } else {
1407
- return null;
1408
- }
1409
- },
1410
- };
1411
- default:
1412
- selectedDataSource = filterDataSource.reduce(
1413
- (acc, fds) => {
1414
- if (fds.id === column.id) {
1415
- return fds.dataset;
1416
- }
1417
- return acc;
1418
- },
1419
- null
1420
- );
1421
-
1422
- if (column.filter && column.filter.type) {
1423
- switch (column.filter.type) {
1424
- case "select":
1425
- filterEditor = SelectFilter;
1426
- filterEditorProps = {
1427
- multiple:
1428
- column.filter.operator === "inlist"
1429
- ? true
1430
- : false,
1431
- wrapMultiple:
1432
- column.filter.operator === "inlist"
1433
- ? false
1434
- : true,
1435
- placeholder: column.filter.placeholder
1436
- ? column.filter.placeholder
1437
- : "All Options",
1438
- dataSource: selectedDataSource,
1439
- };
1440
- break;
1441
- case "date":
1442
- filterEditor = DateFilter;
1443
- filterEditorProps = (props, { index }) => {
1444
- return {
1445
- dateFormat: "DD-MM-YYYY",
1446
- placeholder: "All Dates",
1447
- };
1448
- };
1449
- case "number":
1450
- filterEditor = NumberFilter;
1451
- break;
1452
- default:
1453
- filterEditor = null;
1454
- filterEditorProps = null;
1455
- break;
1456
- }
1457
- } else {
1458
- filterEditor = null;
1459
- filterEditorProps = null;
1460
- }
1461
-
1462
- return {
1463
- ...commonProps,
1464
- name: column.id,
1465
- filterEditor: filterEditor,
1466
- filterEditorProps: filterEditorProps,
1467
- };
1468
- }
1469
- };
1470
-
1471
- const newColumns = columns.map(renderColumn);
1472
-
1473
- if (settings.length > 0) {
1474
- newColumns.push({
1475
- name: "setting",
1476
- header: "Action",
1477
- defaultWidth: 100,
1478
- textAlign: "center",
1479
- render: ({ data }) => {
1480
- return (
1481
- <div className="tdactions">
1482
- {settings.map((setting) =>
1483
- renderSetting(setting, data)
1484
- )}
1485
- </div>
1486
- );
1487
- },
1488
- });
1489
- }
1490
-
1491
- setGridColumns(newColumns);
1492
-
1493
- const newFilterValue = columns
1494
- .filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
1495
- .map((column) => {
1496
- // Map these filtered columns to a new object array
1497
- let filterName = "";
1498
- if (Array.isArray(column.id)) {
1499
- filterName = column.id.reduce(
1500
- (acc, id) => acc + `${id}.`,
1501
- ""
1502
- );
1503
- } else {
1504
- filterName = column.id;
1505
- }
1506
-
1507
- if (column.nameFrom) {
1508
- filterName += column.nameFrom;
1509
- }
1510
-
1511
- return {
1512
- key: column.filter.key ? column.filter.key : null,
1513
- name: filterName,
1514
- operator: column.filter.operator,
1515
- type: column.filter.type,
1516
- value: column.filter.value ? column.filter.value : "",
1517
- };
1518
- });
1519
-
1520
- setFilterValue(newFilterValue);
1521
- }, [columns, filterDataSource]);
1522
-
1523
- useEffect(() => {
1524
- if (setFilterData) {
1525
- setFilterData(filterValue);
1526
- }
1527
- }, [filterValue]);
1528
-
1529
- useEffect(() => {
1530
- columns.forEach((column) => {
1531
- if (column.filter && column.filter.url) {
1532
- CustomFetch(
1533
- column.filter.url,
1534
- "POST",
1535
- column.filter.where
1536
- ? { where: column.filter.where }
1537
- : {},
1538
- (res) => {
1539
- let filterName;
1540
-
1541
- if (Array.isArray(column.id)) {
1542
- const concatenatedIds = column.id.reduce(
1543
- (acc, id) => acc + `${id}.`,
1544
- ""
1545
- );
1546
-
1547
- filterName = column.nameFrom
1548
- ? concatenatedIds + column.nameFrom
1549
- : concatenatedIds;
1550
- } else {
1551
- filterName = column.nameFrom
1552
- ? column.id + column.nameFrom
1553
- : column.id;
1554
- }
1555
-
1556
- const filterIndex = filterDataSource.findIndex(
1557
- (filter) => filter.id === filterName
1558
- );
1559
-
1560
- if (filterIndex >= 0) {
1561
- const updatedFilter = {
1562
- ...filterDataSource[filterIndex],
1563
- dataset: res.data,
1564
- };
1565
- const updatedDataSource = [
1566
- ...filterDataSource.slice(0, filterIndex),
1567
- updatedFilter,
1568
- ...filterDataSource.slice(filterIndex + 1),
1569
- ];
1570
- setFilterDataSource(updatedDataSource);
1571
- } else {
1572
- const newFilter = {
1573
- id: filterName,
1574
- dataset: res.data,
1575
- };
1576
- setFilterDataSource((prevState) => [
1577
- ...prevState,
1578
- newFilter,
1579
- ]);
1580
- }
1581
- }
1582
- );
1583
- } else if (column.filter && column.filter.options) {
1584
- let filterName = Array.isArray(column.id)
1585
- ? column.id.reduce((acc, id) => acc + `${id}.`, "")
1586
- : column.id;
1587
-
1588
- if (column.nameFrom) {
1589
- filterName += column.nameFrom;
1590
- }
1591
-
1592
- const newFilter = {
1593
- id: filterName,
1594
- dataset: column.filter.options,
1595
- };
1596
-
1597
- setFilterDataSource((prevState) => [
1598
- ...prevState,
1599
- newFilter,
1600
- ]);
1601
- }
1602
- });
1603
- }, []);
1604
-
1605
- // Data Grid Styling
1606
- const [windowHeight, setWindowHeight] = useState(window.innerHeight);
1607
- const gridStyle = {
1608
- minHeight: windowHeight * 0.7 > 550 ? windowHeight * 0.7 : 550,
1609
- boxShadow: "none",
1610
- };
1611
- const headerProps = {
1612
- style: style ? style : {},
1613
- };
1614
-
1615
- useEffect(() => {
1616
- const handleResize = () => {
1617
- setWindowHeight(window.innerHeight);
1618
- };
1619
-
1620
- window.addEventListener("resize", handleResize);
1621
-
1622
- // Clean up the event listener
1623
- return () => {
1624
- window.removeEventListener("resize", handleResize);
1625
- };
1626
- }, []);
1627
-
1628
- return (
1629
- <>
1630
- {renderSearch()}
1631
- {renderCreateButton()}
1632
- <ReactDataGrid
1633
- columns={gridColumns}
1634
- dataSource={data}
1635
- filterValue={filterValue}
1636
- defaultLimit={limit}
1637
- defaultSortInfo={sortInfo}
1638
- enableColumnAutosize={false}
1639
- enableColumnFilterContextMenu={false}
1640
- enableSelection={false}
1641
- headerProps={headerProps}
1642
- idProperty={`visns-datagrid-${ajaxSetting.url.replace(
1643
- /\//g,
1644
- "-"
1645
- )}`}
1646
- minRowHeight={40}
1647
- onFilterValueChange={setFilterValue}
1648
- onRenderRow={onRenderRow}
1649
- pagination
1650
- renderColumnContextMenu={renderColumnContextMenu}
1651
- rowHeight={null}
1652
- showZebraRows={true}
1653
- style={gridStyle}
1654
- />
1655
- <Popup
1656
- open={modalShow}
1657
- onClose={modalClose}
1658
- closeOnDocumentClick={false}
1659
- >
1660
- <Form
1661
- closeModal={modalClose}
1662
- fetchTable={handleReload}
1663
- formSettings={formData}
1664
- formType={formType}
1665
- updateForm={setFormData}
1666
- columnId={formId}
1667
- childDropdownCallback={childDropdownCallback}
1668
- style={style}
1669
- />
1670
- </Popup>
1671
- </>
1672
- );
1673
- }
98
+ (
99
+ {
100
+ ajaxSetting,
101
+ form,
102
+ columns,
103
+ settings,
104
+ setFilterData,
105
+ setTotal,
106
+ style,
107
+ tableFilters,
108
+ historySearch,
109
+ historyUrl,
110
+ },
111
+ ref
112
+ ) => {
113
+ const navigate = useNavigate();
114
+
115
+ /** Modal States */
116
+ const [formData, setFormData] = useState({});
117
+ const [formType, setFormType] = useState("");
118
+ const [formId, setFormId] = useState(0);
119
+ const [modalShow, setModalShow] = useState(false);
120
+
121
+ /** Modal Functions */
122
+ const childDropdownCallback = (data) => {
123
+ let _form = { ...formData };
124
+
125
+ if (formData.fields.length > 0) {
126
+ formData.fields.forEach((a, b) => {
127
+ if (a.id === data.id) {
128
+ _form.fields[b].options = data.data;
129
+ }
130
+ });
131
+ }
132
+
133
+ setFormData(_form);
134
+ };
135
+
136
+ const modalOpen = (formType, formId) => {
137
+ setModalShow(true);
138
+ setFormType(formType);
139
+ setFormId(formId);
140
+ };
141
+
142
+ const modalClose = () => {
143
+ setModalShow(false);
144
+ };
145
+
146
+ useEffect(() => {
147
+ setFormData(form);
148
+ }, [form]);
149
+
150
+ /** Table States */
151
+ const [dataReload, setDataReload] = useState(0);
152
+ const [dSearch, setDSearch] = useState("");
153
+ const data = useCallback(
154
+ (params) => {
155
+ const sqlResult = loadData(params, dSearch, ajaxSetting);
156
+
157
+ if (setFilterData && params.filterValue) {
158
+ setFilterData([params.filterValue]);
159
+ }
160
+
161
+ if (setTotal) {
162
+ sqlResult.then((res) => {
163
+ setTotal(res.count);
164
+ });
165
+ }
166
+
167
+ return sqlResult;
168
+ },
169
+ [ajaxSetting, dataReload, dSearch]
170
+ );
171
+ const [filterDataSource, setFilterDataSource] = useState([]);
172
+ const [filterValue, setFilterValue] = useState([]);
173
+ const [gridColumns, setGridColumns] = useState([]);
174
+ const limit = ajaxSetting.take || 10;
175
+ const [search, setSearch] = useState("");
176
+ const sortInfo =
177
+ ajaxSetting.sortBy && ajaxSetting.sort
178
+ ? {
179
+ name: ajaxSetting.sortBy,
180
+ dir: ajaxSetting.sort === "asc" ? 1 : -1,
181
+ }
182
+ : null;
183
+
184
+ /** Table Functions */
185
+ useImperativeHandle(ref, () => ({
186
+ reload: () => {
187
+ handleReload();
188
+ },
189
+ }));
190
+
191
+ const handleFilterChange = (d) => {
192
+ setFilterValue(d);
193
+ };
194
+
195
+ const handleChangeSearch = (e) => {
196
+ const { value } = e.target;
197
+ setSearch(value);
198
+ };
199
+
200
+ const handleSettingClick = (s, d) => {
201
+ switch (s.id) {
202
+ case "update":
203
+ modalOpen("update", d.id);
204
+ break;
205
+ case "delete":
206
+ confirmAlert({
207
+ title: "Delete Item",
208
+ message: `Are you sure you want to delete ${
209
+ d.name ? d.name : d.label ? d.label : "this item"
210
+ }?`,
211
+ buttons: [
212
+ {
213
+ label: "Yes",
214
+ onClick: () =>
215
+ CustomFetch(
216
+ form.url + "/" + d[form.primaryKey],
217
+ "DELETE",
218
+ {},
219
+ (result) => {
220
+ if (result.error === "") {
221
+ const min = 0;
222
+ const max = 999999999;
223
+ const randomNumber = Math.floor(
224
+ Math.random() *
225
+ (max - min + 1) +
226
+ min
227
+ );
228
+
229
+ setDataReload(randomNumber);
230
+
231
+ toast.success(
232
+ `The selected item has been deleted.`
233
+ );
234
+ } else {
235
+ toast.error(
236
+ <div>
237
+ {parse(result.error)}
238
+ </div>
239
+ );
240
+ }
241
+ }
242
+ ),
243
+ },
244
+ {
245
+ label: "No",
246
+ onClick: () => close(),
247
+ },
248
+ ],
249
+ });
250
+ break;
251
+ default:
252
+ confirmAlert({
253
+ title: s.title,
254
+ message: "",
255
+ buttons: [
256
+ {
257
+ label: "Yes",
258
+ onClick: () =>
259
+ CustomFetch(
260
+ s.url + "/" + d[form.primaryKey],
261
+ s.method,
262
+ {},
263
+ function (result) {
264
+ if (result.error === "") {
265
+ const min = 0;
266
+ const max = 999999999;
267
+ const randomNumber = Math.floor(
268
+ Math.random() *
269
+ (max - min + 1) +
270
+ min
271
+ );
272
+
273
+ setDataReload(randomNumber);
274
+
275
+ toast.success(String(s.title));
276
+ } else {
277
+ toast.error(
278
+ <div>
279
+ {parse(result.error)}
280
+ </div>
281
+ );
282
+ }
283
+ }
284
+ ),
285
+ },
286
+ {
287
+ label: "No",
288
+ onClick: () => close(),
289
+ },
290
+ ],
291
+ });
292
+ break;
293
+ }
294
+ };
295
+
296
+ const handleReload = () => {
297
+ const min = 0;
298
+ const max = 999999999;
299
+ const randomNumber = Math.floor(
300
+ Math.random() * (max - min + 1) + min
301
+ );
302
+
303
+ setDataReload(randomNumber);
304
+ };
305
+
306
+ const onRowClick = useCallback((rowProps, event) => {
307
+ const cellElement = event.target.closest(
308
+ ".InovuaReactDataGrid__cell"
309
+ );
310
+ const columnIndex = Array.from(
311
+ cellElement.parentNode.children
312
+ ).indexOf(cellElement);
313
+
314
+ if (columnIndex === rowProps.columns.length - 1) {
315
+ } else {
316
+ if (
317
+ rowProps.columns[columnIndex].link &&
318
+ rowProps.columns[columnIndex].link.url
319
+ ) {
320
+ if (rowProps.columns[columnIndex].link.folder) {
321
+ window.location.href =
322
+ rowProps.columns[columnIndex].link.url +
323
+ rowProps.data[
324
+ rowProps.columns[columnIndex].link.key
325
+ ] +
326
+ "/" +
327
+ rowProps.columns[columnIndex].link.folder;
328
+ } else {
329
+ navigate(
330
+ `${rowProps.columns[columnIndex].link.url}${
331
+ rowProps.data[
332
+ rowProps.columns[columnIndex].link.key
333
+ ]
334
+ }`
335
+ );
336
+ }
337
+ } else if (rowProps.columns[columnIndex].link.popup) {
338
+ window.open(
339
+ `${rowProps.columns[columnIndex].link.popup}/${
340
+ rowProps.data[
341
+ rowProps.columns[columnIndex].link.key
342
+ ]
343
+ }`,
344
+ "",
345
+ "width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
346
+ );
347
+ } else {
348
+ modalOpen("update", rowProps.data[form.primaryKey]);
349
+ }
350
+ }
351
+ }, []);
352
+
353
+ const onRenderRow = useCallback((rowProps) => {
354
+ // save the original handlers to be called later
355
+ const { onClick } = rowProps;
356
+
357
+ rowProps.onClick = (event) => {
358
+ onRowClick(rowProps, event);
359
+ if (onClick) {
360
+ onClick(event);
361
+ }
362
+ };
363
+ }, []);
364
+
365
+ const renderCreateButton = () => {
366
+ if (form.createDisable && form.createDisable === true) {
367
+ return null;
368
+ }
369
+
370
+ return (
371
+ <div className="filterAction--alt">
372
+ <button
373
+ className="btn"
374
+ onClick={() => {
375
+ if (form.create) {
376
+ modalOpen("create", 0);
377
+ } else {
378
+ if (form.url) {
379
+ window.open(
380
+ form.url,
381
+ "",
382
+ "width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
383
+ );
384
+ }
385
+ }
386
+ }}
387
+ >
388
+ <div className="icon-plus"></div> Create
389
+ </button>
390
+ </div>
391
+ );
392
+ };
393
+
394
+ const renderSearch = () => {
395
+ const searchEnable = !(
396
+ form.searchDisable && form.searchDisable === true
397
+ );
398
+
399
+ return searchEnable ? (
400
+ <div className="filterInput--alt">
401
+ <div className="icon-search">
402
+ <Search strokeWidth={2} size={18} />
403
+ </div>
404
+ <input
405
+ type="text"
406
+ placeholder="Search"
407
+ value={search}
408
+ onChange={handleChangeSearch}
409
+ />
410
+ </div>
411
+ ) : null;
412
+ };
413
+
414
+ const handleCoding = (c, data) => {
415
+ const icons = [];
416
+ const assetPath =
417
+ import.meta.env.REACT_APP_ASSET_PATH !== undefined
418
+ ? import.meta.env.REACT_APP_ASSET_PATH
419
+ : "";
420
+
421
+ const addIcon = (src, icon, alt, tooltipContent, key) => {
422
+ if (src && src !== "") {
423
+ icons.push(
424
+ <img
425
+ src={`${assetPath}${src}`}
426
+ alt={alt}
427
+ data-tooltip-id="system-tooltip"
428
+ data-tooltip-content={tooltipContent}
429
+ key={key}
430
+ />
431
+ );
432
+ } else {
433
+ let IconComponent = null;
434
+
435
+ if (icon === "archive") {
436
+ IconComponent = ShippingBoxV1;
437
+ } else if (icon === "folder") {
438
+ IconComponent = Folder;
439
+ } else if (icon === "inbox") {
440
+ IconComponent = Inbox;
441
+ } else if (icon === "network") {
442
+ IconComponent = Network;
443
+ } else if (icon === "urgent") {
444
+ IconComponent = TriangleAlert;
445
+ }
446
+
447
+ if (IconComponent) {
448
+ icons.push(
449
+ <IconComponent
450
+ data-tooltip-id="system-tooltip"
451
+ data-tooltip-content={tooltipContent}
452
+ strokeWidth={2}
453
+ size={18}
454
+ className="tdaction"
455
+ key={key}
456
+ />
457
+ );
458
+ }
459
+ }
460
+ };
461
+
462
+ c.config.forEach((config, configKey) => {
463
+ const fieldValue = config.id.reduce((acc, id) => {
464
+ if (acc === "") {
465
+ return data[id];
466
+ } else {
467
+ return acc[id];
468
+ }
469
+ }, "");
470
+
471
+ const iconData = config.icons.find(
472
+ (icon) => icon.value === fieldValue
473
+ );
474
+
475
+ if (
476
+ iconData &&
477
+ (iconData.src || iconData.icon) &&
478
+ iconData.alt &&
479
+ iconData.tooltipContent
480
+ ) {
481
+ addIcon(
482
+ iconData.src ? iconData.src : null,
483
+ iconData.icon ? iconData.icon : null,
484
+ iconData.alt,
485
+ iconData.tooltipContent,
486
+ `coding-${config.id[0]}-${configKey}`
487
+ );
488
+ }
489
+ });
490
+
491
+ return icons;
492
+ };
493
+
494
+ /** Table Hooks */
495
+ useEffect(() => {
496
+ const delayedSetDSearch = debounce(() => {
497
+ setDSearch(search);
498
+ }, 300); // Adjust the delay (in milliseconds) according to your needs
499
+
500
+ delayedSetDSearch();
501
+
502
+ return delayedSetDSearch.cancel; // Cleanup the debounce timer on unmount
503
+ }, [search, setDSearch]);
504
+
505
+ const renderSetting = (s, d) => {
506
+ let iconStyle = {};
507
+ let allow = true;
508
+
509
+ if (s.active) {
510
+ if (
511
+ d.hasOwnProperty(s.active.id) &&
512
+ d[s.active.id] === s.active.value
513
+ ) {
514
+ iconStyle = {
515
+ color: s.active.colour,
516
+ };
517
+ } else if (
518
+ s.active.type === "greater" &&
519
+ d[s.active.id] > s.active.value
520
+ ) {
521
+ iconStyle = {
522
+ color: s.active.colour,
523
+ };
524
+ } else if (
525
+ s.active.type === "not null" &&
526
+ d[s.active.id] !== null
527
+ ) {
528
+ iconStyle = {
529
+ color: s.active.colour,
530
+ };
531
+ }
532
+ }
533
+
534
+ const handleIconClick = (e) => {
535
+ e.preventDefault();
536
+ e.stopPropagation();
537
+ handleSettingClick(s, d);
538
+ };
539
+
540
+ const tooltipContent =
541
+ iconStyle && iconStyle.color ? s.active.title : s.title;
542
+
543
+ if (s.hide && s.hide.id && s.hide.value >= 0) {
544
+ if (
545
+ d.hasOwnProperty(s.hide.id) &&
546
+ d[s.hide.id] === s.hide.value
547
+ ) {
548
+ allow = false;
549
+ }
550
+ }
551
+
552
+ if (allow) {
553
+ switch (s.id) {
554
+ case "archive":
555
+ return getIconComponent(ShippingBoxV1);
556
+ case "complete":
557
+ return getIconComponent(Check);
558
+ case "copy":
559
+ return getIconComponent(Copy);
560
+ case "delete":
561
+ return getIconComponent(Backspace);
562
+ case "family":
563
+ return getIconComponent(Network);
564
+ case "primary":
565
+ return getIconComponent(Ribbon);
566
+ case "restore":
567
+ return getIconComponent(ArrowCounterClockwise);
568
+ case "ssa":
569
+ return getIconComponent(Clock);
570
+ case "update":
571
+ return getIconComponent(Edit);
572
+ default:
573
+ return null;
574
+ }
575
+ } else {
576
+ return null;
577
+ }
578
+
579
+ function getIconComponent(IconComponent) {
580
+ return (
581
+ <span key={`setting-${s.id}`} onClick={handleIconClick}>
582
+ <IconComponent
583
+ data-tooltip-id="system-tooltip"
584
+ data-tooltip-content={tooltipContent}
585
+ strokeWidth={2}
586
+ size={18}
587
+ className="tdaction"
588
+ style={iconStyle}
589
+ />
590
+ </span>
591
+ );
592
+ }
593
+ };
594
+
595
+ const renderColumnContextMenu = useCallback(
596
+ (menuProps, { cellProps }) => {
597
+ const filteredItems = menuProps.items
598
+ .map((item, key) => {
599
+ if (key >= 6 && key <= 9) {
600
+ return null; // Skip items with keys 6-9 [lock columns setting]
601
+ }
602
+ return item;
603
+ })
604
+ .filter(Boolean); // Filter out any null items
605
+
606
+ menuProps.items = filteredItems;
607
+ },
608
+ []
609
+ );
610
+
611
+ useEffect(() => {
612
+ const renderColumn = (column) => {
613
+ let childValue;
614
+ let date;
615
+ let filterEditor = null;
616
+ let filterEditorProps = null;
617
+ let fileUrl = null;
618
+ let icons = [];
619
+ let relationName;
620
+ let selectedDataSource = null;
621
+ let stage;
622
+ let style;
623
+ let value;
624
+
625
+ const commonProps = {
626
+ header: column.label,
627
+ defaultFlex: 1,
628
+ link: column.link ? column.link : {},
629
+ minWidth:
630
+ column.minWidth && column.minWidth > 0
631
+ ? column.minWidth
632
+ : undefined,
633
+ maxWidth:
634
+ column.maxWidth && column.maxWidth > 0
635
+ ? column.maxWidth
636
+ : undefined,
637
+ };
638
+
639
+ switch (column.type) {
640
+ case "address":
641
+ return {
642
+ ...commonProps,
643
+ name: `${column.type}.${column.id}`,
644
+ render: ({ data }) => {
645
+ value = "";
646
+
647
+ if (data.address1) {
648
+ value += `${data.address1} `;
649
+ }
650
+
651
+ if (data.address2) {
652
+ value += `${data.address2} `;
653
+ }
654
+
655
+ if (data.suburb) {
656
+ value += `${data.suburb} `;
657
+ }
658
+
659
+ if (data.postcode) {
660
+ value += `${data.postcode} `;
661
+ }
662
+
663
+ return <span>{value}</span>;
664
+ },
665
+ };
666
+ case "age":
667
+ if (column.filter && column.filter.type) {
668
+ switch (column.filter.type) {
669
+ case "number":
670
+ filterEditor = NumberFilter;
671
+ break;
672
+ default:
673
+ filterEditor = null;
674
+ break;
675
+ }
676
+ } else {
677
+ filterEditor = null;
678
+ }
679
+
680
+ return {
681
+ ...commonProps,
682
+ type: "number",
683
+ filterEditor: filterEditor,
684
+ name: `${column.type}.${column.id}`,
685
+ render: ({ data }) => {
686
+ value = column.id.reduce((acc, id) => {
687
+ if (acc === "") {
688
+ return data[id];
689
+ } else {
690
+ return acc[id];
691
+ }
692
+ }, "");
693
+
694
+ if (value !== "" && value !== null) {
695
+ date = moment(value);
696
+
697
+ return (
698
+ <span>
699
+ {moment().diff(
700
+ date,
701
+ column.duration
702
+ ? column.duration
703
+ : "years"
704
+ )}
705
+ </span>
706
+ );
707
+ } else {
708
+ return null;
709
+ }
710
+ },
711
+ };
712
+ case "arrayCount":
713
+ return {
714
+ ...commonProps,
715
+ name: `${column.type}.${column.id}`,
716
+ sortable: false,
717
+ render: ({ data }) => {
718
+ if (data && data[column.id]) {
719
+ return data[column.id].length;
720
+ } else {
721
+ return null;
722
+ }
723
+ },
724
+ };
725
+ case "coding":
726
+ return {
727
+ ...commonProps,
728
+ name: `${column.type}.${column.id}`,
729
+ sortable: false,
730
+ render: ({ data }) => {
731
+ if (data) {
732
+ return handleCoding(column, data);
733
+ } else {
734
+ return null;
735
+ }
736
+ },
737
+ };
738
+ case "created_by":
739
+ return {
740
+ ...commonProps,
741
+ name: `${column.type}.${column.id}`,
742
+ sortable: false,
743
+ render: ({ data }) => {
744
+ if (
745
+ data.audits[0] &&
746
+ data.audits[0].user &&
747
+ data.audits[0].user.name
748
+ ) {
749
+ value = data.audits[0].user.name;
750
+
751
+ return <span>{value}</span>;
752
+ } else {
753
+ return null;
754
+ }
755
+ },
756
+ };
757
+ case "currency":
758
+ return {
759
+ ...commonProps,
760
+ name: column.id,
761
+ render: ({ data }) => {
762
+ if (data) {
763
+ data = numeral(data[column.id]).format(
764
+ "$0,0.00"
765
+ );
766
+
767
+ return <span>{data}</span>;
768
+ } else {
769
+ return null;
770
+ }
771
+ },
772
+ };
773
+ case "date":
774
+ if (column.filter && column.filter.type) {
775
+ filterEditor = DateFilter;
776
+ filterEditorProps = (props, { index }) => {
777
+ return {
778
+ dateFormat: "DD-MM-YYYY",
779
+ placeholder: "All Dates",
780
+ };
781
+ };
782
+ } else {
783
+ filterEditor = null;
784
+ filterEditorProps = null;
785
+ }
786
+
787
+ return {
788
+ ...commonProps,
789
+ name: column.id,
790
+ filterEditor: filterEditor,
791
+ filterEditorProps: filterEditorProps,
792
+ render: ({ data }) => {
793
+ if (
794
+ data &&
795
+ data[column.id] &&
796
+ moment(data[column.id]).isValid() &&
797
+ moment(data[column.id]).format(
798
+ "YYYY-MM-DD"
799
+ ) !== "1970-01-01"
800
+ ) {
801
+ const value = moment(
802
+ data[column.id]
803
+ ).format(column.format || "DD-MM-YYYY");
804
+ style = {};
805
+
806
+ if (
807
+ column.active &&
808
+ column.active.id &&
809
+ column.active.value === "expired"
810
+ ) {
811
+ if (
812
+ data[column.active.id] &&
813
+ moment(
814
+ data[column.active.id]
815
+ ).isBefore(moment())
816
+ ) {
817
+ style = {
818
+ color: column.active.colour,
819
+ };
820
+ }
821
+ }
822
+
823
+ return <span style={style}>{value}</span>;
824
+ } else {
825
+ return null;
826
+ }
827
+ },
828
+ };
829
+ case "daterange":
830
+ if (column.filter && column.filter.type) {
831
+ filterEditor = DateFilter;
832
+ filterEditorProps = (props, { index }) => {
833
+ return {
834
+ dateFormat: "DD-MM-YYYY",
835
+ placeholder: "All Dates",
836
+ };
837
+ };
838
+ } else {
839
+ filterEditor = null;
840
+ filterEditorProps = null;
841
+ }
842
+
843
+ return {
844
+ ...commonProps,
845
+ name: `${column.id[0]}.${column.id[1]}.`,
846
+ filterEditor: filterEditor,
847
+ filterEditorProps: filterEditorProps,
848
+ render: ({ data }) => {
849
+ if (
850
+ data &&
851
+ data[column.id[0]] &&
852
+ moment(data[column.id[0]]).isValid() &&
853
+ moment(data[column.id[0]]).format(
854
+ "YYYY-MM-DD"
855
+ ) !== "1970-01-01"
856
+ ) {
857
+ value = moment(data[column.id[0]]).format(
858
+ column.format || "DD-MM-YYYY"
859
+ );
860
+ }
861
+
862
+ if (
863
+ data &&
864
+ data[column.id[1]] &&
865
+ moment(data[column.id[1]]).isValid() &&
866
+ moment(data[column.id[1]]).format(
867
+ "YYYY-MM-DD"
868
+ ) !== "1970-01-01"
869
+ ) {
870
+ value += ` - ${moment(
871
+ data[column.id[1]]
872
+ ).format(column.format || "DD-MM-YYYY")}`;
873
+ }
874
+
875
+ return <span>{value}</span>;
876
+ },
877
+ };
878
+ case "datetime":
879
+ if (column.filter && column.filter.type) {
880
+ filterEditor = DateFilter;
881
+ filterEditorProps = (props, { index }) => {
882
+ return {
883
+ dateFormat: "DD-MM-YYYY",
884
+ placeholder: "All Dates",
885
+ };
886
+ };
887
+ } else {
888
+ filterEditor = null;
889
+ filterEditorProps = null;
890
+ }
891
+
892
+ return {
893
+ ...commonProps,
894
+ name: column.id,
895
+ filterEditor: filterEditor,
896
+ filterEditorProps: filterEditorProps,
897
+ render: ({ data }) => {
898
+ if (
899
+ data &&
900
+ data[column.id] &&
901
+ moment(data[column.id]).isValid() &&
902
+ moment(data[column.id]).format(
903
+ "YYYY-MM-DD"
904
+ ) !== "1970-01-01"
905
+ ) {
906
+ data = moment(data[column.id]).format(
907
+ column.format
908
+ ? column.format
909
+ : "DD-MM-YYYY hh:mm A"
910
+ );
911
+
912
+ return <span>{data}</span>;
913
+ } else {
914
+ return null;
915
+ }
916
+ },
917
+ };
918
+ case "file":
919
+ return {
920
+ ...commonProps,
921
+ name: column.id,
922
+ sortable: false,
923
+ render: ({ data }) => {
924
+ if (data) {
925
+ return (
926
+ <span>
927
+ <CloudDownload
928
+ data-tooltip-id="system-tooltip"
929
+ data-tooltip-content="Download File"
930
+ strokeWidth={2}
931
+ size={18}
932
+ className="tdaction"
933
+ />
934
+ </span>
935
+ );
936
+ } else {
937
+ return null;
938
+ }
939
+ },
940
+ };
941
+ case "icons":
942
+ return {
943
+ ...commonProps,
944
+ name: column.id,
945
+ sortable: false,
946
+ render: ({ data }) => {
947
+ icons = [];
948
+
949
+ if (column.icons && column.icons.length > 0) {
950
+ column.icons.forEach((icon) => {
951
+ icons.push(
952
+ <img
953
+ src={icon.url}
954
+ alt={icon.name}
955
+ data-tooltip-id="system-tooltip"
956
+ data-tooltip-content={icon.name}
957
+ />
958
+ );
959
+ });
960
+ }
961
+
962
+ if (data) {
963
+ return <span>{icons}</span>;
964
+ } else {
965
+ return null;
966
+ }
967
+ },
968
+ };
969
+ case "image":
970
+ return {
971
+ ...commonProps,
972
+ name: column.id,
973
+ render: ({ data }) => {
974
+ if (data && data[column.id]) {
975
+ const fileUrl =
976
+ data[column.id][0]?.file_url ||
977
+ data[column.id]?.file_url;
978
+
979
+ if (fileUrl) {
980
+ return (
981
+ <span>
982
+ {parse(
983
+ `<img width="150" src="${fileUrl}" />`
984
+ )}
985
+ </span>
986
+ );
987
+ }
988
+ }
989
+
990
+ return null;
991
+ },
992
+ };
993
+ case "json":
994
+ return {
995
+ ...commonProps,
996
+ name: column.id,
997
+ render: ({ data }) => {
998
+ if (
999
+ data &&
1000
+ data[column.id] &&
1001
+ data[column.id][column.jsonData]
1002
+ ) {
1003
+ data = data[column.id][column.jsonData];
1004
+
1005
+ return <span>{data}</span>;
1006
+ } else {
1007
+ return null;
1008
+ }
1009
+ },
1010
+ };
1011
+ case "number":
1012
+ return {
1013
+ ...commonProps,
1014
+ name: column.id,
1015
+ type: "number",
1016
+ };
1017
+ case "option":
1018
+ selectedDataSource = filterDataSource.reduce(
1019
+ (acc, fds) => {
1020
+ if (fds.id === column.id) {
1021
+ return fds.dataset;
1022
+ }
1023
+ return acc;
1024
+ },
1025
+ null
1026
+ );
1027
+
1028
+ if (
1029
+ column.filter &&
1030
+ column.filter.type &&
1031
+ column.filter.type === "select"
1032
+ ) {
1033
+ filterEditor = SelectFilter;
1034
+ filterEditorProps = {
1035
+ placeholder: column.filter.placeholder
1036
+ ? column.filter.placeholder
1037
+ : "All Options",
1038
+ dataSource: selectedDataSource,
1039
+ };
1040
+ } else {
1041
+ filterEditor = null;
1042
+ filterEditorProps = null;
1043
+ }
1044
+
1045
+ return {
1046
+ ...commonProps,
1047
+ name: column.id,
1048
+ filterEditor: filterEditor,
1049
+ filterEditorProps: filterEditorProps,
1050
+ render: ({ data }) => {
1051
+ if (
1052
+ data &&
1053
+ column.options &&
1054
+ column.options[data[column.id]]
1055
+ ) {
1056
+ data = column.options[data[column.id]];
1057
+
1058
+ return <span>{data}</span>;
1059
+ } else {
1060
+ return null;
1061
+ }
1062
+ },
1063
+ };
1064
+ case "placeholder":
1065
+ return {
1066
+ ...commonProps,
1067
+ name: column.id,
1068
+ sortable: false,
1069
+ render: ({ data }) => {
1070
+ if (data) {
1071
+ return <span>{column.placeholder}</span>;
1072
+ } else {
1073
+ return null;
1074
+ }
1075
+ },
1076
+ };
1077
+ case "relation":
1078
+ relationName = column.id.reduce(
1079
+ (acc, id) => acc + `${id}.`,
1080
+ ""
1081
+ );
1082
+ relationName += column.nameFrom;
1083
+
1084
+ selectedDataSource = filterDataSource.reduce(
1085
+ (acc, fds) => {
1086
+ if (fds.id === relationName) {
1087
+ return fds.dataset;
1088
+ }
1089
+ return acc;
1090
+ },
1091
+ null
1092
+ );
1093
+
1094
+ if (
1095
+ column.filter &&
1096
+ column.filter.type &&
1097
+ column.filter.type === "select"
1098
+ ) {
1099
+ filterEditor = SelectFilter;
1100
+ filterEditorProps = {
1101
+ multiple:
1102
+ column.filter.operator === "inlist"
1103
+ ? true
1104
+ : false,
1105
+ wrapMultiple:
1106
+ column.filter.operator === "inlist"
1107
+ ? false
1108
+ : true,
1109
+ placeholder: column.filter.placeholder
1110
+ ? column.filter.placeholder
1111
+ : "All Options",
1112
+ dataSource: selectedDataSource,
1113
+ };
1114
+ } else {
1115
+ filterEditor = null;
1116
+ filterEditorProps = null;
1117
+ }
1118
+
1119
+ return {
1120
+ ...commonProps,
1121
+ name: relationName,
1122
+ sortable: false,
1123
+ filterEditor: filterEditor,
1124
+ filterEditorProps: filterEditorProps,
1125
+ render: ({ data }) => {
1126
+ value = column.id.reduce((acc, id) => {
1127
+ if (acc === "") {
1128
+ return data[id];
1129
+ } else {
1130
+ if (acc && acc[id]) {
1131
+ return acc[id];
1132
+ } else {
1133
+ return "";
1134
+ }
1135
+ }
1136
+ }, "");
1137
+
1138
+ if (value) {
1139
+ if (Array.isArray(column.nameFrom)) {
1140
+ value = column.nameFrom
1141
+ .map((nf) => value[nf])
1142
+ .join(" ");
1143
+ } else {
1144
+ value = value[column.nameFrom];
1145
+ }
1146
+
1147
+ if (
1148
+ column.placeholder &&
1149
+ column.placeholder !== ""
1150
+ ) {
1151
+ return (
1152
+ <span>{column.placeholder}</span>
1153
+ );
1154
+ } else {
1155
+ return <span>{value}</span>;
1156
+ }
1157
+ } else {
1158
+ return null;
1159
+ }
1160
+ },
1161
+ };
1162
+ case "relationArray":
1163
+ relationName =
1164
+ column.id.reduce((acc, id) => acc + `${id}.`, "") +
1165
+ column.nameFrom;
1166
+
1167
+ selectedDataSource = filterDataSource.reduce(
1168
+ (acc, fds) => {
1169
+ if (fds.id === relationName) {
1170
+ return fds.dataset;
1171
+ }
1172
+ return acc;
1173
+ },
1174
+ null
1175
+ );
1176
+
1177
+ if (
1178
+ column.filter &&
1179
+ column.filter.type &&
1180
+ column.filter.type === "select"
1181
+ ) {
1182
+ filterEditor = SelectFilter;
1183
+ filterEditorProps = {
1184
+ multiple:
1185
+ column.filter.operator === "inlist"
1186
+ ? true
1187
+ : false,
1188
+ wrapMultiple:
1189
+ column.filter.operator === "inlist"
1190
+ ? false
1191
+ : true,
1192
+ placeholder: column.filter.placeholder
1193
+ ? column.filter.placeholder
1194
+ : "All Options",
1195
+ dataSource: selectedDataSource,
1196
+ };
1197
+ } else {
1198
+ filterEditor = null;
1199
+ filterEditorProps = null;
1200
+ }
1201
+
1202
+ return {
1203
+ ...commonProps,
1204
+ name: relationName,
1205
+ sortable: false,
1206
+ filterEditor: filterEditor,
1207
+ filterEditorProps: filterEditorProps,
1208
+ render: ({ data }) => {
1209
+ const relationValue = column.id.reduce(
1210
+ (acc, id) =>
1211
+ acc === ""
1212
+ ? data[id]
1213
+ : acc && acc[id]
1214
+ ? acc[id]
1215
+ : "",
1216
+ ""
1217
+ );
1218
+
1219
+ if (
1220
+ relationValue &&
1221
+ Array.isArray(relationValue) &&
1222
+ relationValue.length > 0
1223
+ ) {
1224
+ const nameProperties = Array.isArray(
1225
+ column.nameFrom
1226
+ )
1227
+ ? column.nameFrom
1228
+ : [column.nameFrom];
1229
+
1230
+ const values = relationValue
1231
+ .map((rv) => {
1232
+ if (
1233
+ column.childId &&
1234
+ Array.isArray(column.childId)
1235
+ ) {
1236
+ childValue = rv;
1237
+
1238
+ column.childId.forEach((a) => {
1239
+ if (childValue[a]) {
1240
+ childValue =
1241
+ childValue[a];
1242
+ }
1243
+ });
1244
+
1245
+ if (childValue) {
1246
+ const propertyValues =
1247
+ nameProperties
1248
+ .map(
1249
+ (prop) =>
1250
+ childValue[
1251
+ prop
1252
+ ]
1253
+ )
1254
+ .filter(
1255
+ (value) =>
1256
+ value !==
1257
+ undefined &&
1258
+ value !==
1259
+ null
1260
+ );
1261
+ return propertyValues.join(
1262
+ " "
1263
+ );
1264
+ }
1265
+ } else {
1266
+ const propertyValues =
1267
+ nameProperties
1268
+ .map((prop) => rv[prop])
1269
+ .filter(
1270
+ (value) =>
1271
+ value !==
1272
+ undefined &&
1273
+ value !== null
1274
+ );
1275
+ return propertyValues.join(" ");
1276
+ }
1277
+ })
1278
+ .filter((value) => value !== "");
1279
+
1280
+ // if (values.length > 0) {
1281
+ let result = "";
1282
+
1283
+ if (
1284
+ column.relation?.id &&
1285
+ column.relation?.key
1286
+ ) {
1287
+ const relationValue =
1288
+ column.relation.key.reduce(
1289
+ (acc, id) =>
1290
+ acc === ""
1291
+ ? data[id]
1292
+ : acc && acc[id]
1293
+ ? acc[id]
1294
+ : "",
1295
+ ""
1296
+ );
1297
+
1298
+ result = `${
1299
+ relationValue[column.relation.id]
1300
+ }<br />`;
1301
+ }
1302
+
1303
+ if (
1304
+ column.where &&
1305
+ column.where.id &&
1306
+ column.where.value
1307
+ ) {
1308
+ if (
1309
+ data[column.where.id] ===
1310
+ column.where.value
1311
+ ) {
1312
+ result += values.join("<br />");
1313
+ }
1314
+ } else {
1315
+ result += values.join("<br />");
1316
+ }
1317
+
1318
+ return <span>{parse(result)}</span>;
1319
+ // }
1320
+ } else {
1321
+ let result = "";
1322
+
1323
+ if (
1324
+ column.relation?.id &&
1325
+ column.relation?.key
1326
+ ) {
1327
+ const relationValue =
1328
+ column.relation.key.reduce(
1329
+ (acc, id) =>
1330
+ acc === ""
1331
+ ? data[id]
1332
+ : acc && acc[id]
1333
+ ? acc[id]
1334
+ : "",
1335
+ ""
1336
+ );
1337
+
1338
+ result =
1339
+ relationValue &&
1340
+ relationValue[column.relation.id]
1341
+ ? relationValue[
1342
+ column.relation.id
1343
+ ]
1344
+ : "";
1345
+ }
1346
+
1347
+ return <span>{parse(result)}</span>;
1348
+ }
1349
+
1350
+ return null;
1351
+ },
1352
+ };
1353
+ case "richtext":
1354
+ return {
1355
+ ...commonProps,
1356
+ name: column.id,
1357
+ render: ({ data }) => {
1358
+ if (data && data[column.id]) {
1359
+ return (
1360
+ <span>{parse(data[column.id])}</span>
1361
+ );
1362
+ } else {
1363
+ return null;
1364
+ }
1365
+ },
1366
+ };
1367
+ case "stage":
1368
+ return {
1369
+ ...commonProps,
1370
+ name: column.id,
1371
+ sortable: false,
1372
+ render: ({ data }) => {
1373
+ stage = "";
1374
+
1375
+ column.keyIds.forEach((a, b) => {
1376
+ if (data[a] === 1) {
1377
+ stage = column.valueIds[b];
1378
+ }
1379
+ });
1380
+
1381
+ return <span>{stage}</span>;
1382
+ },
1383
+ };
1384
+ case "time":
1385
+ return {
1386
+ ...commonProps,
1387
+ name: column.id,
1388
+ render: ({ data }) => {
1389
+ if (
1390
+ data &&
1391
+ data[column.id] &&
1392
+ moment(data[column.id]).isValid() &&
1393
+ moment(data[column.id]).format(
1394
+ "YYYY-MM-DD"
1395
+ ) !== "1970-01-01"
1396
+ ) {
1397
+ data = moment(data[column.id]).format(
1398
+ column.format
1399
+ ? column.format
1400
+ : "hh:mm A"
1401
+ );
1402
+
1403
+ return <span>{data}</span>;
1404
+ } else {
1405
+ return null;
1406
+ }
1407
+ },
1408
+ };
1409
+ case "url":
1410
+ return {
1411
+ ...commonProps,
1412
+ name: column.id,
1413
+ render: ({ data }) => {
1414
+ if (data && data[column.id]) {
1415
+ return (
1416
+ <span>
1417
+ <a
1418
+ href={data[column.id]}
1419
+ target="_blank"
1420
+ >
1421
+ Link
1422
+ </a>
1423
+ </span>
1424
+ );
1425
+ } else {
1426
+ return null;
1427
+ }
1428
+ },
1429
+ };
1430
+ default:
1431
+ selectedDataSource = filterDataSource.reduce(
1432
+ (acc, fds) => {
1433
+ if (fds.id === column.id) {
1434
+ return fds.dataset;
1435
+ }
1436
+ return acc;
1437
+ },
1438
+ null
1439
+ );
1440
+
1441
+ if (column.filter && column.filter.type) {
1442
+ switch (column.filter.type) {
1443
+ case "select":
1444
+ filterEditor = SelectFilter;
1445
+ filterEditorProps = {
1446
+ multiple:
1447
+ column.filter.operator === "inlist"
1448
+ ? true
1449
+ : false,
1450
+ wrapMultiple:
1451
+ column.filter.operator === "inlist"
1452
+ ? false
1453
+ : true,
1454
+ placeholder: column.filter.placeholder
1455
+ ? column.filter.placeholder
1456
+ : "All Options",
1457
+ dataSource: selectedDataSource,
1458
+ };
1459
+ break;
1460
+ case "date":
1461
+ filterEditor = DateFilter;
1462
+ filterEditorProps = (props, { index }) => {
1463
+ return {
1464
+ dateFormat: "DD-MM-YYYY",
1465
+ placeholder: "All Dates",
1466
+ };
1467
+ };
1468
+ case "number":
1469
+ filterEditor = NumberFilter;
1470
+ break;
1471
+ default:
1472
+ filterEditor = null;
1473
+ filterEditorProps = null;
1474
+ break;
1475
+ }
1476
+ } else {
1477
+ filterEditor = null;
1478
+ filterEditorProps = null;
1479
+ }
1480
+
1481
+ return {
1482
+ ...commonProps,
1483
+ name: column.id,
1484
+ filterEditor: filterEditor,
1485
+ filterEditorProps: filterEditorProps,
1486
+ };
1487
+ }
1488
+ };
1489
+
1490
+ const newColumns = columns.map(renderColumn);
1491
+
1492
+ if (settings.length > 0) {
1493
+ newColumns.push({
1494
+ name: "setting",
1495
+ header: "Action",
1496
+ defaultWidth: 100,
1497
+ textAlign: "center",
1498
+ render: ({ data }) => {
1499
+ return (
1500
+ <div className="tdactions">
1501
+ {settings.map((setting) =>
1502
+ renderSetting(setting, data)
1503
+ )}
1504
+ </div>
1505
+ );
1506
+ },
1507
+ });
1508
+ }
1509
+
1510
+ setGridColumns(newColumns);
1511
+
1512
+ const newFilterValue = columns
1513
+ .filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
1514
+ .map((column) => {
1515
+ // Map these filtered columns to a new object array
1516
+ let filterName = "";
1517
+ if (Array.isArray(column.id)) {
1518
+ filterName = column.id.reduce(
1519
+ (acc, id) => acc + `${id}.`,
1520
+ ""
1521
+ );
1522
+ } else {
1523
+ filterName = column.id;
1524
+ }
1525
+
1526
+ if (column.nameFrom) {
1527
+ filterName += column.nameFrom;
1528
+ }
1529
+
1530
+ return {
1531
+ key: column.filter.key ? column.filter.key : null,
1532
+ name: filterName,
1533
+ operator: column.filter.operator,
1534
+ type: column.filter.type,
1535
+ value: column.filter.value ? column.filter.value : "",
1536
+ };
1537
+ });
1538
+
1539
+ setFilterValue(newFilterValue);
1540
+ }, [columns, filterDataSource]);
1541
+
1542
+ useEffect(() => {
1543
+ if (setFilterData) {
1544
+ console.info(filterValue);
1545
+ setFilterData(filterValue);
1546
+ }
1547
+ }, [filterValue]);
1548
+
1549
+ useEffect(() => {
1550
+ columns.forEach((column) => {
1551
+ if (column.filter && column.filter.url) {
1552
+ CustomFetch(
1553
+ column.filter.url,
1554
+ "POST",
1555
+ column.filter.where
1556
+ ? { where: column.filter.where }
1557
+ : {},
1558
+ (res) => {
1559
+ let filterName;
1560
+
1561
+ if (Array.isArray(column.id)) {
1562
+ const concatenatedIds = column.id.reduce(
1563
+ (acc, id) => acc + `${id}.`,
1564
+ ""
1565
+ );
1566
+
1567
+ filterName = column.nameFrom
1568
+ ? concatenatedIds + column.nameFrom
1569
+ : concatenatedIds;
1570
+ } else {
1571
+ filterName = column.nameFrom
1572
+ ? column.id + column.nameFrom
1573
+ : column.id;
1574
+ }
1575
+
1576
+ const filterIndex = filterDataSource.findIndex(
1577
+ (filter) => filter.id === filterName
1578
+ );
1579
+
1580
+ if (filterIndex >= 0) {
1581
+ const updatedFilter = {
1582
+ ...filterDataSource[filterIndex],
1583
+ dataset: res.data,
1584
+ };
1585
+ const updatedDataSource = [
1586
+ ...filterDataSource.slice(0, filterIndex),
1587
+ updatedFilter,
1588
+ ...filterDataSource.slice(filterIndex + 1),
1589
+ ];
1590
+ setFilterDataSource(updatedDataSource);
1591
+ } else {
1592
+ const newFilter = {
1593
+ id: filterName,
1594
+ dataset: res.data,
1595
+ };
1596
+ setFilterDataSource((prevState) => [
1597
+ ...prevState,
1598
+ newFilter,
1599
+ ]);
1600
+ }
1601
+ }
1602
+ );
1603
+ } else if (column.filter && column.filter.options) {
1604
+ let filterName = Array.isArray(column.id)
1605
+ ? column.id.reduce((acc, id) => acc + `${id}.`, "")
1606
+ : column.id;
1607
+
1608
+ if (column.nameFrom) {
1609
+ filterName += column.nameFrom;
1610
+ }
1611
+
1612
+ const newFilter = {
1613
+ id: filterName,
1614
+ dataset: column.filter.options,
1615
+ };
1616
+
1617
+ setFilterDataSource((prevState) => [
1618
+ ...prevState,
1619
+ newFilter,
1620
+ ]);
1621
+ }
1622
+ });
1623
+ }, []);
1624
+
1625
+ // Data Grid Styling
1626
+ const [windowHeight, setWindowHeight] = useState(window.innerHeight);
1627
+ const gridStyle = {
1628
+ minHeight: windowHeight * 0.7 > 550 ? windowHeight * 0.7 : 550,
1629
+ boxShadow: "none",
1630
+ };
1631
+ const headerProps = {
1632
+ style: style ? style : {},
1633
+ };
1634
+
1635
+ useEffect(() => {
1636
+ const handleResize = () => {
1637
+ setWindowHeight(window.innerHeight);
1638
+ };
1639
+
1640
+ window.addEventListener("resize", handleResize);
1641
+
1642
+ // Clean up the event listener
1643
+ return () => {
1644
+ window.removeEventListener("resize", handleResize);
1645
+ };
1646
+ }, []);
1647
+
1648
+ return (
1649
+ <>
1650
+ {renderSearch()}
1651
+ {renderCreateButton()}
1652
+ <ReactDataGrid
1653
+ columns={gridColumns}
1654
+ dataSource={data}
1655
+ filterValue={filterValue}
1656
+ defaultLimit={limit}
1657
+ defaultSortInfo={sortInfo}
1658
+ enableColumnAutosize={false}
1659
+ enableColumnFilterContextMenu={false}
1660
+ enableSelection={false}
1661
+ headerProps={headerProps}
1662
+ idProperty={`visns-datagrid-${ajaxSetting.url.replace(
1663
+ /\//g,
1664
+ "-"
1665
+ )}`}
1666
+ minRowHeight={40}
1667
+ onFilterValueChange={setFilterValue}
1668
+ onRenderRow={onRenderRow}
1669
+ pagination
1670
+ renderColumnContextMenu={renderColumnContextMenu}
1671
+ rowHeight={null}
1672
+ showZebraRows={true}
1673
+ style={gridStyle}
1674
+ />
1675
+ <Popup
1676
+ open={modalShow}
1677
+ onClose={modalClose}
1678
+ closeOnDocumentClick={false}
1679
+ >
1680
+ <Form
1681
+ closeModal={modalClose}
1682
+ fetchTable={handleReload}
1683
+ formSettings={formData}
1684
+ formType={formType}
1685
+ updateForm={setFormData}
1686
+ columnId={formId}
1687
+ childDropdownCallback={childDropdownCallback}
1688
+ style={style}
1689
+ />
1690
+ </Popup>
1691
+ </>
1692
+ );
1693
+ }
1674
1694
  );
1675
1695
 
1676
1696
  export default DataGrid;