@visns-studio/visns-components 1.8.4 → 2.0.0

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 (36) hide show
  1. package/.prettierrc.json +7 -0
  2. package/components/cms/{visns-data-grid.jsx → DataGrid.jsx} +2 -2
  3. package/components/cms/DropZone.jsx +161 -0
  4. package/components/cms/Field.jsx +747 -0
  5. package/components/cms/Form.jsx +475 -0
  6. package/components/cms/sorting/{list.jsx → List.jsx} +3 -3
  7. package/components/crm/{visns-async-select.jsx → AsyncSelect.jsx} +9 -9
  8. package/components/crm/Call.jsx +220 -0
  9. package/components/crm/{visns-data-grid.jsx → DataGrid.jsx} +263 -274
  10. package/components/crm/{visns-field.jsx → Field.jsx} +5 -5
  11. package/components/crm/{visns-form.jsx → Form.jsx} +302 -205
  12. package/components/crm/{visns-multi-select.jsx → MultiSelect.jsx} +1 -1
  13. package/components/crm/{visns-navigation.jsx → Navigation.jsx} +22 -18
  14. package/components/crm/{visns-notification.jsx → Notification.jsx} +1 -1
  15. package/components/crm/TableFilter.jsx +125 -0
  16. package/components/crm/auth/Login.jsx +158 -0
  17. package/components/crm/auth/Profile.jsx +163 -0
  18. package/components/crm/auth/Reset.jsx +87 -0
  19. package/components/crm/auth/Verify.jsx +162 -0
  20. package/components/crm/generic/GenericDetail.jsx +380 -0
  21. package/components/crm/generic/GenericIndex.jsx +112 -0
  22. package/components/crm/generic/NotificationList.jsx +64 -0
  23. package/index.js +37 -19
  24. package/package.json +6 -6
  25. package/components/cms/visns-dropzone.jsx +0 -161
  26. package/components/cms/visns-field.jsx +0 -747
  27. package/components/cms/visns-form.jsx +0 -475
  28. package/components/crm/visns-call.jsx +0 -220
  29. package/components/crm/visns-table-filter.jsx +0 -153
  30. /package/components/cms/sorting/{item.jsx → Item.jsx} +0 -0
  31. /package/components/crm/{visns-autocomplete.jsx → Autocomplete.jsx} +0 -0
  32. /package/components/crm/{visns-download.jsx → Download.jsx} +0 -0
  33. /package/components/crm/{visns-fetch.jsx → Fetch.jsx} +0 -0
  34. /package/components/crm/{visns-loader.jsx → Loader.jsx} +0 -0
  35. /package/components/crm/{visns-select.jsx → Select.jsx} +0 -0
  36. /package/components/crm/{visns-select-list.jsx → SelectList.jsx} +0 -0
package/components/crm/{visns-data-grid.jsx → DataGrid.jsx} RENAMED
@@ -4,20 +4,20 @@ import React, {
4
4
  useEffect,
5
5
  useImperativeHandle,
6
6
  useState,
7
- } from "react";
8
- import { useNavigate } from "react-router-dom";
9
- import axios from "axios";
10
- import debounce from "lodash.debounce";
11
- import moment from "moment";
12
- import numeral from "numeral";
13
- import Popup from "reactjs-popup";
14
- import parse from "html-react-parser";
15
- import NumberFilter from "@inovua/reactdatagrid-community/NumberFilter";
16
- import SelectFilter from "@inovua/reactdatagrid-community/SelectFilter";
17
- import DateFilter from "@inovua/reactdatagrid-community/DateFilter";
18
- import ReactDataGrid from "@inovua/reactdatagrid-community";
19
- import { confirmAlert } from "react-confirm-alert";
20
- import { toast } from "react-toastify";
7
+ } from 'react';
8
+ import { useNavigate } from 'react-router-dom';
9
+ import axios from 'axios';
10
+ import debounce from 'lodash.debounce';
11
+ import moment from 'moment';
12
+ import numeral from 'numeral';
13
+ import Popup from 'reactjs-popup';
14
+ import parse from 'html-react-parser';
15
+ import NumberFilter from '@inovua/reactdatagrid-community/NumberFilter';
16
+ import SelectFilter from '@inovua/reactdatagrid-community/SelectFilter';
17
+ import DateFilter from '@inovua/reactdatagrid-community/DateFilter';
18
+ import ReactDataGrid from '@inovua/reactdatagrid-community';
19
+ import { confirmAlert } from 'react-confirm-alert';
20
+ import { toast } from 'react-toastify';
21
21
  import {
22
22
  ArrowCounterClockwise,
23
23
  Backspace,
@@ -33,13 +33,13 @@ import {
33
33
  Search,
34
34
  ShippingBoxV1,
35
35
  TriangleAlert,
36
- } from "akar-icons";
36
+ } from 'akar-icons';
37
37
 
38
- import "@inovua/reactdatagrid-community/index.css";
39
- import "react-confirm-alert/src/react-confirm-alert.css";
38
+ import '@inovua/reactdatagrid-community/index.css';
39
+ import 'react-confirm-alert/src/react-confirm-alert.css';
40
40
 
41
- import CustomFetch from "./visns-fetch";
42
- import Form from "./visns-form";
41
+ import CustomFetch from './Fetch';
42
+ import Form from './Form';
43
43
 
