@visns-studio/visns-components 1.7.3 → 1.7.5

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 (6) hide show
  1. package/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs +541 -0
  2. package/.yarn/releases/yarn-3.6.1.cjs +874 -0
  3. package/.yarnrc.yml +7 -0
  4. package/components/crm/visns-data-grid.jsx +25 -11
  5. package/components/crm/visns-form.jsx +932 -935
  6. package/package.json +7 -7
package/components/crm/visns-form.jsx CHANGED
@@ -10,941 +10,938 @@ import CustomFetch from "./visns-fetch";
10
10
  import Field from "./visns-field";
11
11
 
12
12
  function Form(props) {
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]:
147
- prevState[a] !== ""
148
- ? prevState[a]
149
- : inputValue[a],
150
- }));
151
- }
152
- });
153
-
154
- formSettings.fields.forEach((f) => {
155
- if (f.id === id) {
156
- if (f.trigger && f.trigger.type) {
157
- if (f.trigger.type === "addDays") {
158
- let newDate = moment();
159
- let add = false;
160
-
161
- if (
162
- inputValue.no_of_days &&
163
- parseFloat(inputValue.no_of_days) > 0
164
- ) {
165
- newDate.add(
166
- parseFloat(inputValue.no_of_days),
167
- "days"
168
- );
169
- add = true;
170
- }
171
-
172
- if (
173
- inputValue.no_of_hours &&
174
- parseFloat(inputValue.no_of_hours) > 0
175
- ) {
176
- newDate.add(
177
- parseFloat(inputValue.no_of_hours),
178
- "hours"
179
- );
180
- add = true;
181
- }
182
-
183
- if (add === true) {
184
- setFormData((prevState) => ({
185
- ...prevState,
186
- [f.trigger.id]: newDate.toDate(),
187
- }));
188
- }
189
- }
190
- }
191
- }
192
- });
193
- break;
194
- case "clear":
195
- setFormData((prevState) => ({
196
- ...prevState,
197
- [id]: "",
198
- }));
199
- break;
200
- }
201
- };
202
-
203
- const handleChangeToggle = (e) => {
204
- if (!e) {
205
- return;
206
- }
207
-
208
- const id = e.target.dataset.jsonkey || e.target.dataset.name;
209
-
210
- setFormData((prevState) => ({
211
- ...prevState,
212
- [id]: e.target.checked,
213
- }));
214
-
215
- if (id === "same_address") {
216
- if (e.target.checked) {
217
- setFormData((prevState) => ({
218
- ...prevState,
219
- postal_address1: prevState.address1,
220
- postal_address2: prevState.address2,
221
- postal_suburb: prevState.suburb,
222
- postal_postcode: prevState.postcode,
223
- postal_state: prevState.state,
224
- postal_country: prevState.country,
225
- }));
226
- } else {
227
- setFormData((prevState) => ({
228
- ...prevState,
229
- postal_address1: "",
230
- postal_address2: "",
231
- postal_suburb: "",
232
- postal_postcode: "",
233
- postal_state: "",
234
- postal_country: "",
235
- }));
236
- }
237
- }
238
-
239
- if (e.target.dataset.show) {
240
- const _show = e.target.dataset.show
241
- ? JSON.parse(e.target.dataset.show)
242
- : [];
243
-
244
- if (_show.length > 0) {
245
- const _fields = [...formSettings.fields];
246
-
247
- _show.forEach((showObject) => {
248
- const { id, value } = showObject;
249
-
250
- if (id && value && value.length > 0) {
251
- const index = _fields.findIndex(
252
- (field) => field.id === id
253
- );
254
-
255
- if (index !== -1) {
256
- _fields[index].hide = !value.includes(
257
- e.target.checked
258
- );
259
- }
260
- }
261
- });
262
-
263
- if (updateForm) {
264
- updateForm((prevState) => ({
265
- ...prevState,
266
- fields: _fields,
267
- }));
268
- }
269
- }
270
- }
271
- };
272
-
273
- const autocompleteSelect = (place, id) => {
274
- const { address, text, context } = place;
275
-
276
- const address1 = address
277
- ? text
278
- ? `${address} ${text}`
279
- : address
280
- : text;
281
- const address2 = "";
282
- const suburb = context[1]?.text || "";
283
- const postcode = context[0]?.text || "";
284
-
285
- let state = "";
286
- let country = "";
287
- if (context.length === 5) {
288
- [state, country] = [context[3]?.text, context[4]?.text];
289
- } else {
290
- [state, country] = [context[2]?.text, context[3]?.text];
291
- }
292
-
293
- const formDataUpdate = {
294
- address1,
295
- address2,
296
- suburb,
297
- postcode,
298
- state,
299
- country,
300
- };
301
-
302
- if (formData.same_address === true || id !== "address1") {
303
- formDataUpdate.postal_address1 = address1;
304
- formDataUpdate.postal_address2 = address2;
305
- formDataUpdate.postal_suburb = suburb;
306
- formDataUpdate.postal_postcode = postcode;
307
- formDataUpdate.postal_state = state;
308
- formDataUpdate.postal_country = country;
309
- }
310
-
311
- setFormData((prevState) => ({
312
- ...prevState,
313
- ...formDataUpdate,
314
- }));
315
- };
316
-
317
- const handleSubmit = (e) => {
318
- e.preventDefault();
319
- let fields = formSettings.fields;
320
- let _inputClass = inputClass;
321
- let validation = "";
322
-
323
- if (formType === "create" || formType === "update") {
324
- fields.forEach((item) => {
325
- if (item.required === true) {
326
- if (formData[item.id] === "") {
327
- if (
328
- item.hasOwnProperty("required_check") &&
329
- item.required_check !== ""
330
- ) {
331
- if (formData[item.required_check] === "") {
332
- if (
333
- !validation.includes(
334
- item.label +
335
- " is a required field.<br/>"
336
- )
337
- ) {
338
- validation +=
339
- item.label +
340
- " is a required field.<br/>";
341
- }
342
-
343
- _inputClass[item.id] = "inputError";
344
- }
345
- } else {
346
- if (
347
- !validation.includes(
348
- item.label + " is a required field.<br/>"
349
- )
350
- ) {
351
- validation +=
352
- item.label + " is a required field.<br/>";
353
- }
354
- _inputClass[item.id] = "inputError";
355
- }
356
- } else {
357
- if (
358
- item.hasOwnProperty("required_check") &&
359
- item.required_check !== ""
360
- ) {
361
- _inputClass[item.required_check] = "";
362
- }
363
-
364
- _inputClass[item.id] = "";
365
- }
366
- } else {
367
- if (
368
- item.hasOwnProperty("required_rely") &&
369
- item.required_rely !== ""
370
- ) {
371
- if (formData[item.required_rely] === "") {
372
- _inputClass[item.id] = "";
373
- } else {
374
- if (formData[item.id] === "") {
375
- if (
376
- !validation.includes(
377
- item.label +
378
- " is a required field.<br/>"
379
- )
380
- ) {
381
- validation +=
382
- item.label +
383
- " is a required field.<br/>";
384
- }
385
-
386
- _inputClass[item.id] = "inputError";
387
- } else {
388
- _inputClass[item.id] = "";
389
- }
390
- }
391
- } else {
392
- _inputClass[item.id] = "";
393
- }
394
- }
395
- });
396
-
397
- setInputClass(_inputClass);
398
- }
399
-
400
- if (validation !== "") {
401
- toast.error(<div>{parse(validation)}</div>);
402
- } else {
403
- let url;
404
- let method;
405
- let fileUpload = false;
406
- let fileKey = "";
407
-
408
- switch (formType) {
409
- case "create":
410
- url = formSettings.url;
411
- method = "POST";
412
- break;
413
- case "update":
414
- url =
415
- formSettings.url +
416
- "/" +
417
- formData[formSettings.primaryKey];
418
- method = "PUT";
419
- break;
420
- case "delete":
421
- url =
422
- formSettings.url +
423
- "/" +
424
- formData[formSettings.primaryKey];
425
- method = "DELETE";
426
- break;
427
- default:
428
- url = "";
429
- method = "";
430
- break;
431
- }
432
-
433
- if (!_.isEmpty(formData)) {
434
- Object.keys(formData).forEach((item) => {
435
- if (formData[item] !== undefined) {
436
- if (item === "file") {
437
- fileUpload = true;
438
- fileKey = item;
439
- }
440
-
441
- if (
442
- formData[item] instanceof File &&
443
- formData[item] !== null
444
- ) {
445
- fileUpload = true;
446
- fileKey = item;
447
- }
448
- }
449
- });
450
- }
451
-
452
- if (fileUpload === true && formData[fileKey] !== null) {
453
- Vapor.store(formData[fileKey], {
454
- progress: (progress) => {
455
- setUploadProgress(progress * 100);
456
- },
457
- }).then((response) => {
458
- formData["uuid"] = response.uuid;
459
- formData["key"] = response.key;
460
- formData["bucket"] = response.bucket;
461
- formData["filename"] = formData[fileKey].name;
462
- formData["filesize"] = formData[fileKey].size;
463
- formData["extension"] = response.extension;
464
-
465
- CustomFetch(url, method, formData, function (result) {
466
- if (result.error === "") {
467
- fetchTable();
468
- closeModal();
469
-
470
- toast.success(
471
- "Entry successfully saved into the system."
472
- );
473
-
474
- if (
475
- result.hasOwnProperty("myob") &&
476
- result.myob.hasOwnProperty("id") &&
477
- result.myob.hasOwnProperty("url")
478
- ) {
479
- CustomFetch(
480
- "/ajax" + result.myob.url,
481
- "POST",
482
- {
483
- id: result.myob.id,
484
- },
485
- function (result) {
486
- if (result.error === "") {
487
- toast.success(
488
- "Entry successfully saved into MYOB."
489
- );
490
- } else {
491
- toast.error(
492
- result.error !== undefined
493
- ? result.error
494
- : ""
495
- );
496
- }
497
- }
498
- );
499
- }
500
- } else {
501
- toast.error(
502
- result.error !== undefined ? result.error : ""
503
- );
504
- }
505
- });
506
- });
507
- } else {
508
- CustomFetch(url, method, formData, function (result) {
509
- if (result.error === "") {
510
- fetchTable();
511
- closeModal();
512
-
513
- toast.success(
514
- "Entry successfully saved into the system."
515
- );
516
-
517
- if (
518
- result.hasOwnProperty("myob") &&
519
- result.myob.hasOwnProperty("id") &&
520
- result.myob.hasOwnProperty("url")
521
- ) {
522
- CustomFetch(
523
- "/ajax" + result.myob.url,
524
- "POST",
525
- {
526
- id: result.myob.id,
527
- },
528
- function (result) {
529
- if (result.error === "") {
530
- toast.success(
531
- "Entry successfully saved into MYOB."
532
- );
533
- } else {
534
- toast.error(
535
- result.error !== undefined
536
- ? result.error
537
- : ""
538
- );
539
- }
540
- }
541
- );
542
- }
543
- } else {
544
- toast.error(
545
- result.error !== undefined ? result.error : ""
546
- );
547
- }
548
- });
549
- }
550
- }
551
- };
552
-
553
- useEffect(() => {
554
- let _formData = formData;
555
- let _date = false;
556
-
557
- if (formSettings.fields.length > 0) {
558
- formSettings.fields.forEach((item) => {
559
- if (item.hasOwnProperty("value") && item.value !== "") {
560
- if (
561
- item.type === "date" ||
562
- item.type === "datetime" ||
563
- item.type === "time"
564
- ) {
565
- _formData[item.id] =
566
- item.value instanceof Date
567
- ? item.value
568
- : moment(item.value).toDate();
569
- } else {
570
- _formData[item.id] = item.value;
571
- }
572
- } else {
573
- _formData[item.id] = "";
574
- }
575
- });
576
- }
577
-
578
- if (formType !== "create") {
579
- if (columnId > 0) {
580
- CustomFetch(
581
- formSettings.url + "/" + columnId,
582
- "GET",
583
- {},
584
- function (result) {
585
- result = result.hasOwnProperty("data")
586
- ? result.data
587
- : result;
588
-
589
- console.info(result);
590
-
591
- Object.keys(formData).forEach((item) => {
592
- let tempRes = "";
593
- let tempResKey = "";
594
- let field = formSettings.fields.find(
595
- (f) => f.id === item
596
- );
597
-
598
- if (result[item] === undefined) {
599
- if (field && field.hasOwnProperty("relation")) {
600
- let tempRes = result;
601
- let tempResKey = field.id;
602
-
603
- if (
604
- [
605
- "multi-dropdown",
606
- "multi-dropdown-ajax",
607
- "async-dropdown-ajax",
608
- ].includes(field.type)
609
- ) {
610
- if (Array.isArray(tempRes)) {
611
- tempRes = tempRes.map((a) => ({
612
- value: a.name,
613
- label: a.name,
614
- }));
615
- }
616
- }
617
-
618
- if (tempRes) {
619
- const relationFrom =
620
- field.hasOwnProperty(
621
- "relation_from"
622
- )
623
- ? field.relation_from
624
- : field.id;
625
- tempRes = Array.isArray(tempRes)
626
- ? tempRes[0][relationFrom]
627
- : tempRes[relationFrom];
628
- } else {
629
- tempRes = "";
630
- }
631
-
632
- _formData[item] = tempRes;
633
- }
634
-
635
- if (
636
- field &&
637
- field.hasOwnProperty("relation") &&
638
- [
639
- "multi-dropdown",
640
- "multi-dropdown-ajax",
641
- "async-dropdown-ajax",
642
- ].includes(field.type)
643
- ) {
644
- let tempObj = result;
645
- let tempRes = {};
646
-
647
- const relationLength = Array.isArray(
648
- field.relation
649
- )
650
- ? field.relation.length
651
- : 1;
652
- for (let i = 0; i < relationLength; i++) {
653
- if (tempObj[field.relation[i]]) {
654
- tempObj =
655
- tempObj[field.relation[i]];
656
- }
657
- }
658
-
659
- if (
660
- tempObj !== undefined &&
661
- tempObj !== null
662
- ) {
663
- let labelValue;
664
-
665
- if (Array.isArray(field.relationName)) {
666
- labelValue = field.relationName.map(
667
- (name) => `${tempObj[name]} `
668
- );
669
- } else {
670
- labelValue =
671
- tempObj[field.relationName];
672
- }
673
-
674
- tempRes = {
675
- value: tempObj.id,
676
- label: labelValue,
677
- };
678
- }
679
-
680
- _formData[field.id] = tempRes;
681
- }
682
- } else {
683
- if (
684
- field &&
685
- ["date", "datetime", "time"].includes(
686
- field.type
687
- )
688
- ) {
689
- if (
690
- result[item] === null ||
691
- result[item] === ""
692
- ) {
693
- _formData[item] = "";
694
- } else {
695
- const momentDate = moment(result[item]);
696
- _formData[item] = momentDate.isValid()
697
- ? momentDate.toDate()
698
- : null;
699
- }
700
- } else if (
701
- field &&
702
- field.hasOwnProperty("relation")
703
- ) {
704
- const relationTypes = [
705
- "multi-dropdown",
706
- "multi-dropdown-ajax",
707
- "async-dropdown-ajax",
708
- ];
709
- if (relationTypes.includes(field.type)) {
710
- let relationLength = Array.isArray(
711
- field.relation
712
- )
713
- ? field.relation.length
714
- : 1;
715
- let tempObj = result;
716
-
717
- for (
718
- let i = 0;
719
- i < relationLength;
720
- i++
721
- ) {
722
- if (tempObj[field.relation[i]]) {
723
- tempObj =
724
- tempObj[field.relation[i]];
725
- }
726
- }
727
-
728
- let labelValue;
729
-
730
- if (Array.isArray(field.relationName)) {
731
- labelValue = field.relationName.map(
732
- (name) => `${tempObj[name]} `
733
- );
734
- } else {
735
- labelValue =
736
- tempObj[field.relationName];
737
- }
738
-
739
- tempRes =
740
- tempObj !== undefined &&
741
- tempObj !== null
742
- ? {
743
- value: tempObj.id,
744
- label: labelValue,
745
- }
746
- : {};
747
-
748
- tempResKey = field.id;
749
- }
750
- } else {
751
- _formData[item] = result[item];
752
- }
753
- }
754
-
755
- if (
756
- item === tempResKey &&
757
- tempRes &&
758
- tempRes.hasOwnProperty("value") &&
759
- tempRes.hasOwnProperty("label")
760
- ) {
761
- _formData[item] = tempRes;
762
- }
763
- });
764
-
765
- setFormData((prevState) => ({
766
- ...prevState,
767
- ..._formData,
768
- }));
769
-
770
- setFetchTrigger(!fetchTrigger);
771
- }
772
- );
773
- }
774
- } else {
775
- setFormData((prevState) => ({
776
- ...prevState,
777
- ..._formData,
778
- }));
779
- }
780
- }, []);
781
-
782
- useEffect(() => {
783
- formSettings.fields.forEach((a) => {
784
- if (a.hasOwnProperty("show") && a.show.length > 0) {
785
- let _show = a.show;
786
- if (_show.length > 0) {
787
- _show.forEach((showObject) => {
788
- if (
789
- showObject.hasOwnProperty("id") &&
790
- showObject.hasOwnProperty("value")
791
- ) {
792
- if (
793
- showObject.id !== "" &&
794
- showObject.value.length > 0
795
- ) {
796
- let _fields = formSettings.fields;
797
- let _counter;
798
- _fields.forEach((a, b) => {
799
- if (a.id === showObject.id) {
800
- _counter = b;
801
- }
802
- });
803
-
804
- let _valueChecker = formData[a.id];
805
-
806
- if (
807
- _counter >= 0 &&
808
- showObject.value.includes(_valueChecker) ===
809
- true
810
- ) {
811
- _fields[_counter].hide = false;
812
- } else {
813
- _fields[_counter].hide = true;
814
- }
815
-
816
- if (updateForm) {
817
- updateForm((prevState) => ({
818
- ...prevState,
819
- fields: _fields,
820
- }));
821
- }
822
- }
823
- }
824
- });
825
- }
826
- }
827
- });
828
- }, [fetchTrigger]);
829
-
830
- return (
831
- <div className="modalwrap top--modal">
832
- <div className="modal">
833
- <div className="modal__header">
834
- <h1>{formSettings[formType].title}</h1>
835
- <button className="modal__close" onClick={closeModal}>
836
- <CircleX strokeWidth={1} size={24} />
837
- </button>
838
- </div>
839
- <div className="modal__content">
840
- <div className="formcontainer">
841
- <form className="modalForm" onSubmit={handleSubmit}>
842
- {formSettings.fields.map((item, index) =>
843
- item.hasOwnProperty("hide") === false ? (
844
- item.hasOwnProperty("createOnly") &&
845
- item.createOnly === true &&
846
- formType === "update" ? null : (
847
- <Field
848
- settings={item}
849
- key={
850
- index +
851
- "-fields-" +
852
- (item.hasOwnProperty("key")
853
- ? item.id + "-" + item.key
854
- : item.id)
855
- }
856
- inputValue={
857
- item.hasOwnProperty("key")
858
- ? formData[item.key]
859
- : formData[item.id]
860
- }
861
- inputClass={inputClass}
862
- onChange={handleChange}
863
- onChangeDate={handleChangeDate}
864
- onChangeSelect={handleChangeSelect}
865
- onChangeRicheditor={
866
- handleChangeRicheditor
867
- }
868
- onChangeToggle={handleChangeToggle}
869
- onChangeNumberFormat={
870
- handleChangeNumberFormat
871
- }
872
- autocompleteCallback={
873
- autocompleteSelect
874
- }
875
- childDropdownCallback={
876
- childDropdownCallback
877
- }
878
- setFormData={setFormData}
879
- style={style}
880
- />
881
- )
882
- ) : item.hide === false ? (
883
- item.hasOwnProperty("createOnly") &&
884
- item.createOnly === true &&
885
- formType === "update" ? null : (
886
- <Field
887
- settings={item}
888
- key={
889
- index +
890
- "-fields-" +
891
- (item.hasOwnProperty("key")
892
- ? item.id + "-" + item.key
893
- : item.id)
894
- }
895
- inputValue={
896
- item.hasOwnProperty("key")
897
- ? formData[item.key]
898
- : formData[item.id]
899
- }
900
- inputClass={inputClass}
901
- onChange={handleChange}
902
- onChangeDate={handleChangeDate}
903
- onChangeSelect={handleChangeSelect}
904
- onChangeRicheditor={
905
- handleChangeRicheditor
906
- }
907
- onChangeToggle={handleChangeToggle}
908
- onChangeNumberFormat={
909
- handleChangeNumberFormat
910
- }
911
- autocompleteCallback={
912
- autocompleteSelect
913
- }
914
- childDropdownCallback={
915
- childDropdownCallback
916
- }
917
- uploadProgress={uploadProgress}
918
- setFormData={setFormData}
919
- style={style}
920
- />
921
- )
922
- ) : null
923
- )}
924
- <div className="formItem fwItem">
925
- <motion.div
926
- className="progress__bar"
927
- initial={{ width: "0%" }}
928
- animate={{
929
- width: uploadProgress + "%",
930
- }}
931
- transition={{
932
- duration: 3,
933
- ease: [0.165, 0.84, 0.44, 1.0],
934
- }}
935
- />
936
- </div>
937
- <div className="formItem fwItem lastItem">
938
- <button className="btn modalsave" type="submit">
939
- Save
940
- </button>
941
- </div>
942
- </form>
943
- </div>
944
- </div>
945
- </div>
946
- </div>
947
- );
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]:
147
+ prevState[a] !== ""
148
+ ? prevState[a]
149
+ : inputValue[a],
150
+ }));
151
+ }
152
+ });
153
+
154
+ formSettings.fields.forEach((f) => {
155
+ if (f.id === id) {
156
+ if (f.trigger && f.trigger.type) {
157
+ if (f.trigger.type === "addDays") {
158
+ let newDate = moment();
159
+ let add = false;
160
+
161
+ if (
162
+ inputValue.no_of_days &&
163
+ parseFloat(inputValue.no_of_days) > 0
164
+ ) {
165
+ newDate.add(
166
+ parseFloat(inputValue.no_of_days),
167
+ "days"
168
+ );
169
+ add = true;
170
+ }
171
+
172
+ if (
173
+ inputValue.no_of_hours &&
174
+ parseFloat(inputValue.no_of_hours) > 0
175
+ ) {
176
+ newDate.add(
177
+ parseFloat(inputValue.no_of_hours),
178
+ "hours"
179
+ );
180
+ add = true;
181
+ }
182
+
183
+ if (add === true) {
184
+ setFormData((prevState) => ({
185
+ ...prevState,
186
+ [f.trigger.id]: newDate.toDate(),
187
+ }));
188
+ }
189
+ }
190
+ }
191
+ }
192
+ });
193
+ break;
194
+ case "clear":
195
+ setFormData((prevState) => ({
196
+ ...prevState,
197
+ [id]: "",
198
+ }));
199
+ break;
200
+ }
201
+ };
202
+
203
+ const handleChangeToggle = (e) => {
204
+ if (!e) {
205
+ return;
206
+ }
207
+
208
+ const id = e.target.dataset.jsonkey || e.target.dataset.name;
209
+
210
+ setFormData((prevState) => ({
211
+ ...prevState,
212
+ [id]: e.target.checked,
213
+ }));
214
+
215
+ if (id === "same_address") {
216
+ if (e.target.checked) {
217
+ setFormData((prevState) => ({
218
+ ...prevState,
219
+ postal_address1: prevState.address1,
220
+ postal_address2: prevState.address2,
221
+ postal_suburb: prevState.suburb,
222
+ postal_postcode: prevState.postcode,
223
+ postal_state: prevState.state,
224
+ postal_country: prevState.country,
225
+ }));
226
+ } else {
227
+ setFormData((prevState) => ({
228
+ ...prevState,
229
+ postal_address1: "",
230
+ postal_address2: "",
231
+ postal_suburb: "",
232
+ postal_postcode: "",
233
+ postal_state: "",
234
+ postal_country: "",
235
+ }));
236
+ }
237
+ }
238
+
239
+ if (e.target.dataset.show) {
240
+ const _show = e.target.dataset.show
241
+ ? JSON.parse(e.target.dataset.show)
242
+ : [];
243
+
244
+ if (_show.length > 0) {
245
+ const _fields = [...formSettings.fields];
246
+
247
+ _show.forEach((showObject) => {
248
+ const { id, value } = showObject;
249
+
250
+ if (id && value && value.length > 0) {
251
+ const index = _fields.findIndex(
252
+ (field) => field.id === id
253
+ );
254
+
255
+ if (index !== -1) {
256
+ _fields[index].hide = !value.includes(
257
+ e.target.checked
258
+ );
259
+ }
260
+ }
261
+ });
262
+
263
+ if (updateForm) {
264
+ updateForm((prevState) => ({
265
+ ...prevState,
266
+ fields: _fields,
267
+ }));
268
+ }
269
+ }
270
+ }
271
+ };
272
+
273
+ const autocompleteSelect = (place, id) => {
274
+ const { address, text, context } = place;
275
+
276
+ const address1 = address
277
+ ? text
278
+ ? `${address} ${text}`
279
+ : address
280
+ : text;
281
+ const address2 = "";
282
+ const suburb = context[1]?.text || "";
283
+ const postcode = context[0]?.text || "";
284
+
285
+ let state = "";
286
+ let country = "";
287
+ if (context.length === 5) {
288
+ [state, country] = [context[3]?.text, context[4]?.text];
289
+ } else {
290
+ [state, country] = [context[2]?.text, context[3]?.text];
291
+ }
292
+
293
+ const formDataUpdate = {
294
+ address1,
295
+ address2,
296
+ suburb,
297
+ postcode,
298
+ state,
299
+ country,
300
+ };
301
+
302
+ if (formData.same_address === true || id !== "address1") {
303
+ formDataUpdate.postal_address1 = address1;
304
+ formDataUpdate.postal_address2 = address2;
305
+ formDataUpdate.postal_suburb = suburb;
306
+ formDataUpdate.postal_postcode = postcode;
307
+ formDataUpdate.postal_state = state;
308
+ formDataUpdate.postal_country = country;
309
+ }
310
+
311
+ setFormData((prevState) => ({
312
+ ...prevState,
313
+ ...formDataUpdate,
314
+ }));
315
+ };
316
+
317
+ const handleSubmit = (e) => {
318
+ e.preventDefault();
319
+ let fields = formSettings.fields;
320
+ let _inputClass = inputClass;
321
+ let validation = "";
322
+
323
+ if (formType === "create" || formType === "update") {
324
+ fields.forEach((item) => {
325
+ if (item.required === true) {
326
+ if (formData[item.id] === "") {
327
+ if (
328
+ item.hasOwnProperty("required_check") &&
329
+ item.required_check !== ""
330
+ ) {
331
+ if (formData[item.required_check] === "") {
332
+ if (
333
+ !validation.includes(
334
+ item.label +
335
+ " is a required field.<br/>"
336
+ )
337
+ ) {
338
+ validation +=
339
+ item.label +
340
+ " is a required field.<br/>";
341
+ }
342
+
343
+ _inputClass[item.id] = "inputError";
344
+ }
345
+ } else {
346
+ if (
347
+ !validation.includes(
348
+ item.label + " is a required field.<br/>"
349
+ )
350
+ ) {
351
+ validation +=
352
+ item.label + " is a required field.<br/>";
353
+ }
354
+ _inputClass[item.id] = "inputError";
355
+ }
356
+ } else {
357
+ if (
358
+ item.hasOwnProperty("required_check") &&
359
+ item.required_check !== ""
360
+ ) {
361
+ _inputClass[item.required_check] = "";
362
+ }
363
+
364
+ _inputClass[item.id] = "";
365
+ }
366
+ } else {
367
+ if (
368
+ item.hasOwnProperty("required_rely") &&
369
+ item.required_rely !== ""
370
+ ) {
371
+ if (formData[item.required_rely] === "") {
372
+ _inputClass[item.id] = "";
373
+ } else {
374
+ if (formData[item.id] === "") {
375
+ if (
376
+ !validation.includes(
377
+ item.label +
378
+ " is a required field.<br/>"
379
+ )
380
+ ) {
381
+ validation +=
382
+ item.label +
383
+ " is a required field.<br/>";
384
+ }
385
+
386
+ _inputClass[item.id] = "inputError";
387
+ } else {
388
+ _inputClass[item.id] = "";
389
+ }
390
+ }
391
+ } else {
392
+ _inputClass[item.id] = "";
393
+ }
394
+ }
395
+ });
396
+
397
+ setInputClass(_inputClass);
398
+ }
399
+
400
+ if (validation !== "") {
401
+ toast.error(<div>{parse(validation)}</div>);
402
+ } else {
403
+ let url;
404
+ let method;
405
+ let fileUpload = false;
406
+ let fileKey = "";
407
+
408
+ switch (formType) {
409
+ case "create":
410
+ url = formSettings.url;
411
+ method = "POST";
412
+ break;
413
+ case "update":
414
+ url =
415
+ formSettings.url +
416
+ "/" +
417
+ formData[formSettings.primaryKey];
418
+ method = "PUT";
419
+ break;
420
+ case "delete":
421
+ url =
422
+ formSettings.url +
423
+ "/" +
424
+ formData[formSettings.primaryKey];
425
+ method = "DELETE";
426
+ break;
427
+ default:
428
+ url = "";
429
+ method = "";
430
+ break;
431
+ }
432
+
433
+ if (!_.isEmpty(formData)) {
434
+ Object.keys(formData).forEach((item) => {
435
+ if (formData[item] !== undefined) {
436
+ if (item === "file") {
437
+ fileUpload = true;
438
+ fileKey = item;
439
+ }
440
+
441
+ if (
442
+ formData[item] instanceof File &&
443
+ formData[item] !== null
444
+ ) {
445
+ fileUpload = true;
446
+ fileKey = item;
447
+ }
448
+ }
449
+ });
450
+ }
451
+
452
+ if (fileUpload === true && formData[fileKey] !== null) {
453
+ Vapor.store(formData[fileKey], {
454
+ progress: (progress) => {
455
+ setUploadProgress(progress * 100);
456
+ },
457
+ }).then((response) => {
458
+ formData["uuid"] = response.uuid;
459
+ formData["key"] = response.key;
460
+ formData["bucket"] = response.bucket;
461
+ formData["filename"] = formData[fileKey].name;
462
+ formData["filesize"] = formData[fileKey].size;
463
+ formData["extension"] = response.extension;
464
+
465
+ CustomFetch(url, method, formData, function (result) {
466
+ if (result.error === "") {
467
+ fetchTable();
468
+ closeModal();
469
+
470
+ toast.success(
471
+ "Entry successfully saved into the system."
472
+ );
473
+
474
+ if (
475
+ result.hasOwnProperty("myob") &&
476
+ result.myob.hasOwnProperty("id") &&
477
+ result.myob.hasOwnProperty("url")
478
+ ) {
479
+ CustomFetch(
480
+ "/ajax" + result.myob.url,
481
+ "POST",
482
+ {
483
+ id: result.myob.id,
484
+ },
485
+ function (result) {
486
+ if (result.error === "") {
487
+ toast.success(
488
+ "Entry successfully saved into MYOB."
489
+ );
490
+ } else {
491
+ toast.error(
492
+ result.error !== undefined
493
+ ? result.error
494
+ : ""
495
+ );
496
+ }
497
+ }
498
+ );
499
+ }
500
+ } else {
501
+ toast.error(
502
+ result.error !== undefined ? result.error : ""
503
+ );
504
+ }
505
+ });
506
+ });
507
+ } else {
508
+ CustomFetch(url, method, formData, function (result) {
509
+ if (result.error === "") {
510
+ fetchTable();
511
+ closeModal();
512
+
513
+ toast.success(
514
+ "Entry successfully saved into the system."
515
+ );
516
+
517
+ if (
518
+ result.hasOwnProperty("myob") &&
519
+ result.myob.hasOwnProperty("id") &&
520
+ result.myob.hasOwnProperty("url")
521
+ ) {
522
+ CustomFetch(
523
+ "/ajax" + result.myob.url,
524
+ "POST",
525
+ {
526
+ id: result.myob.id,
527
+ },
528
+ function (result) {
529
+ if (result.error === "") {
530
+ toast.success(
531
+ "Entry successfully saved into MYOB."
532
+ );
533
+ } else {
534
+ toast.error(
535
+ result.error !== undefined
536
+ ? result.error
537
+ : ""
538
+ );
539
+ }
540
+ }
541
+ );
542
+ }
543
+ } else {
544
+ toast.error(
545
+ result.error !== undefined ? result.error : ""
546
+ );
547
+ }
548
+ });
549
+ }
550
+ }
551
+ };
552
+
553
+ useEffect(() => {
554
+ let _formData = formData;
555
+ let _date = false;
556
+
557
+ if (formSettings.fields.length > 0) {
558
+ formSettings.fields.forEach((item) => {
559
+ if (item.hasOwnProperty("value") && item.value !== "") {
560
+ if (
561
+ item.type === "date" ||
562
+ item.type === "datetime" ||
563
+ item.type === "time"
564
+ ) {
565
+ _formData[item.id] =
566
+ item.value instanceof Date
567
+ ? item.value
568
+ : moment(item.value).toDate();
569
+ } else {
570
+ _formData[item.id] = item.value;
571
+ }
572
+ } else {
573
+ _formData[item.id] = "";
574
+ }
575
+ });
576
+ }
577
+
578
+ if (formType !== "create") {
579
+ if (columnId > 0) {
580
+ CustomFetch(
581
+ formSettings.url + "/" + columnId,
582
+ "GET",
583
+ {},
584
+ function (result) {
585
+ result = result.hasOwnProperty("data")
586
+ ? result.data
587
+ : result;
588
+
589
+ Object.keys(formData).forEach((item) => {
590
+ let tempRes = "";
591
+ let tempResKey = "";
592
+ let field = formSettings.fields.find(
593
+ (f) => f.id === item
594
+ );
595
+
596
+ if (result[item] === undefined) {
597
+ if (field && field.hasOwnProperty("relation")) {
598
+ let tempRes = result[field.relation];
599
+
600
+ if (
601
+ [
602
+ "multi-dropdown",
603
+ "multi-dropdown-ajax",
604
+ "async-dropdown-ajax",
605
+ ].includes(field.type)
606
+ ) {
607
+ if (Array.isArray(tempRes)) {
608
+ tempRes = tempRes.map((a) => ({
609
+ value: a.name,
610
+ label: a.name,
611
+ }));
612
+ }
613
+ }
614
+
615
+ if (tempRes) {
616
+ const relationFrom =
617
+ field.hasOwnProperty(
618
+ "relation_from"
619
+ )
620
+ ? field.relation_from
621
+ : field.id;
622
+ tempRes = Array.isArray(tempRes)
623
+ ? tempRes[0][relationFrom]
624
+ : tempRes[relationFrom];
625
+ } else {
626
+ tempRes = "";
627
+ }
628
+
629
+ _formData[item] = tempRes;
630
+ }
631
+
632
+ if (
633
+ field &&
634
+ field.hasOwnProperty("relation") &&
635
+ [
636
+ "multi-dropdown",
637
+ "multi-dropdown-ajax",
638
+ "async-dropdown-ajax",
639
+ ].includes(field.type)
640
+ ) {
641
+ let tempObj = result;
642
+ let tempRes = {};
643
+
644
+ const relationLength = Array.isArray(
645
+ field.relation
646
+ )
647
+ ? field.relation.length
648
+ : 1;
649
+ for (let i = 0; i < relationLength; i++) {
650
+ if (tempObj[field.relation[i]]) {
651
+ tempObj =
652
+ tempObj[field.relation[i]];
653
+ }
654
+ }
655
+
656
+ if (
657
+ tempObj !== undefined &&
658
+ tempObj !== null
659
+ ) {
660
+ let labelValue;
661
+
662
+ if (Array.isArray(field.relationName)) {
663
+ labelValue = field.relationName.map(
664
+ (name) => `${tempObj[name]} `
665
+ );
666
+ } else {
667
+ labelValue =
668
+ tempObj[field.relationName];
669
+ }
670
+
671
+ tempRes = {
672
+ value: tempObj.id,
673
+ label: labelValue,
674
+ };
675
+ }
676
+
677
+ _formData[field.id] = tempRes;
678
+ }
679
+ } else {
680
+ if (
681
+ field &&
682
+ ["date", "datetime", "time"].includes(
683
+ field.type
684
+ )
685
+ ) {
686
+ if (
687
+ result[item] === null ||
688
+ result[item] === ""
689
+ ) {
690
+ _formData[item] = "";
691
+ } else {
692
+ const momentDate = moment(result[item]);
693
+ _formData[item] = momentDate.isValid()
694
+ ? momentDate.toDate()
695
+ : null;
696
+ }
697
+ } else if (
698
+ field &&
699
+ field.hasOwnProperty("relation")
700
+ ) {
701
+ const relationTypes = [
702
+ "multi-dropdown",
703
+ "multi-dropdown-ajax",
704
+ "async-dropdown-ajax",
705
+ ];
706
+ if (relationTypes.includes(field.type)) {
707
+ let relationLength = Array.isArray(
708
+ field.relation
709
+ )
710
+ ? field.relation.length
711
+ : 1;
712
+ let tempObj = result;
713
+
714
+ for (
715
+ let i = 0;
716
+ i < relationLength;
717
+ i++
718
+ ) {
719
+ if (tempObj[field.relation[i]]) {
720
+ tempObj =
721
+ tempObj[field.relation[i]];
722
+ }
723
+ }
724
+
725
+ let labelValue;
726
+
727
+ if (Array.isArray(field.relationName)) {
728
+ labelValue = field.relationName.map(
729
+ (name) => `${tempObj[name]} `
730
+ );
731
+ } else {
732
+ labelValue =
733
+ tempObj[field.relationName];
734
+ }
735
+
736
+ tempRes =
737
+ tempObj !== undefined &&
738
+ tempObj !== null
739
+ ? {
740
+ value: tempObj.id,
741
+ label: labelValue,
742
+ }
743
+ : {};
744
+
745
+ tempResKey = field.id;
746
+ }
747
+ } else {
748
+ _formData[item] = result[item];
749
+ }
750
+ }
751
+
752
+ if (
753
+ item === tempResKey &&
754
+ tempRes &&
755
+ tempRes.hasOwnProperty("value") &&
756
+ tempRes.hasOwnProperty("label")
757
+ ) {
758
+ _formData[item] = tempRes;
759
+ }
760
+ });
761
+
762
+ setFormData((prevState) => ({
763
+ ...prevState,
764
+ ..._formData,
765
+ }));
766
+
767
+ setFetchTrigger(!fetchTrigger);
768
+ }
769
+ );
770
+ }
771
+ } else {
772
+ setFormData((prevState) => ({
773
+ ...prevState,
774
+ ..._formData,
775
+ }));
776
+ }
777
+ }, []);
778
+
779
+ useEffect(() => {
780
+ formSettings.fields.forEach((a) => {
781
+ if (a.hasOwnProperty("show") && a.show.length > 0) {
782
+ let _show = a.show;
783
+ if (_show.length > 0) {
784
+ _show.forEach((showObject) => {
785
+ if (
786
+ showObject.hasOwnProperty("id") &&
787
+ showObject.hasOwnProperty("value")
788
+ ) {
789
+ if (
790
+ showObject.id !== "" &&
791
+ showObject.value.length > 0
792
+ ) {
793
+ let _fields = formSettings.fields;
794
+ let _counter;
795
+ _fields.forEach((a, b) => {
796
+ if (a.id === showObject.id) {
797
+ _counter = b;
798
+ }
799
+ });
800
+
801
+ let _valueChecker = formData[a.id];
802
+
803
+ if (
804
+ _counter >= 0 &&
805
+ showObject.value.includes(_valueChecker) ===
806
+ true
807
+ ) {
808
+ _fields[_counter].hide = false;
809
+ } else {
810
+ _fields[_counter].hide = true;
811
+ }
812
+
813
+ if (updateForm) {
814
+ updateForm((prevState) => ({
815
+ ...prevState,
816
+ fields: _fields,
817
+ }));
818
+ }
819
+ }
820
+ }
821
+ });
822
+ }
823
+ }
824
+ });
825
+ }, [fetchTrigger]);
826
+
827
+ return (
828
+ <div className="modalwrap top--modal">
829
+ <div className="modal">
830
+ <div className="modal__header">
831
+ <h1>{formSettings[formType].title}</h1>
832
+ <button className="modal__close" onClick={closeModal}>
833
+ <CircleX strokeWidth={1} size={24} />
834
+ </button>
835
+ </div>
836
+ <div className="modal__content">
837
+ <div className="formcontainer">
838
+ <form className="modalForm" onSubmit={handleSubmit}>
839
+ {formSettings.fields.map((item, index) =>
840
+ item.hasOwnProperty("hide") === false ? (
841
+ item.hasOwnProperty("createOnly") &&
842
+ item.createOnly === true &&
843
+ formType === "update" ? null : (
844
+ <Field
845
+ settings={item}
846
+ key={
847
+ index +
848
+ "-fields-" +
849
+ (item.hasOwnProperty("key")
850
+ ? item.id + "-" + item.key
851
+ : item.id)
852
+ }
853
+ inputValue={
854
+ item.hasOwnProperty("key")
855
+ ? formData[item.key]
856
+ : formData[item.id]
857
+ }
858
+ inputClass={inputClass}
859
+ onChange={handleChange}
860
+ onChangeDate={handleChangeDate}
861
+ onChangeSelect={handleChangeSelect}
862
+ onChangeRicheditor={
863
+ handleChangeRicheditor
864
+ }
865
+ onChangeToggle={handleChangeToggle}
866
+ onChangeNumberFormat={
867
+ handleChangeNumberFormat
868
+ }
869
+ autocompleteCallback={
870
+ autocompleteSelect
871
+ }
872
+ childDropdownCallback={
873
+ childDropdownCallback
874
+ }
875
+ setFormData={setFormData}
876
+ style={style}
877
+ />
878
+ )
879
+ ) : item.hide === false ? (
880
+ item.hasOwnProperty("createOnly") &&
881
+ item.createOnly === true &&
882
+ formType === "update" ? null : (
883
+ <Field
884
+ settings={item}
885
+ key={
886
+ index +
887
+ "-fields-" +
888
+ (item.hasOwnProperty("key")
889
+ ? item.id + "-" + item.key
890
+ : item.id)
891
+ }
892
+ inputValue={
893
+ item.hasOwnProperty("key")
894
+ ? formData[item.key]
895
+ : formData[item.id]
896
+ }
897
+ inputClass={inputClass}
898
+ onChange={handleChange}
899
+ onChangeDate={handleChangeDate}
900
+ onChangeSelect={handleChangeSelect}
901
+ onChangeRicheditor={
902
+ handleChangeRicheditor
903
+ }
904
+ onChangeToggle={handleChangeToggle}
905
+ onChangeNumberFormat={
906
+ handleChangeNumberFormat
907
+ }
908
+ autocompleteCallback={
909
+ autocompleteSelect
910
+ }
911
+ childDropdownCallback={
912
+ childDropdownCallback
913
+ }
914
+ uploadProgress={uploadProgress}
915
+ setFormData={setFormData}
916
+ style={style}
917
+ />
918
+ )
919
+ ) : null
920
+ )}
921
+ <div className="formItem fwItem">
922
+ <motion.div
923
+ className="progress__bar"
924
+ initial={{ width: "0%" }}
925
+ animate={{
926
+ width: uploadProgress + "%",
927
+ }}
928
+ transition={{
929
+ duration: 3,
930
+ ease: [0.165, 0.84, 0.44, 1.0],
931
+ }}
932
+ />
933
+ </div>
934
+ <div className="formItem fwItem lastItem">
935
+ <button className="btn modalsave" type="submit">
936
+ Save
937
+ </button>
938
+ </div>
939
+ </form>
940
+ </div>
941
+ </div>
942
+ </div>
943
+ </div>
944
+ );
948
945
  }
949
946
 
950
947
  export default Form;