@visns-studio/visns-components 1.3.13 → 1.3.15

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