@visns-studio/visns-components 4.0.6 → 4.0.8

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 (13) hide show
  1. package/components/cms/sorting/Item.jsx +1 -1
  2. package/components/crm/Field.jsx +523 -484
  3. package/components/crm/Form.jsx +14 -0
  4. package/components/crm/TableFilter.jsx +0 -2
  5. package/components/crm/auth/Profile.jsx +157 -55
  6. package/components/crm/auth/styles/Profile.module.css +219 -0
  7. package/components/crm/generic/GenericDynamic.jsx +96 -108
  8. package/components/crm/generic/GenericFormBuilder.jsx +238 -145
  9. package/components/crm/generic/styles/GenericDynamic.module.css +961 -0
  10. package/components/crm/generic/styles/GenericFormBuilder.module.css +961 -0
  11. package/components/crm/styles/Field.module.css +146 -0
  12. package/components/crm/styles/TableFilter.module.css +7 -7
  13. package/package.json +6 -5
package/components/crm/generic/GenericFormBuilder.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useRef, useState } from 'react';
2
- import { useParams, Link } from 'react-router-dom';
2
+ import { useParams } from 'react-router-dom';
3
3
  import Popup from 'reactjs-popup';
4
4
  import { arrayMoveImmutable } from 'array-move';
5
5
  import { confirmAlert } from 'react-confirm-alert';
@@ -18,6 +18,8 @@ import Breadcrumb from '../Breadcrumb';
18
18
  import CustomFetch from '../Fetch';
19
19
  import SortableList from '../../../components/cms/sorting/List';
20
20
 
21
+ import styles from './styles/GenericFormBuilder.module.css'; // Import the CSS module
22
+
21
23
  function GenericFormBuilder({ setting, urlParam, userProfile }) {
22
24
  const editorRef = useRef(null);
23
25
  const routeParams = useParams();
@@ -61,7 +63,6 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
61
63
  e.preventDefault();
62
64
 
63
65
  if (dataOption.label !== '') {
64
- // Check if the label is already present in the options array
65
66
  const isLabelUnique = !dataField.options.some(
66
67
  (option) => option.label === dataOption.label
67
68
  );
@@ -90,12 +91,12 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
90
91
  const { counter } = e.target.dataset;
91
92
 
92
93
  setDataField((prevState) => {
93
- const options = prevState.options.slice(); // Create a copy of the options array
94
- options.splice(counter, 1); // Remove the option at the specified index
94
+ const options = prevState.options.slice();
95
+ options.splice(counter, 1);
95
96
 
96
97
  return {
97
98
  ...prevState,
98
- options: options, // Update the options array in the state
99
+ options: options,
99
100
  };
100
101
  });
101
102
  };
@@ -130,8 +131,6 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
130
131
  };
131
132
 
132
133
  const slugify = (text) => {
133
- // Implement your slugification logic here
134
- // Example: Convert spaces to hyphens and lowercase the text
135
134
  return text.replace(/\s+/g, '-').toLowerCase();
136
135
  };
137
136
 
