Merge pull request #78 from RyanNerd/no-print

Print MedicineCheckout Enhancements and 🔧 Fixes
RyanNerd · Jan 24, 2021 · 3e1f7a5 · 3e1f7a5
2 parents e5ccba8 + ca60811
commit 3e1f7a5
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 13 deletions.
diff --git a/public/index.html b/public/index.html
@@ -17,10 +17,29 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <style type="text/css" media="print">
+      @page
+      {
+          size:  auto;   /* auto is the initial value */
+          margin: 0mm;  /* this affects the margin in the printer settings */
+      }
+
+      html
+      {
+          background-color: #FFFFFF;
+          margin: 0px;  /* this affects the margin on the html before sending to printer */
+      }
+
+      body
+      {
+          border: solid 1px blue ;
+          margin: 10mm 10mm 15mm 10mm; /* margin you want for the content */
+      }
+    </style>
     <title>℞Chart</title>
   </head>
   <body>
-    <h3 style="text-align: center">℞Chart <img src="%PUBLIC_URL%/prescription.svg" id="rxchart-img" width="30px" height="35px" alt="logo"/> <span style="color: steelblue" id="organization"> </span></h3>
+    <h3 style="text-align: center" class="d-print-none">℞Chart <img src="%PUBLIC_URL%/prescription.svg" id="rxchart-img" width="30px" height="35px" alt="logo"/> <span style="color: steelblue" id="organization"> </span></h3>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -88,7 +88,10 @@ const App = () => {
     return (
         <>
             {activeClient &&
-                <h4 style={{textAlign: "center"}}>
+                <h4
+                    className="d-print-none"
+                    style={{textAlign: "center"}}
+                >
                     <span style={{background: residentColor, color: residentForegroundColor}}>
                         {clientFullName(activeClient) + ' ' + clientDOB(activeClient)}
                     </span>

diff --git a/src/components/Pages/DrugHistoryPage.tsx b/src/components/Pages/DrugHistoryPage.tsx
@@ -31,9 +31,10 @@ const DrugHistoryPage = (): JSX.Element | null => {
 
             <DrugLogGrid
                 condensed="true"
-                columns={['Drug', 'Created', 'Updated', 'Amount']}
+                columns={['Drug', 'Created', 'Updated', 'Notes', 'Details']}
                 drugLog={drugLogList}
                 medicineList={medicineList}
+                includeCheckout={false}
                 otcList={otcList}
                 drugId={null}
             />

diff --git a/src/components/Pages/Grids/DrugLogGrid.tsx b/src/components/Pages/Grids/DrugLogGrid.tsx
@@ -13,10 +13,11 @@ import {
 
 interface IProps extends TableProps {
     checkoutOnly?: boolean
-    columns?: string[]
+    columns: string[]
     condensed?: string
     drugId?: number | null
     drugLog?: DrugLogRecord[]
+    includeCheckout?: boolean
     medicineList?: MedicineRecord[]
     onDelete?: (e: React.MouseEvent<HTMLElement>, r: DrugLogRecord) => void
     onEdit?: (e: React.MouseEvent<HTMLElement>, r: DrugLogRecord) => void
@@ -31,11 +32,11 @@ interface IProps extends TableProps {
  */
 const DrugLogGrid = (props: IProps): JSX.Element => {
     const {
-        checkoutOnly = false,
-        columns = ['Created', 'Updated', 'Amount', 'Out', 'In'],
+        columns,
         condensed = "false",
         drugId,
         drugLog = [],
+        includeCheckout = true,
         medicineList = [],
         onDelete,
         onEdit,
@@ -79,6 +80,7 @@ const DrugLogGrid = (props: IProps): JSX.Element => {
         if (!drugName || drugName.length === 0) {
             drugName = 'UNKNOWN - Medicine removed!';
         }
+
         const medicineId = drug.MedicineId;
         const drugStrength = drugColumnLookup(medicineId, 'Strength');
         const createdDate = new Date(drug.Created || '');
@@ -88,8 +90,8 @@ const DrugLogGrid = (props: IProps): JSX.Element => {
         const variantColor = getBsColor(variant);
         const fontWeight = isToday(updatedDate) ? 'bold' : undefined;
 
-        // If the checkoutOnly switch is true then suppress any rows that don't have an Out value
-        if (checkoutOnly && (drug.Out === null || drug.Out <= 0)) {
+        // If includeCheckout is false then supress any rows where drug.Out >0 or drug.In > 0
+        if (!includeCheckout && ((drug.Out && drug.Out >= 0) || (drug.In && drug.In >= 0) )) {
             return null;
         }
 
@@ -115,20 +117,25 @@ const DrugLogGrid = (props: IProps): JSX.Element => {
                     <span>{drugName}</span> <span>{drugStrength}</span>
                 </td>
                 }
+                {columns.includes('Created') &&
                 <td style={{
                     textAlign: 'center',
                     verticalAlign: "middle",
                     fontWeight
                 }}>
                     {getFormattedDate(createdDate)}
                 </td>
+                }
+                {columns.includes('Updated') &&
                 <td style={{
                     textAlign: 'center',
                     verticalAlign: "middle",
                     fontWeight
                 }}>
                     {getFormattedDate(updatedDate)}
                 </td>
+                }
+                {columns.includes('Notes')}
                 <td style={{
                     textAlign: 'center',
                     verticalAlign: "middle",
@@ -205,9 +212,9 @@ const DrugLogGrid = (props: IProps): JSX.Element => {
                     <span>Updated</span>
                 </th>
                 }
-                {columns.includes('Amount') &&
+                {columns.includes('Notes') &&
                 <th style={{textAlign: 'center', verticalAlign: "middle"}}>
-                    <span>Amount</span>
+                    <span>Amount/Notes</span>
                 </th>
                 }
                 {columns.includes('Out') &&

diff --git a/src/components/Pages/LandingPage.tsx b/src/components/Pages/LandingPage.tsx
@@ -23,6 +23,12 @@ const LandingPage = () => {
     const [errorDetails] = useGlobal('errorDetails');
     const [checkoutDisabled, setCheckoutDisabled] = useState(apiKey === null || !activeResident);
     const [drugLogList] = useGlobal('drugLogList');
+    const navBarElement = document.getElementsByClassName('nav nav-tabs');
+
+    if (navBarElement && navBarElement.length > 0) {
+        const navBar = navBarElement[0];
+        navBar.classList.add('d-print-none');
+    }
 
     useEffect(() => {
         if (apiKey && activeResident && drugLogList.length > 0) {

diff --git a/src/components/Pages/MedicineCheckout.tsx b/src/components/Pages/MedicineCheckout.tsx
@@ -31,7 +31,7 @@ const MedicineCheckout = () => {
         <ListGroup>
             <ListGroup.Item>
                 <Button
-                    className="mb-2"
+                    className="mb-2 d-print-none"
                     onClick={() => {
                         window.print();
                     }}
@@ -55,6 +55,7 @@ medications back in to the front office, I can be detained and arrested by the p
             </ListGroup.Item>
             <ListGroup.Item>
                 <DrugLogGrid
+                    columns={['Drug', 'Updated', 'Notes', 'Out', 'In']}
                     drugLog={checkoutList}
                     medicineList={medicineList}
                     drugId={null}

diff --git a/src/components/Pages/MedicinePage.tsx b/src/components/Pages/MedicinePage.tsx
@@ -231,6 +231,7 @@ const MedicinePage = (): JSX.Element | null => {
                         <DrugLogGrid
                             drugLog={drugLogList}
                             drugId={activeDrug && activeDrug.Id}
+                            columns={['Created', 'Updated','Notes']}
                             onEdit={(e, r) => addEditDrugLog(e, r)}
                             onDelete={(e, r) => setShowDeleteDrugLogRecord(r)}
                         />

diff --git a/src/components/Pages/OtcPage.tsx b/src/components/Pages/OtcPage.tsx
@@ -287,7 +287,7 @@ const OtcPage = (): JSX.Element | null => {
 
                         <Col sm="8">
                             <DrugLogGrid
-                                columns={['Drug', 'Created', 'Updated', 'Amount']}
+                                columns={['Drug', 'Created', 'Updated', 'Notes']}
                                 drugLog={otcLogList || []}
                                 otcList={otcList}
                                 onEdit={(e, r) => {

diff --git a/src/managers/ResidentManager.ts b/src/managers/ResidentManager.ts
@@ -62,7 +62,7 @@ const ResidentManager = (residentProvider: IResidentProvider): IResidentManager
             order_by: [
                 {column: 'LastName', direction: 'asc'},
                 {column: 'FirstName', direction: 'asc'},
-            ],
+            ]
         };
         return await residentProvider.search(searchCriteria)
         .then((residents) => {