Merge pull request #294 from RyanNerd/293-radio-buttons-2-tab

♻ refactor Change MedicinePage to use Tab instead of radio buttons
RyanNerd · Dec 8, 2021 · 37cc336 · 37cc336
2 parents 0fd43c6 + a69736d
commit 37cc336
Show file tree

Hide file tree

Showing 16 changed files with 2,041 additions and 650 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -98,7 +98,7 @@ module.exports = {
         'jsdoc/require-property-name': 1,
         'jsdoc/require-property-type': 1,
         'jsdoc/require-returns-check': 1,
-        'jsdoc/require-returns-description': 'off', // todo: when there is time
+        'jsdoc/require-returns-description': 'off',
         'jsdoc/require-returns-type': 1,
         'jsdoc/require-throws': 1,
         'jsdoc/require-yields': 1,

diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -33,10 +33,7 @@ const App = () => {
             <Main>
                 <Header />
                 <ClientHeader />
-
-                <div style={{marginLeft: '15px'}}>
-                    <LandingPage preferences={preferences} />
-                </div>
+                <LandingPage preferences={preferences} />
             </Main>
         </React.StrictMode>
     );

diff --git a/src/components/Pages/Grids/MedDrugLogHistory.tsx b/src/components/Pages/Grids/MedDrugLogHistory.tsx
@@ -1,5 +1,6 @@
 import {IGridLists} from 'components/Pages/Grids/DrugLogGrid';
 import DrugLogHistoryGrid from 'components/Pages/Grids/DrugLogHistoryGrid';
+import DisabledSpinner from 'components/Pages/ListGroups/DisabledSpinner';
 import Button from 'react-bootstrap/Button';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import React, {useEffect, useState} from 'reactn';
@@ -12,14 +13,15 @@ interface IProps {
     onDelete: (drugLogRecord: DrugLogRecord) => void;
     onEdit: (drugLogRecord: DrugLogRecord) => void;
     onPillClick: (pillboxId: number) => void;
+    disabled: boolean;
 }
 
 /**
  * Drug Log History Table
  * @param {IProps} props The props for this component
  */
 const MedDrugLogHistory = (props: IProps) => {
-    const {activeClient, gridLists, onDelete, onEdit, onPillClick} = props;
+    const {activeClient, gridLists, onDelete, onEdit, onPillClick, disabled} = props;
     const {drugLogList} = deconstructGridLists(gridLists);
     const [printing, setPrinting] = useState(false);
 
@@ -40,8 +42,8 @@ const MedDrugLogHistory = (props: IProps) => {
     return (
         <>
             <ButtonGroup className="d-print-none mr-3 mb-1">
-                <Button onClick={() => setPrinting(true)} variant="primary" size="sm">
-                    Print
+                <Button disabled={disabled} onClick={() => setPrinting(true)} variant="primary" size="sm">
+                    {disabled && <DisabledSpinner />} Print
                 </Button>
                 {hasPillboxItems && <span className="ml-3">💊 indicates drug logged from a Pillbox</span>}
             </ButtonGroup>

diff --git a/src/components/Pages/Grids/PillboxLogGrid.tsx b/src/components/Pages/Grids/PillboxLogGrid.tsx
@@ -1,6 +1,6 @@
 import {IGridLists} from 'components/Pages/Grids/DrugLogGrid';
 import PillPopover from 'components/Pages/Grids/PillPopover';
-import {TPillboxMedLog} from 'components/Pages/MedicinePage';
+import {TPillboxMedLog} from 'components/Pages/RxTabs/RxPillbox';
 import Table from 'react-bootstrap/Table';
 import React from 'reactn';
 import {BsColor, deconstructGridLists, randomString} from 'utility/common';

diff --git a/src/components/Pages/LandingPage.tsx b/src/components/Pages/LandingPage.tsx
@@ -109,10 +109,12 @@ const LandingPage = (props: IProps) => {
                 <Tab.Content>{loginPage}</Tab.Content>
             </Tab>
             <Tab disabled={!apiKey} eventKey="resident" title={<Title activeKey="resident">Clients</Title>}>
-                <Tab.Content>{clientPage}</Tab.Content>
+                <Tab.Content style={{marginLeft: 0}}>{clientPage}</Tab.Content>
             </Tab>
             <Tab disabled={!apiKey || !activeClient} eventKey="medicine" title={<Title activeKey="medicine">Rx</Title>}>
-                {activeClient && activeTabKey === 'medicine' && <Tab.Content>{medicinePage}</Tab.Content>}
+                {activeClient && activeTabKey === 'medicine' && (
+                    <Tab.Content style={{marginLeft: 0}}>{medicinePage}</Tab.Content>
+                )}
             </Tab>
             <Tab
                 disabled={!apiKey || !activeClient}

diff --git a/src/components/Pages/ListGroups/CheckoutListGroup.tsx b/src/components/Pages/ListGroups/CheckoutListGroup.tsx
@@ -7,14 +7,14 @@ import {ClientRecord, DrugLogRecord, MedicineRecord} from 'types/RecordTypes';
 import {clientFullName, getFormattedDate} from 'utility/common';
 
 interface IProps {
-    activeClient: ClientRecord;
+    clientRecord: ClientRecord;
     checkoutList: DrugLogRecord[];
     medicineList: MedicineRecord[];
     onClose?: () => void;
 }
 const CheckoutListGroup = (props: IProps) => {
-    const {checkoutList, medicineList, activeClient, onClose} = props;
-    const clientName = activeClient ? clientFullName(activeClient) : '';
+    const {checkoutList, medicineList, clientRecord, onClose} = props;
+    const clientName = clientRecord ? clientFullName(clientRecord) : '';
     const now = new Date();
     const today = getFormattedDate(now);
 

diff --git a/src/components/Pages/ListGroups/PillboxListGroup.tsx b/src/components/Pages/ListGroups/PillboxListGroup.tsx
@@ -1,7 +1,7 @@
 import {IGridLists} from 'components/Pages/Grids/DrugLogGrid';
 import PillboxLogGrid from 'components/Pages/Grids/PillboxLogGrid';
 import DisabledSpinner from 'components/Pages/ListGroups/DisabledSpinner';
-import {TPillboxMedLog} from 'components/Pages/MedicinePage';
+import {TPillboxMedLog} from 'components/Pages/RxTabs/RxPillbox';
 import Confirm from 'components/Pages/Modals/Confirm';
 import Alert from 'react-bootstrap/Alert';
 import Badge from 'react-bootstrap/Badge';

diff --git a/src/components/Pages/ManageDrugPage.tsx b/src/components/Pages/ManageDrugPage.tsx
@@ -234,7 +234,7 @@ const ManageDrugPage = (props: IProps): JSX.Element | null => {
             {showCheckoutPrint && activeClient && (
                 <Row className="mt-2">
                     <CheckoutListGroup
-                        activeClient={clientInfo}
+                        clientRecord={clientInfo}
                         checkoutList={checkoutList}
                         medicineList={medicineList}
                         onClose={() => setShowCheckoutPrint(false)}