@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/GenericDynamic.jsx CHANGED
@@ -10,18 +10,16 @@ import { Backspace, CloudDownload } from 'akar-icons';
10
10
  import CustomFetch from '../Fetch';
11
11
  import Download from '../Download';
12
12
  import Field from '../Field';
13
+ import styles from './styles/GenericDynamic.module.css';
13
14
 
14
15
  const updateField = (fields, name, value) => {
15
- // Check if fields is an array of objects
16
16
  if (Array.isArray(fields)) {
17
17
  return fields.map((field) => ({
18
18
  ...field,
19
- // Update only the field that matches name
20
19
  value: field.id === name ? value : field.value,
21
20
  }));
22
21
  }
23
22
 
24
- // If fields is a single object, handle accordingly
25
23
  return Object.entries(fields).reduce(
26
24
  (acc, [key, field]) => ({
27
25
  ...acc,
@@ -67,7 +65,6 @@ const renderValue = (field, data) => {
67
65
  return field.value && moment(field.value).isValid()
68
66
  ? moment(field.value).toDate()
69
67
  : '';
70
-
71
68
  default:
72
69
  return field.value || '';
73
70
  }
@@ -84,6 +81,7 @@ const GenericDynamic = ({
84
81
  setting,
85
82
  templateStatus = true,
86
83
  type,
84
+ userProfile,
87
85
  }) => {
88
86
  const toastId = useRef(null);
89
87
  const [activeForm, setActiveForm] = useState({});
@@ -105,20 +103,17 @@ const GenericDynamic = ({
105
103
  updateField(prevState, name, newValue)
106
104
  );
107
105
  } else if (files && files[0]) {
108
- const toastId = toast.loading('Uploading file...'); // Show loading toast
109
- // Start the upload process and read the file if it's an image
106
+ const toastId = toast.loading('Uploading file...');
110
107
  Vapor.store(files[0], {
111
108
  progress: (progress) => {
112
109
  console.info(`Upload Progress: ${progress}`);
113
110
  },
114
111
  }).then((response) => {
115
112
  if (files[0].type.startsWith('image/')) {
116
- // Use FileReader to asynchronously read the file as a data URL for image preview
117
113
  const reader = new FileReader();
118
114
  reader.onload = (e) => {
119
- const imageSrc = e.target.result; // This is the data URL
115
+ const imageSrc = e.target.result;
120
116
 
121
- // Set active form state with file details and imageSrc for preview
122
117
  setActiveForm((prevState) =>
123
118
  updateField(prevState, name, {
124
119
  extension: response.extension,
@@ -128,13 +123,12 @@ const GenericDynamic = ({
128
123
  bucket: response.bucket,
129
124
  filename: files[0].name,
130
125
  filesize: files[0].size,
131
- imageSrc: imageSrc, // Add the data URL as imageSrc
126
+ imageSrc: imageSrc,
132
127
  })
133
128
  );
134
129
  };
135
130
  reader.readAsDataURL(files[0]);
136
131
  } else {
137
- // Handle non-image files
138
132
  setActiveForm((prevState) =>
139
133
  updateField(prevState, name, {
140
134
  extension: response.extension,
@@ -203,6 +197,18 @@ const GenericDynamic = ({
203
197
  setActiveForm((prevState) => updateField(prevState, id, value.value));
204
198
  };
205
199
 
200
+ const handleChangeSignature = (id) => {
201
+ if (userProfile.signature) {
202
+ setActiveForm((prevState) =>
203
+ updateField(prevState, id, {
204
+ signature: userProfile.signature,
205
+ name: userProfile.name,
206
+ date: moment().toString(),
207
+ })
208
+ );
209
+ }
210
+ };
211
+
206
212
  const handleChangeToggle = (e) => {
207
213
  if (!e) {
208
214
  return;
@@ -214,7 +220,7 @@ const GenericDynamic = ({
214
220
  };
215
221
 
216
222
  const handleFileDownload = async (d) => {
217
- const toastId = toast.loading('Downloading file...'); // Show loading toast
223
+ const toastId = toast.loading('Downloading file...');
218
224
  try {
219
225
  const res = await Download(setting.file, 'POST', {
220
226
  extension: d.extension,
@@ -232,7 +238,6 @@ const GenericDynamic = ({
232
238
  closeButton: true,
233
239
  });
234
240
  } else {
235
- // Update the toast to show an error message
236
241
  toast.update(toastId, {
237
242
  render: 'Error downloading form',
238
243
  type: 'error',
@@ -243,7 +248,6 @@ const GenericDynamic = ({
243
248
  }
244
249
  } catch (err) {
245
250
  console.error(err);
246
- // Update the toast to show an error message
247
251
  toast.update(toastId, {
248
252
  render: 'Error downloading form',
249
253
  type: 'error',
@@ -292,7 +296,6 @@ const GenericDynamic = ({
292
296
  const toastId = toast.loading('Downloading form...');
293
297
 
294
298
  try {
295
- // Assuming Download returns an object with { data: Blob, headers: Headers }
296
299
  const response = await Download(setting.download, 'POST', {
297
300
  data: item,
298
301
  dynamicData: data,
@@ -303,25 +306,23 @@ const GenericDynamic = ({
303
306
  const contentDisposition = response.headers.get(
304
307
  'Content-Disposition'
305
308
  );
306
- let filename = null; // Default to null, letting saveAs decide the filename
309
+ let filename = null;
307
310
 
308
311
  if (contentDisposition) {
309
312
  const filenameMatch = contentDisposition.match(
310
313
  /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
311
314
  );
312
315
  if (filenameMatch && filenameMatch[1]) {
313
- filename = filenameMatch[1].replace(/['"]/g, ''); // Remove potential quotes
316
+ filename = filenameMatch[1].replace(/['"]/g, '');
314
317
  }
315
318
  }
316
319
 
317
- // Perform the download using FileSaver.js
318
320
  if (filename) {
319
321
  saveAs(response.data, filename);
320
322
  } else {
321
- saveAs(response.data); // No filename extracted, let FileSaver handle it
323
+ saveAs(response.data);
322
324
  }
323
325
 
324
- // Update loading toast to a success message before closing it
325
326
  toast.update(toastId, {
326
327
  render: 'Download successful!',
327
328
  type: 'success',
@@ -330,12 +331,10 @@ const GenericDynamic = ({
330
331
  closeButton: true,
331
332
  });
332
333
  } else {
333
- // Handle the case where there is no data in the response
334
334
  throw new Error('No data received from the server');
335
335
  }
336
336
  } catch (err) {
337
337
  console.error(err);
338
- // Update the toast to show an error message
339
338
  toast.update(toastId, {
340
339
  render: 'Error downloading form: ' + err.message,
341
340
  type: 'error',
@@ -360,7 +359,6 @@ const GenericDynamic = ({
360
359
  toast.success('Form deleted successfully.');
361
360
  fetchData();
362
361
  } else {
363
- // Handle case where there is an error in the response
364
362
  toast.error('Error: ' + res.data.error);
365
363
  }
366
364
  } catch (err) {
@@ -379,7 +377,6 @@ const GenericDynamic = ({
379
377
  },
380
378
  {
381
379
  label: 'No',
382
- onClick: () => close(), // Ensure 'close' function is defined or remove this line
383
380
  },
384
381
  ],
385
382
  });
@@ -425,7 +422,6 @@ const GenericDynamic = ({
425
422
  if (data[type] && data[type].length > 0) {
426
423
  if (multiple) {
427
424
  if (templateStatus) {
428
- // Retrieve the last form of the specified type
429
425
  let lastForm = data[type][data[type].length - 1];
430
426
 
431
427
  if (lastForm && typeof lastForm === 'object') {
@@ -441,7 +437,6 @@ const GenericDynamic = ({
441
437
  }
442
438
  });
443
439
 
444
- // Update the active form with the modified lastForm
445
440
  setActiveForm(lastForm);
446
441
  setActiveFormKey(data[type].length - 1);
447
442
  }
@@ -470,18 +465,15 @@ const GenericDynamic = ({
470
465
 
471
466
  return (
472
467
  <>
473
- <div className="formSplit">
468
+ <div className={styles.formSplit}>
474
469
  {multiple && (
475
470
  <>
476
- <div className="gridtxt__header">
471
+ <div className={styles.gridtxt__header}>
477
472
  <span>Form List</span>
478
473
  </div>
479
- <table
480
- className="content-table"
481
- style={{ marginBottom: '30px' }}
482
- >
474
+ <table className={styles.contentTable}>
483
475
  <thead>
484
- <tr className="grid-headers">
476
+ <tr>
485
477
  <th>ID</th>
486
478
  <th>Form</th>
487
479
  <th>Created By</th>
@@ -533,7 +525,11 @@ const GenericDynamic = ({
533
525
  : null}
534
526
  </td>
535
527
  <td>
536
- <div className="tdactions">
528
+ <div
529
+ className={
530
+ styles.tdActions
531
+ }
532
+ >
537
533
  <span
538
534
  data-tooltip-id="system-tooltip"
539
535
  data-tooltip-content="Download Form"
@@ -551,7 +547,9 @@ const GenericDynamic = ({
551
547
  2
552
548
  }
553
549
  size={18}
554
- className="tdaction"
550
+ className={
551
+ styles.tdAction
552
+ }
555
553
  />
556
554
  </span>
557
555
  <span
@@ -570,7 +568,9 @@ const GenericDynamic = ({
570
568
  2
571
569
  }
572
570
  size={18}
573
- className="tdaction"
571
+ className={
572
+ styles.tdAction
573
+ }
574
574
  />
575
575
  </span>
576
576
  </div>
@@ -587,84 +587,37 @@ const GenericDynamic = ({
587
587
 
588
588
  {activeForm && (
589
589
  <>
590
- <div className="gridtxt__header">
590
+ <div className={styles.gridtxt__header}>
591
591
  <span>
592
592
  {label}{' '}
593
593
  {multiple && ` - Form #${activeForm?.id ?? ''}`}
594
594
  </span>
595
595
  </div>
596
- <div
597
- className="formcontainer"
598
- style={{ paddingBottom: '50px' }}
599
- >
600
- <div className="modalForm">
601
- {
602
- // Check if activeForm is an object and not an array when multiple is true
603
- multiple &&
604
- typeof activeForm === 'object' &&
605
- !Array.isArray(activeForm)
606
- ? Object.entries(activeForm)
607
- .filter(
608
- ([key, value]) =>
609
- typeof value ===
610
- 'object' &&
611
- [
612
- 'id',
613
- 'label',
614
- 'type',
615
- 'size',
616
- 'value',
617
- ].every((k) =>
618
- value.hasOwnProperty(
619
- k
620
- )
621
- )
622
- )
623
- .map(
624
- ([key, field]) =>
625
- field.hide === 0 && (
626
- <Field
627
- settings={field}
628
- key={`field-${key}-${field.id}`}
629
- formData={
630
- activeForm
631
- }
632
- inputClass={''}
633
- inputValue={renderValue(
634
- field,
635
- originalData
636
- )}
637
- onChange={
638
- handleChange
639
- }
640
- onChangeCheckbox={
641
- handleChangeCheckbox
642
- }
643
- onChangeDate={
644
- handleChangeDate
645
- }
646
- onChangeNumberFormat={
647
- handleChangeNumberFormat
648
- }
649
- onChangeToggle={
650
- handleChangeToggle
651
- }
652
- onFileDownload={
653
- handleFileDownload
654
- }
655
- style={{}}
656
- />
657
- )
658
- )
659
- : // Handle case where activeForm is an array and multiple is false
660
- typeof activeForm?.map ===
661
- 'function' &&
662
- activeForm.map(
663
- (field, index) =>
596
+ <div className={styles.formcontainer}>
597
+ <div className={styles.modalForm}>
598
+ {multiple &&
599
+ typeof activeForm === 'object' &&
600
+ !Array.isArray(activeForm)
601
+ ? Object.entries(activeForm)
602
+ .filter(
603
+ ([key, value]) =>
604
+ typeof value === 'object' &&
605
+ [
606
+ 'id',
607
+ 'label',
608
+ 'type',
609
+ 'size',
610
+ 'value',
611
+ ].every((k) =>
612
+ value.hasOwnProperty(k)
613
+ )
614
+ )
615
+ .map(
616
+ ([key, field]) =>
664
617
  field.hide === 0 && (
665
618
  <Field
666
619
  settings={field}
667
- key={`field-array-${index}-${field.id}`}
620
+ key={`field-${key}-${field.id}`}
668
621
  formData={activeForm}
669
622
  inputClass={''}
670
623
  inputValue={renderValue(
@@ -680,6 +633,12 @@ const GenericDynamic = ({
680
633
  onChangeDate={
681
634
  handleChangeDate
682
635
  }
636
+ onChangeNumberFormat={
637
+ handleChangeNumberFormat
638
+ }
639
+ onChangeSignature={
640
+ handleChangeSignature
641
+ }
683
642
  onChangeToggle={
684
643
  handleChangeToggle
685
644
  }
@@ -690,13 +649,42 @@ const GenericDynamic = ({
690
649
  />
691
650
  )
692
651
  )
693
- }
652
+ : typeof activeForm?.map === 'function' &&
653
+ activeForm.map(
654
+ (field, index) =>
655
+ field.hide === 0 && (
656
+ <Field
657
+ settings={field}
658
+ key={`field-array-${index}-${field.id}`}
659
+ formData={activeForm}
660
+ inputClass={''}
661
+ inputValue={renderValue(
662
+ field,
663
+ originalData
664
+ )}
665
+ onChange={handleChange}
666
+ onChangeCheckbox={
667
+ handleChangeCheckbox
668
+ }
669
+ onChangeDate={
670
+ handleChangeDate
671
+ }
672
+ onChangeToggle={
673
+ handleChangeToggle
674
+ }
675
+ onFileDownload={
676
+ handleFileDownload
677
+ }
678
+ style={{}}
679
+ />
680
+ )
681
+ )}
694
682
  </div>
695
683
  </div>
696
684
  </>
697
685
  )}
698
686
  </div>
699
- <div className="polActions">
687
+ <div className={styles.polActions}>
700
688
  {multiple && templateStatus && (
701
689
  <button className="btn" onClick={handleAddNewForm}>
702
690
  Add New Form