@visns-studio/visns-components 5.2.9 → 5.2.11

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/crm/generic/GenericDetail.jsx +106 -40
package/package.json CHANGED
@@ -78,7 +78,7 @@
78
78
  "react-dom": "^17.0.0 || ^18.0.0"
79
79
  },
80
80
  "name": "@visns-studio/visns-components",
81
- "version": "5.2.9",
81
+ "version": "5.2.11",
82
82
  "description": "Various packages to assist in the development of our Custom Applications.",
83
83
  "main": "src/index.js",
84
84
  "files": [
package/src/components/crm/generic/GenericDetail.jsx CHANGED
@@ -81,6 +81,7 @@ function GenericDetail({
81
81
 
82
82
  const formData = new FormData();
83
83
  formData.append('file', e.target.files[0]);
84
+ formData.append('template_id', routeParams[urlParam]);
84
85
 
85
86
  // Show a loading toast when the file is being processed
86
87
  const loadingToast = toast.loading(
@@ -98,6 +99,7 @@ function GenericDetail({
98
99
 
99
100
  if (response.ok) {
100
101
  const result = await response.json();
102
+
101
103
  setData((prevState) => ({
102
104
  ...prevState,
103
105
  [id]: result,
@@ -620,10 +622,42 @@ function GenericDetail({
620
622
  }
621
623
  };
622
624
 
625
+ const handleOcrTitleChange = (e) => {
626
+ const {
627
+ value,
628
+ dataset: { id },
629
+ } = e.target;
630
+
631
+ let selectedTitle = data[id].selectedTitle || [];
632
+
633
+ if (selectedTitle.includes(value)) {
634
+ selectedTitle = selectedTitle.filter((line) => line !== value);
635
+ } else {
636
+ selectedTitle.push(value);
637
+ }
638
+
639
+ setData((prevState) => ({
640
+ ...prevState,
641
+ [id]: {
642
+ ...prevState[id],
643
+ selectedTitle,
644
+ },
645
+ }));
646
+ };
647
+
648
+ // Helper function to chunk an array into subarrays of given size.
649
+ const chunkArray = (arr, chunkSize) => {
650
+ const result = [];
651
+ for (let i = 0; i < arr.length; i += chunkSize) {
652
+ result.push(arr.slice(i, i + chunkSize));
653
+ }
654
+ return result;
655
+ };
656
+
623
657
  const renderOcrTemplate = (id) => {
624
658
  const ocrTemplateBuilder = data[id];
625
- const listOfKeys = data[id]?.DeducedData
626
- ? Object.assign({}, ...data[id].DeducedData)
659
+ const listOfKeys = data[id]?.keyValuePairs
660
+ ? data[id].keyValuePairs
627
661
  : {};
628
662
 
629
663
  return (
@@ -634,55 +668,90 @@ function GenericDetail({
634
668
  onChange={handleOcrFileChange}
635
669
  />
636
670
 
637
- {ocrTemplateBuilder &&
638
- ocrTemplateBuilder.DeducedData &&
639
- ocrTemplateBuilder.DeducedData.length > 0 && (
640
- <table className={styles.schedulingTable}>
641
- <thead>
642
- <tr>
643
- <th></th>
644
- <th>Key</th>
645
- <th>Value</th>
646
- </tr>
647
- </thead>
648
- <tbody>
649
- {Object.entries(listOfKeys).map(
650
- ([key, value], index) => (
651
- <tr key={`ocr-keys-${index}`}>
652
- <td>
671
+ {ocrTemplateBuilder && ocrTemplateBuilder.keyValuePairs && (
672
+ <table className={styles.schedulingTable}>
673
+ <thead>
674
+ <tr>
675
+ <th></th>
676
+ <th>Key</th>
677
+ <th>Value</th>
678
+ </tr>
679
+ </thead>
680
+ <tbody>
681
+ {Object.entries(listOfKeys).map(
682
+ ([key, value], index) => (
683
+ <tr key={`ocr-keys-${index}`}>
684
+ <td>
685
+ <input
686
+ type="checkbox"
687
+ name={key}
688
+ value={key}
689
+ data-id={id}
690
+ checked={
691
+ ocrTemplateBuilder?.selectedKey?.includes(
692
+ key
693
+ ) || false
694
+ }
695
+ onChange={
696
+ handleOcrKeyChange
697
+ }
698
+ />
699
+ </td>
700
+ <td>{key}</td>
701
+ <td>{value}</td>
702
+ </tr>
703
+ )
704
+ )}
705
+ </tbody>
706
+ </table>
707
+ )}
708
+
709
+ {ocrTemplateBuilder && ocrTemplateBuilder.allText && (
710
+ <table className={styles.schedulingTable}>
711
+ <thead>
712
+ <tr>
713
+ <th colSpan="4">
714
+ Text Lines (Select Document Title)
715
+ </th>
716
+ </tr>
717
+ </thead>
718
+ <tbody>
719
+ {chunkArray(ocrTemplateBuilder.allText, 4).map(
720
+ (row, rowIndex) => (
721
+ <tr key={`ocr-text-row-${rowIndex}`}>
722
+ {row.map((line, colIndex) => (
723
+ <td
724
+ key={`ocr-text-${rowIndex}-${colIndex}`}
725
+ >
653
726
  <input
654
727
  type="checkbox"
655
- name={key}
656
- value={key}
728
+ name="docTitle"
729
+ value={line}
657
730
  data-id={id}
658
731
  checked={
659
- ocrTemplateBuilder?.selectedKey?.includes(
660
- key
732
+ ocrTemplateBuilder?.selectedTitle?.includes(
733
+ line
661
734
  ) || false
662
735
  }
663
736
  onChange={
664
- handleOcrKeyChange
737
+ handleOcrTitleChange
665
738
  }
666
- />
739
+ />{' '}
740
+ {line}
667
741
  </td>
668
- <td>{key}</td>
669
- <td>{value}</td>
670
- </tr>
671
- )
672
- )}
673
- </tbody>
674
- </table>
675
- )}
742
+ ))}
743
+ </tr>
744
+ )
745
+ )}
746
+ </tbody>
747
+ </table>
748
+ )}
676
749
 
677
750
  {ocrTemplateBuilder &&
678
751
  ocrTemplateBuilder.selectedKey &&
679
752
  ocrTemplateBuilder.selectedKey.length > 0 && (
680
753
  <>
681
- <h2
682
- style={{
683
- borderBottom: '1px solid grey',
684
- }}
685
- >
754
+ <h2 style={{ borderBottom: '1px solid grey' }}>
686
755
  File Name Template
687
756
  </h2>
688
757
  <strong>Selected Keys</strong>
@@ -727,7 +796,6 @@ function GenericDetail({
727
796
  value={data?.content?.watchFolder || ''}
728
797
  onChange={(e) => {
729
798
  const { name, value } = e.target;
730
-
731
799
  setData((prevState) => ({
732
800
  ...prevState,
733
801
  content: {
@@ -737,7 +805,6 @@ function GenericDetail({
737
805
  }));
738
806
  }}
739
807
  />
740
-
741
808
  <br />
742
809
  <br />
743
810
  <strong>Destination Folder</strong>
@@ -749,7 +816,6 @@ function GenericDetail({
749
816
  }
750
817
  onChange={(e) => {
751
818
  const { name, value } = e.target;
752
-
753
819
  setData((prevState) => ({
754
820
  ...prevState,
755
821
  content: {