Merge pull request I-TECH-UW#994 from mozzy11/develop_3x

improve barcode print
Agaba-derrick · Apr 18, 2024 · 542b74c · 542b74c
2 parents f264986 + 989bf61
commit 542b74c
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 25 deletions.
diff --git a/frontend/src/components/printBarcode/PrePrint.js b/frontend/src/components/printBarcode/PrePrint.js
@@ -1,4 +1,4 @@
-import { React, useState, useEffect } from "react";
+import { React, useState, useEffect, useRef } from "react";
 import { FormattedMessage, useIntl, injectIntl } from "react-intl";
 import {
   Checkbox,
@@ -12,11 +12,12 @@ import {
 } from "@carbon/react";
 import { getFromOpenElisServer } from "../utils/Utils";
 import { sampleTypeTestsStructure } from "../data/SampleEntryTestsForTypeProvider";
+import AutoComplete from "../common/AutoComplete";
 import "../Style.css";
 
 const PrePrint = () => {
   const intl = useIntl();
-
+  const componentMounted = useRef(false);
   const [sampleTypes, setSampleTypes] = useState([]);
   const [selectedSampleTypeId, setSelectedSampleTypeId] = useState(null);
 
@@ -33,6 +34,21 @@ const PrePrint = () => {
 
   const [source, setSource] = useState("about:blank");
   const [renderBarcode, setRenderBarcode] = useState(false);
+  const [siteNames, setSiteNames] = useState([]);
+
+  const getSiteList = (response) => {
+    if (componentMounted.current) {
+      setSiteNames(response);
+    }
+  };
+
+  useEffect(() => {
+    componentMounted.current = true;
+    getFromOpenElisServer("/rest/site-names", getSiteList);
+    return () => {
+      componentMounted.current = false;
+    };
+  }, []);
 
   function findTestById(testId) {
     return sampleTypeTests.tests.find((test) => test.id === testId);
@@ -169,7 +185,7 @@ const PrePrint = () => {
     <>
       <div className="orderLegendBody">
         <Grid>
-          <Column lg={8} md={8} sm={4}>
+          <Column lg={16} md={8} sm={4}>
             <h4>
               <FormattedMessage id="barcode.print.preprint" />
             </h4>
@@ -179,48 +195,77 @@ const PrePrint = () => {
               min={1}
               max={100}
               defaultValue={1}
+              value={labelSets}
               onChange={(_, state) => setLabelSets(state.value)}
-              label={"Number of label sets"}
+              label={intl.formatMessage({
+                id: "label.barcode.labelsets",
+              })}
               id="labelSets"
-              className="inputText"
             />
           </Column>
+          <Column lg={8} md={8} sm={4}></Column>
+          <Column lg={16} md={8} sm={4}>
+            {" "}
+            <br></br>
+          </Column>
           <Column lg={8} md={8} sm={4}>
             <NumberInput
               min={1}
               max={100}
               defaultValue={1}
+              value={orderLabelsPerSet}
               onChange={(_, state) => setOrderLabelsPerSet(state.value)}
-              label={"Number of order labels per set"}
+              label={intl.formatMessage({
+                id: "label.barcode.orderlabel",
+              })}
               id="orderLabelsPerSet"
-              className="inputText"
             />
           </Column>
           <Column lg={8} md={8} sm={4}>
             <NumberInput
               min={1}
               max={100}
               defaultValue={1}
+              value={specimenLabelsPerSet}
               onChange={(_, state) => setSpecimenLabelsPerSet(state.value)}
-              label={"Number of specimen labels per set"}
+              label={intl.formatMessage({
+                id: "label.barcode.specimenlabel",
+              })}
               id="specimenLabelsPerSet"
-              className="inputText"
             />
           </Column>
+          <Column lg={16} md={8} sm={4}>
+            {" "}
+            <br></br>
+          </Column>
           <Column lg={8} md={8} sm={4}>
             <NumberInput
               readOnly
               value={labelSets * (orderLabelsPerSet + specimenLabelsPerSet)}
-              label={"Total Labels to Print"}
+              label={intl.formatMessage({
+                id: "label.barcode.totallabel",
+              })}
               id="totalLabelsToPrint"
-              className="inputText"
             />
           </Column>
+          <Column lg={16} md={8} sm={4}>
+            {" "}
+            <br></br>
+          </Column>
           <Column lg={8} md={8} sm={4}>
-            <TextInput
-              id="facilityId"
-              onChange={(e) => setFacilityId(e.target.value)}
-              labelText={"Facility ID"}
+            <AutoComplete
+              name="siteName"
+              id="siteName"
+              allowFreeText={false}
+              value={facilityId}
+              onSelect={(id) => setFacilityId(id)}
+              label={
+                <>
+                  <FormattedMessage id="order.search.site.name" />{" "}
+                </>
+              }
+              style={{ width: "!important 100%" }}
+              suggestions={siteNames.length > 0 ? siteNames : []}
             />
           </Column>
         </Grid>
@@ -235,7 +280,6 @@ const PrePrint = () => {
           <Column lg={16} md={8} sm={4}>
             <Select
               id="selectSampleType"
-              className="selectSampleType"
               labelText="Sample Type"
               onChange={(e) => {
                 handleFetchSampleTypeTests(e);
@@ -304,16 +348,25 @@ const PrePrint = () => {
                 );
               })}
           </Column>
+          <Column lg={16} md={8} sm={4}>
+            {" "}
+            <br></br>
+          </Column>
           <Column lg={16} md={8} sm={4}>
             <FormattedMessage id="barcode.print.preprint.note" />
           </Column>
-          <div className="tabsLayout">
-            <Column lg={8} md={8} sm={4}>
-              <Button disabled={!selectedSampleTypeId} onClick={prePrintLabels}>
-                <FormattedMessage id="barcode.print.preprint.button" />
-              </Button>
-            </Column>
-          </div>
+          <Column lg={16} md={8} sm={4}>
+            {" "}
+            <br></br>
+          </Column>
+          <Column lg={8} md={8} sm={4}>
+            <Button
+              disabled={selectedTests.length == 0}
+              onClick={prePrintLabels}
+            >
+              <FormattedMessage id="barcode.print.preprint.button" />
+            </Button>
+          </Column>
         </Grid>
       </div>
       {renderBarcode && (

diff --git a/frontend/src/languages/en.json b/frontend/src/languages/en.json
@@ -872,5 +872,9 @@
   "report.labe.byPatient": "Report By Patient",
   "report.labe.byLabNumber": "Report By Lab Number",
   "report.labe.site": "Report By Site",
-  "report.labe.date": "Report By Date"
+  "report.labe.date": "Report By Date",
+  "label.barcode.labelsets": "Number of label sets",
+  "label.barcode.orderlabel": "Number of order labels per set",
+  "label.barcode.specimenlabel": "Number of specimen labels per set",
+  "label.barcode.totallabel": "Total Labels to Print"
 }
diff --git a/frontend/src/languages/fr.json b/frontend/src/languages/fr.json
@@ -804,5 +804,9 @@
   "report.labe.byPatient": "Rapport par Patient",
   "report.labe.byLabNumber": "Rapport par Numéro de Laboratoire",
   "report.labe.site": "Rapport par Site",
-  "report.labe.date": "Rapport par Date"
+  "report.labe.date": "Rapport par Date",
+  "label.barcode.labelsets": "Nombre d'ensembles d'étiquettes",
+  "label.barcode.orderlabel": "Nombre d'étiquettes de commande par ensemble",
+  "label.barcode.specimenlabel": "Nombre d'étiquettes d'échantillon par ensemble",
+  "label.barcode.totallabel": "Nombre total d'étiquettes à imprimer"
 }