@@ -184,17 +183,14 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
184
183
  {
185
184
  label: 'Yes',
186
185
  onClick: () => {
187
- // Find the index of the object with the matching id
188
186
  const index = data.detail.findIndex(
189
187
  (item) => item.id === id
190
188
  );
191
189
 
192
- // Proceed only if the item was found
193
190
  if (index > -1) {
194
- let newDetail = [...data.detail]; // Create a copy of the detail array
195
- newDetail.splice(index, 1); // Remove the item at the found index
191
+ let newDetail = [...data.detail];
192
+ newDetail.splice(index, 1);
196
193
 
197
- // Update the state with the new detail array
198
194
  setData((items) => ({
199
195
  ...items,
200
196
  detail: newDetail,
@@ -219,7 +215,6 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
219
215
 
220
216
  let field = dataField;
221
217
 
222
- // Ensure the field ID is unique and formatted
223
218
  field.id = formatFieldId(field.id);
224
219
 
225
220
  let errorMessage = validateField(field);
@@ -239,30 +234,24 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
239
234
  const validateField = (field) => {
240
235
  let errors = [];
241
236
 
242
- // Validate ID
243
237
  if (!isIdValid(field.id)) {
244
238
  errors.push('Please enter a unique id for the field.');
245
239
  }
246
240
 
247
- // Modify Validation for Label and Description based on Type
248
241
  if (field.type === 'plaintext') {
249
- // For other types, label is required
250
242
  if (!field.label || field.label === '') {
251
243
  errors.push('Please enter a label for the field.');
252
244
  }
253
245
 
254
- // For plaintext or plaintextheading, description is required
255
246
  if (!field.description || field.description === '') {
256
247
  errors.push('Please enter a description for the field.');
257
248
  }
258
249
  } else {
259
- // For other types, label is required
260
250
  if (!field.label || field.label === '') {
261
251
  errors.push('Please enter a label for the field.');
262
252
  }
263
253
  }
264
254
 
265
- // Validate Type and Options for Dropdown
266
255
  if (field.type === '') {
267
256
  errors.push('Please select a type for the field.');
268
257
  } else if (
@@ -272,12 +261,10 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
272
261
  errors.push('Please add options for the dropdown.');
273
262
  }
274
263
 
275
- // Validate Size
276
264
  if (!field.size || field.size === '') {
277
265
  errors.push('Please select a size for the field.');
278
266
  }
279
267
 
280
- // Validate Required
281
268
  if (field.required === '') {
282
269
  errors.push('Is the field a required field?');
283
270
  }
@@ -321,48 +308,41 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
321
308
  /** Form Functionalities */
322
309
  const renderClassName = (d) => {
323
310
  const sizeClassMap = {
324
- full: 'formBuilderItem fwBuilderItem',
325
- half: 'formBuilderItem halfBuilderItem',
326
- quarter: 'formBuilderItem qtrBuilderItem',
311
+ full: styles.fwBuilderItem,
312
+ half: styles.halfBuilderItem,
313
+ quarter: styles.qtrBuilderItem,
327
314
  };
328
315
 
329
- return sizeClassMap[d.size] || 'formBuilderItem halfBuilderItem';
316
+ return `${styles.formBuilderItem} ${
317
+ sizeClassMap[d.size] || styles.halfBuilderItem
318
+ }`;
330
319
  };
331
320
 
332
- const renderLabel = (field, children) => (
333
- <label className="fi__label">
334
- {children}
335
- <span
336
- className={
337
- field.type === 'checkbox' ? 'fi__spancheckbox' : 'fi__span'
338
- }
339
- >
340
- {field.label} {field.required === 'yes' ? '*' : null}
341
- </span>
342
- </label>
343
- );
344
-
345
321
  const renderField = (field) => {
346
322
  switch (field.type) {
347
323
  case 'checkbox':
348
324
  return (
349
- <label className="fi__label">
350
- <span className="fi__spancheckbox">
325
+ <label className={styles.fi__label}>
326
+ <span className={styles.fi__spancheckbox}>
351
327
  {field.label}{' '}
352
328
  {field.required === 'yes' ? '*' : null}
353
329
  </span>
354
330
  {field.options.length > 0 ? (
355
- <div className="fi__optionscontainer">
331
+ <div className={styles.fi__optionscontainer}>
356
332
  {field.options.map((option, index) => (
357
333
  <div
358
334
  key={`${field.id}-checkbox-option-${index}`}
359
- className="fi__checkboxcontainer"
335
+ className={styles.fi__checkboxcontainer}
360
336
  >
361
337
  <input
362
338
  type="checkbox"
363
- className="fi__customcheckbox"
339
+ className={
340
+ styles.fi__customcheckbox
341
+ }
364
342
  />
365
- <label className="fi__checkboxlabel">
343
+ <label
344
+ className={styles.fi__checkboxlabel}
345
+ >
366
346
  {option.label}
367
347
  </label>{' '}
368
348
  </div>
@@ -373,9 +353,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
373
353
  );
374
354
  case 'date':
375
355
  return (
376
- <label className="fi__label">
356
+ <label className={styles.fi__label}>
377
357
  <input type="date" />
378
- <span className="fi__span">
358
+ <span className={styles.fi__span}>
379
359
  {field.label}{' '}
380
360
  {field.required === 'yes' ? '*' : null}
381
361
  </span>
@@ -383,9 +363,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
383
363
  );
384
364
  case 'datetime':
385
365
  return (
386
- <label className="fi__label">
366
+ <label className={styles.fi__label}>
387
367
  <input type="datetime-local" />
388
- <span className="fi__span">
368
+ <span className={styles.fi__span}>
389
369
  {field.label}{' '}
390
370
  {field.required === 'yes' ? '*' : null}
391
371
  </span>
@@ -393,11 +373,11 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
393
373
  );
394
374
  case 'dropdown':
395
375
  return (
396
- <label className="fi__label">
376
+ <label className={styles.fi__label}>
397
377
  <select>
398
378
  <option>Please Select an Option</option>
399
379
  </select>
400
- <span className="fi__span">
380
+ <span className={styles.fi__span}>
401
381
  {field.label}{' '}
402
382
  {field.required === 'yes' ? '*' : null}
403
383
  </span>
@@ -405,15 +385,15 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
405
385
  );
406
386
  case 'dynamicdata':
407
387
  return (
408
- <label className="fi__label">
388
+ <label className={styles.fi__label}>
409
389
  <strong>{field.label}</strong> [Dynamic Data]
410
390
  </label>
411
391
  );
412
392
  case 'file':
413
393
  return (
414
- <label className="fi__label">
394
+ <label className={styles.fi__label}>
415
395
  <input type="file" />
416
- <span className="fi__span">
396
+ <span className={styles.fi__span}>
417
397
  {field.label}{' '}
418
398
  {field.required === 'yes' ? '*' : null}
419
399
  </span>
@@ -421,9 +401,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
421
401
  );
422
402
  case 'image':
423
403
  return (
424
- <label className="fi__label">
404
+ <label className={styles.fi__label}>
425
405
  <input type="file" />
426
- <span className="fi__span">
406
+ <span className={styles.fi__span}>
427
407
  {field.label}{' '}
428
408
  {field.required === 'yes' ? '*' : null}
429
409
  </span>
@@ -431,21 +411,96 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
431
411
  );
432
412
  case 'plaintextheading':
433
413
  return (
434
- <label className="fi__label">
414
+ <label className={styles.fi__label}>
435
415
  <h2>{field.label}</h2>
436
416
  </label>
437
417
  );
438
418
  case 'plaintext':
439
419
  return (
440
- <label className="fi__label">
420
+ <label className={styles.fi__label}>
441
421
  {field.description ? parse(field.description) : null}
442
422
  </label>
443
423
  );
444
424
  case 'number':
445
425
  return (
446
- <label className="fi__label">
426
+ <label className={styles.fi__label}>
447
427
  <input type="number" />
448
- <span className="fi__span">
428
+ <span className={styles.fi__span}>
429
+ {field.label}{' '}
430
+ {field.required === 'yes' ? '*' : null}
431
+ </span>
432
+ </label>
433
+ );
434
+ case 'signature':
435
+ return (
436
+ <label className={styles.fi__label}>
437
+ <span
438
+ className={`${styles.fi__span} ${styles.prefocus}`}
439
+ >
440
+ {field.label}{' '}
441
+ {field.required === 'yes' ? '*' : null}
442
+ </span>
443
+ <button
444
+ type="button"
445
+ className={styles.signButton}
446
+ onClick={() => {
447
+ // Handle signature logic here
448
+ }}
449
+ >
450
+ Click to Sign
451
+ </button>
452
+ <div className={styles.signaturePlaceholder}>
453
+ <p>
454
+ <strong>Name:</strong> [Placeholder]
455
+ </p>
456
+ <p>
457
+ <strong>Date:</strong> [Placeholder]
458
+ </p>
459
+ </div>
460
+ </label>
461
+ );
462
+ case 'table_radio':
463
+ return (
464
+ <label className={styles.fi__label}>
465
+ <table className={styles.contentTable}></table>
466
+ <span
467
+ className={`${styles.fi__span} ${styles.prefocus}`}
468
+ >
469
+ {field.label}{' '}
470
+ {field.required === 'yes' ? '*' : null}
471
+ </span>
472
+ </label>
473
+ );
474
+ case 'table_text':
475
+ return (
476
+ <label className={styles.fi__label}>
477
+ <table className={styles.contentTable}>
478
+ <thead>
479
+ <tr>
480
+ {field.options.map((option, index) => (
481
+ <th
482
+ key={`${field.id}-table-text-option-${index}`}
483
+ >
484
+ {option.label}
485
+ </th>
486
+ ))}
487
+ </tr>
488
+ </thead>
489
+ <tbody>
490
+ <tr>
491
+ {field.options.map((option, index) => (
492
+ <td
493
+ key={`${field.id}-table-text-data-${index}`}
494
+ >
495
+ [Placeholder Data]]
496
+ </td>
497
+ ))}
498
+ </tr>
499
+ </tbody>
500
+ </table>
501
+ <span
502
+ className={`${styles.fi__span} ${styles.prefocus}`}
503
+ >
449
504
  {field.label}{' '}
450
505
  {field.required === 'yes' ? '*' : null}
451
506
  </span>
@@ -453,9 +508,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
453
508
  );
454
509
  case 'textarea':
455
510
  return (
456
- <label className="fi__label">
511
+ <label className={styles.fi__label}>
457
512
  <textarea rows="5"></textarea>
458
- <span className="fi__span">
513
+ <span className={styles.fi__span}>
459
514
  {field.label}{' '}
460
515
  {field.required === 'yes' ? '*' : null}
461
516
  </span>
@@ -463,9 +518,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
463
518
  );
464
519
  case 'time':
465
520
  return (
466
- <label className="fi__label">
521
+ <label className={styles.fi__label}>
467
522
  <input type="time" />
468
- <span className="fi__span">
523
+ <span className={styles.fi__span}>
469
524
  {field.label}{' '}
470
525
  {field.required === 'yes' ? '*' : null}
471
526
  </span>
@@ -475,7 +530,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
475
530
  return (
476
531
  <div>
477
532
  <Toggle />
478
- <span className="fi__toggletxt">
533
+ <span className={styles.fi__toggletxt}>
479
534
  {field.label}{' '}
480
535
  {field.required === 'yes' ? '*' : null}
481
536
  </span>
@@ -483,9 +538,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
483
538
  );
484
539
  default:
485
540
  return (
486
- <label className="fi__label">
541
+ <label className={styles.fi__label}>
487
542
  <input type="text" />
488
- <span className="fi__span">
543
+ <span className={styles.fi__span}>
489
544
  {field.label}{' '}
490
545
  {field.required === 'yes' ? '*' : null}
491
546
  </span>
@@ -595,25 +650,21 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
595
650
 
596
651
  return (
597
652
  <div>
598
- <div className="grid">
599
- <div className="grid__row">
600
- <div className="grid__full crmtitle">
601
- <h1>
602
- <Breadcrumb
603
- data={data}
604
- page={{
605
- previousUrl: parentUrl,
606
- title: 'Forms',
607
- titleKey: 'label',
608
- }}
609
- />
610
- </h1>
611
- </div>
653
+ <div className={styles.grid__row}>
654
+ <div className={`${styles.grid__full} ${styles.crmtitle}`}>
655
+ <Breadcrumb
656
+ data={data}
657
+ page={{
658
+ previousUrl: parentUrl,
659
+ title: 'Forms',
660
+ titleKey: 'label',
661
+ }}
662
+ />
612
663
  </div>
613
664
  </div>
614
- <div className="grid">
615
- <div className="grid__subrow">
616
- <div className="grid__subnav">
665
+ <div className={styles.grid}>
666
+ <div className={styles.grid__subrow}>
667
+ <div className={styles.grid__subnav}>
617
668
  {data.detail && data.detail.length > 0 ? (
618
669
  <SortableList
619
670
  handleClick={handleEdit}
@@ -621,29 +672,31 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
621
672
  items={data.detail}
622
673
  onSortEnd={onSortEnd}
623
674
  axis="xy"
624
- helperClass="dragitem"
675
+ helperClass={styles.dragitem}
625
676
  transitionDuration={250}
626
677
  showImage={false}
627
678
  useDragHandle
628
679
  />
629
680
  ) : null}
630
681
  </div>
631
- <div className="grid__subcontent">
632
- <div className="formSplit">
633
- <div className="gridtxt__header">
682
+ <div className={styles.grid__subcontent}>
683
+ <div className={styles.formSplit}>
684
+ <div className={styles.gridtxt__header}>
634
685
  <span>{formTitle ? formTitle : null}</span>
635
686
  </div>
636
687
  {data.detail && data.detail.length > 0 ? (
637
- <div className="modal__content">
638
- <div className="formcontainer">
639
- <form className="modalForm">
688
+ <div className={styles.modal__content}>
689
+ <div className={styles.formcontainer}>
690
+ <form className={styles.modalForm}>
640
691
  {data.detail.map((a, b) => (
641
692
  <div
642
693
  key={`form-preview-field-${b}`}
643
694
  className={renderClassName(
644
695
  a
645
696
  )}
646
- style={{ height: '64.2px' }}
697
+ style={{
698
+ minHeight: '64.2px',
699
+ }}
647
700
  >
648
701
  {renderField(a)}
649
702
  </div>
@@ -653,12 +706,15 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
653
706
  </div>
654
707
  ) : null}
655
708
  </div>
656
- <div className="polActions">
657
- <button className="btn" onClick={handleOpenModal}>
709
+ <div className={styles.polActions}>
710
+ <button
711
+ className={styles.btn}
712
+ onClick={handleOpenModal}
713
+ >
658
714
  Add Field
659
715
  </button>
660
716
  <button
661
- className="btn"
717
+ className={styles.btn}
662
718
  onClick={handleOpenModalForm}
663
719
  >
664
720
  Edit Form
@@ -673,26 +729,26 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
673
729
  onClose={handleCloseModal}
674
730
  closeOnDocumentClick={false}
675
731
  >
676
- <div className="modalwrap top--modal">
677
- <div className="modal">
678
- <div className="modal__header">
732
+ <div className={styles.modalwrap}>
733
+ <div className={styles.modal}>
734
+ <div className={styles.modal__header}>
679
735
  <h1>
680
736
  {modalType.type === 'create'
681
737
  ? 'Add new Field'
682
738
  : 'Update existing Field'}
683
739
  </h1>
684
740
  <button
685
- className="modal__close"
741
+ className={styles.modal__close}
686
742
  onClick={handleCloseModal}
687
743
  >
688
744
  <CircleX strokeWidth={1} size={24} />
689
745
  </button>
690
746
  </div>
691
- <div className="modal__content">
692
- <div className="formcontainer">
693
- <form className="modalForm">
694
- <div className="formItem">
695
- <label className="fi__label">
747
+ <div className={styles.modal__content}>
748
+ <div className={styles.formcontainer}>
749
+ <form className={styles.modalForm}>
750
+ <div className={styles.formItem}>
751
+ <label className={styles.fi__label}>
696
752
  <select
697
753
  name="type"
698
754
  value={dataField.type}
@@ -731,6 +787,15 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
731
787
  <option value="plaintext">
732
788
  Plain Text
733
789
  </option>
790
+ <option value="signature">
791
+ Signature
792
+ </option>
793
+ <option value="table_radio">
794
+ Table (Radio)
795
+ </option>
796
+ <option value="table_text">
797
+ Table (Text)
798
+ </option>
734
799
  <option value="text">
735
800
  Text
736
801
  </option>
@@ -744,13 +809,13 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
744
809
  Toggle
745
810
  </option>
746
811
  </select>
747
- <span className="fi__span">
812
+ <span className={styles.fi__span}>
748
813
  Type *
749
814
  </span>
750
815
  </label>
751
816
  </div>
752
- <div className="formItem">
753
- <label className="fi__label">
817
+ <div className={styles.formItem}>
818
+ <label className={styles.fi__label}>
754
819
  <input
755
820
  type="text"
756
821
  name="label"
@@ -760,15 +825,16 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
760
825
  : ''
761
826
  }
762
827
  onChange={handleChangeForm}
828
+ placeholder=" "
763
829
  />
764
- <span className="fi__span">
830
+ <span className={styles.fi__span}>
765
831
  Label *
766
832
  </span>
767
833
  </label>
768
834
  </div>
769
835
  {dataField.type === 'dynamicdata' && (
770
- <div className="formItem fwItem">
771
- <label className="fi__label">
836
+ <div className={styles.formItem}>
837
+ <label className={styles.fi__label}>
772
838
  <select
773
839
  name="dynamicfield"
774
840
  value={
@@ -801,14 +867,16 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
801
867
  </optgroup>
802
868
  ))}
803
869
  </select>
804
- <span className="fi__span">
870
+ <span
871
+ className={styles.fi__span}
872
+ >
805
873
  Dynamic Field *
806
874
  </span>
807
875
  </label>
808
876
  </div>
809
877
  )}
810
- <div className="formItem">
811
- <label className="fi__label">
878
+ <div className={styles.formItem}>
879
+ <label className={styles.fi__label}>
812
880
  <select
813
881
  name="size"
814
882
  value={dataField.size}
@@ -827,13 +895,13 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
827
895
  Full
828
896
  </option>
829
897
  </select>
830
- <span className="fi__span">
898
+ <span className={styles.fi__span}>
831
899
  Size *
832
900
  </span>
833
901
  </label>
834
902
  </div>
835
- <div className="formItem">
836
- <label className="fi__label">
903
+ <div className={styles.formItem}>
904
+ <label className={styles.fi__label}>
837
905
  <select
838
906
  name="required"
839
907
  value={dataField.required}
@@ -845,14 +913,16 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
845
913
  <option value="no">No</option>
846
914
  <option value="yes">Yes</option>
847
915
  </select>
848
- <span className="fi__span">
916
+ <span className={styles.fi__span}>
849
917
  Required? *
850
918
  </span>
851
919
  </label>
852
920
  </div>
853
921
  {dataField.type === 'plaintext' && (
854
- <div className="formItem fwItem">
855
- <label className="fi__label">
922
+ <div
923
+ className={`${styles.formItem} ${styles.fwItem}`}
924
+ >
925
+ <label className={styles.fi__label}>
856
926
  <Editor
857
927
  tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
858
928
  licenseKey="gpl"
@@ -905,25 +975,42 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
905
975
  'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
906
976
  }}
907
977
  />
908
- <span className="fi__span prefocus">
978
+ <span
979
+ className={styles.fi__span}
980
+ >
909
981
  Description *
910
982
  </span>
911
983
  </label>
912
984
  </div>
913
985
  )}
914
986
 
915
- {dataField.type === 'checkbox' ||
916
- dataField.type === 'dropdown' ? (
917
- <div className="formItem fwItem">
918
- <table className="content-table">
919
- <thead className="grid-headers">
987
+ {[
988
+ 'checkbox',
989
+ 'dropdown',
990
+ 'table_radio',
991
+ 'table_text',
992
+ ].includes(dataField.type) ? (
993
+ <div
994
+ className={`${styles.formItem} ${styles.fwItem}`}
995
+ >
996
+ <table
997
+ className={styles.contentTable}
998
+ >
999
+ <thead
1000
+ className={
1001
+ styles.gridHeaders
1002
+ }
1003
+ >
920
1004
  <tr>
921
1005
  <th
922
1006
  style={{
923
1007
  width: '450px',
924
1008
  }}
925
1009
  >
926
- Label
1010
+ {dataField.type ===
1011
+ 'table_text'
1012
+ ? 'Column Header'
1013
+ : 'Label'}
927
1014
  </th>
928
1015
  <th></th>
929
1016
  </tr>
@@ -951,7 +1038,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
951
1038
  }}
952
1039
  >
953
1040
  <button
954
- className="btn"
1041
+ className={
1042
+ styles.btn
1043
+ }
955
1044
  style={{
956
1045
  padding:
957
1046
  '5px 20px',
@@ -983,10 +1072,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
983
1072
  ) : (
984
1073
  <tr>
985
1074
  <td colSpan="2">
986
- No{' '}
987
- {dataField.type}{' '}
988
- options have
989
- been added
1075
+ No entry have
1076
+ been added.
990
1077
  </td>
991
1078
  </tr>
992
1079
  )}
@@ -1016,7 +1103,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1016
1103
  }}
1017
1104
  >
1018
1105
  <button
1019
- className="btn"
1106
+ className={
1107
+ styles.btn
1108
+ }
1020
1109
  style={{
1021
1110
  padding:
1022
1111
  '5px 20px',
@@ -1042,9 +1131,11 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1042
1131
  </table>
1043
1132
  </div>
1044
1133
  ) : null}
1045
- <div className="formItem fwItem lastItem">
1134
+ <div
1135
+ className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
1136
+ >
1046
1137
  <button
1047
- className="btn modalsave"
1138
+ className={`${styles.btn}`}
1048
1139
  onClick={handleSaveField}
1049
1140
  >
1050
1141
  Save
@@ -1062,22 +1153,22 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1062
1153
  onClose={handleCloseModalForm}
1063
1154
  closeOnDocumentClick={false}
1064
1155
  >
1065
- <div className="modalwrap top--modal">
1066
- <div className="modal">
1067
- <div className="modal__header">
1156
+ <div className={styles.modalwrap}>
1157
+ <div className={styles.modal}>
1158
+ <div className={styles.modal__header}>
1068
1159
  <h1>Update Form Detail</h1>
1069
1160
  <button
1070
- className="modal__close"
1161
+ className={styles.modal__close}
1071
1162
  onClick={handleCloseModalForm}
1072
1163
  >
1073
1164
  <CircleX strokeWidth={1} size={24} />
1074
1165
  </button>
1075
1166
  </div>
1076
- <div className="modal__content">
1077
- <div className="formcontainer">
1078
- <form className="modalForm">
1079
- <div className="formItem">
1080
- <label className="fi__label">
1167
+ <div className={styles.modal__content}>
1168
+ <div className={styles.formcontainer}>
1169
+ <form className={styles.modalForm}>
1170
+ <div className={styles.formItem}>
1171
+ <label className={styles.fi__label}>
1081
1172
  <input
1082
1173
  type="text"
1083
1174
  name="label"
@@ -1086,14 +1177,16 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1086
1177
  }
1087
1178
  onChange={handleChange}
1088
1179
  />
1089
- <span className="fi__span">
1180
+ <span className={styles.fi__span}>
1090
1181
  Label *
1091
1182
  </span>
1092
1183
  </label>
1093
1184
  </div>
1094
- <div className="formItem fwItem lastItem">
1185
+ <div
1186
+ className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
1187
+ >
1095
1188
  <button
1096
- className="btn modalsave"
1189
+ className={`${styles.btn}`}
1097
1190
  onClick={handleSubmit}
1098
1191
  >
1099
1192
  Save