@visns-studio/visns-components 1.8.4 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.prettierrc.json +7 -0
- package/components/cms/{visns-data-grid.jsx → DataGrid.jsx} +2 -2
- package/components/cms/DropZone.jsx +161 -0
- package/components/cms/Field.jsx +747 -0
- package/components/cms/Form.jsx +475 -0
- package/components/cms/sorting/{list.jsx → List.jsx} +3 -3
- package/components/crm/{visns-async-select.jsx → AsyncSelect.jsx} +9 -9
- package/components/crm/Call.jsx +220 -0
- package/components/crm/{visns-data-grid.jsx → DataGrid.jsx} +263 -274
- package/components/crm/{visns-field.jsx → Field.jsx} +5 -5
- package/components/crm/{visns-form.jsx → Form.jsx} +302 -205
- package/components/crm/{visns-multi-select.jsx → MultiSelect.jsx} +1 -1
- package/components/crm/{visns-navigation.jsx → Navigation.jsx} +22 -18
- package/components/crm/{visns-notification.jsx → Notification.jsx} +1 -1
- package/components/crm/TableFilter.jsx +125 -0
- package/components/crm/auth/Login.jsx +158 -0
- package/components/crm/auth/Profile.jsx +163 -0
- package/components/crm/auth/Reset.jsx +87 -0
- package/components/crm/auth/Verify.jsx +162 -0
- package/components/crm/generic/GenericDetail.jsx +380 -0
- package/components/crm/generic/GenericIndex.jsx +112 -0
- package/components/crm/generic/NotificationList.jsx +64 -0
- package/index.js +37 -19
- package/package.json +6 -6
- package/components/cms/visns-dropzone.jsx +0 -161
- package/components/cms/visns-field.jsx +0 -747
- package/components/cms/visns-form.jsx +0 -475
- package/components/crm/visns-call.jsx +0 -220
- package/components/crm/visns-table-filter.jsx +0 -153
- /package/components/cms/sorting/{item.jsx → Item.jsx} +0 -0
- /package/components/crm/{visns-autocomplete.jsx → Autocomplete.jsx} +0 -0
- /package/components/crm/{visns-download.jsx → Download.jsx} +0 -0
- /package/components/crm/{visns-fetch.jsx → Fetch.jsx} +0 -0
- /package/components/crm/{visns-loader.jsx → Loader.jsx} +0 -0
- /package/components/crm/{visns-select.jsx → Select.jsx} +0 -0
- /package/components/crm/{visns-select-list.jsx → SelectList.jsx} +0 -0
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import React, { useState, useEffect } from
|
|
2
|
-
import { motion } from
|
|
3
|
-
import { toast } from
|
|
4
|
-
import moment from
|
|
5
|
-
import parse from
|
|
6
|
-
import _ from
|
|
7
|
-
import { CircleX } from
|
|
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
|
|
10
|
-
import Field from
|
|
9
|
+
import CustomFetch from './Fetch';
|
|
10
|
+
import Field from './Field';
|
|
11
11
|
|
|
12
12
|
function Form(props) {
|
|
13
13
|
const {
|
|
14
|
-
childDropdownCallback,
|
|
15
14
|
closeModal,
|
|
16
15
|
columnId,
|
|
17
16
|
formType,
|
|
@@ -19,12 +18,27 @@ function Form(props) {
|
|
|
19
18
|
fetchTable,
|
|
20
19
|
style,
|
|
21
20
|
updateForm,
|
|
21
|
+
type,
|
|
22
22
|
} = props;
|
|
23
23
|
const [inputClass, setInputClass] = useState({});
|
|
24
24
|
const [formData, setFormData] = useState({});
|
|
25
25
|
const [fetchTrigger, setFetchTrigger] = useState(false);
|
|
26
26
|
const [uploadProgress, setUploadProgress] = useState(0);
|
|
27
27
|
|
|
28
|
+
const childDropdownCallback = (data) => {
|
|
29
|
+
let _form = { ...formSettings };
|
|
30
|
+
|
|
31
|
+
if (formSettings.fields.length > 0) {
|
|
32
|
+
formSettings.fields.forEach((a, b) => {
|
|
33
|
+
if (a.id === data.id) {
|
|
34
|
+
_form.fields[b].options = data.data;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
updateForm(_form);
|
|
40
|
+
};
|
|
41
|
+
|
|
28
42
|
const handleChange = (e) => {
|
|
29
43
|
const id = e.target.dataset.jsonkey || e.target.dataset.name;
|
|
30
44
|
const value = e.target.value;
|
|
@@ -57,20 +71,20 @@ function Form(props) {
|
|
|
57
71
|
});
|
|
58
72
|
}
|
|
59
73
|
|
|
60
|
-
if (e.target.dataset.hasOwnProperty(
|
|
74
|
+
if (e.target.dataset.hasOwnProperty('show')) {
|
|
61
75
|
const _show =
|
|
62
|
-
e.target.dataset.show !==
|
|
76
|
+
e.target.dataset.show !== ''
|
|
63
77
|
? JSON.parse(e.target.dataset.show)
|
|
64
78
|
: [];
|
|
65
79
|
|
|
66
80
|
if (_show.length > 0) {
|
|
67
81
|
_show.forEach((showObject) => {
|
|
68
82
|
if (
|
|
69
|
-
showObject.hasOwnProperty(
|
|
70
|
-
showObject.hasOwnProperty(
|
|
83
|
+
showObject.hasOwnProperty('id') &&
|
|
84
|
+
showObject.hasOwnProperty('value')
|
|
71
85
|
) {
|
|
72
86
|
if (
|
|
73
|
-
showObject.id !==
|
|
87
|
+
showObject.id !== '' &&
|
|
74
88
|
showObject.value.length > 0
|
|
75
89
|
) {
|
|
76
90
|
const _fields = formSettings.fields;
|
|
@@ -133,14 +147,14 @@ function Form(props) {
|
|
|
133
147
|
};
|
|
134
148
|
|
|
135
149
|
switch (action.action) {
|
|
136
|
-
case
|
|
150
|
+
case 'select-option':
|
|
137
151
|
updateFormData({ [id]: inputValue });
|
|
138
152
|
|
|
139
153
|
Object.keys(inputValue).forEach((a) => {
|
|
140
154
|
if (formData.hasOwnProperty(a)) {
|
|
141
155
|
updateFormData({
|
|
142
156
|
[a]:
|
|
143
|
-
prevState[a] !==
|
|
157
|
+
prevState[a] !== ''
|
|
144
158
|
? prevState[a]
|
|
145
159
|
: inputValue[a],
|
|
146
160
|
});
|
|
@@ -151,7 +165,7 @@ function Form(props) {
|
|
|
151
165
|
if (
|
|
152
166
|
f.id === id &&
|
|
153
167
|
f.trigger &&
|
|
154
|
-
f.trigger.type ===
|
|
168
|
+
f.trigger.type === 'addDays'
|
|
155
169
|
) {
|
|
156
170
|
let newDate = moment();
|
|
157
171
|
let add = false;
|
|
@@ -162,7 +176,7 @@ function Form(props) {
|
|
|
162
176
|
) {
|
|
163
177
|
newDate.add(
|
|
164
178
|
parseFloat(inputValue.no_of_days),
|
|
165
|
-
|
|
179
|
+
'days'
|
|
166
180
|
);
|
|
167
181
|
add = true;
|
|
168
182
|
}
|
|
@@ -173,7 +187,7 @@ function Form(props) {
|
|
|
173
187
|
) {
|
|
174
188
|
newDate.add(
|
|
175
189
|
parseFloat(inputValue.no_of_hours),
|
|
176
|
-
|
|
190
|
+
'hours'
|
|
177
191
|
);
|
|
178
192
|
add = true;
|
|
179
193
|
}
|
|
@@ -186,8 +200,8 @@ function Form(props) {
|
|
|
186
200
|
}
|
|
187
201
|
});
|
|
188
202
|
break;
|
|
189
|
-
case
|
|
190
|
-
updateFormData({ [id]:
|
|
203
|
+
case 'clear':
|
|
204
|
+
updateFormData({ [id]: '' });
|
|
191
205
|
break;
|
|
192
206
|
}
|
|
193
207
|
};
|
|
@@ -204,7 +218,7 @@ function Form(props) {
|
|
|
204
218
|
[id]: e.target.checked,
|
|
205
219
|
}));
|
|
206
220
|
|
|
207
|
-
if (id ===
|
|
221
|
+
if (id === 'same_address') {
|
|
208
222
|
const postalData = e.target.checked
|
|
209
223
|
? {
|
|
210
224
|
postal_address1: prevState.address1,
|
|
@@ -215,12 +229,12 @@ function Form(props) {
|
|
|
215
229
|
postal_country: prevState.country,
|
|
216
230
|
}
|
|
217
231
|
: {
|
|
218
|
-
postal_address1:
|
|
219
|
-
postal_address2:
|
|
220
|
-
postal_suburb:
|
|
221
|
-
postal_postcode:
|
|
222
|
-
postal_state:
|
|
223
|
-
postal_country:
|
|
232
|
+
postal_address1: '',
|
|
233
|
+
postal_address2: '',
|
|
234
|
+
postal_suburb: '',
|
|
235
|
+
postal_postcode: '',
|
|
236
|
+
postal_state: '',
|
|
237
|
+
postal_country: '',
|
|
224
238
|
};
|
|
225
239
|
|
|
226
240
|
setFormData((prevState) => ({
|
|
@@ -271,9 +285,9 @@ function Form(props) {
|
|
|
271
285
|
? `${address} ${text}`
|
|
272
286
|
: address
|
|
273
287
|
: text;
|
|
274
|
-
const address2 =
|
|
275
|
-
const suburb = context[1]?.text ||
|
|
276
|
-
const postcode = context[0]?.text ||
|
|
288
|
+
const address2 = '';
|
|
289
|
+
const suburb = context[1]?.text || '';
|
|
290
|
+
const postcode = context[0]?.text || '';
|
|
277
291
|
|
|
278
292
|
const [state, country] =
|
|
279
293
|
context.length === 5
|
|
@@ -289,7 +303,7 @@ function Form(props) {
|
|
|
289
303
|
country,
|
|
290
304
|
};
|
|
291
305
|
|
|
292
|
-
if (formData.same_address === true || id !==
|
|
306
|
+
if (formData.same_address === true || id !== 'address1') {
|
|
293
307
|
Object.assign(formDataUpdate, {
|
|
294
308
|
postal_address1: address1,
|
|
295
309
|
postal_address2: address2,
|
|
@@ -310,78 +324,78 @@ function Form(props) {
|
|
|
310
324
|
e.preventDefault();
|
|
311
325
|
let fields = formSettings.fields;
|
|
312
326
|
let _inputClass = inputClass;
|
|
313
|
-
let validation =
|
|
327
|
+
let validation = '';
|
|
314
328
|
|
|
315
|
-
if ([
|
|
329
|
+
if (['create', 'update'].includes(formType)) {
|
|
316
330
|
fields.forEach((item) => {
|
|
317
331
|
if (item.required === true) {
|
|
318
332
|
if (
|
|
319
|
-
formData[item.id] ===
|
|
333
|
+
formData[item.id] === '' ||
|
|
320
334
|
formData[item.id] === undefined
|
|
321
335
|
) {
|
|
322
336
|
if (
|
|
323
|
-
item.hasOwnProperty(
|
|
324
|
-
item.required_check !==
|
|
337
|
+
item.hasOwnProperty('required_check') &&
|
|
338
|
+
item.required_check !== ''
|
|
325
339
|
) {
|
|
326
|
-
if (formData[item.required_check] ===
|
|
340
|
+
if (formData[item.required_check] === '') {
|
|
327
341
|
if (
|
|
328
342
|
!validation.includes(
|
|
329
343
|
item.label +
|
|
330
|
-
|
|
344
|
+
' is a required field.<br/>'
|
|
331
345
|
)
|
|
332
346
|
) {
|
|
333
347
|
validation +=
|
|
334
348
|
item.label +
|
|
335
|
-
|
|
349
|
+
' is a required field.<br/>';
|
|
336
350
|
}
|
|
337
|
-
_inputClass[item.id] =
|
|
351
|
+
_inputClass[item.id] = 'inputError';
|
|
338
352
|
}
|
|
339
353
|
} else {
|
|
340
354
|
if (
|
|
341
355
|
!validation.includes(
|
|
342
|
-
item.label +
|
|
356
|
+
item.label + ' is a required field.<br/>'
|
|
343
357
|
)
|
|
344
358
|
) {
|
|
345
359
|
validation +=
|
|
346
|
-
item.label +
|
|
360
|
+
item.label + ' is a required field.<br/>';
|
|
347
361
|
}
|
|
348
|
-
_inputClass[item.id] =
|
|
362
|
+
_inputClass[item.id] = 'inputError';
|
|
349
363
|
}
|
|
350
364
|
} else {
|
|
351
365
|
if (
|
|
352
|
-
item.hasOwnProperty(
|
|
353
|
-
item.required_check !==
|
|
366
|
+
item.hasOwnProperty('required_check') &&
|
|
367
|
+
item.required_check !== ''
|
|
354
368
|
) {
|
|
355
|
-
_inputClass[item.required_check] =
|
|
369
|
+
_inputClass[item.required_check] = '';
|
|
356
370
|
}
|
|
357
|
-
_inputClass[item.id] =
|
|
371
|
+
_inputClass[item.id] = '';
|
|
358
372
|
}
|
|
359
373
|
} else {
|
|
360
374
|
if (
|
|
361
|
-
item.hasOwnProperty(
|
|
362
|
-
item.required_rely !==
|
|
375
|
+
item.hasOwnProperty('required_rely') &&
|
|
376
|
+
item.required_rely !== ''
|
|
363
377
|
) {
|
|
364
|
-
if (formData[item.required_rely] ===
|
|
365
|
-
_inputClass[item.id] =
|
|
378
|
+
if (formData[item.required_rely] === '') {
|
|
379
|
+
_inputClass[item.id] = '';
|
|
366
380
|
} else {
|
|
367
|
-
if (formData[item.id] ===
|
|
381
|
+
if (formData[item.id] === '') {
|
|
368
382
|
if (
|
|
369
383
|
!validation.includes(
|
|
370
384
|
item.label +
|
|
371
|
-
|
|
385
|
+
' is a required field.<br/>'
|
|
372
386
|
)
|
|
373
387
|
) {
|
|
374
388
|
validation +=
|
|
375
389
|
item.label +
|
|
376
|
-
|
|
390
|
+
' is a required field.<br/>';
|
|
377
391
|
}
|
|
378
|
-
_inputClass[item.id] =
|
|
392
|
+
_inputClass[item.id] = 'inputError';
|
|
379
393
|
} else {
|
|
380
|
-
_inputClass[item.id] =
|
|
394
|
+
_inputClass[item.id] = '';
|
|
381
395
|
}
|
|
382
396
|
}
|
|
383
397
|
} else {
|
|
384
|
-
_inputClass[item.id] =
|
|
398
|
+
_inputClass[item.id] = '';
|
|
385
399
|
}
|
|
386
400
|
}
|
|
387
401
|
});
|
|
@@ -389,32 +403,32 @@ function Form(props) {
|
|
|
389
403
|
setInputClass(_inputClass);
|
|
390
404
|
}
|
|
391
405
|
|
|
392
|
-
if (validation !==
|
|
406
|
+
if (validation !== '') {
|
|
393
407
|
toast.error(<div>{parse(validation)}</div>);
|
|
394
408
|
} else {
|
|
395
|
-
let url =
|
|
396
|
-
let method =
|
|
409
|
+
let url = '';
|
|
410
|
+
let method = '';
|
|
397
411
|
let fileUpload = false;
|
|
398
|
-
let fileKey =
|
|
412
|
+
let fileKey = '';
|
|
399
413
|
|
|
400
414
|
switch (formType) {
|
|
401
|
-
case
|
|
415
|
+
case 'create':
|
|
402
416
|
url = formSettings.url;
|
|
403
|
-
method =
|
|
417
|
+
method = 'POST';
|
|
404
418
|
break;
|
|
405
|
-
case
|
|
419
|
+
case 'update':
|
|
406
420
|
url =
|
|
407
421
|
formSettings.url +
|
|
408
|
-
|
|
422
|
+
'/' +
|
|
409
423
|
formData[formSettings.primaryKey];
|
|
410
|
-
method =
|
|
424
|
+
method = 'PUT';
|
|
411
425
|
break;
|
|
412
|
-
case
|
|
426
|
+
case 'delete':
|
|
413
427
|
url =
|
|
414
428
|
formSettings.url +
|
|
415
|
-
|
|
429
|
+
'/' +
|
|
416
430
|
formData[formSettings.primaryKey];
|
|
417
|
-
method =
|
|
431
|
+
method = 'DELETE';
|
|
418
432
|
break;
|
|
419
433
|
default:
|
|
420
434
|
break;
|
|
@@ -424,7 +438,7 @@ function Form(props) {
|
|
|
424
438
|
Object.keys(formData).forEach((item) => {
|
|
425
439
|
if (
|
|
426
440
|
formData[item] !== undefined &&
|
|
427
|
-
(item ===
|
|
441
|
+
(item === 'file' ||
|
|
428
442
|
(formData[item] instanceof File &&
|
|
429
443
|
formData[item] !== null))
|
|
430
444
|
) {
|
|
@@ -444,38 +458,50 @@ function Form(props) {
|
|
|
444
458
|
setUploadProgress(progress * 100);
|
|
445
459
|
},
|
|
446
460
|
}).then((response) => {
|
|
447
|
-
formData[
|
|
448
|
-
formData[
|
|
449
|
-
formData[
|
|
450
|
-
formData[
|
|
451
|
-
formData[
|
|
452
|
-
formData[
|
|
461
|
+
formData['uuid'] = response.uuid;
|
|
462
|
+
formData['key'] = response.key;
|
|
463
|
+
formData['bucket'] = response.bucket;
|
|
464
|
+
formData['filename'] = formData[fileKey].name;
|
|
465
|
+
formData['filesize'] = formData[fileKey].size;
|
|
466
|
+
formData['extension'] = response.extension;
|
|
453
467
|
|
|
454
468
|
CustomFetch(url, method, formData, function (result) {
|
|
455
|
-
if (result.error ===
|
|
456
|
-
fetchTable
|
|
457
|
-
|
|
469
|
+
if (result.error === '') {
|
|
470
|
+
if (fetchTable) {
|
|
471
|
+
fetchTable();
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
if (closeModal) {
|
|
475
|
+
closeModal();
|
|
476
|
+
}
|
|
477
|
+
|
|
458
478
|
toast.success(
|
|
459
|
-
|
|
479
|
+
'Entry successfully saved into the system.'
|
|
460
480
|
);
|
|
461
481
|
} else {
|
|
462
482
|
toast.error(
|
|
463
|
-
result.error !== undefined ? result.error :
|
|
483
|
+
result.error !== undefined ? result.error : ''
|
|
464
484
|
);
|
|
465
485
|
}
|
|
466
486
|
});
|
|
467
487
|
});
|
|
468
488
|
} else {
|
|
469
489
|
CustomFetch(url, method, formData, function (result) {
|
|
470
|
-
if (result.error ===
|
|
471
|
-
fetchTable
|
|
472
|
-
|
|
490
|
+
if (result.error === '') {
|
|
491
|
+
if (fetchTable) {
|
|
492
|
+
fetchTable();
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
if (closeModal) {
|
|
496
|
+
closeModal();
|
|
497
|
+
}
|
|
498
|
+
|
|
473
499
|
toast.success(
|
|
474
|
-
|
|
500
|
+
'Entry successfully saved into the system.'
|
|
475
501
|
);
|
|
476
502
|
} else {
|
|
477
503
|
toast.error(
|
|
478
|
-
result.error !== undefined ? result.error :
|
|
504
|
+
result.error !== undefined ? result.error : ''
|
|
479
505
|
);
|
|
480
506
|
}
|
|
481
507
|
});
|
|
@@ -489,8 +515,8 @@ function Form(props) {
|
|
|
489
515
|
if (formSettings.fields.length > 0) {
|
|
490
516
|
formSettings.fields.forEach((item) => {
|
|
491
517
|
const { id, value, type } = item;
|
|
492
|
-
if (value !==
|
|
493
|
-
if ([
|
|
518
|
+
if (value !== '') {
|
|
519
|
+
if (['date', 'datetime', 'time'].includes(type)) {
|
|
494
520
|
_formData[id] =
|
|
495
521
|
value instanceof Date
|
|
496
522
|
? value
|
|
@@ -499,41 +525,41 @@ function Form(props) {
|
|
|
499
525
|
_formData[id] = value;
|
|
500
526
|
}
|
|
501
527
|
} else {
|
|
502
|
-
_formData[id] =
|
|
528
|
+
_formData[id] = '';
|
|
503
529
|
}
|
|
504
530
|
});
|
|
505
531
|
}
|
|
506
532
|
|
|
507
533
|
const fetchData = async () => {
|
|
508
|
-
if (formType !==
|
|
534
|
+
if (formType !== 'create' && columnId > 0) {
|
|
509
535
|
try {
|
|
510
536
|
const result = await CustomFetch(
|
|
511
537
|
`${formSettings.url}/${columnId}`,
|
|
512
|
-
|
|
538
|
+
'GET',
|
|
513
539
|
{}
|
|
514
540
|
);
|
|
515
|
-
const data = result.hasOwnProperty(
|
|
541
|
+
const data = result.hasOwnProperty('data')
|
|
516
542
|
? result.data
|
|
517
543
|
: result;
|
|
518
544
|
|
|
519
545
|
const updatedFormData = { ..._formData }; // Create a new object to update properties
|
|
520
546
|
|
|
521
547
|
Object.keys(updatedFormData).forEach((item) => {
|
|
522
|
-
let tempRes =
|
|
523
|
-
let tempResKey =
|
|
548
|
+
let tempRes = '';
|
|
549
|
+
let tempResKey = '';
|
|
524
550
|
let field = formSettings.fields.find(
|
|
525
551
|
(f) => f.id === item
|
|
526
552
|
);
|
|
527
553
|
|
|
528
554
|
if (data[item] === undefined) {
|
|
529
|
-
if (field && field.hasOwnProperty(
|
|
555
|
+
if (field && field.hasOwnProperty('relation')) {
|
|
530
556
|
let tempRes = data[field.relation];
|
|
531
557
|
|
|
532
558
|
if (
|
|
533
559
|
[
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
560
|
+
'multi-dropdown',
|
|
561
|
+
'multi-dropdown-ajax',
|
|
562
|
+
'async-dropdown-ajax',
|
|
537
563
|
].includes(field.type) &&
|
|
538
564
|
Array.isArray(tempRes)
|
|
539
565
|
) {
|
|
@@ -545,7 +571,7 @@ function Form(props) {
|
|
|
545
571
|
|
|
546
572
|
if (tempRes) {
|
|
547
573
|
const relationFrom = field.hasOwnProperty(
|
|
548
|
-
|
|
574
|
+
'relation_from'
|
|
549
575
|
)
|
|
550
576
|
? field.relation_from
|
|
551
577
|
: field.id;
|
|
@@ -553,7 +579,7 @@ function Form(props) {
|
|
|
553
579
|
? tempRes[0][relationFrom]
|
|
554
580
|
: tempRes[relationFrom];
|
|
555
581
|
} else {
|
|
556
|
-
tempRes =
|
|
582
|
+
tempRes = '';
|
|
557
583
|
}
|
|
558
584
|
|
|
559
585
|
updatedFormData[item] = tempRes;
|
|
@@ -561,11 +587,11 @@ function Form(props) {
|
|
|
561
587
|
|
|
562
588
|
if (
|
|
563
589
|
field &&
|
|
564
|
-
field.hasOwnProperty(
|
|
590
|
+
field.hasOwnProperty('relation') &&
|
|
565
591
|
[
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
592
|
+
'multi-dropdown',
|
|
593
|
+
'multi-dropdown-ajax',
|
|
594
|
+
'async-dropdown-ajax',
|
|
569
595
|
].includes(field.type)
|
|
570
596
|
) {
|
|
571
597
|
let tempObj = data;
|
|
@@ -603,11 +629,11 @@ function Form(props) {
|
|
|
603
629
|
|
|
604
630
|
if (
|
|
605
631
|
field &&
|
|
606
|
-
field.hasOwnProperty(
|
|
607
|
-
[
|
|
632
|
+
field.hasOwnProperty('relation') &&
|
|
633
|
+
['address', 'text'].includes(field.type)
|
|
608
634
|
) {
|
|
609
635
|
let tempObj = data;
|
|
610
|
-
let tempRes =
|
|
636
|
+
let tempRes = '';
|
|
611
637
|
|
|
612
638
|
const relationLength = Array.isArray(
|
|
613
639
|
field.relation
|
|
@@ -638,12 +664,12 @@ function Form(props) {
|
|
|
638
664
|
} else {
|
|
639
665
|
if (
|
|
640
666
|
field &&
|
|
641
|
-
[
|
|
667
|
+
['date', 'datetime', 'time'].includes(
|
|
642
668
|
field.type
|
|
643
669
|
)
|
|
644
670
|
) {
|
|
645
|
-
if (data[item] === null || data[item] ===
|
|
646
|
-
updatedFormData[item] =
|
|
671
|
+
if (data[item] === null || data[item] === '') {
|
|
672
|
+
updatedFormData[item] = '';
|
|
647
673
|
} else {
|
|
648
674
|
const momentDate = moment(data[item]);
|
|
649
675
|
updatedFormData[item] = momentDate.isValid()
|
|
@@ -652,12 +678,12 @@ function Form(props) {
|
|
|
652
678
|
}
|
|
653
679
|
} else if (
|
|
654
680
|
field &&
|
|
655
|
-
field.hasOwnProperty(
|
|
681
|
+
field.hasOwnProperty('relation')
|
|
656
682
|
) {
|
|
657
683
|
const relationTypes = [
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
684
|
+
'multi-dropdown',
|
|
685
|
+
'multi-dropdown-ajax',
|
|
686
|
+
'async-dropdown-ajax',
|
|
661
687
|
];
|
|
662
688
|
if (relationTypes.includes(field.type)) {
|
|
663
689
|
let relationLength = Array.isArray(
|
|
@@ -704,8 +730,8 @@ function Form(props) {
|
|
|
704
730
|
if (
|
|
705
731
|
item === tempResKey &&
|
|
706
732
|
tempRes &&
|
|
707
|
-
tempRes.hasOwnProperty(
|
|
708
|
-
tempRes.hasOwnProperty(
|
|
733
|
+
tempRes.hasOwnProperty('value') &&
|
|
734
|
+
tempRes.hasOwnProperty('label')
|
|
709
735
|
) {
|
|
710
736
|
updatedFormData[item] = tempRes;
|
|
711
737
|
}
|
|
@@ -716,7 +742,7 @@ function Form(props) {
|
|
|
716
742
|
setFetchTrigger(!fetchTrigger);
|
|
717
743
|
} catch (error) {
|
|
718
744
|
// Handle error here
|
|
719
|
-
toast.error(
|
|
745
|
+
toast.error('Failed to fetch data:', error);
|
|
720
746
|
}
|
|
721
747
|
} else {
|
|
722
748
|
setFormData(_formData);
|
|
@@ -728,16 +754,16 @@ function Form(props) {
|
|
|
728
754
|
|
|
729
755
|
useEffect(() => {
|
|
730
756
|
formSettings.fields.forEach((a) => {
|
|
731
|
-
if (a.hasOwnProperty(
|
|
757
|
+
if (a.hasOwnProperty('show') && a.show.length > 0) {
|
|
732
758
|
let _show = a.show;
|
|
733
759
|
if (_show.length > 0) {
|
|
734
760
|
_show.forEach((showObject) => {
|
|
735
761
|
if (
|
|
736
|
-
showObject.hasOwnProperty(
|
|
737
|
-
showObject.hasOwnProperty(
|
|
762
|
+
showObject.hasOwnProperty('id') &&
|
|
763
|
+
showObject.hasOwnProperty('value')
|
|
738
764
|
) {
|
|
739
765
|
if (
|
|
740
|
-
showObject.id !==
|
|
766
|
+
showObject.id !== '' &&
|
|
741
767
|
showObject.value.length > 0
|
|
742
768
|
) {
|
|
743
769
|
let _fields = formSettings.fields;
|
|
@@ -774,94 +800,165 @@ function Form(props) {
|
|
|
774
800
|
});
|
|
775
801
|
}, [fetchTrigger]);
|
|
776
802
|
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
<div className="
|
|
780
|
-
<
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
803
|
+
if (type && type === 'inline') {
|
|
804
|
+
return (
|
|
805
|
+
<div className="formcontainer">
|
|
806
|
+
<form className="modalForm">
|
|
807
|
+
{formSettings.fields.map((item, index) => {
|
|
808
|
+
if (item.hasOwnProperty('hide') && item.hide === true) {
|
|
809
|
+
return null;
|
|
810
|
+
}
|
|
811
|
+
if (
|
|
812
|
+
item.hasOwnProperty('createOnly') &&
|
|
813
|
+
item.createOnly === true &&
|
|
814
|
+
formType === 'update'
|
|
815
|
+
) {
|
|
816
|
+
return null;
|
|
817
|
+
}
|
|
818
|
+
return (
|
|
819
|
+
<Field
|
|
820
|
+
settings={item}
|
|
821
|
+
key={
|
|
822
|
+
index +
|
|
823
|
+
'-fields-' +
|
|
824
|
+
(item.hasOwnProperty('key')
|
|
825
|
+
? item.id + '-' + item.key
|
|
826
|
+
: item.id)
|
|
795
827
|
}
|
|
796
|
-
|
|
797
|
-
item.hasOwnProperty(
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
) {
|
|
801
|
-
return null;
|
|
828
|
+
inputValue={
|
|
829
|
+
item.hasOwnProperty('key')
|
|
830
|
+
? formData[item.key]
|
|
831
|
+
: formData[item.id]
|
|
802
832
|
}
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
833
|
+
inputClass={inputClass}
|
|
834
|
+
onChange={handleChange}
|
|
835
|
+
onChangeDate={handleChangeDate}
|
|
836
|
+
onChangeSelect={handleChangeSelect}
|
|
837
|
+
onChangeRicheditor={handleChangeRicheditor}
|
|
838
|
+
onChangeToggle={handleChangeToggle}
|
|
839
|
+
onChangeNumberFormat={handleChangeNumberFormat}
|
|
840
|
+
autocompleteCallback={autocompleteSelect}
|
|
841
|
+
childDropdownCallback={childDropdownCallback}
|
|
842
|
+
uploadProgress={uploadProgress}
|
|
843
|
+
setFormData={setFormData}
|
|
844
|
+
style={style}
|
|
845
|
+
/>
|
|
846
|
+
);
|
|
847
|
+
})}
|
|
848
|
+
<div className="formItem fwItem">
|
|
849
|
+
<motion.div
|
|
850
|
+
className="progress__bar"
|
|
851
|
+
initial={{ width: '0%' }}
|
|
852
|
+
animate={{
|
|
853
|
+
width: uploadProgress + '%',
|
|
854
|
+
}}
|
|
855
|
+
transition={{
|
|
856
|
+
duration: 3,
|
|
857
|
+
ease: [0.165, 0.84, 0.44, 1.0],
|
|
858
|
+
}}
|
|
859
|
+
/>
|
|
860
|
+
</div>
|
|
861
|
+
</form>
|
|
862
|
+
<div className="polActions">
|
|
863
|
+
<button className="btn" onClick={handleSubmit}>
|
|
864
|
+
Save
|
|
865
|
+
</button>
|
|
866
|
+
</div>
|
|
867
|
+
</div>
|
|
868
|
+
);
|
|
869
|
+
} else {
|
|
870
|
+
return (
|
|
871
|
+
<div className="modalwrap top--modal">
|
|
872
|
+
<div className="modal">
|
|
873
|
+
<div className="modal__header">
|
|
874
|
+
<h1>{formSettings[formType].title}</h1>
|
|
875
|
+
<button className="modal__close" onClick={closeModal}>
|
|
876
|
+
<CircleX strokeWidth={1} size={24} />
|
|
877
|
+
</button>
|
|
878
|
+
</div>
|
|
879
|
+
<div className="modal__content">
|
|
880
|
+
<div className="formcontainer">
|
|
881
|
+
<form className="modalForm" onSubmit={handleSubmit}>
|
|
882
|
+
{formSettings.fields.map((item, index) => {
|
|
883
|
+
if (
|
|
884
|
+
item.hasOwnProperty('hide') &&
|
|
885
|
+
item.hide === true
|
|
886
|
+
) {
|
|
887
|
+
return null;
|
|
888
|
+
}
|
|
889
|
+
if (
|
|
890
|
+
item.hasOwnProperty('createOnly') &&
|
|
891
|
+
item.createOnly === true &&
|
|
892
|
+
formType === 'update'
|
|
893
|
+
) {
|
|
894
|
+
return null;
|
|
895
|
+
}
|
|
896
|
+
return (
|
|
897
|
+
<Field
|
|
898
|
+
settings={item}
|
|
899
|
+
key={
|
|
900
|
+
index +
|
|
901
|
+
'-fields-' +
|
|
902
|
+
(item.hasOwnProperty('key')
|
|
903
|
+
? item.id + '-' + item.key
|
|
904
|
+
: item.id)
|
|
905
|
+
}
|
|
906
|
+
inputValue={
|
|
907
|
+
item.hasOwnProperty('key')
|
|
908
|
+
? formData[item.key]
|
|
909
|
+
: formData[item.id]
|
|
910
|
+
}
|
|
911
|
+
inputClass={inputClass}
|
|
912
|
+
onChange={handleChange}
|
|
913
|
+
onChangeDate={handleChangeDate}
|
|
914
|
+
onChangeSelect={handleChangeSelect}
|
|
915
|
+
onChangeRicheditor={
|
|
916
|
+
handleChangeRicheditor
|
|
917
|
+
}
|
|
918
|
+
onChangeToggle={handleChangeToggle}
|
|
919
|
+
onChangeNumberFormat={
|
|
920
|
+
handleChangeNumberFormat
|
|
921
|
+
}
|
|
922
|
+
autocompleteCallback={
|
|
923
|
+
autocompleteSelect
|
|
924
|
+
}
|
|
925
|
+
childDropdownCallback={
|
|
926
|
+
childDropdownCallback
|
|
927
|
+
}
|
|
928
|
+
uploadProgress={uploadProgress}
|
|
929
|
+
setFormData={setFormData}
|
|
930
|
+
style={style}
|
|
931
|
+
/>
|
|
932
|
+
);
|
|
933
|
+
})}
|
|
934
|
+
<div className="formItem fwItem">
|
|
935
|
+
<motion.div
|
|
936
|
+
className="progress__bar"
|
|
937
|
+
initial={{ width: '0%' }}
|
|
938
|
+
animate={{
|
|
939
|
+
width: uploadProgress + '%',
|
|
940
|
+
}}
|
|
941
|
+
transition={{
|
|
942
|
+
duration: 3,
|
|
943
|
+
ease: [0.165, 0.84, 0.44, 1.0],
|
|
944
|
+
}}
|
|
838
945
|
/>
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
ease: [0.165, 0.84, 0.44, 1.0],
|
|
851
|
-
}}
|
|
852
|
-
/>
|
|
853
|
-
</div>
|
|
854
|
-
<div className="formItem fwItem lastItem">
|
|
855
|
-
<button className="btn modalsave" type="submit">
|
|
856
|
-
Save
|
|
857
|
-
</button>
|
|
858
|
-
</div>
|
|
859
|
-
</form>
|
|
946
|
+
</div>
|
|
947
|
+
<div className="formItem fwItem lastItem">
|
|
948
|
+
<button
|
|
949
|
+
className="btn modalsave"
|
|
950
|
+
type="submit"
|
|
951
|
+
>
|
|
952
|
+
Save
|
|
953
|
+
</button>
|
|
954
|
+
</div>
|
|
955
|
+
</form>
|
|
956
|
+
</div>
|
|
860
957
|
</div>
|
|
861
958
|
</div>
|
|
862
959
|
</div>
|
|
863
|
-
|
|
864
|
-
|
|
960
|
+
);
|
|
961
|
+
}
|
|
865
962
|
}
|
|
866
963
|
|
|
867
964
|
export default Form;
|