@visns-studio/visns-components 2.9.8 → 3.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.
|
@@ -295,6 +295,18 @@ const DataGrid = forwardRef(
|
|
|
295
295
|
const handleSettingClick = (s, d) => {
|
|
296
296
|
switch (s.id) {
|
|
297
297
|
case 'delete':
|
|
298
|
+
const getDataId = () => {
|
|
299
|
+
for (const item of ajaxSetting.where) {
|
|
300
|
+
if (
|
|
301
|
+
item.hasOwnProperty('urlParam') &&
|
|
302
|
+
item.urlParam === 'dataId'
|
|
303
|
+
) {
|
|
304
|
+
return item.value;
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
return 0;
|
|
308
|
+
};
|
|
309
|
+
|
|
298
310
|
confirmAlert({
|
|
299
311
|
title: 'Delete Item',
|
|
300
312
|
message:
|
|
@@ -310,11 +322,33 @@ const DataGrid = forwardRef(
|
|
|
310
322
|
buttons: [
|
|
311
323
|
{
|
|
312
324
|
label: 'Yes',
|
|
313
|
-
onClick: () =>
|
|
325
|
+
onClick: () => {
|
|
326
|
+
let deleteForm = {
|
|
327
|
+
url: '',
|
|
328
|
+
method: 'DELETE',
|
|
329
|
+
payload: {},
|
|
330
|
+
};
|
|
331
|
+
|
|
332
|
+
if (
|
|
333
|
+
form.hasOwnProperty('json') &&
|
|
334
|
+
form.json === true
|
|
335
|
+
) {
|
|
336
|
+
deleteForm.url = `${form.url}/jsonDelete`;
|
|
337
|
+
deleteForm.method = 'POST';
|
|
338
|
+
deleteForm.payload = {
|
|
339
|
+
id: d[form.primaryKey],
|
|
340
|
+
dataId: getDataId(),
|
|
341
|
+
};
|
|
342
|
+
} else {
|
|
343
|
+
deleteForm.url = `${form.url}/${
|
|
344
|
+
d[form.primaryKey]
|
|
345
|
+
}`;
|
|
346
|
+
}
|
|
347
|
+
|
|
314
348
|
CustomFetch(
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
349
|
+
deleteForm.url,
|
|
350
|
+
deleteForm.method,
|
|
351
|
+
deleteForm.payload,
|
|
318
352
|
(result) => {
|
|
319
353
|
if (result.error === '') {
|
|
320
354
|
const min = 0;
|
|
@@ -338,7 +372,8 @@ const DataGrid = forwardRef(
|
|
|
338
372
|
);
|
|
339
373
|
}
|
|
340
374
|
}
|
|
341
|
-
)
|
|
375
|
+
);
|
|
376
|
+
},
|
|
342
377
|
},
|
|
343
378
|
{
|
|
344
379
|
label: 'No',
|
|
@@ -2030,6 +2065,7 @@ const DataGrid = forwardRef(
|
|
|
2030
2065
|
closeOnDocumentClick={false}
|
|
2031
2066
|
>
|
|
2032
2067
|
<Form
|
|
2068
|
+
ajaxSetting={ajaxSetting}
|
|
2033
2069
|
closeModal={modalClose}
|
|
2034
2070
|
columnId={formId}
|
|
2035
2071
|
fetchTable={handleReload}
|
package/components/crm/Form.jsx
CHANGED
|
@@ -5,13 +5,17 @@ import { toast } from 'react-toastify';
|
|
|
5
5
|
import moment from 'moment';
|
|
6
6
|
import parse from 'html-react-parser';
|
|
7
7
|
import _ from 'lodash';
|
|
8
|
+
import ReactDataGrid from '@inovua/reactdatagrid-community';
|
|
8
9
|
import { CircleX } from 'akar-icons';
|
|
9
10
|
|
|
11
|
+
import '@inovua/reactdatagrid-community/index.css';
|
|
12
|
+
|
|
10
13
|
import CustomFetch from './Fetch';
|
|
11
14
|
import Field from './Field';
|
|
12
15
|
import Table from './DataGrid';
|
|
13
16
|
|
|
14
17
|
function Form({
|
|
18
|
+
ajaxSetting,
|
|
15
19
|
closeModal,
|
|
16
20
|
columnId,
|
|
17
21
|
formType,
|
|
@@ -24,9 +28,10 @@ function Form({
|
|
|
24
28
|
userProfile,
|
|
25
29
|
}) {
|
|
26
30
|
const navigate = useNavigate();
|
|
27
|
-
const [inputClass, setInputClass] = useState({});
|
|
28
|
-
const [formData, setFormData] = useState({});
|
|
29
31
|
const [fetchTrigger, setFetchTrigger] = useState(false);
|
|
32
|
+
const [formData, setFormData] = useState({});
|
|
33
|
+
const [inputClass, setInputClass] = useState({});
|
|
34
|
+
const [tableData, setTableData] = useState({ columns: [], dataSource: [] });
|
|
30
35
|
const [uploadProgress, setUploadProgress] = useState(0);
|
|
31
36
|
|
|
32
37
|
const childDropdownCallback = (data) => {
|
|
@@ -231,7 +236,7 @@ function Form({
|
|
|
231
236
|
...prevState,
|
|
232
237
|
[id]: e.target.checked,
|
|
233
238
|
}));
|
|
234
|
-
|
|
239
|
+
|
|
235
240
|
const updateFormData = (dataToUpdate) => {
|
|
236
241
|
setFormData((prevState) => ({
|
|
237
242
|
...prevState,
|
|
@@ -341,6 +346,37 @@ function Form({
|
|
|
341
346
|
}));
|
|
342
347
|
};
|
|
343
348
|
|
|
349
|
+
const parseTableData = (d) => {
|
|
350
|
+
const dataSource = d;
|
|
351
|
+
const keys = Object.keys(dataSource[0]);
|
|
352
|
+
let columns = [];
|
|
353
|
+
|
|
354
|
+
keys.forEach((key) => {
|
|
355
|
+
columns.push({
|
|
356
|
+
name: key,
|
|
357
|
+
header: transformKey(key),
|
|
358
|
+
defaultFlex: 1,
|
|
359
|
+
});
|
|
360
|
+
});
|
|
361
|
+
|
|
362
|
+
return { columns, dataSource };
|
|
363
|
+
};
|
|
364
|
+
|
|
365
|
+
// Helper function to transform snake_case to Title Case
|
|
366
|
+
const transformKey = (key) => {
|
|
367
|
+
return (
|
|
368
|
+
key
|
|
369
|
+
// Replace underscores with spaces
|
|
370
|
+
.replace(/_/g, ' ')
|
|
371
|
+
// Split the string into words
|
|
372
|
+
.split(' ')
|
|
373
|
+
// Capitalize the first letter of each word
|
|
374
|
+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
375
|
+
// Join the words back into a string
|
|
376
|
+
.join(' ')
|
|
377
|
+
);
|
|
378
|
+
};
|
|
379
|
+
|
|
344
380
|
const handleSubmit = (e) => {
|
|
345
381
|
e.preventDefault();
|
|
346
382
|
let fields = formSettings.fields;
|
|
@@ -441,11 +477,30 @@ function Form({
|
|
|
441
477
|
} else {
|
|
442
478
|
switch (formType) {
|
|
443
479
|
case 'create':
|
|
444
|
-
|
|
480
|
+
if (
|
|
481
|
+
formSettings.hasOwnProperty('json') &&
|
|
482
|
+
formSettings.json === true
|
|
483
|
+
) {
|
|
484
|
+
url += '/jsonStore';
|
|
485
|
+
}
|
|
445
486
|
break;
|
|
446
487
|
case 'update':
|
|
447
488
|
case 'delete':
|
|
448
|
-
|
|
489
|
+
if (
|
|
490
|
+
formSettings.hasOwnProperty('json') &&
|
|
491
|
+
formSettings.json === true
|
|
492
|
+
) {
|
|
493
|
+
if (formType === 'update') {
|
|
494
|
+
url += `/jsonUpdate`;
|
|
495
|
+
} else {
|
|
496
|
+
url += `/jsonDelete/${
|
|
497
|
+
formData[formSettings.primaryKey]
|
|
498
|
+
}`;
|
|
499
|
+
}
|
|
500
|
+
} else {
|
|
501
|
+
url += `/${formData[formSettings.primaryKey]}`;
|
|
502
|
+
}
|
|
503
|
+
|
|
449
504
|
method = formType === 'update' ? 'PUT' : 'DELETE';
|
|
450
505
|
break;
|
|
451
506
|
}
|
|
@@ -493,12 +548,43 @@ function Form({
|
|
|
493
548
|
}
|
|
494
549
|
|
|
495
550
|
toast.success(
|
|
496
|
-
|
|
551
|
+
formSettings?.save?.toast?.success
|
|
552
|
+
? formSettings.save.toast.success
|
|
553
|
+
: 'Entry successfully saved into the system.'
|
|
497
554
|
);
|
|
498
555
|
|
|
499
556
|
if (result.redirect) {
|
|
500
557
|
navigate(result.redirect);
|
|
501
558
|
}
|
|
559
|
+
|
|
560
|
+
if (
|
|
561
|
+
formSettings?.save?.return?.type &&
|
|
562
|
+
formSettings?.save?.return?.param
|
|
563
|
+
) {
|
|
564
|
+
if (formSettings.save.return.type === 'table') {
|
|
565
|
+
if (
|
|
566
|
+
result[formSettings.save.return.param]
|
|
567
|
+
.length > 0
|
|
568
|
+
) {
|
|
569
|
+
const td = parseTableData(
|
|
570
|
+
result[
|
|
571
|
+
formSettings.save.return.param
|
|
572
|
+
]
|
|
573
|
+
);
|
|
574
|
+
|
|
575
|
+
setTableData((prevState) => ({
|
|
576
|
+
...prevState,
|
|
577
|
+
...td,
|
|
578
|
+
}));
|
|
579
|
+
} else {
|
|
580
|
+
setTableData((prevState) => ({
|
|
581
|
+
...prevState,
|
|
582
|
+
columns: [],
|
|
583
|
+
dataSource: [],
|
|
584
|
+
}));
|
|
585
|
+
}
|
|
586
|
+
}
|
|
587
|
+
}
|
|
502
588
|
} else {
|
|
503
589
|
toast.error(
|
|
504
590
|
<div>
|
|
@@ -524,7 +610,9 @@ function Form({
|
|
|
524
610
|
}
|
|
525
611
|
|
|
526
612
|
toast.success(
|
|
527
|
-
|
|
613
|
+
formSettings?.save?.toast?.success
|
|
614
|
+
? formSettings.save.toast.success
|
|
615
|
+
: 'Entry successfully saved into the system.'
|
|
528
616
|
);
|
|
529
617
|
|
|
530
618
|
if (
|
|
@@ -539,6 +627,33 @@ function Form({
|
|
|
539
627
|
if (result.redirect) {
|
|
540
628
|
navigate(result.redirect);
|
|
541
629
|
}
|
|
630
|
+
|
|
631
|
+
if (
|
|
632
|
+
formSettings?.save?.return?.type &&
|
|
633
|
+
formSettings?.save?.return?.param
|
|
634
|
+
) {
|
|
635
|
+
if (formSettings.save.return.type === 'table') {
|
|
636
|
+
if (
|
|
637
|
+
result[formSettings.save.return.param]
|
|
638
|
+
.length > 0
|
|
639
|
+
) {
|
|
640
|
+
const td = parseTableData(
|
|
641
|
+
result[formSettings.save.return.param]
|
|
642
|
+
);
|
|
643
|
+
|
|
644
|
+
setTableData((prevState) => ({
|
|
645
|
+
...prevState,
|
|
646
|
+
...td,
|
|
647
|
+
}));
|
|
648
|
+
} else {
|
|
649
|
+
setTableData((prevState) => ({
|
|
650
|
+
...prevState,
|
|
651
|
+
columns: [],
|
|
652
|
+
dataSource: [],
|
|
653
|
+
}));
|
|
654
|
+
}
|
|
655
|
+
}
|
|
656
|
+
}
|
|
542
657
|
} else {
|
|
543
658
|
toast.error(
|
|
544
659
|
<div>
|
|
@@ -578,11 +693,40 @@ function Form({
|
|
|
578
693
|
|
|
579
694
|
if (formType !== 'create' && columnId > 0) {
|
|
580
695
|
try {
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
696
|
+
let urlSuffix,
|
|
697
|
+
method,
|
|
698
|
+
payload = {};
|
|
699
|
+
|
|
700
|
+
// Function to extract dataId from ajaxSetting
|
|
701
|
+
const getDataId = () => {
|
|
702
|
+
for (const item of ajaxSetting.where) {
|
|
703
|
+
if (
|
|
704
|
+
item.hasOwnProperty('urlParam') &&
|
|
705
|
+
item.urlParam === 'dataId'
|
|
706
|
+
) {
|
|
707
|
+
return item.value;
|
|
708
|
+
}
|
|
709
|
+
}
|
|
710
|
+
return 0;
|
|
711
|
+
};
|
|
712
|
+
|
|
713
|
+
if (
|
|
714
|
+
formSettings.hasOwnProperty('json') &&
|
|
715
|
+
formSettings.json === true
|
|
716
|
+
) {
|
|
717
|
+
let dataId = getDataId();
|
|
718
|
+
|
|
719
|
+
urlSuffix = '/jsonGet';
|
|
720
|
+
method = 'POST';
|
|
721
|
+
payload = { id: columnId, dataId };
|
|
722
|
+
} else {
|
|
723
|
+
urlSuffix = `/${columnId}`;
|
|
724
|
+
method = 'GET';
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
const url = `${formSettings.url}${urlSuffix}`;
|
|
728
|
+
const result = await CustomFetch(url, method, payload);
|
|
729
|
+
|
|
586
730
|
const data = result.hasOwnProperty('data')
|
|
587
731
|
? result.data
|
|
588
732
|
: result;
|
|
@@ -942,10 +1086,22 @@ function Form({
|
|
|
942
1086
|
}}
|
|
943
1087
|
/>
|
|
944
1088
|
</div>
|
|
1089
|
+
{tableData?.dataSource?.length > 0 && (
|
|
1090
|
+
<div className="formItem fwItem">
|
|
1091
|
+
<ReactDataGrid
|
|
1092
|
+
idProperty="form-table-result"
|
|
1093
|
+
columns={tableData.columns}
|
|
1094
|
+
dataSource={tableData.dataSource}
|
|
1095
|
+
style={{ minHeight: 550 }}
|
|
1096
|
+
/>
|
|
1097
|
+
</div>
|
|
1098
|
+
)}
|
|
945
1099
|
</form>
|
|
946
1100
|
<div className="polActions">
|
|
947
1101
|
<button className="btn" onClick={handleSubmit}>
|
|
948
|
-
|
|
1102
|
+
{formSettings?.save?.button?.label
|
|
1103
|
+
? formSettings.save.button.label
|
|
1104
|
+
: 'Save'}
|
|
949
1105
|
</button>
|
|
950
1106
|
</div>
|
|
951
1107
|
</div>
|
|
@@ -713,8 +713,7 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
713
713
|
case 'table':
|
|
714
714
|
if (
|
|
715
715
|
activeTabConfig.ajaxSetting &&
|
|
716
|
-
activeTabConfig.ajaxSetting.where
|
|
717
|
-
activeTabConfig.ajaxSetting.where.length > 0
|
|
716
|
+
activeTabConfig.ajaxSetting.where
|
|
718
717
|
) {
|
|
719
718
|
const updatedAjaxSetting = {
|
|
720
719
|
...activeTabConfig.ajaxSetting,
|
|
@@ -880,10 +879,15 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
880
879
|
>
|
|
881
880
|
{page && page.title ? page.title : null}
|
|
882
881
|
</Link>{' '}
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
882
|
+
{data && data[page.titleKey] ? (
|
|
883
|
+
<>
|
|
884
|
+
<CircleChevronRight
|
|
885
|
+
strokeWidth={2}
|
|
886
|
+
size={18}
|
|
887
|
+
/>{' '}
|
|
888
|
+
{data[page.titleKey]}
|
|
889
|
+
</>
|
|
890
|
+
) : null}
|
|
887
891
|
</h1>
|
|
888
892
|
{total > 0 && (
|
|
889
893
|
<div className="titleInfo">
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"awesome-debounce-promise": "^2.1.0",
|
|
8
8
|
"axios": "^1.6.2",
|
|
9
9
|
"framer-motion": "^10.16.16",
|
|
10
|
-
"html-react-parser": "^5.0.
|
|
10
|
+
"html-react-parser": "^5.0.8",
|
|
11
11
|
"lodash": "^4.17.21",
|
|
12
12
|
"moment": "^2.29.4",
|
|
13
13
|
"motion": "^10.16.4",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"react-dom": "^17.0.1"
|
|
46
46
|
},
|
|
47
47
|
"name": "@visns-studio/visns-components",
|
|
48
|
-
"version": "
|
|
48
|
+
"version": "3.0.0",
|
|
49
49
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
50
50
|
"main": "index.js",
|
|
51
51
|
"scripts": {
|