@visns-studio/visns-components 1.4.8 → 1.4.10

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 (9) hide show
  1. package/components/cms/visns-data-grid.jsx +101 -26
  2. package/components/cms/visns-field.jsx +73 -22
  3. package/components/cms/visns-form.jsx +32 -1
  4. package/components/crm/visns-autocomplete.jsx +10 -4
  5. package/components/crm/visns-data-grid.jsx +51 -8
  6. package/components/crm/visns-field.jsx +25 -21
  7. package/components/crm/visns-form.jsx +952 -1052
  8. package/components/crm/visns-multi-select.jsx +57 -71
  9. package/package.json +52 -52
package/components/crm/visns-form.jsx CHANGED
@@ -1,1058 +1,958 @@
1
- import React, { useState, useEffect } from 'react';
2
- import { motion } from 'framer-motion';
3
- import { toast } from 'react-toastify';
4
- import moment from 'moment';
5
- import parse from 'html-react-parser';
6
- import _ from 'lodash';
7
- import { CircleX } from 'akar-icons';
1
+ import React, { useState, useEffect } from "react";
2
+ import { motion } from "framer-motion";
3
+ import { toast } from "react-toastify";
4
+ import moment from "moment";
5
+ import parse from "html-react-parser";
6
+ import _ from "lodash";
7
+ import { CircleX } from "akar-icons";
8
8
 
9
- import CustomFetch from './visns-fetch';
10
- import Field from './visns-field';
9
+ import CustomFetch from "./visns-fetch";
10
+ import Field from "./visns-field";
11
11
 
