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