@visns-studio/visns-components 2.1.0 → 2.1.2

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 (3) hide show
  1. package/components/cms/Field.jsx +163 -165
  2. package/components/crm/generic/GenericDetail.jsx +57 -11
  3. package/package.json +1 -1
package/components/cms/Field.jsx CHANGED
@@ -1,34 +1,34 @@
1
- import React, { useState, useEffect, useRef } from "react";
2
- import DatePicker from "react-datepicker";
3
- import _ from "lodash";
4
- import ReactQuill, { Quill } from "react-quill";
5
- import ImageUploader from "quill-image-uploader";
6
- import Toggle from "react-toggle";
7
- import { NumericFormat, PatternFormat } from "react-number-format";
8
- import { motion } from "framer-motion";
9
- import { toast } from "react-toastify";
10
-
11
- import "react-toggle/style.css";
12
- import "react-quill/dist/quill.snow.css";
13
- import "react-datepicker/dist/react-datepicker.css";
14
- import "quill-image-uploader/dist/quill.imageUploader.min.css";
15
-
16
- import CustomFetch from "../crm/Fetch";
17
- import Select from "../crm/Select";
18
- import MultiSelect from "../crm/MultiSelect";
19
- import VisnsAutocomplete from "../crm/Autocomplete";
20
- import moment from "moment";
21
-
22
- Quill.register("modules/imageUploader", ImageUploader);
1
+ import React, { useState, useEffect, useRef } from 'react';
2
+ import DatePicker from 'react-datepicker';
3
+ import _ from 'lodash';
4
+ import ReactQuill, { Quill } from 'react-quill';
5
+ import ImageUploader from 'quill-image-uploader';
6
+ import Toggle from 'react-toggle';
7
+ import { NumericFormat, PatternFormat } from 'react-number-format';
8
+ import { motion } from 'framer-motion';
9
+ import { toast } from 'react-toastify';
10
+
11
+ import 'react-toggle/style.css';
12
+ import 'react-quill/dist/quill.snow.css';
13
+ import 'react-datepicker/dist/react-datepicker.css';
14
+ import 'quill-image-uploader/dist/quill.imageUploader.min.css';
15
+
16
+ import CustomFetch from '../crm/Fetch';
17
+ import Select from '../crm/Select';
18
+ import MultiSelect from '../crm/MultiSelect';
19
+ import VisnsAutocomplete from '../crm/Autocomplete';
20
+ import moment from 'moment';
21
+
22
+ Quill.register('modules/imageUploader', ImageUploader);
23
23
 