44
44
  const loadData = async (
45
45
  { skip, limit, sortInfo, currentData, filterValue, groupBy },
@@ -52,7 +52,7 @@ const loadData = async (
52
52
 
53
53
  if (sortInfo) {
54
54
  params.sortBy = sortInfo.name;
55
- params.sort = sortInfo.dir === 1 ? "asc" : "desc";
55
+ params.sort = sortInfo.dir === 1 ? 'asc' : 'desc';
56
56
  }
57
57
 
58
58
  if (ajaxSetting && ajaxSetting.where) {
@@ -66,7 +66,7 @@ const loadData = async (
66
66
  (w) => w.id === identifier
67
67
  );
68
68
 
69
- if (fv.value !== null && fv.value !== "") {
69
+ if (fv.value !== null && fv.value !== '') {
70
70
  if (existingIndex !== -1) {
71
71
  params.where[existingIndex].value = fv.value;
72
72
  } else {
@@ -89,7 +89,7 @@ const loadData = async (
89
89
  const { data, total } = response.data;
90
90
  return { data, count: total };
91
91
  } catch (error) {
92
- console.error("Error fetching data:", error);
92
+ console.error('Error fetching data:', error);
93
93
  return { data: [], count: 0 };
94
94
  }
95
95
  };
@@ -102,11 +102,9 @@ const DataGrid = forwardRef(
102
102
  columns,
103
103
  settings,
104
104
  setFilterData,
105
+ setConfig,
105
106
  setTotal,
106
107
  style,
107
- tableFilters,
108
- historySearch,
109
- historyUrl,
110
108
  },
111
109
  ref
112
110
  ) => {
@@ -114,25 +112,11 @@ const DataGrid = forwardRef(
114
112
 
115
113
  /** Modal States */
116
114
  const [formData, setFormData] = useState({});
117
- const [formType, setFormType] = useState("");
115
+ const [formType, setFormType] = useState('');
118
116
  const [formId, setFormId] = useState(0);
119
117
  const [modalShow, setModalShow] = useState(false);
120
118
 
121
119
  /** 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
120
  const modalOpen = (formType, formId) => {
137
121
  setModalShow(true);
138
122
  setFormType(formType);
@@ -149,7 +133,7 @@ const DataGrid = forwardRef(
149
133
 
150
134
  /** Table States */
151
135
  const [dataReload, setDataReload] = useState(0);
152
- const [dSearch, setDSearch] = useState("");
136
+ const [dSearch, setDSearch] = useState('');
153
137
  const data = useCallback(
154
138
  (params) => {
155
139
  const sqlResult = loadData(params, dSearch, ajaxSetting);
@@ -172,15 +156,8 @@ const DataGrid = forwardRef(
172
156
  const [filterDataSource, setFilterDataSource] = useState([]);
173
157
  const [filterValue, setFilterValue] = useState([]);
174
158
  const [gridColumns, setGridColumns] = useState([]);
175
- const [limit, setLimit] = useState(ajaxSetting.take || 10);
176
- const [search, setSearch] = useState("");
177
- const sortInfo =
178
- ajaxSetting.sortBy && ajaxSetting.sort
179
- ? {
180
- name: ajaxSetting.sortBy,
181
- dir: ajaxSetting.sort === "asc" ? 1 : -1,
182
- }
183
- : null;
159
+ const [limit, setLimit] = useState(0);
160
+ const [search, setSearch] = useState('');
184
161
 
185
162
  /** Table Functions */
186
163
  useImperativeHandle(ref, () => ({
@@ -190,20 +167,6 @@ const DataGrid = forwardRef(
190
167
  }));
191
168
 
192
169
  const handleFilterChange = useCallback((d) => {
193
- // d.forEach((filterValue) => {
194
- // if (filterValue.reset && filterValue.reset.length > 0) {
195
- // filterValue.reset.forEach((reset) => {
196
- // const existingIndex = d.findIndex(
197
- // (f) => f.key === reset
198
- // );
199
-
200
- // if (existingIndex !== -1) {
201
- // d[existingIndex].value = "";
202
- // }
203
- // });
204
- // }
205
- // });
206
-
207
170
  setFilterValue(d);
208
171
  }, []);
209
172
 
@@ -214,32 +177,32 @@ const DataGrid = forwardRef(
214
177
 
215
178
  const handleSettingClick = (s, d) => {
216
179
  switch (s.id) {
217
- case "update":
218
- modalOpen("update", d.id);
180
+ case 'update':
181
+ modalOpen('update', d.id);
219
182
  break;
220
- case "delete":
183
+ case 'delete':
221
184
  confirmAlert({
222
- title: "Delete Item",
185
+ title: 'Delete Item',
223
186
  message:
224
- s.description && s.description !== ""
187
+ s.description && s.description !== ''
225
188
  ? s.description
226
189
  : `Are you sure you want to delete ${
227
190
  d.name
228
191
  ? d.name
229
192
  : d.label
230
193
  ? d.label
231
- : "this item"
194
+ : 'this item'
232
195
  }?`,
233
196
  buttons: [
234
197
  {
235
- label: "Yes",
198
+ label: 'Yes',
236
199
  onClick: () =>
237
200
  CustomFetch(
238
- form.url + "/" + d[form.primaryKey],
239
- "DELETE",
201
+ form.url + '/' + d[form.primaryKey],
202
+ 'DELETE',
240
203
  {},
241
204
  (result) => {
242
- if (result.error === "") {
205
+ if (result.error === '') {
243
206
  const min = 0;
244
207
  const max = 999999999;
245
208
  const randomNumber = Math.floor(
@@ -264,7 +227,7 @@ const DataGrid = forwardRef(
264
227
  ),
265
228
  },
266
229
  {
267
- label: "No",
230
+ label: 'No',
268
231
  onClick: () => close(),
269
232
  },
270
233
  ],
@@ -273,17 +236,17 @@ const DataGrid = forwardRef(
273
236
  default:
274
237
  confirmAlert({
275
238
  title: s.title,
276
- message: "",
239
+ message: '',
277
240
  buttons: [
278
241
  {
279
- label: "Yes",
242
+ label: 'Yes',
280
243
  onClick: () =>
281
244
  CustomFetch(
282
- s.url + "/" + d[form.primaryKey],
245
+ s.url + '/' + d[form.primaryKey],
283
246
  s.method,
284
247
  {},
285
248
  function (result) {
286
- if (result.error === "") {
249
+ if (result.error === '') {
287
250
  const min = 0;
288
251
  const max = 999999999;
289
252
  const randomNumber = Math.floor(
@@ -306,7 +269,7 @@ const DataGrid = forwardRef(
306
269
  ),
307
270
  },
308
271
  {
309
- label: "No",
272
+ label: 'No',
310
273
  onClick: () => close(),
311
274
  },
312
275
  ],
@@ -325,9 +288,26 @@ const DataGrid = forwardRef(
325
288
  setDataReload(randomNumber);
326
289
  };
327
290
 
291
+ const handleSort = (value) => {
292
+ setConfig((prevState) => {
293
+ const { id, dir } = value || {}; // Destructure id and dir from value (if provided)
294
+ const sortBy = id || null;
295
+ const sort = dir === 1 ? 'asc' : dir === -1 ? 'desc' : null;
296
+
297
+ return {
298
+ ...prevState,
299
+ ajaxSetting: {
300
+ ...prevState.ajaxSetting,
301
+ sortBy,
302
+ sort,
303
+ },
304
+ };
305
+ });
306
+ };
307
+
328
308
  const onRowClick = useCallback((rowProps, event) => {
329
309
  const cellElement = event.target.closest(
330
- ".InovuaReactDataGrid__cell"
310
+ '.InovuaReactDataGrid__cell'
331
311
  );
332
312
  const columnIndex = Array.from(
333
313
  cellElement.parentNode.children
@@ -339,7 +319,7 @@ const DataGrid = forwardRef(
339
319
  const column = rowProps.columns[columnIndex];
340
320
 
341
321
  if (column.link && column.link.url) {
342
- const fileRelationArray = column.id.split(".");
322
+ const fileRelationArray = column.id.split('.');
343
323
  const linkUrl = column.link.url;
344
324
  const linkKey = rowProps.columns[columnIndex].link.key;
345
325
  const rowData = rowProps.data[linkKey];
@@ -361,11 +341,11 @@ const DataGrid = forwardRef(
361
341
 
362
342
  window.open(
363
343
  `${linkPopup}/${rowData}`,
364
- "",
365
- "width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
344
+ '',
345
+ 'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
366
346
  );
367
347
  } else {
368
- modalOpen("update", rowProps.data[form.primaryKey]);
348
+ modalOpen('update', rowProps.data[form.primaryKey]);
369
349
  }
370
350
  }
371
351
  }, []);
@@ -396,14 +376,14 @@ const DataGrid = forwardRef(
396
376
  if (form.create.url) {
397
377
  navigate(form.create.url);
398
378
  } else {
399
- modalOpen("create", 0);
379
+ modalOpen('create', 0);
400
380
  }
401
381
  } else {
402
382
  if (form.url) {
403
383
  window.open(
404
384
  form.url,
405
- "",
406
- "width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
385
+ '',
386
+ 'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
407
387
  );
408
388
  }
409
389
  }
@@ -435,7 +415,7 @@ const DataGrid = forwardRef(
435
415
  ) : (
436
416
  <div
437
417
  className="filterInput--alt"
438
- style={{ height: "37px" }}
418
+ style={{ height: '37px' }}
439
419
  ></div>
440
420
  );
441
421
  };
@@ -445,10 +425,10 @@ const DataGrid = forwardRef(
445
425
  const assetPath =
446
426
  import.meta.env.REACT_APP_ASSET_PATH !== undefined
447
427
  ? import.meta.env.REACT_APP_ASSET_PATH
448
- : "";
428
+ : '';
449
429
 
450
430
  const addIcon = (src, icon, alt, tooltipContent, key) => {
451
- if (src && src !== "") {
431
+ if (src && src !== '') {
452
432
  icons.push(
453
433
  <img
454
434
  src={`${assetPath}${src}`}
@@ -461,15 +441,15 @@ const DataGrid = forwardRef(
461
441
  } else {
462
442
  let IconComponent = null;
463
443
 
464
- if (icon === "archive") {
444
+ if (icon === 'archive') {
465
445
  IconComponent = ShippingBoxV1;
466
- } else if (icon === "folder") {
446
+ } else if (icon === 'folder') {
467
447
  IconComponent = Folder;
468
- } else if (icon === "inbox") {
448
+ } else if (icon === 'inbox') {
469
449
  IconComponent = Inbox;
470
- } else if (icon === "network") {
450
+ } else if (icon === 'network') {
471
451
  IconComponent = Network;
472
- } else if (icon === "urgent") {
452
+ } else if (icon === 'urgent') {
473
453
  IconComponent = TriangleAlert;
474
454
  }
475
455
 
@@ -490,12 +470,12 @@ const DataGrid = forwardRef(
490
470
 
491
471
  c.config.forEach((config, configKey) => {
492
472
  const fieldValue = config.id.reduce((acc, id) => {
493
- if (acc === "") {
473
+ if (acc === '') {
494
474
  return data[id];
495
475
  } else {
496
476
  return acc[id];
497
477
  }
498
- }, "");
478
+ }, '');
499
479
 
500
480
  const iconData = config.icons.find(
501
481
  (icon) => icon.value === fieldValue
@@ -539,21 +519,21 @@ const DataGrid = forwardRef(
539
519
  if (
540
520
  d.hasOwnProperty(s.active.id) &&
541
521
  d[s.active.id] === s.active.value &&
542
- s.active.type !== "greater" &&
543
- s.active.type !== "not null"
522
+ s.active.type !== 'greater' &&
523
+ s.active.type !== 'not null'
544
524
  ) {
545
525
  iconStyle = {
546
526
  color: s.active.colour,
547
527
  };
548
528
  } else if (
549
- s.active.type === "greater" &&
529
+ s.active.type === 'greater' &&
550
530
  d[s.active.id] > s.active.value
551
531
  ) {
552
532
  iconStyle = {
553
533
  color: s.active.colour,
554
534
  };
555
535
  } else if (
556
- s.active.type === "not null" &&
536
+ s.active.type === 'not null' &&
557
537
  d[s.active.id] !== null
558
538
  ) {
559
539
  iconStyle = {
@@ -561,7 +541,7 @@ const DataGrid = forwardRef(
561
541
  };
562
542
  } else {
563
543
  iconStyle = {
564
- color: "",
544
+ color: '',
565
545
  };
566
546
  }
567
547
  }
@@ -586,23 +566,23 @@ const DataGrid = forwardRef(
586
566
 
587
567
  if (allow) {
588
568
  switch (s.id) {
589
- case "archive":
569
+ case 'archive':
590
570
  return getIconComponent(ShippingBoxV1);
591
- case "complete":
571
+ case 'complete':
592
572
  return getIconComponent(Check);
593
- case "copy":
573
+ case 'copy':
594
574
  return getIconComponent(Copy);
595
- case "delete":
575
+ case 'delete':
596
576
  return getIconComponent(Backspace);
597
- case "family":
577
+ case 'family':
598
578
  return getIconComponent(Network);
599
- case "primary":
579
+ case 'primary':
600
580
  return getIconComponent(Ribbon);
601
- case "restore":
581
+ case 'restore':
602
582
  return getIconComponent(ArrowCounterClockwise);
603
- case "ssa":
583
+ case 'ssa':
604
584
  return getIconComponent(Clock);
605
- case "update":
585
+ case 'update':
606
586
  return getIconComponent(Edit);
607
587
  default:
608
588
  return null;
@@ -672,36 +652,35 @@ const DataGrid = forwardRef(
672
652
  };
673
653
 
674
654
  switch (column.type) {
675
- case "address":
655
+ case 'address':
676
656
  return {
677
657
  ...commonProps,
678
658
  name: `${column.type}.${column.id}`,
679
659
  render: ({ data }) => {
680
- value = "";
660
+ const addressFields = [
661
+ 'address1',
662
+ 'address2',
663
+ 'suburb',
664
+ 'postcode',
665
+ ];
681
666
 
682
- if (data.address1) {
683
- value += `${data.address1} `;
684
- }
667
+ const addressValue = addressFields
668
+ .filter((field) => data[field])
669
+ .map((field) => data[field])
670
+ .join(' ');
685
671
 
686
- if (data.address2) {
687
- value += `${data.address2} `;
688
- }
672
+ const stateValue =
673
+ data.state?.name || data.state || '';
689
674
 
690
- if (data.suburb) {
691
- value += `${data.suburb} `;
692
- }
693
-
694
- if (data.postcode) {
695
- value += `${data.postcode} `;
696
- }
675
+ const value = `${addressValue} ${stateValue}`;
697
676
 
698
677
  return <span>{value}</span>;
699
678
  },
700
679
  };
701
- case "age":
680
+ case 'age':
702
681
  if (column.filter && column.filter.type) {
703
682
  switch (column.filter.type) {
704
- case "number":
683
+ case 'number':
705
684
  filterEditor = NumberFilter;
706
685
  break;
707
686
  default:
@@ -714,19 +693,19 @@ const DataGrid = forwardRef(
714
693
 
715
694
  return {
716
695
  ...commonProps,
717
- type: "number",
696
+ type: 'number',
718
697
  filterEditor: filterEditor,
719
698
  name: `${column.type}.${column.id}`,
720
699
  render: ({ data }) => {
721
700
  value = column.id.reduce((acc, id) => {
722
- if (acc === "") {
701
+ if (acc === '') {
723
702
  return data[id];
724
703
  } else {
725
704
  return acc[id];
726
705
  }
727
- }, "");
706
+ }, '');
728
707
 
729
- if (value !== "" && value !== null) {
708
+ if (value !== '' && value !== null) {
730
709
  date = moment(value);
731
710
 
732
711
  return (
@@ -735,7 +714,7 @@ const DataGrid = forwardRef(
735
714
  date,
736
715
  column.duration
737
716
  ? column.duration
738
- : "years"
717
+ : 'years'
739
718
  )}
740
719
  </span>
741
720
  );
@@ -744,7 +723,7 @@ const DataGrid = forwardRef(
744
723
  }
745
724
  },
746
725
  };
747
- case "arrayCount":
726
+ case 'arrayCount':
748
727
  return {
749
728
  ...commonProps,
750
729
  name: `${column.type}.${column.id}`,
@@ -757,7 +736,7 @@ const DataGrid = forwardRef(
757
736
  }
758
737
  },
759
738
  };
760
- case "coding":
739
+ case 'coding':
761
740
  return {
762
741
  ...commonProps,
763
742
  name: `${column.type}.${column.id}`,
@@ -770,7 +749,7 @@ const DataGrid = forwardRef(
770
749
  }
771
750
  },
772
751
  };
773
- case "colour":
752
+ case 'colour':
774
753
  return {
775
754
  ...commonProps,
776
755
  name: `${column.type}.${column.id}`,
@@ -780,23 +759,23 @@ const DataGrid = forwardRef(
780
759
  return (
781
760
  <div
782
761
  style={{
783
- width: "25px",
784
- height: "25px",
785
- borderRadius: "10px",
786
- overflow: "hidden",
762
+ width: '25px',
763
+ height: '25px',
764
+ borderRadius: '10px',
765
+ overflow: 'hidden',
787
766
  }}
788
767
  >
789
768
  <div
790
769
  style={{
791
770
  background:
792
771
  data[column.id] +
793
- " none repeat scroll 0% 0%",
794
- height: "100%",
795
- width: "100%",
796
- cursor: "pointer",
797
- position: "relative",
772
+ ' none repeat scroll 0% 0%',
773
+ height: '100%',
774
+ width: '100%',
775
+ cursor: 'pointer',
776
+ position: 'relative',
798
777
  outline:
799
- "currentcolor none medium",
778
+ 'currentcolor none medium',
800
779
  }}
801
780
  ></div>
802
781
  </div>
@@ -806,7 +785,7 @@ const DataGrid = forwardRef(
806
785
  }
807
786
  },
808
787
  };
809
- case "created_by":
788
+ case 'created_by':
810
789
  return {
811
790
  ...commonProps,
812
791
  name: `${column.type}.${column.id}`,
@@ -825,14 +804,14 @@ const DataGrid = forwardRef(
825
804
  }
826
805
  },
827
806
  };
828
- case "currency":
807
+ case 'currency':
829
808
  return {
830
809
  ...commonProps,
831
810
  name: column.id,
832
811
  render: ({ data }) => {
833
812
  if (data) {
834
813
  data = numeral(data[column.id]).format(
835
- "$0,0.00"
814
+ '$0,0.00'
836
815
  );
837
816
 
838
817
  return <span>{data}</span>;
@@ -841,13 +820,13 @@ const DataGrid = forwardRef(
841
820
  }
842
821
  },
843
822
  };
844
- case "date":
823
+ case 'date':
845
824
  if (column.filter && column.filter.type) {
846
825
  filterEditor = DateFilter;
847
826
  filterEditorProps = (props, { index }) => {
848
827
  return {
849
- dateFormat: "DD-MM-YYYY",
850
- placeholder: "All Dates",
828
+ dateFormat: 'DD-MM-YYYY',
829
+ placeholder: 'All Dates',
851
830
  };
852
831
  };
853
832
  } else {
@@ -866,18 +845,18 @@ const DataGrid = forwardRef(
866
845
  data[column.id] &&
867
846
  moment(data[column.id]).isValid() &&
868
847
  moment(data[column.id]).format(
869
- "YYYY-MM-DD"
870
- ) !== "1970-01-01"
848
+ 'YYYY-MM-DD'
849
+ ) !== '1970-01-01'
871
850
  ) {
872
851
  const value = moment(
873
852
  data[column.id]
874
- ).format(column.format || "DD-MM-YYYY");
853
+ ).format(column.format || 'DD-MM-YYYY');
875
854
  style = {};
876
855
 
877
856
  if (
878
857
  column.active &&
879
858
  column.active.id &&
880
- column.active.value === "expired"
859
+ column.active.value === 'expired'
881
860
  ) {
882
861
  if (
883
862
  data[column.active.id] &&
@@ -897,13 +876,13 @@ const DataGrid = forwardRef(
897
876
  }
898
877
  },
899
878
  };
900
- case "daterange":
879
+ case 'daterange':
901
880
  if (column.filter && column.filter.type) {
902
881
  filterEditor = DateFilter;
903
882
  filterEditorProps = (props, { index }) => {
904
883
  return {
905
- dateFormat: "DD-MM-YYYY",
906
- placeholder: "All Dates",
884
+ dateFormat: 'DD-MM-YYYY',
885
+ placeholder: 'All Dates',
907
886
  };
908
887
  };
909
888
  } else {
@@ -922,11 +901,11 @@ const DataGrid = forwardRef(
922
901
  data[column.id[0]] &&
923
902
  moment(data[column.id[0]]).isValid() &&
924
903
  moment(data[column.id[0]]).format(
925
- "YYYY-MM-DD"
926
- ) !== "1970-01-01"
904
+ 'YYYY-MM-DD'
905
+ ) !== '1970-01-01'
927
906
  ) {
928
907
  value = moment(data[column.id[0]]).format(
929
- column.format || "DD-MM-YYYY"
908
+ column.format || 'DD-MM-YYYY'
930
909
  );
931
910
  }
932
911
 
@@ -935,24 +914,24 @@ const DataGrid = forwardRef(
935
914
  data[column.id[1]] &&
936
915
  moment(data[column.id[1]]).isValid() &&
937
916
  moment(data[column.id[1]]).format(
938
- "YYYY-MM-DD"
939
- ) !== "1970-01-01"
917
+ 'YYYY-MM-DD'
918
+ ) !== '1970-01-01'
940
919
  ) {
941
920
  value += ` - ${moment(
942
921
  data[column.id[1]]
943
- ).format(column.format || "DD-MM-YYYY")}`;
922
+ ).format(column.format || 'DD-MM-YYYY')}`;
944
923
  }
945
924
 
946
925
  return <span>{value}</span>;
947
926
  },
948
927
  };
949
- case "datetime":
928
+ case 'datetime':
950
929
  if (column.filter && column.filter.type) {
951
930
  filterEditor = DateFilter;
952
931
  filterEditorProps = (props, { index }) => {
953
932
  return {
954
- dateFormat: "DD-MM-YYYY",
955
- placeholder: "All Dates",
933
+ dateFormat: 'DD-MM-YYYY',
934
+ placeholder: 'All Dates',
956
935
  };
957
936
  };
958
937
  } else {
@@ -971,13 +950,13 @@ const DataGrid = forwardRef(
971
950
  data[column.id] &&
972
951
  moment(data[column.id]).isValid() &&
973
952
  moment(data[column.id]).format(
974
- "YYYY-MM-DD"
975
- ) !== "1970-01-01"
953
+ 'YYYY-MM-DD'
954
+ ) !== '1970-01-01'
976
955
  ) {
977
956
  data = moment(data[column.id]).format(
978
957
  column.format
979
958
  ? column.format
980
- : "DD-MM-YYYY hh:mm A"
959
+ : 'DD-MM-YYYY hh:mm A'
981
960
  );
982
961
 
983
962
  return <span>{data}</span>;
@@ -986,7 +965,7 @@ const DataGrid = forwardRef(
986
965
  }
987
966
  },
988
967
  };
989
- case "file":
968
+ case 'file':
990
969
  return {
991
970
  ...commonProps,
992
971
  name: column.id,
@@ -1009,7 +988,7 @@ const DataGrid = forwardRef(
1009
988
  }
1010
989
  },
1011
990
  };
1012
- case "icons":
991
+ case 'icons':
1013
992
  return {
1014
993
  ...commonProps,
1015
994
  name: column.id,
@@ -1037,13 +1016,13 @@ const DataGrid = forwardRef(
1037
1016
  }
1038
1017
  },
1039
1018
  };
1040
- case "image":
1019
+ case 'image':
1041
1020
  return {
1042
1021
  ...commonProps,
1043
1022
  name: column.id,
1044
1023
  render: ({ data }) => {
1045
1024
  if (data && data[column.id]) {
1046
- const fileUrl =
1025
+ fileUrl =
1047
1026
  data[column.id][0]?.file_url ||
1048
1027
  data[column.id]?.file_url;
1049
1028
 
@@ -1061,7 +1040,7 @@ const DataGrid = forwardRef(
1061
1040
  return null;
1062
1041
  },
1063
1042
  };
1064
- case "json":
1043
+ case 'json':
1065
1044
  return {
1066
1045
  ...commonProps,
1067
1046
  name: column.id,
@@ -1079,13 +1058,13 @@ const DataGrid = forwardRef(
1079
1058
  }
1080
1059
  },
1081
1060
  };
1082
- case "number":
1061
+ case 'number':
1083
1062
  return {
1084
1063
  ...commonProps,
1085
1064
  name: column.id,
1086
- type: "number",
1065
+ type: 'number',
1087
1066
  };
1088
- case "option":
1067
+ case 'option':
1089
1068
  selectedDataSource = filterDataSource.reduce(
1090
1069
  (acc, fds) => {
1091
1070
  if (fds.id === column.id) {
@@ -1099,13 +1078,13 @@ const DataGrid = forwardRef(
1099
1078
  if (
1100
1079
  column.filter &&
1101
1080
  column.filter.type &&
1102
- column.filter.type === "select"
1081
+ column.filter.type === 'select'
1103
1082
  ) {
1104
1083
  filterEditor = SelectFilter;
1105
1084
  filterEditorProps = {
1106
1085
  placeholder: column.filter.placeholder
1107
1086
  ? column.filter.placeholder
1108
- : "All Options",
1087
+ : 'All Options',
1109
1088
  dataSource: selectedDataSource,
1110
1089
  };
1111
1090
  } else {
@@ -1132,7 +1111,7 @@ const DataGrid = forwardRef(
1132
1111
  }
1133
1112
  },
1134
1113
  };
1135
- case "placeholder":
1114
+ case 'placeholder':
1136
1115
  return {
1137
1116
  ...commonProps,
1138
1117
  name: column.id,
@@ -1145,10 +1124,10 @@ const DataGrid = forwardRef(
1145
1124
  }
1146
1125
  },
1147
1126
  };
1148
- case "relation":
1127
+ case 'relation':
1149
1128
  relationName = column.id.reduce(
1150
1129
  (acc, id) => acc + `${id}.`,
1151
- ""
1130
+ ''
1152
1131
  );
1153
1132
  relationName += column.nameFrom;
1154
1133
 
@@ -1165,21 +1144,21 @@ const DataGrid = forwardRef(
1165
1144
  if (
1166
1145
  column.filter &&
1167
1146
  column.filter.type &&
1168
- column.filter.type === "select"
1147
+ column.filter.type === 'select'
1169
1148
  ) {
1170
1149
  filterEditor = SelectFilter;
1171
1150
  filterEditorProps = {
1172
1151
  multiple:
1173
- column.filter.operator === "inlist"
1152
+ column.filter.operator === 'inlist'
1174
1153
  ? true
1175
1154
  : false,
1176
1155
  wrapMultiple:
1177
- column.filter.operator === "inlist"
1156
+ column.filter.operator === 'inlist'
1178
1157
  ? false
1179
1158
  : true,
1180
1159
  placeholder: column.filter.placeholder
1181
1160
  ? column.filter.placeholder
1182
- : "All Options",
1161
+ : 'All Options',
1183
1162
  dataSource: selectedDataSource,
1184
1163
  };
1185
1164
  } else {
@@ -1195,16 +1174,16 @@ const DataGrid = forwardRef(
1195
1174
  filterEditorProps: filterEditorProps,
1196
1175
  render: ({ data }) => {
1197
1176
  value = column.id.reduce((acc, id) => {
1198
- if (acc === "") {
1177
+ if (acc === '') {
1199
1178
  return data[id];
1200
1179
  } else {
1201
1180
  if (acc && acc[id]) {
1202
1181
  return acc[id];
1203
1182
  } else {
1204
- return "";
1183
+ return '';
1205
1184
  }
1206
1185
  }
1207
- }, "");
1186
+ }, '');
1208
1187
 
1209
1188
  if (value) {
1210
1189
  if (Array.isArray(value)) {
@@ -1214,14 +1193,14 @@ const DataGrid = forwardRef(
1214
1193
  if (Array.isArray(column.nameFrom)) {
1215
1194
  value = column.nameFrom
1216
1195
  .map((nf) => value[nf])
1217
- .join(" ");
1196
+ .join(' ');
1218
1197
  } else {
1219
1198
  value = value[column.nameFrom];
1220
1199
  }
1221
1200
 
1222
1201
  if (
1223
1202
  column.placeholder &&
1224
- column.placeholder !== ""
1203
+ column.placeholder !== ''
1225
1204
  ) {
1226
1205
  return (
1227
1206
  <span>{column.placeholder}</span>
@@ -1234,9 +1213,9 @@ const DataGrid = forwardRef(
1234
1213
  }
1235
1214
  },
1236
1215
  };
1237
- case "relationArray":
1216
+ case 'relationArray':
1238
1217
  relationName =
1239
- column.id.reduce((acc, id) => acc + `${id}.`, "") +
1218
+ column.id.reduce((acc, id) => acc + `${id}.`, '') +
1240
1219
  column.nameFrom;
1241
1220
 
1242
1221
  selectedDataSource = filterDataSource.reduce(
@@ -1252,21 +1231,21 @@ const DataGrid = forwardRef(
1252
1231
  if (
1253
1232
  column.filter &&
1254
1233
  column.filter.type &&
1255
- column.filter.type === "select"
1234
+ column.filter.type === 'select'
1256
1235
  ) {
1257
1236
  filterEditor = SelectFilter;
1258
1237
  filterEditorProps = {
1259
1238
  multiple:
1260
- column.filter.operator === "inlist"
1239
+ column.filter.operator === 'inlist'
1261
1240
  ? true
1262
1241
  : false,
1263
1242
  wrapMultiple:
1264
- column.filter.operator === "inlist"
1243
+ column.filter.operator === 'inlist'
1265
1244
  ? false
1266
1245
  : true,
1267
1246
  placeholder: column.filter.placeholder
1268
1247
  ? column.filter.placeholder
1269
- : "All Options",
1248
+ : 'All Options',
1270
1249
  dataSource: selectedDataSource,
1271
1250
  };
1272
1251
  } else {
@@ -1283,12 +1262,12 @@ const DataGrid = forwardRef(
1283
1262
  render: ({ data }) => {
1284
1263
  const relationValue = column.id.reduce(
1285
1264
  (acc, id) =>
1286
- acc === ""
1265
+ acc === ''
1287
1266
  ? data[id]
1288
1267
  : acc && acc[id]
1289
1268
  ? acc[id]
1290
- : "",
1291
- ""
1269
+ : '',
1270
+ ''
1292
1271
  );
1293
1272
 
1294
1273
  if (
@@ -1334,7 +1313,7 @@ const DataGrid = forwardRef(
1334
1313
  null
1335
1314
  );
1336
1315
  return propertyValues.join(
1337
- " "
1316
+ ' '
1338
1317
  );
1339
1318
  }
1340
1319
  } else {
@@ -1347,13 +1326,13 @@ const DataGrid = forwardRef(
1347
1326
  undefined &&
1348
1327
  value !== null
1349
1328
  );
1350
- return propertyValues.join(" ");
1329
+ return propertyValues.join(' ');
1351
1330
  }
1352
1331
  })
1353
- .filter((value) => value !== "");
1332
+ .filter((value) => value !== '');
1354
1333
 
1355
1334
  // if (values.length > 0) {
1356
- let result = "";
1335
+ let result = '';
1357
1336
 
1358
1337
  if (
1359
1338
  column.relation?.id &&
@@ -1362,12 +1341,12 @@ const DataGrid = forwardRef(
1362
1341
  const relationValue =
1363
1342
  column.relation.key.reduce(
1364
1343
  (acc, id) =>
1365
- acc === ""
1344
+ acc === ''
1366
1345
  ? data[id]
1367
1346
  : acc && acc[id]
1368
1347
  ? acc[id]
1369
- : "",
1370
- ""
1348
+ : '',
1349
+ ''
1371
1350
  );
1372
1351
 
1373
1352
  result = `${
@@ -1384,16 +1363,16 @@ const DataGrid = forwardRef(
1384
1363
  data[column.where.id] ===
1385
1364
  column.where.value
1386
1365
  ) {
1387
- result += values.join("<br />");
1366
+ result += values.join('<br />');
1388
1367
  }
1389
1368
  } else {
1390
- result += values.join("<br />");
1369
+ result += values.join('<br />');
1391
1370
  }
1392
1371
 
1393
1372
  return <span>{parse(result)}</span>;
1394
1373
  // }
1395
1374
  } else {
1396
- let result = "";
1375
+ let result = '';
1397
1376
 
1398
1377
  if (
1399
1378
  column.relation?.id &&
@@ -1402,12 +1381,12 @@ const DataGrid = forwardRef(
1402
1381
  const relationValue =
1403
1382
  column.relation.key.reduce(
1404
1383
  (acc, id) =>
1405
- acc === ""
1384
+ acc === ''
1406
1385
  ? data[id]
1407
1386
  : acc && acc[id]
1408
1387
  ? acc[id]
1409
- : "",
1410
- ""
1388
+ : '',
1389
+ ''
1411
1390
  );
1412
1391
 
1413
1392
  result =
@@ -1416,7 +1395,7 @@ const DataGrid = forwardRef(
1416
1395
  ? relationValue[
1417
1396
  column.relation.id
1418
1397
  ]
1419
- : "";
1398
+ : '';
1420
1399
  }
1421
1400
 
1422
1401
  return <span>{parse(result)}</span>;
@@ -1425,7 +1404,7 @@ const DataGrid = forwardRef(
1425
1404
  return null;
1426
1405
  },
1427
1406
  };
1428
- case "richtext":
1407
+ case 'richtext':
1429
1408
  return {
1430
1409
  ...commonProps,
1431
1410
  name: column.id,
@@ -1439,13 +1418,13 @@ const DataGrid = forwardRef(
1439
1418
  }
1440
1419
  },
1441
1420
  };
1442
- case "stage":
1421
+ case 'stage':
1443
1422
  return {
1444
1423
  ...commonProps,
1445
1424
  name: column.id,
1446
1425
  sortable: false,
1447
1426
  render: ({ data }) => {
1448
- stage = "";
1427
+ stage = '';
1449
1428
 
1450
1429
  column.keyIds.forEach((a, b) => {
1451
1430
  if (data[a] === 1) {
@@ -1456,7 +1435,7 @@ const DataGrid = forwardRef(
1456
1435
  return <span>{stage}</span>;
1457
1436
  },
1458
1437
  };
1459
- case "time":
1438
+ case 'time':
1460
1439
  return {
1461
1440
  ...commonProps,
1462
1441
  name: column.id,
@@ -1466,13 +1445,13 @@ const DataGrid = forwardRef(
1466
1445
  data[column.id] &&
1467
1446
  moment(data[column.id]).isValid() &&
1468
1447
  moment(data[column.id]).format(
1469
- "YYYY-MM-DD"
1470
- ) !== "1970-01-01"
1448
+ 'YYYY-MM-DD'
1449
+ ) !== '1970-01-01'
1471
1450
  ) {
1472
1451
  data = moment(data[column.id]).format(
1473
1452
  column.format
1474
1453
  ? column.format
1475
- : "hh:mm A"
1454
+ : 'hh:mm A'
1476
1455
  );
1477
1456
 
1478
1457
  return <span>{data}</span>;
@@ -1481,7 +1460,7 @@ const DataGrid = forwardRef(
1481
1460
  }
1482
1461
  },
1483
1462
  };
1484
- case "url":
1463
+ case 'url':
1485
1464
  return {
1486
1465
  ...commonProps,
1487
1466
  name: column.id,
@@ -1515,32 +1494,32 @@ const DataGrid = forwardRef(
1515
1494
 
1516
1495
  if (column.filter && column.filter.type) {
1517
1496
  switch (column.filter.type) {
1518
- case "select":
1497
+ case 'select':
1519
1498
  filterEditor = SelectFilter;
1520
1499
  filterEditorProps = {
1521
1500
  multiple:
1522
- column.filter.operator === "inlist"
1501
+ column.filter.operator === 'inlist'
1523
1502
  ? true
1524
1503
  : false,
1525
1504
  wrapMultiple:
1526
- column.filter.operator === "inlist"
1505
+ column.filter.operator === 'inlist'
1527
1506
  ? false
1528
1507
  : true,
1529
1508
  placeholder: column.filter.placeholder
1530
1509
  ? column.filter.placeholder
1531
- : "All Options",
1510
+ : 'All Options',
1532
1511
  dataSource: selectedDataSource,
1533
1512
  };
1534
1513
  break;
1535
- case "date":
1514
+ case 'date':
1536
1515
  filterEditor = DateFilter;
1537
1516
  filterEditorProps = (props, { index }) => {
1538
1517
  return {
1539
- dateFormat: "DD-MM-YYYY",
1540
- placeholder: "All Dates",
1518
+ dateFormat: 'DD-MM-YYYY',
1519
+ placeholder: 'All Dates',
1541
1520
  };
1542
1521
  };
1543
- case "number":
1522
+ case 'number':
1544
1523
  filterEditor = NumberFilter;
1545
1524
  break;
1546
1525
  default:
@@ -1566,10 +1545,10 @@ const DataGrid = forwardRef(
1566
1545
 
1567
1546
  if (settings.length > 0) {
1568
1547
  newColumns.push({
1569
- name: "setting",
1570
- header: "Action",
1548
+ name: 'setting',
1549
+ header: 'Action',
1571
1550
  defaultWidth: 100,
1572
- textAlign: "center",
1551
+ textAlign: 'center',
1573
1552
  render: ({ data }) => {
1574
1553
  return (
1575
1554
  <div className="tdactions">
@@ -1588,11 +1567,11 @@ const DataGrid = forwardRef(
1588
1567
  .filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
1589
1568
  .map((column) => {
1590
1569
  // Map these filtered columns to a new object array
1591
- let filterName = "";
1570
+ let filterName = '';
1592
1571
  if (Array.isArray(column.id)) {
1593
1572
  filterName = column.id.reduce(
1594
1573
  (acc, id) => acc + `${id}.`,
1595
- ""
1574
+ ''
1596
1575
  );
1597
1576
  } else {
1598
1577
  filterName = column.id;
@@ -1607,7 +1586,7 @@ const DataGrid = forwardRef(
1607
1586
  name: filterName,
1608
1587
  operator: column.filter.operator,
1609
1588
  type: column.filter.type,
1610
- value: column.filter.value ? column.filter.value : "",
1589
+ value: column.filter.value ? column.filter.value : '',
1611
1590
  reset: column.filter.reset ? column.filter.reset : [],
1612
1591
  };
1613
1592
  });
@@ -1626,7 +1605,7 @@ const DataGrid = forwardRef(
1626
1605
  if (column.filter && column.filter.url) {
1627
1606
  CustomFetch(
1628
1607
  column.filter.url,
1629
- "POST",
1608
+ 'POST',
1630
1609
  column.filter.where
1631
1610
  ? { where: column.filter.where }
1632
1611
  : {},
@@ -1635,7 +1614,7 @@ const DataGrid = forwardRef(
1635
1614
  if (Array.isArray(column.id)) {
1636
1615
  const concatenatedIds = column.id.reduce(
1637
1616
  (acc, id) => acc + `${id}.`,
1638
- ""
1617
+ ''
1639
1618
  );
1640
1619
  filterName = column.nameFrom
1641
1620
  ? concatenatedIds + column.nameFrom
@@ -1673,7 +1652,7 @@ const DataGrid = forwardRef(
1673
1652
  );
1674
1653
  } else if (column.filter && column.filter.options) {
1675
1654
  let filterName = Array.isArray(column.id)
1676
- ? column.id.reduce((acc, id) => acc + `${id}.`, "")
1655
+ ? column.id.reduce((acc, id) => acc + `${id}.`, '')
1677
1656
  : column.id;
1678
1657
  if (column.nameFrom) {
1679
1658
  filterName += column.nameFrom;
@@ -1702,7 +1681,7 @@ const DataGrid = forwardRef(
1702
1681
  : 550
1703
1682
  : 450
1704
1683
  : 400,
1705
- boxShadow: "none",
1684
+ boxShadow: 'none',
1706
1685
  });
1707
1686
  const headerProps = {
1708
1687
  style: style ? style : {},
@@ -1739,11 +1718,11 @@ const DataGrid = forwardRef(
1739
1718
  setWindowHeight(window.innerHeight);
1740
1719
  };
1741
1720
 
1742
- window.addEventListener("resize", handleResize);
1721
+ window.addEventListener('resize', handleResize);
1743
1722
 
1744
1723
  // Clean up the event listener
1745
1724
  return () => {
1746
- window.removeEventListener("resize", handleResize);
1725
+ window.removeEventListener('resize', handleResize);
1747
1726
  };
1748
1727
  }, []);
1749
1728
 
@@ -1751,32 +1730,43 @@ const DataGrid = forwardRef(
1751
1730
  <>
1752
1731
  {renderSearch()}
1753
1732
  {renderCreateButton()}
1754
- <ReactDataGrid
1755
- columns={gridColumns}
1756
- dataSource={data}
1757
- filterValue={filterValue}
1758
- limit={limit}
1759
- defaultSortInfo={sortInfo}
1760
- enableColumnAutosize={false}
1761
- enableColumnFilterContextMenu={false}
1762
- enableSelection={false}
1763
- headerProps={headerProps}
1764
- idProperty={`visns-datagrid-${ajaxSetting.url.replace(
1765
- /\//g,
1766
- "-"
1767
- )}`}
1768
- minRowHeight={40}
1769
- onFilterValueChange={(filterValue) => {
1770
- handleFilterChange(filterValue);
1771
- }}
1772
- onLimitChange={setLimit}
1773
- onRenderRow={onRenderRow}
1774
- pagination
1775
- renderColumnContextMenu={renderColumnContextMenu}
1776
- rowHeight={null}
1777
- showZebraRows={true}
1778
- style={gridStyle}
1779
- />
1733
+ {limit && limit > 0 && (
1734
+ <ReactDataGrid
1735
+ columns={gridColumns}
1736
+ dataSource={data}
1737
+ filterValue={filterValue}
1738
+ limit={limit}
1739
+ enableColumnAutosize={false}
1740
+ enableColumnFilterContextMenu={false}
1741
+ enableSelection={false}
1742
+ headerProps={headerProps}
1743
+ idProperty={`visns-datagrid-${ajaxSetting.url.replace(
1744
+ /\//g,
1745
+ '-'
1746
+ )}`}
1747
+ minRowHeight={40}
1748
+ onFilterValueChange={(filterValue) => {
1749
+ handleFilterChange(filterValue);
1750
+ }}
1751
+ onLimitChange={setLimit}
1752
+ onSortInfoChange={handleSort}
1753
+ onRenderRow={onRenderRow}
1754
+ pagination
1755
+ renderColumnContextMenu={renderColumnContextMenu}
1756
+ rowClassName="vs-datagrid--row"
1757
+ rowHeight={null}
1758
+ showZebraRows={true}
1759
+ sortInfo={
1760
+ ajaxSetting.sortBy && ajaxSetting.sort
1761
+ ? {
1762
+ name: ajaxSetting.sortBy,
1763
+ dir: ajaxSetting.sort === 'asc' ? 1 : -1,
1764
+ }
1765
+ : null
1766
+ }
1767
+ style={gridStyle}
1768
+ />
1769
+ )}
1780
1770
  <Popup
1781
1771
  open={modalShow}
1782
1772
  onClose={modalClose}
@@ -1784,13 +1774,12 @@ const DataGrid = forwardRef(
1784
1774
  >
1785
1775
  <Form
1786
1776
  closeModal={modalClose}
1777
+ columnId={formId}
1787
1778
  fetchTable={handleReload}
1788
1779
  formSettings={formData}
1789
1780
  formType={formType}
1790
- updateForm={setFormData}
1791
- columnId={formId}
1792
- childDropdownCallback={childDropdownCallback}
1793
1781
  style={style}
1782
+ updateForm={setFormData}
1794
1783
  />
1795
1784
  </Popup>
1796
1785
  </>