12
12
  function Form(props) {
13
- const {
14
- formType,
15
- formSettings,
16
- columnId,
17
- closeModal,
18
- fetchTable,
19
- childDropdownCallback,
20
- updateForm,
21
- } = props;
22
- const [inputClass, setInputClass] = useState({});
23
- const [formData, setFormData] = useState({});
24
- const [fetchTrigger, setFetchTrigger] = useState(false);
25
- const [uploadProgress, setUploadProgress] = useState(0);
26
-
27
- const handleChange = (e) => {
28
- let id = e.target.dataset.hasOwnProperty('jsonkey')
29
- ? e.target.dataset.jsonkey
30
- : e.target.dataset.name;
31
- let value = e.target.value;
32
- let _dataset;
33
-
34
- if (e.target[e.target.selectedIndex]) {
35
- _dataset = e.target[e.target.selectedIndex].dataset;
36
- }
37
-
38
- if (e.target.files) {
39
- setFormData((prevState) => ({
40
- ...prevState,
41
- [id]: e.target.files[0],
42
- }));
43
- } else {
44
- setFormData((prevState) => ({
45
- ...prevState,
46
- [id]: value,
47
- }));
48
- }
49
-
50
- if (!_.isEmpty(_dataset)) {
51
- Object.keys(_dataset).forEach(function (c) {
52
- if (formData.hasOwnProperty(c)) {
53
- setFormData((prevState) => ({
54
- ...prevState,
55
- [c]: _dataset[c],
56
- }));
57
- }
58
- });
59
- }
60
-
61
- if (e.target.dataset.hasOwnProperty('show')) {
62
- let _show =
63
- e.target.dataset.show !== ''
64
- ? JSON.parse(e.target.dataset.show)
65
- : [];
66
-
67
- if (_show.length > 0) {
68
- _show.forEach((showObject) => {
69
- if (
70
- showObject.hasOwnProperty('id') &&
71
- showObject.hasOwnProperty('value')
72
- ) {
73
- if (
74
- showObject.id !== '' &&
75
- showObject.value.length > 0
76
- ) {
77
- let _fields = formSettings.fields;
78
- let _counter;
79
- _fields.forEach((a, b) => {
80
- if (a.id === showObject.id) {
81
- _counter = b;
82
- }
83
- });
84
-
85
- let _valueChecker = parseInt(e.target.value);
86
-
87
- if (
88
- _counter >= 0 &&
89
- showObject.value.includes(_valueChecker) ===
90
- true
91
- ) {
92
- _fields[_counter].hide = false;
93
- } else {
94
- _fields[_counter].hide = true;
95
- }
96
-
97
- updateForm((prevState) => ({
98
- ...prevState,
99
- fields: _fields,
100
- }));
101
- }
102
- }
103
- });
104
- }
105
- }
106
- };
107
-
108
- const handleChangeNumberFormat = (value, id) => {
109
- setFormData((prevState) => ({
110
- ...prevState,
111
- [id]: value.value,
112
- }));
113
- };
114
-
115
- const handleChangeDate = (date, id) => {
116
- setFormData((prevState) => ({
117
- ...prevState,
118
- [id]: date,
119
- }));
120
- };
121
-
122
- const handleChangeRicheditor = (e, value, id) => {
123
- if (e) {
124
- setFormData((prevState) => ({
125
- ...prevState,
126
- [id]: value,
127
- }));
128
- }
129
- };
130
-
131
- const handleChangeSelect = (inputValue, action, id) => {
132
- setFormData((prevState) => ({
133
- ...prevState,
134
- [id]: inputValue,
135
- }));
136
-
137
- Object.keys(inputValue).forEach(function (a) {
138
- if (formData.hasOwnProperty(a)) {
139
- setFormData((prevState) => ({
140
- ...prevState,
141
- [a]: inputValue[a],
142
- }));
143
- }
144
- });
145
- };
146
-
147
- const handleChangeToggle = (e) => {
148
- if (e) {
149
- let id = e.target.dataset.hasOwnProperty('jsonkey')
150
- ? e.target.dataset.jsonkey
151
- : e.target.dataset.name;
152
-
153
- setFormData((prevState) => ({
154
- ...prevState,
155
- [id]: e.target.checked === true ? true : false,
156
- }));
157
-
158
- if (e.target.dataset.hasOwnProperty('show')) {
159
- let _show =
160
- e.target.dataset.show !== ''
161
- ? JSON.parse(e.target.dataset.show)
162
- : [];
163
-
164
- if (_show.length > 0) {
165
- _show.forEach((showObject) => {
166
- if (
167
- showObject.hasOwnProperty('id') &&
168
- showObject.hasOwnProperty('value')
169
- ) {
170
- if (
171
- showObject.id !== '' &&
172
- showObject.value.length > 0
173
- ) {
174
- let _fields = formSettings.fields;
175
- let _counter;
176
- _fields.forEach((a, b) => {
177
- if (a.id === showObject.id) {
178
- _counter = b;
179
- }
180
- });
181
-
182
- let _valueChecker =
183
- e.target.checked === true ? true : false;
184
-
185
- if (
186
- _counter >= 0 &&
187
- showObject.value.includes(_valueChecker) ===
188
- true
189
- ) {
190
- _fields[_counter].hide = false;
191
- } else {
192
- _fields[_counter].hide = true;
193
- }
194
-
195
- updateForm((prevState) => ({
196
- ...prevState,
197
- fields: _fields,
198
- }));
199
- }
200
- }
201
- });
202
- }
203
- }
204
- }
205
- };
206
-
207
- const autocompleteSelect = (place) => {
208
- let address1 = place.address
209
- ? place.address + ' ' + place.text
210
- : place.text;
211
- let address2 = '';
212
- let suburb = '';
213
- let postcode = '';
214
- let state = '';
215
- let country = '';
216
-
217
- if (place.context[1]) {
218
- suburb = place.context[1].text;
219
- }
220
-
221
- if (place.context[0]) {
222
- postcode = place.context[0].text;
223
- }
224
-
225
- if (place.context.length === 5) {
226
- if (place.context[3]) {
227
- state = place.context[3].text;
228
- }
229
-
230
- if (place.context[4]) {
231
- country = place.context[4].text;
232
- }
233
- } else {
234
- if (place.context[2]) {
235
- state = place.context[2].text;
236
- }
237
-
238
- if (place.context[3]) {
239
- country = place.context[3].text;
240
- }
241
- }
242
-
243
- setFormData((prevState) => ({
244
- ...prevState,
245
- address1: address1,
246
- address2: address2,
247
- suburb: suburb,
248
- postcode: postcode,
249
- state: state,
250
- country: country,
251
- }));
252
- };
253
-
254
- const handleSubmit = (e) => {
255
- e.preventDefault();
256
- let fields = formSettings.fields;
257
- let _inputClass = inputClass;
258
- let validation = '';
259
-
260
- if (formType === 'create' || formType === 'update') {
261
- fields.forEach((item) => {
262
- if (item.required === true) {
263
- if (formData[item.id] === '') {
264
- if (
265
- item.hasOwnProperty('required_check') &&
266
- item.required_check !== ''
267
- ) {
268
- if (formData[item.required_check] === '') {
269
- if (
270
- !validation.includes(
271
- item.label +
272
- ' is a required field.<br/>'
273
- )
274
- ) {
275
- validation +=
276
- item.label +
277
- ' is a required field.<br/>';
278
- }
279
-
280
- _inputClass[item.id] = 'inputError';
281
- }
282
- } else {
283
- if (
284
- !validation.includes(
285
- item.label + ' is a required field.<br/>'
286
- )
287
- ) {
288
- validation +=
289
- item.label + ' is a required field.<br/>';
290
- }
291
- _inputClass[item.id] = 'inputError';
292
- }
293
- } else {
294
- if (
295
- item.hasOwnProperty('required_check') &&
296
- item.required_check !== ''
297
- ) {
298
- _inputClass[item.required_check] = '';
299
- }
300
-
301
- _inputClass[item.id] = '';
302
- }
303
- } else {
304
- if (
305
- item.hasOwnProperty('required_rely') &&
306
- item.required_rely !== ''
307
- ) {
308
- if (formData[item.required_rely] === '') {
309
- _inputClass[item.id] = '';
310
- } else {
311
- if (formData[item.id] === '') {
312
- if (
313
- !validation.includes(
314
- item.label +
315
- ' is a required field.<br/>'
316
- )
317
- ) {
318
- validation +=
319
- item.label +
320
- ' is a required field.<br/>';
321
- }
322
-
323
- _inputClass[item.id] = 'inputError';
324
- } else {
325
- _inputClass[item.id] = '';
326
- }
327
- }
328
- } else {
329
- _inputClass[item.id] = '';
330
- }
331
- }
332
- });
333
-
334
- setInputClass(_inputClass);
335
- }
336
-
337
- if (validation !== '') {
338
- toast.error(<div>{parse(validation)}</div>);
339
- } else {
340
- let url;
341
- let method;
342
- let fileUpload = false;
343
- let fileKey = '';
344
-
345
- switch (formType) {
346
- case 'create':
347
- url = formSettings.url;
348
- method = 'POST';
349
- break;
350
- case 'update':
351
- url =
352
- formSettings.url +
353
- '/' +
354
- formData[formSettings.primaryKey];
355
- method = 'PUT';
356
- break;
357
- case 'delete':
358
- url =
359
- formSettings.url +
360
- '/' +
361
- formData[formSettings.primaryKey];
362
- method = 'DELETE';
363
- break;
364
- default:
365
- url = '';
366
- method = '';
367
- break;
368
- }
369
-
370
- if (!_.isEmpty(formData)) {
371
- Object.keys(formData).forEach((item) => {
372
- if (formData[item] !== undefined) {
373
- if (item === 'file') {
374
- fileUpload = true;
375
- fileKey = item;
376
- }
377
-
378
- if (
379
- formData[item] instanceof File &&
380
- formData[item] !== null
381
- ) {
382
- fileUpload = true;
383
- fileKey = item;
384
- }
385
- }
386
- });
387
- }
388
-
389
- if (fileUpload === true) {
390
- Vapor.store(formData[fileKey], {
391
- progress: (progress) => {
392
- setUploadProgress(progress * 100);
393
- },
394
- }).then((response) => {
395
- formData['uuid'] = response.uuid;
396
- formData['key'] = response.key;
397
- formData['bucket'] = response.bucket;
398
- formData['filename'] = formData[fileKey].name;
399
- formData['filesize'] = formData[fileKey].size;
400
- formData['extension'] = response.extension;
401
-
402
- CustomFetch(url, method, formData, function (result) {
403
- if (result.error === '') {
404
- fetchTable();
405
- closeModal();
406
-
407
- toast.success(
408
- 'Entry successfully saved into the system.'
409
- );
410
-
411
- if (
412
- result.hasOwnProperty('myob') &&
413
- result.myob.hasOwnProperty('id') &&
414
- result.myob.hasOwnProperty('url')
415
- ) {
416
- CustomFetch(
417
- '/ajax' + result.myob.url,
418
- 'POST',
419
- {
420
- id: result.myob.id,
421
- },
422
- function (result) {
423
- if (result.error === '') {
424
- toast.success(
425
- 'Entry successfully saved into MYOB.'
426
- );
427
- } else {
428
- toast.error(
429
- result.error !== undefined
430
- ? result.error
431
- : ''
432
- );
433
- }
434
- }
435
- );
436
- }
437
- } else {
438
- toast.error(
439
- result.error !== undefined ? result.error : ''
440
- );
441
- }
442
- });
443
- });
444
- } else {
445
- CustomFetch(url, method, formData, function (result) {
446
- if (result.error === '') {
447
- fetchTable();
448
- closeModal();
449
-
450
- toast.success(
451
- 'Entry successfully saved into the system.'
452
- );
453
-
454
- if (
455
- result.hasOwnProperty('myob') &&
456
- result.myob.hasOwnProperty('id') &&
457
- result.myob.hasOwnProperty('url')
458
- ) {
459
- CustomFetch(
460
- '/ajax' + result.myob.url,
461
- 'POST',
462
- {
463
- id: result.myob.id,
464
- },
465
- function (result) {
466
- if (result.error === '') {
467
- toast.success(
468
- 'Entry successfully saved into MYOB.'
469
- );
470
- } else {
471
- toast.error(
472
- result.error !== undefined
473
- ? result.error
474
- : ''
475
- );
476
- }
477
- }
478
- );
479
- }
480
- } else {
481
- toast.error(
482
- result.error !== undefined ? result.error : ''
483
- );
484
- }
485
- });
486
- }
487
- }
488
- };
489
-
490
- useEffect(() => {
491
- let _formData = formData;
492
- let _date = false;
493
-
494
- if (formSettings.fields.length > 0) {
495
- formSettings.fields.forEach((item) => {
496
- if (item.hasOwnProperty('value') && item.value !== '') {
497
- if (
498
- item.type === 'date' ||
499
- item.type === 'datetime' ||
500
- item.type === 'time'
501
- ) {
502
- _formData[item.id] =
503
- item.value instanceof Date
504
- ? item.value
505
- : moment(item.value).toDate();
506
- } else {
507
- _formData[item.id] = item.value;
508
- }
509
- } else {
510
- _formData[item.id] = '';
511
- }
512
- });
513
- }
514
-
515
- if (formType !== 'create') {
516
- if (columnId > 0) {
517
- CustomFetch(
518
- formSettings.url + '/' + columnId,
519
- 'GET',
520
- {},
521
- function (result) {
522
- result = result.hasOwnProperty('data')
523
- ? result.data
524
- : result;
525
-
526
- Object.keys(formData).forEach((item) => {
527
- if (result[item] === undefined) {
528
- let tempRes = '';
529
- let tempResKey = '';
530
-
531
- formSettings.fields.forEach((a) => {
532
- if (a.id === item) {
533
- if (a.hasOwnProperty('relation')) {
534
- let tempRes = result;
535
-
536
- a.relation.forEach((c) => {
537
- tempRes = tempRes[c];
538
- });
539
-
540
- if (
541
- a.type ===
542
- 'multi-dropdown-ajax' ||
543
- a.type === 'async-dropdown-ajax'
544
- ) {
545
- if (
546
- Array.isArray(tempRes) ===
547
- true
548
- ) {
549
- let _tr = [];
550
-
551
- tempRes.forEach((a) => {
552
- _tr.push({
553
- value: a.name,
554
- label: a.name,
555
- });
556
- });
557
-
558
- tempRes = _tr;
559
- }
560
- }
561
-
562
- _formData[item] = tempRes
563
- ? a.hasOwnProperty(
564
- 'relation_from'
565
- )
566
- ? Array.isArray(tempRes) ===
567
- true
568
- ? tempRes[0] !==
569
- undefined
570
- ? a.type ===
571
- 'multi-dropdown-ajax'
572
- ? tempRes
573
- : tempRes[0][
574
- a
575
- .relation_from
576
- ]
577
- : ''
578
- : tempRes[
579
- a.relation_from
580
- ]
581
- : tempRes[a.id]
582
- : '';
583
- }
584
- }
585
-
586
- if (a.hasOwnProperty('relation')) {
587
- if (
588
- a.type === 'multi-dropdown-ajax' ||
589
- a.type === 'async-dropdown-ajax'
590
- ) {
591
- if (a.id === item) {
592
- if (
593
- Array.isArray(
594
- a.relation
595
- ) === true
596
- ) {
597
- switch (a.relation.length) {
598
- case 1:
599
- tempRes = {
600
- value: result[
601
- a
602
- .relation[0]
603
- ].id,
604
- label: result[
605
- a
606
- .relation[0]
607
- ][
608
- a
609
- .relationName
610
- ],
611
- };
612
- break;
613
- case 2:
614
- tempRes = {
615
- value: result[
616
- a
617
- .relation[0]
618
- ][a.relation[1]]
619
- .id,
620
- label: result[
621
- a
622
- .relation[0]
623
- ][
624
- a
625
- .relation[1]
626
- ][
627
- a
628
- .relationName
629
- ],
630
- };
631
- break;
632
- case 3:
633
- tempRes = {
634
- value: result[
635
- a
636
- .relation[0]
637
- ][
638
- a
639
- .relation[1]
640
- ][a.relation[2]]
641
- .id,
642
- label: result[
643
- a
644
- .relation[0]
645
- ][
646
- a
647
- .relation[1]
648
- ][
649
- a
650
- .relation[2]
651
- ][
652
- a
653
- .relationName
654
- ],
655
- };
656
- break;
657
- case 4:
658
- tempRes = {
659
- value: result[
660
- a
661
- .relation[0]
662
- ][
663
- a
664
- .relation[1]
665
- ][
666
- a
667
- .relation[2]
668
- ][a.relation[3]]
669
- .id,
670
- label: result[
671
- a
672
- .relation[0]
673
- ][
674
- a
675
- .relation[1]
676
- ][
677
- a
678
- .relation[2]
679
- ][
680
- a
681
- .relation[3]
682
- ][
683
- a
684
- .relationName
685
- ],
686
- };
687
- break;
688
- }
689
- } else {
690
- tempRes = {
691
- value: result[
692
- a.relation
693
- ].id,
694
- label: result[
695
- a.relation
696
- ][a.relationName],
697
- };
698
- }
699
-
700
- tempResKey = a.id;
701
- }
702
- }
703
- }
704
- });
705
-
706
- if (item === tempResKey) {
707
- if (
708
- tempRes &&
709
- tempRes.hasOwnProperty('value') &&
710
- tempRes.hasOwnProperty('label')
711
- ) {
712
- _formData[item] = tempRes;
713
- }
714
- }
715
- } else {
716
- let tempRes = '';
717
- let tempResKey = '';
718
-
719
- formSettings.fields.forEach((a) => {
720
- if (a.id === item) {
721
- if (
722
- a.type === 'date' ||
723
- a.type === 'datetime' ||
724
- a.type === 'time'
725
- ) {
726
- _date = true;
727
- }
728
- }
729
-
730
- if (a.hasOwnProperty('relation')) {
731
- if (
732
- a.type === 'multi-dropdown-ajax' ||
733
- a.type === 'async-dropdown-ajax'
734
- ) {
735
- if (a.id === item) {
736
- if (
737
- Array.isArray(
738
- a.relation
739
- ) === true
740
- ) {
741
- switch (a.relation.length) {
742
- case 1:
743
- tempRes = {
744
- value: result[
745
- a
746
- .relation[0]
747
- ].id,
748
- label: result[
749
- a
750
- .relation[0]
751
- ][
752
- a
753
- .relationName
754
- ],
755
- };
756
- break;
757
- case 2:
758
- tempRes = {
759
- value: result[
760
- a
761
- .relation[0]
762
- ][a.relation[1]]
763
- .id,
764
- label: result[
765
- a
766
- .relation[0]
767
- ][
768
- a
769
- .relation[1]
770
- ][
771
- a
772
- .relationName
773
- ],
774
- };
775
- break;
776
- case 3:
777
- tempRes = {
778
- value: result[
779
- a
780
- .relation[0]
781
- ][
782
- a
783
- .relation[1]
784
- ][a.relation[2]]
785
- .id,
786
- label: result[
787
- a
788
- .relation[0]
789
- ][
790
- a
791
- .relation[1]
792
- ][
793
- a
794
- .relation[2]
795
- ][
796
- a
797
- .relationName
798
- ],
799
- };
800
- break;
801
- case 4:
802
- tempRes = {
803
- value: result[
804
- a
805
- .relation[0]
806
- ][
807
- a
808
- .relation[1]
809
- ][
810
- a
811
- .relation[2]
812
- ][a.relation[3]]
813
- .id,
814
- label: result[
815
- a
816
- .relation[0]
817
- ][
818
- a
819
- .relation[1]
820
- ][
821
- a
822
- .relation[2]
823
- ][
824
- a
825
- .relation[3]
826
- ][
827
- a
828
- .relationName
829
- ],
830
- };
831
- break;
832
- }
833
- } else {
834
- tempRes = {
835
- value: result[
836
- a.relation
837
- ].id,
838
- label: result[
839
- a.relation
840
- ][a.relationName],
841
- };
842
- }
843
- tempResKey = a.id;
844
- }
845
- }
846
- }
847
- });
848
-
849
- if (_date === true) {
850
- if (result[item] === null) {
851
- result[item] = '';
852
- }
853
-
854
- _formData[item] =
855
- result[item] !== ''
856
- ? result[item] instanceof Date
857
- ? result[item]
858
- : moment(result[item]).toDate()
859
- : result[item];
860
-
861
- _date = false;
862
- } else {
863
- _formData[item] = result[item];
864
- }
865
-
866
- if (item === tempResKey) {
867
- if (
868
- tempRes &&
869
- tempRes.hasOwnProperty('value') &&
870
- tempRes.hasOwnProperty('label')
871
- ) {
872
- _formData[item] = tempRes;
873
- }
874
- }
875
- }
876
- });
877
-
878
- setFormData((prevState) => ({
879
- ...prevState,
880
- ..._formData,
881
- }));
882
-
883
- setFetchTrigger(fetchTrigger === true ? false : true);
884
- }
885
- );
886
- }
887
- } else {
888
- setFormData((prevState) => ({
889
- ...prevState,
890
- ..._formData,
891
- }));
892
- }
893
- }, []);
894
-
895
- useEffect(() => {
896
- formSettings.fields.forEach((a) => {
897
- if (a.hasOwnProperty('show') && a.show.length > 0) {
898
- let _show = a.show;
899
- if (_show.length > 0) {
900
- _show.forEach((showObject) => {
901
- if (
902
- showObject.hasOwnProperty('id') &&
903
- showObject.hasOwnProperty('value')
904
- ) {
905
- if (
906
- showObject.id !== '' &&
907
- showObject.value.length > 0
908
- ) {
909
- let _fields = formSettings.fields;
910
- let _counter;
911
- _fields.forEach((a, b) => {
912
- if (a.id === showObject.id) {
913
- _counter = b;
914
- }
915
- });
916
-
917
- let _valueChecker = formData[a.id];
918
-
919
- if (
920
- _counter >= 0 &&
921
- showObject.value.includes(_valueChecker) ===
922
- true
923
- ) {
924
- _fields[_counter].hide = false;
925
- } else {
926
- _fields[_counter].hide = true;
927
- }
928
-
929
- updateForm((prevState) => ({
930
- ...prevState,
931
- fields: _fields,
932
- }));
933
- }
934
- }
935
- });
936
- }
937
- }
938
- });
939
- }, [fetchTrigger]);
940
-
941
- return (
942
- <div className="modalwrap top--modal">
943
- <div className="modal">
944
- <div className="modal__header">
945
- <h1>{formSettings[formType].title}</h1>
946
- <button className="modal__close" onClick={closeModal}>
947
- <CircleX strokeWidth={1} size={24} />
948
- </button>
949
- </div>
950
- <div className="modal__content">
951
- <div className="formcontainer">
952
- <form className="modalForm" onSubmit={handleSubmit}>
953
- {formSettings.fields.map((item, index) =>
954
- item.hasOwnProperty('hide') === false ? (
955
- item.hasOwnProperty('createOnly') &&
956
- item.createOnly === true &&
957
- formType === 'update' ? null : (
958
- <Field
959
- settings={item}
960
- key={
961
- index +
962
- '-fields-' +
963
- (item.hasOwnProperty('key')
964
- ? item.id + '-' + item.key
965
- : item.id)
966
- }
967
- inputValue={
968
- item.hasOwnProperty('key')
969
- ? formData[item.key]
970
- : formData[item.id]
971
- }
972
- inputClass={inputClass}
973
- onChange={handleChange}
974
- onChangeDate={handleChangeDate}
975
- onChangeSelect={handleChangeSelect}
976
- onChangeRicheditor={
977
- handleChangeRicheditor
978
- }
979
- onChangeToggle={handleChangeToggle}
980
- onChangeNumberFormat={
981
- handleChangeNumberFormat
982
- }
983
- autocompleteCallback={
984
- autocompleteSelect
985
- }
986
- childDropdownCallback={
987
- childDropdownCallback
988
- }
989
- setFormData={setFormData}
990
- />
991
- )
992
- ) : item.hide === false ? (
993
- item.hasOwnProperty('createOnly') &&
994
- item.createOnly === true &&
995
- formType === 'update' ? null : (
996
- <Field
997
- settings={item}
998
- key={
999
- index +
1000
- '-fields-' +
1001
- (item.hasOwnProperty('key')
1002
- ? item.id + '-' + item.key
1003
- : item.id)
1004
- }
1005
- inputValue={
1006
- item.hasOwnProperty('key')
1007
- ? formData[item.key]
1008
- : formData[item.id]
1009
- }
1010
- inputClass={inputClass}
1011
- onChange={handleChange}
1012
- onChangeDate={handleChangeDate}
1013
- onChangeSelect={handleChangeSelect}
1014
- onChangeRicheditor={
1015
- handleChangeRicheditor
1016
- }
1017
- onChangeNumberFormat={
1018
- handleChangeNumberFormat
1019
- }
1020
- autocompleteCallback={
1021
- autocompleteSelect
1022
- }
1023
- childDropdownCallback={
1024
- childDropdownCallback
1025
- }
1026
- uploadProgress={uploadProgress}
1027
- setFormData={setFormData}
1028
- />
1029
- )
1030
- ) : null
1031
- )}
1032
- <div className="formItem fwItem">
1033
- <motion.div
1034
- className="progress__bar"
1035
- initial={{ width: '0%' }}
1036
- animate={{
1037
- width: uploadProgress + '%',
1038
- }}
1039
- transition={{
1040
- duration: 3,
1041
- ease: [0.165, 0.84, 0.44, 1.0],
1042
- }}
1043
- />
1044
- </div>
1045
- <div className="formItem fwItem lastItem">
1046
- <button className="btn modalsave" type="submit">
1047
- Save
1048
- </button>
1049
- </div>
1050
- </form>
1051
- </div>
1052
- </div>
1053
- </div>
1054
- </div>
1055
- );
13
+ const {
14
+ childDropdownCallback,
15
+ closeModal,
16
+ columnId,
17
+ formType,
18
+ formSettings,
19
+ fetchTable,
20
+ style,
21
+ updateForm,
22
+ } = props;
23
+ const [inputClass, setInputClass] = useState({});
24
+ const [formData, setFormData] = useState({});
25
+ const [fetchTrigger, setFetchTrigger] = useState(false);
26
+ const [uploadProgress, setUploadProgress] = useState(0);
27
+
28
+ const handleChange = (e) => {
29
+ let id = e.target.dataset.hasOwnProperty("jsonkey")
30
+ ? e.target.dataset.jsonkey
31
+ : e.target.dataset.name;
32
+ let value = e.target.value;
33
+ let _dataset;
34
+
35
+ if (e.target[e.target.selectedIndex]) {
36
+ _dataset = e.target[e.target.selectedIndex].dataset;
37
+ }
38
+
39
+ if (e.target.files) {
40
+ setFormData((prevState) => ({
41
+ ...prevState,
42
+ [id]: e.target.files[0],
43
+ }));
44
+ } else {
45
+ setFormData((prevState) => ({
46
+ ...prevState,
47
+ [id]: value,
48
+ }));
49
+ }
50
+
51
+ if (!_.isEmpty(_dataset)) {
52
+ Object.keys(_dataset).forEach(function (c) {
53
+ if (formData.hasOwnProperty(c)) {
54
+ setFormData((prevState) => ({
55
+ ...prevState,
56
+ [c]: _dataset[c],
57
+ }));
58
+ }
59
+ });
60
+ }
61
+
62
+ if (e.target.dataset.hasOwnProperty("show")) {
63
+ let _show =
64
+ e.target.dataset.show !== ""
65
+ ? JSON.parse(e.target.dataset.show)
66
+ : [];
67
+
68
+ if (_show.length > 0) {
69
+ _show.forEach((showObject) => {
70
+ if (
71
+ showObject.hasOwnProperty("id") &&
72
+ showObject.hasOwnProperty("value")
73
+ ) {
74
+ if (
75
+ showObject.id !== "" &&
76
+ showObject.value.length > 0
77
+ ) {
78
+ let _fields = formSettings.fields;
79
+ let _counter;
80
+ _fields.forEach((a, b) => {
81
+ if (a.id === showObject.id) {
82
+ _counter = b;
83
+ }
84
+ });
85
+
86
+ let _valueChecker = parseInt(e.target.value);
87
+
88
+ if (
89
+ _counter >= 0 &&
90
+ showObject.value.includes(_valueChecker) ===
91
+ true
92
+ ) {
93
+ _fields[_counter].hide = false;
94
+ } else {
95
+ _fields[_counter].hide = true;
96
+ }
97
+
98
+ if (updateForm) {
99
+ updateForm((prevState) => ({
100
+ ...prevState,
101
+ fields: _fields,
102
+ }));
103
+ }
104
+ }
105
+ }
106
+ });
107
+ }
108
+ }
109
+ };
110
+
111
+ const handleChangeNumberFormat = (value, id) => {
112
+ setFormData((prevState) => ({
113
+ ...prevState,
114
+ [id]: value.value,
115
+ }));
116
+ };
117
+
118
+ const handleChangeDate = (date, id) => {
119
+ setFormData((prevState) => ({
120
+ ...prevState,
121
+ [id]: date,
122
+ }));
123
+ };
124
+
125
+ const handleChangeRicheditor = (e, value, id) => {
126
+ if (e) {
127
+ setFormData((prevState) => ({
128
+ ...prevState,
129
+ [id]: value,
130
+ }));
131
+ }
132
+ };
133
+
134
+ const handleChangeSelect = (inputValue, action, id) => {
135
+ switch (action.action) {
136
+ case "select-option":
137
+ setFormData((prevState) => ({
138
+ ...prevState,
139
+ [id]: inputValue,
140
+ }));
141
+
142
+ Object.keys(inputValue).forEach(function (a) {
143
+ if (formData.hasOwnProperty(a)) {
144
+ setFormData((prevState) => ({
145
+ ...prevState,
146
+ [a]: inputValue[a],
147
+ }));
148
+ }
149
+ });
150
+
151
+ formSettings.fields.forEach((f) => {
152
+ if (f.id === id) {
153
+ if (f.trigger && f.trigger.type) {
154
+ if (f.trigger.type === "addDays") {
155
+ let newDate = moment();
156
+ let add = false;
157
+
158
+ if (
159
+ inputValue.no_of_days &&
160
+ parseFloat(inputValue.no_of_days) > 0
161
+ ) {
162
+ newDate.add(
163
+ parseFloat(inputValue.no_of_days),
164
+ "days"
165
+ );
166
+ add = true;
167
+ }
168
+
169
+ if (
170
+ inputValue.no_of_hours &&
171
+ parseFloat(inputValue.no_of_hours) > 0
172
+ ) {
173
+ newDate.add(
174
+ parseFloat(inputValue.no_of_hours),
175
+ "hours"
176
+ );
177
+ add = true;
178
+ }
179
+
180
+ if (add === true) {
181
+ setFormData((prevState) => ({
182
+ ...prevState,
183
+ [f.trigger.id]: newDate.toDate(),
184
+ }));
185
+ }
186
+ }
187
+ }
188
+ }
189
+ });
190
+ break;
191
+ case "clear":
192
+ setFormData((prevState) => ({
193
+ ...prevState,
194
+ [id]: "",
195
+ }));
196
+ break;
197
+ }
198
+ };
199
+
200
+ const handleChangeToggle = (e) => {
201
+ if (!e) {
202
+ return;
203
+ }
204
+
205
+ const id = e.target.dataset.jsonkey || e.target.dataset.name;
206
+
207
+ setFormData((prevState) => ({
208
+ ...prevState,
209
+ [id]: e.target.checked,
210
+ }));
211
+
212
+ if (id === "same_address") {
213
+ if (e.target.checked) {
214
+ setFormData((prevState) => ({
215
+ ...prevState,
216
+ postal_address1: prevState.address1,
217
+ postal_address2: prevState.address2,
218
+ postal_suburb: prevState.suburb,
219
+ postal_postcode: prevState.postcode,
220
+ postal_state: prevState.state,
221
+ postal_country: prevState.country,
222
+ }));
223
+ } else {
224
+ setFormData((prevState) => ({
225
+ ...prevState,
226
+ postal_address1: "",
227
+ postal_address2: "",
228
+ postal_suburb: "",
229
+ postal_postcode: "",
230
+ postal_state: "",
231
+ postal_country: "",
232
+ }));
233
+ }
234
+ }
235
+
236
+ if (e.target.dataset.show) {
237
+ const _show = e.target.dataset.show
238
+ ? JSON.parse(e.target.dataset.show)
239
+ : [];
240
+
241
+ if (_show.length > 0) {
242
+ const _fields = [...formSettings.fields];
243
+
244
+ _show.forEach((showObject) => {
245
+ const { id, value } = showObject;
246
+
247
+ if (id && value && value.length > 0) {
248
+ const index = _fields.findIndex(
249
+ (field) => field.id === id
250
+ );
251
+
252
+ if (index !== -1) {
253
+ _fields[index].hide = !value.includes(
254
+ e.target.checked
255
+ );
256
+ }
257
+ }
258
+ });
259
+
260
+ if (updateForm) {
261
+ updateForm((prevState) => ({
262
+ ...prevState,
263
+ fields: _fields,
264
+ }));
265
+ }
266
+ }
267
+ }
268
+ };
269
+
270
+ const autocompleteSelect = (place, id) => {
271
+ let address1 = place.address
272
+ ? place.address + " " + place.text
273
+ : place.text;
274
+ let address2 = "";
275
+ let suburb = "";
276
+ let postcode = "";
277
+ let state = "";
278
+ let country = "";
279
+
280
+ if (place.context[1]) {
281
+ suburb = place.context[1].text;
282
+ }
283
+
284
+ if (place.context[0]) {
285
+ postcode = place.context[0].text;
286
+ }
287
+
288
+ if (place.context.length === 5) {
289
+ if (place.context[3]) {
290
+ state = place.context[3].text;
291
+ }
292
+
293
+ if (place.context[4]) {
294
+ country = place.context[4].text;
295
+ }
296
+ } else {
297
+ if (place.context[2]) {
298
+ state = place.context[2].text;
299
+ }
300
+
301
+ if (place.context[3]) {
302
+ country = place.context[3].text;
303
+ }
304
+ }
305
+
306
+ if (formData.same_address === true) {
307
+ setFormData((prevState) => ({
308
+ ...prevState,
309
+ address1: address1,
310
+ address2: address2,
311
+ suburb: suburb,
312
+ postcode: postcode,
313
+ state: state,
314
+ country: country,
315
+ postal_address1: address1,
316
+ postal_address2: address2,
317
+ postal_suburb: suburb,
318
+ postal_postcode: postcode,
319
+ postal_state: state,
320
+ postal_country: country,
321
+ }));
322
+ } else {
323
+ if (id === "address1") {
324
+ setFormData((prevState) => ({
325
+ ...prevState,
326
+ address1: address1,
327
+ address2: address2,
328
+ suburb: suburb,
329
+ postcode: postcode,
330
+ state: state,
331
+ country: country,
332
+ }));
333
+ } else {
334
+ setFormData((prevState) => ({
335
+ ...prevState,
336
+ postal_address1: address1,
337
+ postal_address2: address2,
338
+ postal_suburb: suburb,
339
+ postal_postcode: postcode,
340
+ postal_state: state,
341
+ postal_country: country,
342
+ }));
343
+ }
344
+ }
345
+ };
346
+
347
+ const handleSubmit = (e) => {
348
+ e.preventDefault();
349
+ let fields = formSettings.fields;
350
+ let _inputClass = inputClass;
351
+ let validation = "";
352
+
353
+ if (formType === "create" || formType === "update") {
354
+ fields.forEach((item) => {
355
+ if (item.required === true) {
356
+ if (formData[item.id] === "") {
357
+ if (
358
+ item.hasOwnProperty("required_check") &&
359
+ item.required_check !== ""
360
+ ) {
361
+ if (formData[item.required_check] === "") {
362
+ if (
363
+ !validation.includes(
364
+ item.label +
365
+ " is a required field.<br/>"
366
+ )
367
+ ) {
368
+ validation +=
369
+ item.label +
370
+ " is a required field.<br/>";
371
+ }
372
+
373
+ _inputClass[item.id] = "inputError";
374
+ }
375
+ } else {
376
+ if (
377
+ !validation.includes(
378
+ item.label + " is a required field.<br/>"
379
+ )
380
+ ) {
381
+ validation +=
382
+ item.label + " is a required field.<br/>";
383
+ }
384
+ _inputClass[item.id] = "inputError";
385
+ }
386
+ } else {
387
+ if (
388
+ item.hasOwnProperty("required_check") &&
389
+ item.required_check !== ""
390
+ ) {
391
+ _inputClass[item.required_check] = "";
392
+ }
393
+
394
+ _inputClass[item.id] = "";
395
+ }
396
+ } else {
397
+ if (
398
+ item.hasOwnProperty("required_rely") &&
399
+ item.required_rely !== ""
400
+ ) {
401
+ if (formData[item.required_rely] === "") {
402
+ _inputClass[item.id] = "";
403
+ } else {
404
+ if (formData[item.id] === "") {
405
+ if (
406
+ !validation.includes(
407
+ item.label +
408
+ " is a required field.<br/>"
409
+ )
410
+ ) {
411
+ validation +=
412
+ item.label +
413
+ " is a required field.<br/>";
414
+ }
415
+
416
+ _inputClass[item.id] = "inputError";
417
+ } else {
418
+ _inputClass[item.id] = "";
419
+ }
420
+ }
421
+ } else {
422
+ _inputClass[item.id] = "";
423
+ }
424
+ }
425
+ });
426
+
427
+ setInputClass(_inputClass);
428
+ }
429
+
430
+ if (validation !== "") {
431
+ toast.error(<div>{parse(validation)}</div>);
432
+ } else {
433
+ let url;
434
+ let method;
435
+ let fileUpload = false;
436
+ let fileKey = "";
437
+
438
+ switch (formType) {
439
+ case "create":
440
+ url = formSettings.url;
441
+ method = "POST";
442
+ break;
443
+ case "update":
444
+ url =
445
+ formSettings.url +
446
+ "/" +
447
+ formData[formSettings.primaryKey];
448
+ method = "PUT";
449
+ break;
450
+ case "delete":
451
+ url =
452
+ formSettings.url +
453
+ "/" +
454
+ formData[formSettings.primaryKey];
455
+ method = "DELETE";
456
+ break;
457
+ default:
458
+ url = "";
459
+ method = "";
460
+ break;
461
+ }
462
+
463
+ if (!_.isEmpty(formData)) {
464
+ Object.keys(formData).forEach((item) => {
465
+ if (formData[item] !== undefined) {
466
+ if (item === "file") {
467
+ fileUpload = true;
468
+ fileKey = item;
469
+ }
470
+
471
+ if (
472
+ formData[item] instanceof File &&
473
+ formData[item] !== null
474
+ ) {
475
+ fileUpload = true;
476
+ fileKey = item;
477
+ }
478
+ }
479
+ });
480
+ }
481
+
482
+ if (fileUpload === true) {
483
+ Vapor.store(formData[fileKey], {
484
+ progress: (progress) => {
485
+ setUploadProgress(progress * 100);
486
+ },
487
+ }).then((response) => {
488
+ formData["uuid"] = response.uuid;
489
+ formData["key"] = response.key;
490
+ formData["bucket"] = response.bucket;
491
+ formData["filename"] = formData[fileKey].name;
492
+ formData["filesize"] = formData[fileKey].size;
493
+ formData["extension"] = response.extension;
494
+
495
+ CustomFetch(url, method, formData, function (result) {
496
+ if (result.error === "") {
497
+ fetchTable();
498
+ closeModal();
499
+
500
+ toast.success(
501
+ "Entry successfully saved into the system."
502
+ );
503
+
504
+ if (
505
+ result.hasOwnProperty("myob") &&
506
+ result.myob.hasOwnProperty("id") &&
507
+ result.myob.hasOwnProperty("url")
508
+ ) {
509
+ CustomFetch(
510
+ "/ajax" + result.myob.url,
511
+ "POST",
512
+ {
513
+ id: result.myob.id,
514
+ },
515
+ function (result) {
516
+ if (result.error === "") {
517
+ toast.success(
518
+ "Entry successfully saved into MYOB."
519
+ );
520
+ } else {
521
+ toast.error(
522
+ result.error !== undefined
523
+ ? result.error
524
+ : ""
525
+ );
526
+ }
527
+ }
528
+ );
529
+ }
530
+ } else {
531
+ toast.error(
532
+ result.error !== undefined ? result.error : ""
533
+ );
534
+ }
535
+ });
536
+ });
537
+ } else {
538
+ CustomFetch(url, method, formData, function (result) {
539
+ if (result.error === "") {
540
+ fetchTable();
541
+ closeModal();
542
+
543
+ toast.success(
544
+ "Entry successfully saved into the system."
545
+ );
546
+
547
+ if (
548
+ result.hasOwnProperty("myob") &&
549
+ result.myob.hasOwnProperty("id") &&
550
+ result.myob.hasOwnProperty("url")
551
+ ) {
552
+ CustomFetch(
553
+ "/ajax" + result.myob.url,
554
+ "POST",
555
+ {
556
+ id: result.myob.id,
557
+ },
558
+ function (result) {
559
+ if (result.error === "") {
560
+ toast.success(
561
+ "Entry successfully saved into MYOB."
562
+ );
563
+ } else {
564
+ toast.error(
565
+ result.error !== undefined
566
+ ? result.error
567
+ : ""
568
+ );
569
+ }
570
+ }
571
+ );
572
+ }
573
+ } else {
574
+ toast.error(
575
+ result.error !== undefined ? result.error : ""
576
+ );
577
+ }
578
+ });
579
+ }
580
+ }
581
+ };
582
+
583
+ useEffect(() => {
584
+ let _formData = formData;
585
+ let _date = false;
586
+
587
+ if (formSettings.fields.length > 0) {
588
+ formSettings.fields.forEach((item) => {
589
+ if (item.hasOwnProperty("value") && item.value !== "") {
590
+ if (
591
+ item.type === "date" ||
592
+ item.type === "datetime" ||
593
+ item.type === "time"
594
+ ) {
595
+ _formData[item.id] =
596
+ item.value instanceof Date
597
+ ? item.value
598
+ : moment(item.value).toDate();
599
+ } else {
600
+ _formData[item.id] = item.value;
601
+ }
602
+ } else {
603
+ _formData[item.id] = "";
604
+ }
605
+ });
606
+ }
607
+
608
+ if (formType !== "create") {
609
+ if (columnId > 0) {
610
+ CustomFetch(
611
+ formSettings.url + "/" + columnId,
612
+ "GET",
613
+ {},
614
+ function (result) {
615
+ result = result.hasOwnProperty("data")
616
+ ? result.data
617
+ : result;
618
+
619
+ Object.keys(formData).forEach((item) => {
620
+ let tempRes = "";
621
+ let tempResKey = "";
622
+ let field = formSettings.fields.find(
623
+ (f) => f.id === item
624
+ );
625
+
626
+ if (result[item] === undefined) {
627
+ if (field && field.hasOwnProperty("relation")) {
628
+ let tempRes = result;
629
+ let tempResKey = field.id;
630
+
631
+ if (
632
+ [
633
+ "multi-dropdown",
634
+ "multi-dropdown-ajax",
635
+ "async-dropdown-ajax",
636
+ ].includes(field.type)
637
+ ) {
638
+ if (Array.isArray(tempRes)) {
639
+ tempRes = tempRes.map((a) => ({
640
+ value: a.name,
641
+ label: a.name,
642
+ }));
643
+ }
644
+ }
645
+
646
+ if (tempRes) {
647
+ const relationFrom =
648
+ field.hasOwnProperty(
649
+ "relation_from"
650
+ )
651
+ ? field.relation_from
652
+ : field.id;
653
+ tempRes = Array.isArray(tempRes)
654
+ ? tempRes[0][relationFrom]
655
+ : tempRes[relationFrom];
656
+ } else {
657
+ tempRes = "";
658
+ }
659
+
660
+ _formData[item] = tempRes;
661
+ }
662
+
663
+ if (
664
+ field &&
665
+ field.hasOwnProperty("relation") &&
666
+ [
667
+ "multi-dropdown",
668
+ "multi-dropdown-ajax",
669
+ "async-dropdown-ajax",
670
+ ].includes(field.type)
671
+ ) {
672
+ let tempObj = result;
673
+ let tempRes = {};
674
+
675
+ const relationLength = Array.isArray(
676
+ field.relation
677
+ )
678
+ ? field.relation.length
679
+ : 1;
680
+ for (let i = 0; i < relationLength; i++) {
681
+ if (tempObj[field.relation[i]]) {
682
+ tempObj =
683
+ tempObj[field.relation[i]];
684
+ }
685
+ }
686
+
687
+ if (
688
+ tempObj !== undefined &&
689
+ tempObj !== null
690
+ ) {
691
+ tempRes = {
692
+ value: tempObj.id,
693
+ label: tempObj[field.relationName],
694
+ };
695
+ }
696
+
697
+ _formData[field.id] = tempRes;
698
+ }
699
+ } else {
700
+ if (
701
+ field &&
702
+ ["date", "datetime", "time"].includes(
703
+ field.type
704
+ )
705
+ ) {
706
+ if (
707
+ result[item] === null ||
708
+ result[item] === ""
709
+ ) {
710
+ _formData[item] = "";
711
+ } else {
712
+ const momentDate = moment(result[item]);
713
+ _formData[item] = momentDate.isValid()
714
+ ? momentDate.toDate()
715
+ : null;
716
+ }
717
+ } else if (
718
+ field &&
719
+ field.hasOwnProperty("relation")
720
+ ) {
721
+ const relationTypes = [
722
+ "multi-dropdown",
723
+ "multi-dropdown-ajax",
724
+ "async-dropdown-ajax",
725
+ ];
726
+ if (relationTypes.includes(field.type)) {
727
+ let relationLength = Array.isArray(
728
+ field.relation
729
+ )
730
+ ? field.relation.length
731
+ : 1;
732
+ let tempObj = result;
733
+
734
+ for (
735
+ let i = 0;
736
+ i < relationLength;
737
+ i++
738
+ ) {
739
+ if (tempObj[field.relation[i]]) {
740
+ tempObj =
741
+ tempObj[field.relation[i]];
742
+ }
743
+ }
744
+
745
+ tempRes =
746
+ tempObj !== undefined &&
747
+ tempObj !== null
748
+ ? {
749
+ value: tempObj.id,
750
+ label: tempObj[
751
+ field.relationName
752
+ ],
753
+ }
754
+ : {};
755
+
756
+ tempResKey = field.id;
757
+ }
758
+ } else {
759
+ _formData[item] = result[item];
760
+ }
761
+ }
762
+
763
+ if (
764
+ item === tempResKey &&
765
+ tempRes &&
766
+ tempRes.hasOwnProperty("value") &&
767
+ tempRes.hasOwnProperty("label")
768
+ ) {
769
+ _formData[item] = tempRes;
770
+ }
771
+ });
772
+
773
+ setFormData((prevState) => ({
774
+ ...prevState,
775
+ ..._formData,
776
+ }));
777
+
778
+ setFetchTrigger(!fetchTrigger);
779
+ }
780
+ );
781
+ }
782
+ } else {
783
+ setFormData((prevState) => ({
784
+ ...prevState,
785
+ ..._formData,
786
+ }));
787
+ }
788
+ }, []);
789
+
790
+ useEffect(() => {
791
+ formSettings.fields.forEach((a) => {
792
+ if (a.hasOwnProperty("show") && a.show.length > 0) {
793
+ let _show = a.show;
794
+ if (_show.length > 0) {
795
+ _show.forEach((showObject) => {
796
+ if (
797
+ showObject.hasOwnProperty("id") &&
798
+ showObject.hasOwnProperty("value")
799
+ ) {
800
+ if (
801
+ showObject.id !== "" &&
802
+ showObject.value.length > 0
803
+ ) {
804
+ let _fields = formSettings.fields;
805
+ let _counter;
806
+ _fields.forEach((a, b) => {
807
+ if (a.id === showObject.id) {
808
+ _counter = b;
809
+ }
810
+ });
811
+
812
+ let _valueChecker = formData[a.id];
813
+
814
+ if (
815
+ _counter >= 0 &&
816
+ showObject.value.includes(_valueChecker) ===
817
+ true
818
+ ) {
819
+ _fields[_counter].hide = false;
820
+ } else {
821
+ _fields[_counter].hide = true;
822
+ }
823
+
824
+ if (updateForm) {
825
+ updateForm((prevState) => ({
826
+ ...prevState,
827
+ fields: _fields,
828
+ }));
829
+ }
830
+ }
831
+ }
832
+ });
833
+ }
834
+ }
835
+ });
836
+ }, [fetchTrigger]);
837
+
838
+ return (
839
+ <div className="modalwrap top--modal">
840
+ <div className="modal">
841
+ <div className="modal__header">
842
+ <h1>{formSettings[formType].title}</h1>
843
+ <button className="modal__close" onClick={closeModal}>
844
+ <CircleX strokeWidth={1} size={24} />
845
+ </button>
846
+ </div>
847
+ <div className="modal__content">
848
+ <div className="formcontainer">
849
+ <form className="modalForm" onSubmit={handleSubmit}>
850
+ {formSettings.fields.map((item, index) =>
851
+ item.hasOwnProperty("hide") === false ? (
852
+ item.hasOwnProperty("createOnly") &&
853
+ item.createOnly === true &&
854
+ formType === "update" ? null : (
855
+ <Field
856
+ settings={item}
857
+ key={
858
+ index +
859
+ "-fields-" +
860
+ (item.hasOwnProperty("key")
861
+ ? item.id + "-" + item.key
862
+ : item.id)
863
+ }
864
+ inputValue={
865
+ item.hasOwnProperty("key")
866
+ ? formData[item.key]
867
+ : formData[item.id]
868
+ }
869
+ inputClass={inputClass}
870
+ onChange={handleChange}
871
+ onChangeDate={handleChangeDate}
872
+ onChangeSelect={handleChangeSelect}
873
+ onChangeRicheditor={
874
+ handleChangeRicheditor
875
+ }
876
+ onChangeToggle={handleChangeToggle}
877
+ onChangeNumberFormat={
878
+ handleChangeNumberFormat
879
+ }
880
+ autocompleteCallback={
881
+ autocompleteSelect
882
+ }
883
+ childDropdownCallback={
884
+ childDropdownCallback
885
+ }
886
+ setFormData={setFormData}
887
+ style={style}
888
+ />
889
+ )
890
+ ) : item.hide === false ? (
891
+ item.hasOwnProperty("createOnly") &&
892
+ item.createOnly === true &&
893
+ formType === "update" ? null : (
894
+ <Field
895
+ settings={item}
896
+ key={
897
+ index +
898
+ "-fields-" +
899
+ (item.hasOwnProperty("key")
900
+ ? item.id + "-" + item.key
901
+ : item.id)
902
+ }
903
+ inputValue={
904
+ item.hasOwnProperty("key")
905
+ ? formData[item.key]
906
+ : formData[item.id]
907
+ }
908
+ inputClass={inputClass}
909
+ onChange={handleChange}
910
+ onChangeDate={handleChangeDate}
911
+ onChangeSelect={handleChangeSelect}
912
+ onChangeRicheditor={
913
+ handleChangeRicheditor
914
+ }
915
+ onChangeToggle={handleChangeToggle}
916
+ onChangeNumberFormat={
917
+ handleChangeNumberFormat
918
+ }
919
+ autocompleteCallback={
920
+ autocompleteSelect
921
+ }
922
+ childDropdownCallback={
923
+ childDropdownCallback
924
+ }
925
+ uploadProgress={uploadProgress}
926
+ setFormData={setFormData}
927
+ style={style}
928
+ />
929
+ )
930
+ ) : null
931
+ )}
932
+ <div className="formItem fwItem">
933
+ <motion.div
934
+ className="progress__bar"
935
+ initial={{ width: "0%" }}
936
+ animate={{
937
+ width: uploadProgress + "%",
938
+ }}
939
+ transition={{
940
+ duration: 3,
941
+ ease: [0.165, 0.84, 0.44, 1.0],
942
+ }}
943
+ />
944
+ </div>
945
+ <div className="formItem fwItem lastItem">
946
+ <button className="btn modalsave" type="submit">
947
+ Save
948
+ </button>
949
+ </div>
950
+ </form>
951
+ </div>
952
+ </div>
953
+ </div>
954
+ </div>
955
+ );
1056
956
  }
1057
957
 
1058
958
  export default Form;