24
24
  const modules = {
25
25
  toolbar: {
26
26
  container: [
27
27
  [{ header: [1, 2, false] }],
28
- ["bold", "italic", "underline", "strike", "blockquote"],
29
- [{ list: "ordered" }, { list: "bullet" }],
30
- ["link", "image"],
31
- ["clean"],
28
+ ['bold', 'italic', 'underline', 'strike', 'blockquote'],
29
+ [{ list: 'ordered' }, { list: 'bullet' }],
30
+ ['link', 'image'],
31
+ ['clean'],
32
32
  ],
33
33
  },
34
34
  imageUploader: {
@@ -40,15 +40,15 @@ const modules = {
40
40
  },
41
41
  }).then((response) => {
42
42
  CustomFetch(
43
- "/ajax/file/upload",
44
- "POST",
43
+ '/ajax/file/upload',
44
+ 'POST',
45
45
  response,
46
46
  function (res) {
47
- if (res.error === "") {
47
+ if (res.error === '') {
48
48
  resolve(res.path);
49
49
  } else {
50
50
  toast.error(
51
- res.error !== undefined ? res.error : ""
51
+ res.error !== undefined ? res.error : ''
52
52
  );
53
53
  }
54
54
  }
@@ -76,20 +76,20 @@ const Field = ({
76
76
  const [options, setOptions] = useState([]);
77
77
  const [dataOptions, setDataOptions] = useState([]);
78
78
  const [formItemStyle, setFormItemStyle] = useState({});
79
- const [formItemClass, setFormItemClass] = useState("formItem");
79
+ const [formItemClass, setFormItemClass] = useState('formItem');
80
80
 
81
81
  useEffect(() => {
82
82
  switch (settings.type) {
83
- case "hidden":
83
+ case 'hidden':
84
84
  setFormItemStyle({
85
- display: "none",
85
+ display: 'none',
86
86
  });
87
87
  break;
88
- case "dropdown-ajax":
88
+ case 'dropdown-ajax':
89
89
  let filter = {};
90
90
 
91
91
  if (
92
- settings.hasOwnProperty("where") &&
92
+ settings.hasOwnProperty('where') &&
93
93
  settings.where.length > 0
94
94
  ) {
95
95
  filter = {
@@ -97,7 +97,7 @@ const Field = ({
97
97
  };
98
98
  }
99
99
 
100
- CustomFetch(settings.url, "POST", filter, function (result) {
100
+ CustomFetch(settings.url, 'POST', filter, function (result) {
101
101
  setOptions(result.data);
102
102
 
103
103
  let dataArray = [];
@@ -109,8 +109,8 @@ const Field = ({
109
109
  let modifiedObject = {};
110
110
 
111
111
  Object.keys(_tempObject).forEach(function (c) {
112
- if (c !== "id" && c !== "label") {
113
- modifiedObject["data-" + c] =
112
+ if (c !== 'id' && c !== 'label') {
113
+ modifiedObject['data-' + c] =
114
114
  _tempObject[c];
115
115
  }
116
116
  });
@@ -124,11 +124,11 @@ const Field = ({
124
124
  }
125
125
  });
126
126
  break;
127
- case "multi-dropdown-ajax":
127
+ case 'multi-dropdown-ajax':
128
128
  let multiFilter = {};
129
129
 
130
130
  if (
131
- settings.hasOwnProperty("where") &&
131
+ settings.hasOwnProperty('where') &&
132
132
  settings.where.length > 0
133
133
  ) {
134
134
  multiFilter = {
@@ -138,7 +138,7 @@ const Field = ({
138
138
 
139
139
  CustomFetch(
140
140
  settings.url,
141
- "POST",
141
+ 'POST',
142
142
  multiFilter,
143
143
  function (result) {
144
144
  setOptions(result.data);
@@ -152,8 +152,8 @@ const Field = ({
152
152
  let modifiedObject = {};
153
153
 
154
154
  Object.keys(_tempObject).forEach(function (c) {
155
- if (c !== "id" && c !== "label") {
156
- modifiedObject["data-" + c] =
155
+ if (c !== 'id' && c !== 'label') {
156
+ modifiedObject['data-' + c] =
157
157
  _tempObject[c];
158
158
  }
159
159
  });
@@ -172,15 +172,15 @@ const Field = ({
172
172
  break;
173
173
  }
174
174
 
175
- if (settings.size === "full") {
176
- setFormItemClass("formItem fwItem");
175
+ if (settings.size === 'full') {
176
+ setFormItemClass('formItem fwItem');
177
177
  }
178
178
  }, [settings]);
179
179
 
180
180
  useEffect(() => {
181
181
  let filter = {};
182
182
 
183
- if (settings.hasOwnProperty("child")) {
183
+ if (settings.hasOwnProperty('child')) {
184
184
  if (inputValue > 0) {
185
185
  filter = {
186
186
  where: [
@@ -193,7 +193,7 @@ const Field = ({
193
193
 
194
194
  CustomFetch(
195
195
  settings.child.url,
196
- "POST",
196
+ 'POST',
197
197
  filter,
198
198
  function (result) {
199
199
  childDropdownCallback({
@@ -207,7 +207,7 @@ const Field = ({
207
207
  }, [inputValue, settings]);
208
208
 
209
209
  useEffect(() => {
210
- if (settings.hasOwnProperty("options")) {
210
+ if (settings.hasOwnProperty('options')) {
211
211
  if (settings.options.length > 0) {
212
212
  let dataArray = [];
213
213
 
@@ -218,8 +218,8 @@ const Field = ({
218
218
  let modifiedObject = {};
219
219
 
220
220
  Object.keys(_tempObject).forEach(function (c) {
221
- if (c !== "id" && c !== "label") {
222
- modifiedObject["data-" + c] = _tempObject[c];
221
+ if (c !== 'id' && c !== 'label') {
222
+ modifiedObject['data-' + c] = _tempObject[c];
223
223
  }
224
224
  });
225
225
 
@@ -238,26 +238,26 @@ const Field = ({
238
238
  <div className={formItemClass} style={formItemStyle}>
239
239
  <label
240
240
  className={
241
- settings.type === "image"
242
- ? "fi__flabel"
243
- : settings.type === "richeditor"
244
- ? "fi__flabel"
245
- : "fi__label"
241
+ settings.type === 'image'
242
+ ? 'fi__flabel'
243
+ : settings.type === 'richeditor'
244
+ ? 'fi__flabel'
245
+ : 'fi__label'
246
246
  }
247
247
  >
248
248
  {(() => {
249
249
  if (
250
- settings.type === "address" ||
251
- settings.type === "date" ||
252
- settings.type === "datetime" ||
253
- settings.type === "checkbox" ||
254
- settings.type === "multi-dropdown" ||
255
- settings.type === "multi-dropdown-ajax"
250
+ settings.type === 'address' ||
251
+ settings.type === 'date' ||
252
+ settings.type === 'datetime' ||
253
+ settings.type === 'checkbox' ||
254
+ settings.type === 'multi-dropdown' ||
255
+ settings.type === 'multi-dropdown-ajax'
256
256
  ) {
257
257
  return (
258
258
  <span className="fi__span prefocus">
259
- {settings.label}{" "}
260
- {settings.required === true ? "*" : ""}
259
+ {settings.label}{' '}
260
+ {settings.required === true ? '*' : ''}
261
261
  </span>
262
262
  );
263
263
  }
@@ -265,13 +265,13 @@ const Field = ({
265
265
 
266
266
  {(() => {
267
267
  if (
268
- settings.type === "image" ||
269
- settings.type === "richeditor"
268
+ settings.type === 'image' ||
269
+ settings.type === 'richeditor'
270
270
  ) {
271
271
  return (
272
272
  <>
273
- {settings.label}{" "}
274
- {settings.required === true ? "*" : ""}
273
+ {settings.label}{' '}
274
+ {settings.required === true ? '*' : ''}
275
275
  </>
276
276
  );
277
277
  }
@@ -280,13 +280,13 @@ const Field = ({
280
280
  {(() => {
281
281
  let htmlContainer;
282
282
  switch (settings.type) {
283
- case "text":
283
+ case 'text':
284
284
  htmlContainer = (
285
285
  <input
286
286
  type="text"
287
287
  name={settings.id}
288
288
  readOnly={
289
- settings.hasOwnProperty("readOnly")
289
+ settings.hasOwnProperty('readOnly')
290
290
  ? settings.readOnly
291
291
  : false
292
292
  }
@@ -294,14 +294,14 @@ const Field = ({
294
294
  placeholder=" "
295
295
  onChange={onChange}
296
296
  value={
297
- inputValue && inputValue !== "null"
297
+ inputValue && inputValue !== 'null'
298
298
  ? inputValue
299
- : ""
299
+ : ''
300
300
  }
301
301
  />
302
302
  );
303
303
  break;
304
- case "json":
304
+ case 'json':
305
305
  htmlContainer = (
306
306
  <input
307
307
  type="text"
@@ -311,14 +311,14 @@ const Field = ({
311
311
  placeholder=" "
312
312
  onChange={onChange}
313
313
  value={
314
- inputValue && inputValue !== "null"
314
+ inputValue && inputValue !== 'null'
315
315
  ? inputValue
316
- : ""
316
+ : ''
317
317
  }
318
318
  />
319
319
  );
320
320
  break;
321
- case "password":
321
+ case 'password':
322
322
  htmlContainer = (
323
323
  <input
324
324
  type="password"
@@ -327,14 +327,14 @@ const Field = ({
327
327
  placeholder=" "
328
328
  onChange={onChange}
329
329
  value={
330
- inputValue && inputValue !== "null"
330
+ inputValue && inputValue !== 'null'
331
331
  ? inputValue
332
- : ""
332
+ : ''
333
333
  }
334
334
  />
335
335
  );
336
336
  break;
337
- case "phone":
337
+ case 'phone':
338
338
  htmlContainer = (
339
339
  <PatternFormat
340
340
  name={settings.id}
@@ -349,14 +349,14 @@ const Field = ({
349
349
  allowEmptyFormatting
350
350
  mask="_"
351
351
  value={
352
- inputValue && inputValue !== "null"
352
+ inputValue && inputValue !== 'null'
353
353
  ? inputValue
354
- : ""
354
+ : ''
355
355
  }
356
356
  />
357
357
  );
358
358
  break;
359
- case "mobile":
359
+ case 'mobile':
360
360
  htmlContainer = (
361
361
  <PatternFormat
362
362
  className={inputClass[settings.id]}
@@ -370,14 +370,14 @@ const Field = ({
370
370
  allowEmptyFormatting
371
371
  mask="_"
372
372
  value={
373
- inputValue && inputValue !== "null"
373
+ inputValue && inputValue !== 'null'
374
374
  ? inputValue
375
- : ""
375
+ : ''
376
376
  }
377
377
  />
378
378
  );
379
379
  break;
380
- case "currency":
380
+ case 'currency':
381
381
  htmlContainer = (
382
382
  <NumericFormat
383
383
  name={settings.id}
@@ -389,31 +389,31 @@ const Field = ({
389
389
  );
390
390
  }}
391
391
  thousandSeparator={true}
392
- prefix={"$"}
392
+ prefix={'$'}
393
393
  value={
394
- inputValue && inputValue !== "null"
394
+ inputValue && inputValue !== 'null'
395
395
  ? inputValue
396
- : ""
396
+ : ''
397
397
  }
398
398
  />
399
399
  );
400
400
  break;
401
- case "textarea":
401
+ case 'textarea':
402
402
  htmlContainer = (
403
403
  <textarea
404
404
  name={settings.id}
405
405
  className={inputClass[settings.id]}
406
406
  onChange={onChange}
407
407
  value={
408
- inputValue && inputValue !== "null"
408
+ inputValue && inputValue !== 'null'
409
409
  ? inputValue
410
- : ""
410
+ : ''
411
411
  }
412
- style={{ height: "200px" }}
412
+ style={{ height: '200px' }}
413
413
  ></textarea>
414
414
  );
415
415
  break;
416
- case "address":
416
+ case 'address':
417
417
  htmlContainer = (
418
418
  <VisnsAutocomplete
419
419
  onSelect={(place) =>
@@ -426,63 +426,63 @@ const Field = ({
426
426
  />
427
427
  );
428
428
  break;
429
- case "dropdown":
429
+ case 'dropdown':
430
430
  htmlContainer = (
431
431
  <Select
432
432
  settings={settings}
433
433
  className={inputClass[settings.id]}
434
434
  onChange={onChange}
435
435
  inputValue={
436
- inputValue === null ? "" : inputValue
436
+ inputValue === null ? '' : inputValue
437
437
  }
438
438
  options={settings.options}
439
439
  dataOptions={dataOptions}
440
440
  />
441
441
  );
442
442
  break;
443
- case "dropdown-ajax":
443
+ case 'dropdown-ajax':
444
444
  htmlContainer = (
445
445
  <Select
446
446
  settings={settings}
447
447
  className={inputClass[settings.id]}
448
448
  onChange={onChange}
449
449
  inputValue={
450
- inputValue === null ? "" : inputValue
450
+ inputValue === null ? '' : inputValue
451
451
  }
452
452
  options={options}
453
453
  dataOptions={dataOptions}
454
454
  />
455
455
  );
456
456
  break;
457
- case "multi-dropdown":
457
+ case 'multi-dropdown':
458
458
  htmlContainer = (
459
459
  <MultiSelect
460
460
  settings={settings}
461
461
  className={inputClass[settings.id]}
462
462
  onChange={onChangeSelect}
463
463
  inputValue={
464
- inputValue === null ? "" : inputValue
464
+ inputValue === null ? '' : inputValue
465
465
  }
466
466
  options={settings.options}
467
467
  dataOptions={dataOptions}
468
468
  />
469
469
  );
470
470
  break;
471
- case "multi-dropdown-ajax":
471
+ case 'multi-dropdown-ajax':
472
472
  htmlContainer = (
473
473
  <MultiSelect
474
474
  settings={settings}
475
475
  className={inputClass[settings.id]}
476
476
  onChange={onChangeSelect}
477
477
  inputValue={
478
- inputValue === null ? "" : inputValue
478
+ inputValue === null ? '' : inputValue
479
479
  }
480
480
  options={options}
481
481
  dataOptions={dataOptions}
482
482
  />
483
483
  );
484
484
  break;
485
- case "file":
485
+ case 'file':
486
486
  htmlContainer = (
487
487
  <input
488
488
  type="file"
@@ -493,17 +493,17 @@ const Field = ({
493
493
  );
494
494
  break;
495
495
 
496
- case "line-break":
496
+ case 'line-break':
497
497
  htmlContainer = (
498
498
  <div className="formbreak">
499
499
  <span>
500
- {settings.label}{" "}
501
- {settings.required === true ? "*" : ""}
500
+ {settings.label}{' '}
501
+ {settings.required === true ? '*' : ''}
502
502
  </span>
503
503
  </div>
504
504
  );
505
505
  break;
506
- case "checkbox":
506
+ case 'checkbox':
507
507
  htmlContainer = (
508
508
  <input
509
509
  type="checkbox"
@@ -511,12 +511,12 @@ const Field = ({
511
511
  className={inputClass[settings.id]}
512
512
  placeholder=" "
513
513
  onChange={onChange}
514
- value={inputValue || ""}
514
+ value={inputValue || ''}
515
515
  />
516
516
  );
517
517
  break;
518
518
  default:
519
- htmlContainer = "";
519
+ htmlContainer = '';
520
520
  break;
521
521
  }
522
522
 
@@ -525,21 +525,21 @@ const Field = ({
525
525
 
526
526
  {(() => {
527
527
  if (
528
- settings.type !== "address" &&
529
- settings.type !== "date" &&
530
- settings.type !== "datetime" &&
531
- settings.type !== "line-break" &&
532
- settings.type !== "checkbox" &&
533
- settings.type !== "multi-dropdown" &&
534
- settings.type !== "multi-dropdown-ajax" &&
535
- settings.type !== "toggle" &&
536
- settings.type !== "richeditor" &&
537
- settings.type !== "image"
528
+ settings.type !== 'address' &&
529
+ settings.type !== 'date' &&
530
+ settings.type !== 'datetime' &&
531
+ settings.type !== 'line-break' &&
532
+ settings.type !== 'checkbox' &&
533
+ settings.type !== 'multi-dropdown' &&
534
+ settings.type !== 'multi-dropdown-ajax' &&
535
+ settings.type !== 'toggle' &&
536
+ settings.type !== 'richeditor' &&
537
+ settings.type !== 'image'
538
538
  ) {
539
539
  return (
540
540
  <span className="fi__span">
541
- {settings.label}{" "}
542
- {settings.required === true ? "*" : ""}
541
+ {settings.label}{' '}
542
+ {settings.required === true ? '*' : ''}
543
543
  </span>
544
544
  );
545
545
  }
@@ -549,19 +549,19 @@ const Field = ({
549
549
  {(() => {
550
550
  let htmlContainer;
551
551
  switch (settings.type) {
552
- case "date":
552
+ case 'date':
553
553
  htmlContainer = (
554
554
  <DatePicker
555
555
  dateFormat={
556
556
  settings.format
557
557
  ? settings.format
558
- : "dd-MM-yyyy"
558
+ : 'dd-MM-yyyy'
559
559
  }
560
560
  className={inputClass[settings.id]}
561
561
  selected={
562
562
  inputValue
563
563
  ? moment(inputValue).toDate()
564
- : ""
564
+ : ''
565
565
  }
566
566
  showMonthDropdown
567
567
  showYearDropdown
@@ -572,20 +572,20 @@ const Field = ({
572
572
  />
573
573
  );
574
574
  break;
575
- case "datetime":
575
+ case 'datetime':
576
576
  htmlContainer = (
577
577
  <DatePicker
578
578
  dateFormat={
579
579
  settings.format
580
580
  ? settings.format
581
- : "dd-MM-yyyy hh:mm aa"
581
+ : 'dd-MM-yyyy hh:mm aa'
582
582
  }
583
583
  showTimeSelect
584
584
  className={inputClass[settings.id]}
585
585
  selected={
586
586
  inputValue
587
587
  ? moment(inputValue).toDate()
588
- : ""
588
+ : ''
589
589
  }
590
590
  showMonthDropdown
591
591
  showYearDropdown
@@ -597,13 +597,13 @@ const Field = ({
597
597
  />
598
598
  );
599
599
  break;
600
- case "time":
600
+ case 'time':
601
601
  htmlContainer = (
602
602
  <DatePicker
603
603
  dateFormat={
604
604
  settings.format
605
605
  ? settings.format
606
- : "hh:mm aa"
606
+ : 'hh:mm aa'
607
607
  }
608
608
  showTimeSelect
609
609
  showTimeSelectOnly
@@ -613,7 +613,7 @@ const Field = ({
613
613
  selected={
614
614
  inputValue
615
615
  ? moment(inputValue).toDate()
616
- : ""
616
+ : ''
617
617
  }
618
618
  onChange={(date) =>
619
619
  onChangeDate(date, settings.id)
@@ -622,7 +622,7 @@ const Field = ({
622
622
  />
623
623
  );
624
624
  break;
625
- case "toggle":
625
+ case 'toggle':
626
626
  htmlContainer = (
627
627
  <div>
628
628
  <Toggle
@@ -630,13 +630,13 @@ const Field = ({
630
630
  data-show={
631
631
  settings.show
632
632
  ? JSON.stringify(settings.show)
633
- : ""
633
+ : ''
634
634
  }
635
635
  checked={
636
636
  inputValue !== undefined
637
- ? inputValue === ""
637
+ ? inputValue === ''
638
638
  ? false
639
- : inputValue === "on"
639
+ : inputValue === 'on'
640
640
  ? false
641
641
  : Boolean(inputValue)
642
642
  : false
@@ -644,48 +644,46 @@ const Field = ({
644
644
  onChange={onChangeToggle}
645
645
  />
646
646
  <span className="fi__toggletxt">
647
- {settings.label}{" "}
648
- {settings.required === true ? "*" : ""}
647
+ {settings.label}{' '}
648
+ {settings.required === true ? '*' : ''}
649
649
  </span>
650
650
  </div>
651
651
  );
652
652
  break;
653
- case "richeditor":
653
+ case 'richeditor':
654
654
  htmlContainer = (
655
- <>
656
- <ReactQuill
657
- theme="snow"
658
- name={settings.id}
659
- onChange={(value) => {
660
- onChangeRicheditor(value, settings.id);
661
- }}
662
- value={inputValue || ""}
663
- modules={modules}
664
- formats={[
665
- "header",
666
- "bold",
667
- "italic",
668
- "underline",
669
- "strike",
670
- "blockquote",
671
- "list",
672
- "bullet",
673
- "link",
674
- "image",
675
- ]}
676
- />
677
- </>
655
+ <ReactQuill
656
+ theme="snow"
657
+ name={settings.id}
658
+ onChange={(value) => {
659
+ onChangeRicheditor(value, settings.id);
660
+ }}
661
+ value={inputValue || ''}
662
+ modules={modules}
663
+ formats={[
664
+ 'header',
665
+ 'bold',
666
+ 'italic',
667
+ 'underline',
668
+ 'strike',
669
+ 'blockquote',
670
+ 'list',
671
+ 'bullet',
672
+ 'link',
673
+ 'image',
674
+ ]}
675
+ />
678
676
  );
679
677
  break;
680
- case "image":
678
+ case 'image':
681
679
  htmlContainer = (
682
680
  <>
683
681
  <motion.div
684
682
  className="progress__bar"
685
- initial={{ width: "0%" }}
683
+ initial={{ width: '0%' }}
686
684
  animate={{
687
685
  width:
688
- uploadProgress[settings.id] + "%",
686
+ uploadProgress[settings.id] + '%',
689
687
  }}
690
688
  transition={{
691
689
  duration: 3,
@@ -698,17 +696,17 @@ const Field = ({
698
696
  className={inputClass[settings.id]}
699
697
  onChange={onChangeFile}
700
698
  ref={inputFile}
701
- style={{ display: "none" }}
699
+ style={{ display: 'none' }}
702
700
  />
703
701
  <div
704
702
  onClick={() => {
705
703
  inputFile.current.click();
706
704
  }}
707
705
  >
708
- {inputValue && inputValue !== "" ? (
706
+ {inputValue && inputValue !== '' ? (
709
707
  <>
710
708
  {inputValue.file_url &&
711
- inputValue.file_url !== "" ? (
709
+ inputValue.file_url !== '' ? (
712
710
  <img
713
711
  src={inputValue.file_url}
714
712
  width="200"
@@ -734,7 +732,7 @@ const Field = ({
734
732
  );
735
733
  break;
736
734
  default:
737
- htmlContainer = "";
735
+ htmlContainer = '';
738
736
  break;
739
737
  }
740
738
 
package/components/crm/generic/GenericDetail.jsx CHANGED
@@ -420,15 +420,19 @@ function GenericDetail({ setting, urlParam, userProfile }) {
420
420
 
421
421
  const applyUrlParamsToData = (data) => {
422
422
  return data.map((item) => {
423
- return {
424
- ...item,
425
- value:
426
- item.hasOwnProperty('value') &&
427
- item.urlParam &&
428
- routeParams[item.urlParam]
429
- ? routeParams[item.urlParam]
430
- : item.value,
431
- };
423
+ if (item.hasOwnProperty('value') && item.urlParam) {
424
+ return {
425
+ ...item,
426
+ value:
427
+ item.hasOwnProperty('value') &&
428
+ item.urlParam &&
429
+ routeParams[item.urlParam]
430
+ ? routeParams[item.urlParam]
431
+ : item.value,
432
+ };
433
+ } else {
434
+ return item;
435
+ }
432
436
  });
433
437
  };
434
438
 
@@ -446,12 +450,54 @@ function GenericDetail({ setting, urlParam, userProfile }) {
446
450
  activeTabConfig.ajaxSetting.where
447
451
  ),
448
452
  };
453
+
449
454
  const updatedForm = {
450
455
  ...activeTabConfig.form,
451
- fields: applyUrlParamsToData(
452
- activeTabConfig.form.fields
456
+ fields: activeTabConfig.form.fields.map(
457
+ (field) => {
458
+ if (
459
+ field.hasOwnProperty('value') &&
460
+ field.urlParam &&
461
+ routeParams[field.urlParam]
462
+ ) {
463
+ if (
464
+ field.type &&
465
+ field.relationName &&
466
+ (field.type ===
467
+ 'multi-dropdown-ajax' ||
468
+ field.type ===
469
+ 'multi-dropdown')
470
+ ) {
471
+ field.value = {
472
+ value: routeParams[
473
+ field.urlParam
474
+ ],
475
+ label: data[
476
+ field.relationName
477
+ ],
478
+ };
479
+ } else {
480
+ field.value =
481
+ routeParams[
482
+ field.urlParam
483
+ ];
484
+ }
485
+ }
486
+
487
+ if (field.where) {
488
+ return {
489
+ ...field,
490
+ where: applyUrlParamsToData(
491
+ field.where
492
+ ),
493
+ };
494
+ } else {
495
+ return field;
496
+ }
497
+ }
453
498
  ),
454
499
  };
500
+
455
501
  setConfig({
456
502
  ajaxSetting: updatedAjaxSetting,
457
503
  form: updatedForm,
package/package.json CHANGED
@@ -40,7 +40,7 @@
40
40
  "react-dom": "^17.0.1"
41
41
  },
42
42
  "name": "@visns-studio/visns-components",
43
- "version": "2.1.0",
43
+ "version": "2.1.2",
44
44
  "description": "Various packages to assist in the development of our Custom Applications.",
45
45
  "main": "index.js",
46
46
  "scripts": {