From 6bf1d8dae7516a772633975b7828f9dcfb9be88e Mon Sep 17 00:00:00 2001 From: ryan Date: Fri, 3 Dec 2021 02:59:59 -0700 Subject: [PATCH 01/11] =?UTF-8?q?=E2=99=BB=20refactor=20[WIP]=20Change=20M?= =?UTF-8?q?edicinePage=20to=20use=20Tab=20instead=20of=20radio=20buttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Moved all components into a a `` container Closes #293 --- src/components/Pages/MedicinePage.tsx | 331 ++++++++++++++------------ 1 file changed, 173 insertions(+), 158 deletions(-) diff --git a/src/components/Pages/MedicinePage.tsx b/src/components/Pages/MedicinePage.tsx index 8c5e5dfb..e216b751 100644 --- a/src/components/Pages/MedicinePage.tsx +++ b/src/components/Pages/MedicinePage.tsx @@ -32,6 +32,8 @@ import OtcListGroup from './ListGroups/OtcListGroup'; import PillboxListGroup from './ListGroups/PillboxListGroup'; import DrugLogEdit from './Modals/DrugLogEdit'; import MedicineEdit from './Modals/MedicineEdit'; +import Tabs from 'react-bootstrap/Tabs'; +import Tab from 'react-bootstrap/Tab'; export type TPillboxMedLog = { Active: boolean; @@ -448,16 +450,12 @@ const MedicinePage = (props: IProps): JSX.Element | null => { return ( <> - - - + setDisplayType((key as DISPLAY_TYPE) || DISPLAY_TYPE.Medicine)} + > + { > Medicine + } + eventKey={DISPLAY_TYPE.Medicine} + > + + + addEditDrugLog()} + canvasId="med-barcode" + clientId={clientId} + disabled={isBusy} + editMedicine={(medicineRecord) => setShowMedicineEdit(medicineRecord)} + itemChanged={(id) => { + if (id < 0) { + setActivePillbox(pillboxList.find((p) => p.Id === Math.abs(id)) || null); + setDisplayType(DISPLAY_TYPE.Pillbox); + } else { + setActiveMed(medicineList.find((m) => m.Id === id) || null); + } + }} + itemList={medItemList} + lastTaken={activeMed?.Id ? calculateLastTaken(activeMed.Id, drugLogList) : null} + logDrug={(n) => handleLogDrugAmount(n)} + /> + + + + + + + + {activeMed?.Id && ( + setShowDeleteDrugLogRecord(drugLogRecord)} + onEdit={(r) => addEditDrugLog(r)} + onPillClick={(n) => handleOnPillClick(n)} + /> + )} + + + + + { > OTC + } + > + + + setShowMedicineEdit(medicineRecord)} + logOtcDrug={() => addEditDrugLog(undefined, true)} + logOtcDrugAmount={(n) => handleLogDrugAmount(n, true)} + otcList={otcList} + otcSelected={(medicineRecord) => setActiveOtc(medicineRecord)} + /> + + + +
+ OTC History +
+ setShowDeleteDrugLogRecord(drugLogRecord)} + onEdit={(drugLogRecord) => addEditDrugLog(drugLogRecord, true)} + gridLists={{ + medicineList: otcList, + drugLogList: otcLogList, + pillboxList: undefined, + pillboxItemList: undefined + }} + /> + + + + + + {/* Only show when: activeClient && activeClient.clientInfo */} + { > History - + } + > + addEditDrugLog(drugLogRecord)} + onDelete={(drugLogRecord) => setShowDeleteDrugLogRecord(drugLogRecord)} + onPillClick={(pillboxId) => handleOnPillClick(pillboxId)} + /> + + + {/* Show when activePillbox && activePillbox.Id */} + { > Pillbox - - setDisplayType(DISPLAY_TYPE.Print)} - size="sm" - type="radio" - value={DISPLAY_TYPE.Print} - variant="outline-success" - > - - Print Med Checkout{' '} - {checkoutList.length > 0 && {checkoutList.length}} - - - - - - {displayType === DISPLAY_TYPE.Medicine && ( - addEditDrugLog()} - canvasId="med-barcode" - clientId={clientId} - disabled={isBusy} - editMedicine={(medicineRecord) => setShowMedicineEdit(medicineRecord)} - itemChanged={(id) => { - if (id < 0) { - setActivePillbox(pillboxList.find((p) => p.Id === Math.abs(id)) || null); - setDisplayType(DISPLAY_TYPE.Pillbox); - } else { - setActiveMed(medicineList.find((m) => m.Id === id) || null); - } - }} - itemList={medItemList} - lastTaken={activeMed?.Id ? calculateLastTaken(activeMed.Id, drugLogList) : null} - logDrug={(n) => handleLogDrugAmount(n)} - /> - )} - - {displayType === DISPLAY_TYPE.OTC && ( - setShowMedicineEdit(medicineRecord)} - logOtcDrug={() => addEditDrugLog(undefined, true)} - logOtcDrugAmount={(n) => handleLogDrugAmount(n, true)} - otcList={otcList} - otcSelected={(medicineRecord) => setActiveOtc(medicineRecord)} - /> - )} - - {displayType === DISPLAY_TYPE.Pillbox && ( + } + > + + { } pillboxMedLogList={pillboxMedLogList} /> - )} - - {displayType === DISPLAY_TYPE.History && activeClient && activeClient.clientInfo && ( - - - addEditDrugLog(drugLogRecord)} - onDelete={(drugLogRecord) => setShowDeleteDrugLogRecord(drugLogRecord)} - onPillClick={(pillboxId) => handleOnPillClick(pillboxId)} - /> - - - )} - - {displayType === DISPLAY_TYPE.Print && activeClient && activeClient?.clientInfo && ( - - )} - - - - {displayType !== DISPLAY_TYPE.Print && displayType !== DISPLAY_TYPE.History && ( - - {displayType === DISPLAY_TYPE.Medicine && ( - - - - - - {activeMed?.Id && ( - setShowDeleteDrugLogRecord(drugLogRecord)} - onEdit={(r) => addEditDrugLog(r)} - onPillClick={(n) => handleOnPillClick(n)} - /> - )} - - )} - - {displayType === DISPLAY_TYPE.OTC && ( - -
- OTC History -
- setShowDeleteDrugLogRecord(drugLogRecord)} - onEdit={(drugLogRecord) => addEditDrugLog(drugLogRecord, true)} - gridLists={{ - medicineList: otcList, - drugLogList: otcLogList, - pillboxList: undefined, - pillboxItemList: undefined - }} + + + {displayType === DISPLAY_TYPE.Pillbox && activePillbox && activePillbox.Id && ( + savePillboxItem(pillboxItemRecord)} + pillboxItemList={pillboxItemList} /> - - )} - - {displayType === DISPLAY_TYPE.Pillbox && activePillbox && activePillbox.Id && ( - savePillboxItem(pillboxItemRecord)} - pillboxItemList={pillboxItemList} - /> - )} - - )} - + )} + + + + + {/* Only show when: activeClient && activeClient.clientInfo */} + setDisplayType(DISPLAY_TYPE.Print)} + size="sm" + type="radio" + value={DISPLAY_TYPE.Print} + variant="outline-success" + > + + Print Med Checkout{' '} + {checkoutList.length > 0 && {checkoutList.length}} + + + } + > + + + d.MedicineId === showMedicineEdit?.Id)} From 073d6830e0a0544f16c761e29318343a184c90e6 Mon Sep 17 00:00:00 2001 From: ryan Date: Fri, 3 Dec 2021 03:51:44 -0700 Subject: [PATCH 02/11] =?UTF-8?q?=F0=9F=91=97=20style=20Changed=20tab=20la?= =?UTF-8?q?yout=20for=20LandingPage=20and=20MedicinePage=20to=20left=20ali?= =?UTF-8?q?gn=20for=20more=20screen=20real=20estate?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Pages/LandingPage.tsx | 6 ++++-- src/components/Pages/MedicinePage.tsx | 5 +++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Pages/LandingPage.tsx b/src/components/Pages/LandingPage.tsx index c3a5fbc3..de6da63f 100644 --- a/src/components/Pages/LandingPage.tsx +++ b/src/components/Pages/LandingPage.tsx @@ -109,10 +109,12 @@ const LandingPage = (props: IProps) => { {loginPage} Clients}> - {clientPage} + {clientPage} Rx}> - {activeClient && activeTabKey === 'medicine' && {medicinePage}} + {activeClient && activeTabKey === 'medicine' && ( + {medicinePage} + )} { onSelect={(key) => setDisplayType((key as DISPLAY_TYPE) || DISPLAY_TYPE.Medicine)} > { { {/* Only show when: activeClient && activeClient.clientInfo */} { {/* Show when activePillbox && activePillbox.Id */} { {/* Only show when: activeClient && activeClient.clientInfo */} Date: Fri, 3 Dec 2021 13:54:27 -0700 Subject: [PATCH 03/11] =?UTF-8?q?=E2=99=BB=20refactor=20Moved=20a=20good?= =?UTF-8?q?=20chunk=20of=20logic=20from=20MedicinePage=20to=20RxMedicine?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Pages/MedicinePage.tsx | 210 ++-------------- src/components/Pages/RxTabs/RxMedicine.tsx | 280 +++++++++++++++++++++ 2 files changed, 307 insertions(+), 183 deletions(-) create mode 100644 src/components/Pages/RxTabs/RxMedicine.tsx diff --git a/src/components/Pages/MedicinePage.tsx b/src/components/Pages/MedicinePage.tsx index a87cd6e9..fc984c5a 100644 --- a/src/components/Pages/MedicinePage.tsx +++ b/src/components/Pages/MedicinePage.tsx @@ -1,20 +1,19 @@ import MedDrugLogHistory from 'components/Pages/Grids/MedDrugLogHistory'; import CheckoutListGroup from 'components/Pages/ListGroups/CheckoutListGroup'; -import {IDropdownItem} from 'components/Pages/ListGroups/MedDropdown'; import DeleteDrugLogModal from 'components/Pages/Modals/DeleteDrugLogModal'; -import DeleteMedicineModal from 'components/Pages/Modals/DeleteMedicineModal'; +import RxMedicine from 'components/Pages/RxTabs/RxMedicine'; import DrugLogToast from 'components/Pages/Toasts/DrugLogToast'; import Badge from 'react-bootstrap/Badge'; -import Button from 'react-bootstrap/Button'; import Col from 'react-bootstrap/Col'; import ListGroup from 'react-bootstrap/ListGroup'; import Row from 'react-bootstrap/Row'; +import Tab from 'react-bootstrap/Tab'; +import Tabs from 'react-bootstrap/Tabs'; import ToggleButton from 'react-bootstrap/ToggleButton'; import React, {useEffect, useGlobal, useState} from 'reactn'; import {DrugLogRecord, MedicineRecord, newDrugLogRecord, PillboxItemRecord, PillboxRecord} from 'types/RecordTypes'; import { asyncWrapper, - calculateLastTaken, clientFullName, getCheckoutList, getDrugName, @@ -24,16 +23,12 @@ import { SortDirection } from 'utility/common'; import TabContent from '../../styles/common.css'; -import LastTakenButton from './Buttons/LastTakenButton'; import DrugLogGrid from './Grids/DrugLogGrid'; import PillboxCard from './Grids/PillboxCard'; -import MedListGroup from './ListGroups/MedListGroup'; import OtcListGroup from './ListGroups/OtcListGroup'; import PillboxListGroup from './ListGroups/PillboxListGroup'; import DrugLogEdit from './Modals/DrugLogEdit'; import MedicineEdit from './Modals/MedicineEdit'; -import Tabs from 'react-bootstrap/Tabs'; -import Tab from 'react-bootstrap/Tab'; export type TPillboxMedLog = { Active: boolean; @@ -66,7 +61,6 @@ interface IProps { */ const MedicinePage = (props: IProps): JSX.Element | null => { const [activeClient, setActiveClient] = useGlobal('activeClient'); - const [activeMed, setActiveMed] = useState(null); const [activeOtc, setActiveOtc] = useState(null); const [activePillbox, setActivePillbox] = useState(null); const [activeTabKey, setActiveTabKey] = useState(props.activeTabKey); @@ -75,16 +69,11 @@ const MedicinePage = (props: IProps): JSX.Element | null => { const [displayType, setDisplayType] = useState(DISPLAY_TYPE.Medicine); const [, setErrorDetails] = useGlobal('__errorDetails'); const [isBusy, setIsBusy] = useState(false); - const [lastTaken, setLastTaken] = useState( - activeMed?.Id && activeClient?.drugLogList ? calculateLastTaken(activeMed.Id, activeClient.drugLogList) : null - ); - const [medItemList, setMedItemList] = useState([]); const [mm] = useGlobal('medicineManager'); const [otcList, setOtcList] = useGlobal('otcList'); const [otcLogList, setOtcLogList] = useState([]); const [pillboxMedLogList, setPillboxMedLogList] = useState([]); const [showDeleteDrugLogRecord, setShowDeleteDrugLogRecord] = useState(null); - const [showDeleteMedicine, setShowDeleteMedicine] = useState(0); const [showDrugLog, setShowDrugLog] = useState(null); const [showMedicineEdit, setShowMedicineEdit] = useState(null); const [toast, setToast] = useState(null); @@ -159,72 +148,15 @@ const MedicinePage = (props: IProps): JSX.Element | null => { } }, [activeClient, activePillbox, setPillboxMedLogList]); - // Build the dropdown items for the Medicine dropdown - useEffect(() => { - const itemList = [] as IDropdownItem[]; - if (activeClient) { - const {drugLogList, pillboxList, pillboxItemList, medicineList} = activeClient; - const checkoutList = getCheckoutList(drugLogList); - - // Build the itemList with any pillboxes and meds from medicineList - let pbCnt = 0; - pillboxList.forEach((p) => { - const pbItems = pillboxItemList.filter((pbi) => pbi.PillboxId === p.Id); - const loggedPillboxItems = drugLogList.filter( - (d) => d.Updated && isToday(d.Updated) && pbItems.find((pbi) => pbi.Id === d.PillboxItemId) - ); - if (loggedPillboxItems.length === 0) { - itemList.push({ - id: -(p.Id as number), - description: p.Name.toUpperCase(), - subtext: null - }); // Pillbox have negative id - pbCnt++; - } - }); - if (pbCnt > 0) itemList.push({id: 0, description: 'divider', subtext: null}); - - medicineList.forEach((m) => { - if (m.Active) { - const strength = m.Strength || ''; - const other = m.OtherNames?.length > 0 ? `(${m.OtherNames})` : null; - const checkoutMed = checkoutList.find((c) => c.MedicineId === m.Id); - const description = (checkoutMed ? 'โŽ ' : '') + m.Drug + ' ' + strength; - itemList.push({ - id: m.Id as number, - description, - subtext: other - }); - } - }); - - // If activeMed is null, and we have med items in the list then set the initial activeMed to the first item - if (activeMed === null && itemList.length > 0) { - const medsOnly = itemList.filter((i) => i.id > 0); - setActiveMed(medsOnly.length === 0 ? null : medicineList.find((m) => m.Id === medsOnly[0].id) || null); - } - } else { - setActiveMed(null); - } - setMedItemList(itemList); - }, [activeClient, activeMed]); - - useEffect(() => { - setLastTaken( - activeClient && activeMed && activeMed.Id - ? calculateLastTaken(activeMed.Id, activeClient.drugLogList) - : null - ); - }, [activeClient, activeMed, activeMed?.Id]); - // If there isn't an active client, or this isn't the active tab then do not render if (activeTabKey !== 'medicine' || !clientId || !activeClient) return null; const medicineOtcList = activeClient.medicineList.concat(otcList) as MedicineRecord[]; /** + * todo: Move to RxOtc once created * Given a MedicineRecord object Update/Insert the record and rehydrate the global otcList / medicineList - * Set the activeOtc or the activeMed with the updated medicine (if Active) + * Set the activeOtc with the updated medicine (if Active) * @param {MedicineRecord} med Medicine record object */ const saveMedicine = async (med: MedicineRecord) => { @@ -232,43 +164,10 @@ const MedicinePage = (props: IProps): JSX.Element | null => { const [e, m] = (await asyncWrapper(mm.updateMedicine(med))) as [unknown, Promise]; if (e) await setErrorDetails(e); const updatedMedicineRecord = await m; - if (updatedMedicineRecord.OTC) { - const [errLoadOtc, otcMeds] = (await asyncWrapper(mm.loadOtcList())) as [ - unknown, - Promise - ]; - if (errLoadOtc) await setErrorDetails(errLoadOtc); - else await setOtcList(await otcMeds); - setActiveOtc(updatedMedicineRecord.Active ? updatedMedicineRecord : null); - } else { - const [errLoadMeds, meds] = (await asyncWrapper(mm.loadMedicineList(clientId))) as [ - unknown, - Promise - ]; - if (errLoadMeds) await setErrorDetails(errLoadMeds); - else await setActiveClient({...activeClient, medicineList: await meds}); - const activeMeds = (await meds).filter((m) => m.Active); - setActiveMed( - updatedMedicineRecord.Active ? updatedMedicineRecord : activeMeds.length === 0 ? null : activeMeds[0] - ); - } - await setIsBusy(false); - }; - - /** - * Given a MedicineRecord PK delete the medicine - * @param {number} medicineId The PK of the Medicine record to delete - */ - const deleteMedicine = async (medicineId: number) => { - await setIsBusy(true); - const [e, deleted] = (await asyncWrapper(mm.deleteMedicine(medicineId))) as [unknown, Promise]; - if (e) await setErrorDetails(e); - if (await deleted) - await setActiveClient({ - ...activeClient, - medicineList: await mm.loadMedicineList(clientId) - }); - else await setErrorDetails(new Error('Unable to delete medicine. Id: ' + medicineId)); + const [errLoadOtc, otcMeds] = (await asyncWrapper(mm.loadOtcList())) as [unknown, Promise]; + if (errLoadOtc) await setErrorDetails(errLoadOtc); + else await setOtcList(await otcMeds); + setActiveOtc(updatedMedicineRecord.Active ? updatedMedicineRecord : null); await setIsBusy(false); }; @@ -393,15 +292,14 @@ const MedicinePage = (props: IProps): JSX.Element | null => { /** * Fires when user clicks on +Log or the drug log edit button * @param {DrugLogRecord} drugLogInfo The drugLog record object - * @param {boolean} isOtc True if drug to log is an OTC med */ - const addEditDrugLog = (drugLogInfo?: DrugLogRecord, isOtc?: boolean) => { + const addEditDrugLog = (drugLogInfo?: DrugLogRecord) => { const drugLogRecord = drugLogInfo ? {...drugLogInfo} : ({ Id: null, ResidentId: clientId, - MedicineId: isOtc ? activeOtc?.Id : activeMed?.Id, + MedicineId: activeOtc?.Id, Notes: '' } as DrugLogRecord); setShowDrugLog(drugLogRecord); @@ -410,10 +308,9 @@ const MedicinePage = (props: IProps): JSX.Element | null => { /** * Fires when the Log 1...4 buttons are clicked. * @param {number} amount The number of pills (medication) taken - * @param {boolean} isOtc True if the amount logged is an OTC med */ - const handleLogDrugAmount = (amount: number, isOtc?: boolean) => { - const medicineId = isOtc ? activeOtc?.Id : activeMed?.Id; + const handleLogOtcDrugAmount = (amount: number) => { + const medicineId = activeOtc?.Id; const drugLogInfo = {...newDrugLogRecord}; drugLogInfo.ResidentId = clientId; drugLogInfo.MedicineId = medicineId as number; @@ -455,7 +352,7 @@ const MedicinePage = (props: IProps): JSX.Element | null => { onSelect={(key) => setDisplayType((key as DISPLAY_TYPE) || DISPLAY_TYPE.Medicine)} > { } eventKey={DISPLAY_TYPE.Medicine} > - - - addEditDrugLog()} - canvasId="med-barcode" - clientId={clientId} - disabled={isBusy} - editMedicine={(medicineRecord) => setShowMedicineEdit(medicineRecord)} - itemChanged={(id) => { - if (id < 0) { - setActivePillbox(pillboxList.find((p) => p.Id === Math.abs(id)) || null); - setDisplayType(DISPLAY_TYPE.Pillbox); - } else { - setActiveMed(medicineList.find((m) => m.Id === id) || null); - } - }} - itemList={medItemList} - lastTaken={activeMed?.Id ? calculateLastTaken(activeMed.Id, drugLogList) : null} - logDrug={(n) => handleLogDrugAmount(n)} - /> - - - - - - - - {activeMed?.Id && ( - setShowDeleteDrugLogRecord(drugLogRecord)} - onEdit={(r) => addEditDrugLog(r)} - onPillClick={(n) => handleOnPillClick(n)} - /> - )} - - - + {activeClient && ( + setShowDrugLog(d)} + mm={mm} + pillboxSelected={(id) => { + setActivePillbox(pillboxList.find((p) => p.Id === id) || null); + setDisplayType(DISPLAY_TYPE.Pillbox); + }} + /> + )} { disabled={otcList.length === 0 || isBusy} drugLogList={drugLogList} editOtcMedicine={(medicineRecord) => setShowMedicineEdit(medicineRecord)} - logOtcDrug={() => addEditDrugLog(undefined, true)} - logOtcDrugAmount={(n) => handleLogDrugAmount(n, true)} + logOtcDrug={() => addEditDrugLog(undefined)} + logOtcDrugAmount={(n) => handleLogOtcDrugAmount(n)} otcList={otcList} otcSelected={(medicineRecord) => setActiveOtc(medicineRecord)} /> @@ -568,7 +426,7 @@ const MedicinePage = (props: IProps): JSX.Element | null => { setShowDeleteDrugLogRecord(drugLogRecord)} - onEdit={(drugLogRecord) => addEditDrugLog(drugLogRecord, true)} + onEdit={(drugLogRecord) => addEditDrugLog(drugLogRecord)} gridLists={{ medicineList: otcList, drugLogList: otcLogList, @@ -746,20 +604,6 @@ const MedicinePage = (props: IProps): JSX.Element | null => { show={showDeleteDrugLogRecord !== null} /> - m.Id === showDeleteMedicine) as MedicineRecord} - onSelect={(medicineId) => { - setShowDeleteMedicine(0); - if (medicineId > 0) { - deleteMedicine(medicineId).then(() => { - if (medicineList.length > 0) setActiveMed(medicineList[0]); - else setActiveMed(null); - }); - } - }} - show={showDeleteMedicine !== 0} - /> - setToast(null)} diff --git a/src/components/Pages/RxTabs/RxMedicine.tsx b/src/components/Pages/RxTabs/RxMedicine.tsx new file mode 100644 index 00000000..f3df6622 --- /dev/null +++ b/src/components/Pages/RxTabs/RxMedicine.tsx @@ -0,0 +1,280 @@ +import LastTakenButton from 'components/Pages/Buttons/LastTakenButton'; +import DrugLogGrid from 'components/Pages/Grids/DrugLogGrid'; +import {IDropdownItem} from 'components/Pages/ListGroups/MedDropdown'; +import MedListGroup from 'components/Pages/ListGroups/MedListGroup'; +import DeleteDrugLogModal from 'components/Pages/Modals/DeleteDrugLogModal'; +import MedicineEdit from 'components/Pages/Modals/MedicineEdit'; +import DrugLogToast from 'components/Pages/Toasts/DrugLogToast'; +import {IMedicineManager} from 'managers/MedicineManager'; +import Button from 'react-bootstrap/Button'; +import Col from 'react-bootstrap/Col'; +import ListGroup from 'react-bootstrap/ListGroup'; +import Row from 'react-bootstrap/Row'; +import React, {useEffect, useGlobal, useState} from 'reactn'; +import {TClient} from 'reactn/default'; +import {DrugLogRecord, MedicineRecord, newDrugLogRecord} from 'types/RecordTypes'; +import {asyncWrapper, calculateLastTaken, clientFullName, getCheckoutList, getDrugName, isToday} from 'utility/common'; + +interface IProps { + editDrugLog: (drugLogInfo: DrugLogRecord) => void; // todo: bring this down + mm: IMedicineManager; + pillboxSelected: (id: number) => void; +} + +const RxMedicine = (props: IProps) => { + const {editDrugLog, mm, pillboxSelected} = props; + const [activeMed, setActiveMed] = useState(null); + const [activeClient, setActiveClient] = useGlobal('activeClient'); + const clientId = activeClient?.clientInfo.Id; + const [, setErrorDetails] = useGlobal('__errorDetails'); + const [isBusy, setIsBusy] = useState(false); + const [showDeleteDrugLogRecord, setShowDeleteDrugLogRecord] = useState(null); + const [showMedicineEdit, setShowMedicineEdit] = useState(null); + const [medItemList, setMedItemList] = useState([]); + const {drugLogList, pillboxList, pillboxItemList, medicineList} = activeClient as TClient; + const [toast, setToast] = useState(null); + + // todo: determine if this is needed + // const [lastTaken, setLastTaken] = useState( + // activeMed?.Id && + // activeClient?.drugLogList ? calculateLastTaken(activeMed.Id, activeClient.drugLogList) : null + // ); + // useEffect(() => { + // setLastTaken( + // activeClient && activeMed && activeMed.Id + // ? calculateLastTaken(activeMed.Id, activeClient.drugLogList) + // : null + // ); + // }, [activeClient, activeMed, activeMed?.Id]); + + // Build the dropdown items for the Medicine dropdown + useEffect(() => { + const itemList = [] as IDropdownItem[]; + if (activeClient) { + const {drugLogList, pillboxList, pillboxItemList, medicineList} = activeClient; + const checkoutList = getCheckoutList(drugLogList); + + // Build the itemList with any pillboxes and meds from medicineList + let pbCnt = 0; + pillboxList.forEach((p) => { + const pbItems = pillboxItemList.filter((pbi) => pbi.PillboxId === p.Id); + const loggedPillboxItems = drugLogList.filter( + (d) => d.Updated && isToday(d.Updated) && pbItems.find((pbi) => pbi.Id === d.PillboxItemId) + ); + if (loggedPillboxItems.length === 0) { + itemList.push({ + id: -(p.Id as number), + description: p.Name.toUpperCase(), + subtext: null + }); // Pillbox have negative id + pbCnt++; + } + }); + if (pbCnt > 0) itemList.push({id: 0, description: 'divider', subtext: null}); + + medicineList.forEach((m) => { + if (m.Active) { + const strength = m.Strength || ''; + const other = m.OtherNames?.length > 0 ? `(${m.OtherNames})` : null; + const checkoutMed = checkoutList.find((c) => c.MedicineId === m.Id); + const description = (checkoutMed ? 'โŽ ' : '') + m.Drug + ' ' + strength; + itemList.push({ + id: m.Id as number, + description, + subtext: other + }); + } + }); + + // If activeMed is null, and we have med items in the list then set the initial activeMed to the first item + if (activeMed === null && itemList.length > 0) { + const medsOnly = itemList.filter((i) => i.id > 0); + setActiveMed(medsOnly.length === 0 ? null : medicineList.find((m) => m.Id === medsOnly[0].id) || null); + } + } else { + setActiveMed(null); + } + setMedItemList(itemList); + }, [activeClient, activeMed]); + + /** + * Given a MedicineRecord object Update/Insert the record and rehydrate the global otcList / medicineList + * Set the activeOtc or the activeMed with the updated medicine (if Active) + * @param {MedicineRecord} med Medicine record object + */ + const saveMedicine = async (med: MedicineRecord) => { + await setIsBusy(true); + const [e, m] = (await asyncWrapper(mm.updateMedicine(med))) as [unknown, Promise]; + if (e) await setErrorDetails(e); + const updatedMedicineRecord = await m; + + const [errLoadMeds, meds] = (await asyncWrapper(mm.loadMedicineList(clientId as number))) as [ + unknown, + Promise + ]; + if (errLoadMeds) await setErrorDetails(errLoadMeds); + else await setActiveClient({...(activeClient as TClient), medicineList: await meds}); + const activeMeds = (await meds).filter((m) => m.Active); + setActiveMed( + updatedMedicineRecord.Active ? updatedMedicineRecord : activeMeds.length === 0 ? null : activeMeds[0] + ); + await setIsBusy(false); + }; + + /** + * Given a DrugLogRecord Update or Insert the record and rehydrate the drugLogList + * @param {DrugLogRecord} drugLog Druglog record object + */ + const saveDrugLog = async (drugLog: DrugLogRecord): Promise => { + await setIsBusy(true); + const [e, updatedDrugLog] = (await asyncWrapper(mm.updateDrugLog(drugLog))) as [ + unknown, + Promise + ]; + if (e) await setErrorDetails(e); + else { + const [errLoadLog, drugLogs] = (await asyncWrapper(mm.loadDrugLog(clientId as number, 5))) as [ + unknown, + Promise + ]; + if (errLoadLog) await setErrorDetails(errLoadLog); + else await setActiveClient({...(activeClient as TClient), drugLogList: await drugLogs}); + } + await setIsBusy(false); + return await updatedDrugLog; + }; + + /** + * Fires when the Log 1...4 buttons are clicked. + * @param {number} amount The number of pills (medication) taken + */ + const handleLogDrugAmount = (amount: number) => { + setIsBusy(true); + const medicineId = activeMed?.Id; + const drugLogInfo = {...newDrugLogRecord}; + drugLogInfo.ResidentId = clientId as number; + drugLogInfo.MedicineId = medicineId as number; + drugLogInfo.Notes = amount.toString(); + saveDrugLog(drugLogInfo).then((d) => setToast([d])); + setIsBusy(false); + }; + + /** + * Fires when user clicks on +Log or the drug log edit button + * @param {DrugLogRecord} drugLogInfo The drugLog record object + */ + const handleAddEditDrugLog = (drugLogInfo?: DrugLogRecord) => { + const drugLogRecord = drugLogInfo + ? {...drugLogInfo} + : ({ + Id: null, + ResidentId: clientId, + MedicineId: activeMed?.Id, + Notes: '' + } as DrugLogRecord); + editDrugLog(drugLogRecord); + }; + + /** + * Convenience function to get drug name + * @param {number} medicineId The PK of the Medicine table + * @returns {string | undefined} + */ + const drugName = (medicineId: number): string | undefined => { + return getDrugName(medicineId, medicineList); + }; + + if (activeClient === null) return null; + return ( + <> + + + handleAddEditDrugLog()} + canvasId="med-barcode" + clientId={clientId as number} + disabled={isBusy} + editMedicine={(medicineRecord) => setShowMedicineEdit(medicineRecord)} + itemChanged={(id) => { + if (id < 0) { + pillboxSelected(Math.abs(id)); + } else { + setActiveMed(medicineList.find((m) => m.Id === id) || null); + } + }} + itemList={medItemList} + lastTaken={activeMed?.Id ? calculateLastTaken(activeMed.Id, drugLogList) : null} + logDrug={(n) => handleLogDrugAmount(n)} + /> + + + + + + + + + {activeMed?.Id && ( + setShowDeleteDrugLogRecord(drugLogRecord)} + onEdit={(r) => handleAddEditDrugLog(r)} + onPillClick={(n) => alert('handleOnPillClick(n)')} + /> + )} + + + + + { + setShowDeleteDrugLogRecord(null); + if (drugLogRecord) { + mm.deleteDrugLog(showDeleteDrugLogRecord?.Id as number).then(() => { + mm.loadDrugLog(clientId as number, 5).then((drugLogRecords) => { + setActiveClient({...(activeClient as TClient), drugLogList: drugLogRecords}); + }); + }); + } + }} + show={showDeleteDrugLogRecord !== null} + /> + + d.MedicineId === showMedicineEdit?.Id)} + drugInfo={showMedicineEdit as MedicineRecord} + existingDrugs={showMedicineEdit?.Id === null ? medicineList.map((m) => m.Drug) : []} + fullName={clientFullName(activeClient.clientInfo)} + onClose={(medicineRecord) => { + setShowMedicineEdit(null); + if (medicineRecord) saveMedicine(medicineRecord); + }} + show={showMedicineEdit !== null} + /> + + setToast(null)} + show={toast !== null} + toast={toast as DrugLogRecord[]} + /> + + ); +}; + +export default RxMedicine; From 869cf4567c26f83b26739bdca28de44b7ed0410f Mon Sep 17 00:00:00 2001 From: ryan Date: Fri, 3 Dec 2021 14:05:33 -0700 Subject: [PATCH 04/11] =?UTF-8?q?=E2=99=BB=20refactor=20Moved=20``=20logic=20from=20MedicinePage=20to=20RxMedicine?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Pages/RxTabs/RxMedicine.tsx | 33 +++++++++++++--------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/src/components/Pages/RxTabs/RxMedicine.tsx b/src/components/Pages/RxTabs/RxMedicine.tsx index f3df6622..7ac10b33 100644 --- a/src/components/Pages/RxTabs/RxMedicine.tsx +++ b/src/components/Pages/RxTabs/RxMedicine.tsx @@ -3,6 +3,7 @@ import DrugLogGrid from 'components/Pages/Grids/DrugLogGrid'; import {IDropdownItem} from 'components/Pages/ListGroups/MedDropdown'; import MedListGroup from 'components/Pages/ListGroups/MedListGroup'; import DeleteDrugLogModal from 'components/Pages/Modals/DeleteDrugLogModal'; +import DrugLogEdit from 'components/Pages/Modals/DrugLogEdit'; import MedicineEdit from 'components/Pages/Modals/MedicineEdit'; import DrugLogToast from 'components/Pages/Toasts/DrugLogToast'; import {IMedicineManager} from 'managers/MedicineManager'; @@ -16,13 +17,13 @@ import {DrugLogRecord, MedicineRecord, newDrugLogRecord} from 'types/RecordTypes import {asyncWrapper, calculateLastTaken, clientFullName, getCheckoutList, getDrugName, isToday} from 'utility/common'; interface IProps { - editDrugLog: (drugLogInfo: DrugLogRecord) => void; // todo: bring this down + // editDrugLog: (drugLogInfo: DrugLogRecord) => void; // todo: bring this down mm: IMedicineManager; pillboxSelected: (id: number) => void; } const RxMedicine = (props: IProps) => { - const {editDrugLog, mm, pillboxSelected} = props; + const {mm, pillboxSelected} = props; const [activeMed, setActiveMed] = useState(null); const [activeClient, setActiveClient] = useGlobal('activeClient'); const clientId = activeClient?.clientInfo.Id; @@ -33,6 +34,7 @@ const RxMedicine = (props: IProps) => { const [medItemList, setMedItemList] = useState([]); const {drugLogList, pillboxList, pillboxItemList, medicineList} = activeClient as TClient; const [toast, setToast] = useState(null); + const [showDrugLog, setShowDrugLog] = useState(null); // todo: determine if this is needed // const [lastTaken, setLastTaken] = useState( @@ -172,16 +174,7 @@ const RxMedicine = (props: IProps) => { MedicineId: activeMed?.Id, Notes: '' } as DrugLogRecord); - editDrugLog(drugLogRecord); - }; - - /** - * Convenience function to get drug name - * @param {number} medicineId The PK of the Medicine table - * @returns {string | undefined} - */ - const drugName = (medicineId: number): string | undefined => { - return getDrugName(medicineId, medicineList); + setShowDrugLog(drugLogRecord); }; if (activeClient === null) return null; @@ -241,7 +234,9 @@ const RxMedicine = (props: IProps) => { { setShowDeleteDrugLogRecord(null); if (drugLogRecord) { @@ -273,6 +268,18 @@ const RxMedicine = (props: IProps) => { show={toast !== null} toast={toast as DrugLogRecord[]} /> + + { + setShowDrugLog(null); + if (drugLogRecord) + saveDrugLog(drugLogRecord).then((updatedDrugLogRecord) => setToast([updatedDrugLogRecord])); + }} + onHide={() => setShowDrugLog(null)} + show={showDrugLog !== null} + /> ); }; From ce70355ea5186706df2c1e1f62de1c2de7f3fd58 Mon Sep 17 00:00:00 2001 From: ryan Date: Fri, 3 Dec 2021 14:05:44 -0700 Subject: [PATCH 05/11] =?UTF-8?q?=E2=99=BB=20refactor=20Moved=20``=20logic=20from=20MedicinePage=20to=20RxMedicine?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Pages/MedicinePage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Pages/MedicinePage.tsx b/src/components/Pages/MedicinePage.tsx index fc984c5a..8ca73cc2 100644 --- a/src/components/Pages/MedicinePage.tsx +++ b/src/components/Pages/MedicinePage.tsx @@ -373,7 +373,6 @@ const MedicinePage = (props: IProps): JSX.Element | null => { > {activeClient && ( setShowDrugLog(d)} mm={mm} pillboxSelected={(id) => { setActivePillbox(pillboxList.find((p) => p.Id === id) || null); From 85586ca3161e6c14e31b5d1a7b18de5b7f8b8c9b Mon Sep 17 00:00:00 2001 From: ryan Date: Fri, 3 Dec 2021 16:56:11 -0700 Subject: [PATCH 06/11] =?UTF-8?q?=E2=99=BB=20refactor=20Factored=20out=20r?= =?UTF-8?q?emaining=20Rx=20Tab=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - RxHistory - RxOtc - RxPillbox - RxPrint --- .../Pages/ListGroups/CheckoutListGroup.tsx | 6 +- src/components/Pages/ManageDrugPage.tsx | 2 +- src/components/Pages/MedicinePage.tsx | 454 ++---------------- src/components/Pages/RxTabs/RxHistory.tsx | 126 +++++ src/components/Pages/RxTabs/RxOtc.tsx | 200 ++++++++ src/components/Pages/RxTabs/RxPillbox.tsx | 200 ++++++++ src/components/Pages/RxTabs/RxPrint.tsx | 25 + 7 files changed, 583 insertions(+), 430 deletions(-) create mode 100644 src/components/Pages/RxTabs/RxHistory.tsx create mode 100644 src/components/Pages/RxTabs/RxOtc.tsx create mode 100644 src/components/Pages/RxTabs/RxPillbox.tsx create mode 100644 src/components/Pages/RxTabs/RxPrint.tsx diff --git a/src/components/Pages/ListGroups/CheckoutListGroup.tsx b/src/components/Pages/ListGroups/CheckoutListGroup.tsx index ce51b6d3..667409b1 100644 --- 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/ManageDrugPage.tsx b/src/components/Pages/ManageDrugPage.tsx index cc214468..f025afb5 100644 --- 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 && ( setShowCheckoutPrint(false)} diff --git a/src/components/Pages/MedicinePage.tsx b/src/components/Pages/MedicinePage.tsx index 8ca73cc2..0c44f670 100644 --- a/src/components/Pages/MedicinePage.tsx +++ b/src/components/Pages/MedicinePage.tsx @@ -1,34 +1,15 @@ -import MedDrugLogHistory from 'components/Pages/Grids/MedDrugLogHistory'; -import CheckoutListGroup from 'components/Pages/ListGroups/CheckoutListGroup'; -import DeleteDrugLogModal from 'components/Pages/Modals/DeleteDrugLogModal'; +import RxHistory from 'components/Pages/RxTabs/RxHistory'; import RxMedicine from 'components/Pages/RxTabs/RxMedicine'; -import DrugLogToast from 'components/Pages/Toasts/DrugLogToast'; +import RxOtc from 'components/Pages/RxTabs/RxOtc'; +import RxPillbox from 'components/Pages/RxTabs/RxPillbox'; +import RxPrint from 'components/Pages/RxTabs/RxPrint'; import Badge from 'react-bootstrap/Badge'; -import Col from 'react-bootstrap/Col'; -import ListGroup from 'react-bootstrap/ListGroup'; -import Row from 'react-bootstrap/Row'; import Tab from 'react-bootstrap/Tab'; import Tabs from 'react-bootstrap/Tabs'; import ToggleButton from 'react-bootstrap/ToggleButton'; import React, {useEffect, useGlobal, useState} from 'reactn'; -import {DrugLogRecord, MedicineRecord, newDrugLogRecord, PillboxItemRecord, PillboxRecord} from 'types/RecordTypes'; -import { - asyncWrapper, - clientFullName, - getCheckoutList, - getDrugName, - getMedicineRecord, - isToday, - multiSort, - SortDirection -} from 'utility/common'; -import TabContent from '../../styles/common.css'; -import DrugLogGrid from './Grids/DrugLogGrid'; -import PillboxCard from './Grids/PillboxCard'; -import OtcListGroup from './ListGroups/OtcListGroup'; -import PillboxListGroup from './ListGroups/PillboxListGroup'; -import DrugLogEdit from './Modals/DrugLogEdit'; -import MedicineEdit from './Modals/MedicineEdit'; +import {DrugLogRecord, PillboxRecord} from 'types/RecordTypes'; +import {getCheckoutList} from 'utility/common'; export type TPillboxMedLog = { Active: boolean; @@ -60,52 +41,19 @@ interface IProps { * @returns {JSX.Element | null} */ const MedicinePage = (props: IProps): JSX.Element | null => { - const [activeClient, setActiveClient] = useGlobal('activeClient'); - const [activeOtc, setActiveOtc] = useState(null); - const [activePillbox, setActivePillbox] = useState(null); + const [activeClient] = useGlobal('activeClient'); + const [, setActivePillbox] = useState(null); // fixme: need to tell RxPillbox active pillbox const [activeTabKey, setActiveTabKey] = useState(props.activeTabKey); const [checkoutList, setCheckoutList] = useState([]); - const [clientId, setClientId] = useState(activeClient?.clientInfo?.Id || null); const [displayType, setDisplayType] = useState(DISPLAY_TYPE.Medicine); - const [, setErrorDetails] = useGlobal('__errorDetails'); - const [isBusy, setIsBusy] = useState(false); const [mm] = useGlobal('medicineManager'); - const [otcList, setOtcList] = useGlobal('otcList'); - const [otcLogList, setOtcLogList] = useState([]); - const [pillboxMedLogList, setPillboxMedLogList] = useState([]); - const [showDeleteDrugLogRecord, setShowDeleteDrugLogRecord] = useState(null); - const [showDrugLog, setShowDrugLog] = useState(null); - const [showMedicineEdit, setShowMedicineEdit] = useState(null); - const [toast, setToast] = useState(null); - - // Refresh activeClient when the activeResident global changes. - useEffect(() => { - if (activeClient) { - setClientId(activeClient?.clientInfo?.Id ? activeClient.clientInfo.Id : null); - } - }, [activeClient]); + const [otcList] = useGlobal('otcList'); // activeTabKey refresh from prop useEffect(() => { setActiveTabKey(props.activeTabKey); }, [props.activeTabKey]); - // Update the otcLogList when the drugLogList is changed. - useEffect(() => { - // We only want to list the OTC drugs on this page that the resident has taken. - // @link https://stackoverflow.com/questions/31005396/filter-array-of-objects-with-another-array-of-objects - const drugLogList = activeClient?.drugLogList; - if (drugLogList) { - setOtcLogList( - drugLogList.filter((drug: DrugLogRecord) => { - return otcList.some((m) => { - return m.Id === drug?.MedicineId; - }); - }) - ); - } - }, [activeClient, activeClient?.drugLogList, otcList]); - // Update the checkoutList when drugLogList changes useEffect(() => { if (activeClient?.drugLogList) { @@ -113,237 +61,10 @@ const MedicinePage = (props: IProps): JSX.Element | null => { } }, [activeClient, setCheckoutList]); - // Refresh the pillboxDrugLog[] - useEffect(() => { - if (activePillbox && activeClient) { - const pillboxMedLog = [] as TPillboxMedLog[]; - const pillboxItemList = activeClient.pillboxItemList; - const drugLogList = activeClient.drugLogList; - pillboxItemList.forEach((pbi) => { - if (pbi.PillboxId === activePillbox.Id && pbi.Quantity) { - const drugLogRecord = drugLogList.find( - (dlr) => - dlr.PillboxItemId === pbi.Id && - dlr.MedicineId === pbi.MedicineId && - dlr.Updated && - isToday(dlr.Updated) - ); - - if (drugLogRecord) { - const med = activeClient.medicineList.find((m) => m.Id === drugLogRecord.MedicineId); - pillboxMedLog.push({ - Active: !!med?.Active, - Drug: med?.Drug, - Strength: med?.Strength, - Quantity: pbi.Quantity, - Notes: drugLogRecord.Notes, - PillboxItemId: drugLogRecord.PillboxItemId, - PillboxId: activePillbox.Id, - Updated: drugLogRecord.Updated - }); - } - } - }); - setPillboxMedLogList(multiSort(pillboxMedLog, {Quantity: SortDirection.asc, Drug: SortDirection.desc})); - } - }, [activeClient, activePillbox, setPillboxMedLogList]); - // If there isn't an active client, or this isn't the active tab then do not render - if (activeTabKey !== 'medicine' || !clientId || !activeClient) return null; - - const medicineOtcList = activeClient.medicineList.concat(otcList) as MedicineRecord[]; - - /** - * todo: Move to RxOtc once created - * Given a MedicineRecord object Update/Insert the record and rehydrate the global otcList / medicineList - * Set the activeOtc with the updated medicine (if Active) - * @param {MedicineRecord} med Medicine record object - */ - const saveMedicine = async (med: MedicineRecord) => { - await setIsBusy(true); - const [e, m] = (await asyncWrapper(mm.updateMedicine(med))) as [unknown, Promise]; - if (e) await setErrorDetails(e); - const updatedMedicineRecord = await m; - const [errLoadOtc, otcMeds] = (await asyncWrapper(mm.loadOtcList())) as [unknown, Promise]; - if (errLoadOtc) await setErrorDetails(errLoadOtc); - else await setOtcList(await otcMeds); - setActiveOtc(updatedMedicineRecord.Active ? updatedMedicineRecord : null); - await setIsBusy(false); - }; - - /** - * Given a DrugLogRecord Update or Insert the record and rehydrate the drugLogList - * @param {DrugLogRecord} drugLog Druglog record object - */ - const saveDrugLog = async (drugLog: DrugLogRecord): Promise => { - await setIsBusy(true); - const [e, updatedDrugLog] = (await asyncWrapper(mm.updateDrugLog(drugLog))) as [ - unknown, - Promise - ]; - if (e) await setErrorDetails(e); - else { - const [errLoadLog, drugLogs] = (await asyncWrapper(mm.loadDrugLog(clientId, 5))) as [ - unknown, - Promise - ]; - if (errLoadLog) await setErrorDetails(errLoadLog); - else await setActiveClient({...activeClient, drugLogList: await drugLogs}); - } - await setIsBusy(false); - return await updatedDrugLog; - }; - - /** - * Add or update a pillboxRecord record. - * @param {PillboxRecord} pillboxRecord Pillbox record object - */ - const savePillbox = async (pillboxRecord: PillboxRecord) => { - setIsBusy(true); - const [e, updatedPillbox] = (await asyncWrapper(mm.updatePillbox(pillboxRecord))) as [ - unknown, - Promise - ]; - if (e) await setErrorDetails(e); - else setActivePillbox(await updatedPillbox); - const [errLoadPillbox, pillboxes] = (await asyncWrapper(mm.loadPillboxList(clientId))) as [ - unknown, - Promise - ]; - if (errLoadPillbox) await setErrorDetails(errLoadPillbox); - else await setActiveClient({...activeClient, pillboxList: await pillboxes}); - setIsBusy(false); - }; - - /** - * Delete an existing pillbox. - * @param {number} pillboxId The PK for the Pillbox table - */ - const deletePillbox = async (pillboxId: number) => { - setIsBusy(true); - const [e, pillboxDeleted] = (await asyncWrapper(mm.deletePillbox(pillboxId))) as [unknown, Promise]; - if (e) await setErrorDetails(e); - else if (await pillboxDeleted) { - const [errLoad, pillboxes] = (await asyncWrapper(mm.loadPillboxList(clientId))) as [ - unknown, - Promise - ]; - if (errLoad) await setErrorDetails(errLoad); - else { - const pillboxList = await pillboxes; - await setActiveClient({...activeClient, pillboxList}); - await setActivePillbox(pillboxList.length > 0 ? pillboxList[0] : null); - } - } else { - await setErrorDetails(new Error('Unable to delete Pillbox. Id: ' + pillboxId)); - } - setIsBusy(false); - }; + if (!activeClient || activeTabKey !== 'medicine') return null; - /** - * Handle when the user clicks on Log Pillbox - */ - const handleLogPillbox = async () => { - setIsBusy(true); - const toastQ = [] as DrugLogRecord[]; - const [e, loggedPillboxMeds] = (await asyncWrapper(mm.logPillbox(activePillbox?.Id as number))) as [ - unknown, - Promise - ]; - if (e) await setErrorDetails(e); - else { - const loggedPillboxDrugs = await loggedPillboxMeds; - if (loggedPillboxDrugs.length > 0) { - const [errLoadLog, drugLogs] = (await asyncWrapper(mm.loadDrugLog(clientId, 5))) as [ - unknown, - Promise - ]; - if (errLoadLog) await setErrorDetails(errLoadLog); - else await setActiveClient({...activeClient, drugLogList: await drugLogs}); - loggedPillboxDrugs.forEach((ld) => toastQ.push({...ld})); - setToast(toastQ); - } - } - setIsBusy(false); - }; - - /** - * Add or update a pillboxItem record - * @param {PillboxItemRecord} pillboxItemRecord The pillboxItem record object - */ - const savePillboxItem = async (pillboxItemRecord: PillboxItemRecord) => { - setIsBusy(true); - const [e, updatedPillboxItem] = (await asyncWrapper(mm.updatePillboxItem(pillboxItemRecord))) as [ - unknown, - Promise - ]; - if (e) await setErrorDetails(e); - else if (await updatedPillboxItem) { - const [errLoadPills, pillboxItems] = (await asyncWrapper(mm.loadPillboxItemList(clientId as number))) as [ - unknown, - Promise - ]; - if (errLoadPills) await setErrorDetails(errLoadPills); - else await setActiveClient({...activeClient, pillboxItemList: await pillboxItems}); - } - setIsBusy(false); - }; - - /** - * Fires when user clicks on +Log or the drug log edit button - * @param {DrugLogRecord} drugLogInfo The drugLog record object - */ - const addEditDrugLog = (drugLogInfo?: DrugLogRecord) => { - const drugLogRecord = drugLogInfo - ? {...drugLogInfo} - : ({ - Id: null, - ResidentId: clientId, - MedicineId: activeOtc?.Id, - Notes: '' - } as DrugLogRecord); - setShowDrugLog(drugLogRecord); - }; - - /** - * Fires when the Log 1...4 buttons are clicked. - * @param {number} amount The number of pills (medication) taken - */ - const handleLogOtcDrugAmount = (amount: number) => { - const medicineId = activeOtc?.Id; - const drugLogInfo = {...newDrugLogRecord}; - drugLogInfo.ResidentId = clientId; - drugLogInfo.MedicineId = medicineId as number; - drugLogInfo.Notes = amount.toString(); - saveDrugLog(drugLogInfo).then((r) => setToast([r])); - }; - - /** - * Convenience function to get drug name - * @param {number} medicineId The PK of the Medicine table - * @returns {string | undefined} - */ - const drugName = (medicineId: number): string | undefined => { - return getDrugName(medicineId, medicineOtcList); - }; - - /** - * Handle when the user has clicked on a pill - * @param {number} pillboxId The PK of the Pillbox table - */ - const handleOnPillClick = (pillboxId: number) => { - if (activeClient) { - const pb = activeClient.pillboxList.find((p) => p.Id === pillboxId); - if (pb) { - setActivePillbox(pb); - setDisplayType(DISPLAY_TYPE.Pillbox); - } - } - }; - - if (!activeClient) return null; - - const {drugLogList, pillboxList, pillboxItemList, medicineList} = activeClient; + const {drugLogList, pillboxList, medicineList} = activeClient; return ( <> @@ -371,15 +92,14 @@ const MedicinePage = (props: IProps): JSX.Element | null => { } eventKey={DISPLAY_TYPE.Medicine} > - {activeClient && ( - { - setActivePillbox(pillboxList.find((p) => p.Id === id) || null); - setDisplayType(DISPLAY_TYPE.Pillbox); - }} - /> - )} + { + // fixme: need to tell RxPillbox what pillbox is active + setActivePillbox(pillboxList.find((p) => p.Id === id) || null); + setDisplayType(DISPLAY_TYPE.Pillbox); + }} + /> { } > - - - setShowMedicineEdit(medicineRecord)} - logOtcDrug={() => addEditDrugLog(undefined)} - logOtcDrugAmount={(n) => handleLogOtcDrugAmount(n)} - otcList={otcList} - otcSelected={(medicineRecord) => setActiveOtc(medicineRecord)} - /> - - - - -
- OTC History -
- setShowDeleteDrugLogRecord(drugLogRecord)} - onEdit={(drugLogRecord) => addEditDrugLog(drugLogRecord)} - gridLists={{ - medicineList: otcList, - drugLogList: otcLogList, - pillboxList: undefined, - pillboxItemList: undefined - }} - /> - - - + {/* Only show when: activeClient && activeClient.clientInfo */} @@ -460,17 +148,13 @@ const MedicinePage = (props: IProps): JSX.Element | null => { } > - { + // fixme: need to tell RxPillbox what pillbox is active + setActivePillbox(pillboxList.find((p) => p.Id === id) || null); + setDisplayType(DISPLAY_TYPE.Pillbox); }} - onEdit={(drugLogRecord) => addEditDrugLog(drugLogRecord)} - onDelete={(drugLogRecord) => setShowDeleteDrugLogRecord(drugLogRecord)} - onPillClick={(pillboxId) => handleOnPillClick(pillboxId)} /> @@ -496,38 +180,7 @@ const MedicinePage = (props: IProps): JSX.Element | null => { } > - - - m.Active), - pillboxList, - pillboxItemList, - drugLogList - }} - logPillbox={() => handleLogPillbox()} - onDelete={(pillboxId) => deletePillbox(pillboxId)} - onEdit={(pillboxRecord) => savePillbox(pillboxRecord)} - onSelect={(pillboxId) => - setActivePillbox(pillboxList.find((pb) => pb.Id === pillboxId) || null) - } - pillboxMedLogList={pillboxMedLogList} - /> - - - {displayType === DISPLAY_TYPE.Pillbox && activePillbox && activePillbox.Id && ( - savePillboxItem(pillboxItemRecord)} - pillboxItemList={pillboxItemList} - /> - )} - - + {/* Only show when: activeClient && activeClient.clientInfo */} @@ -555,60 +208,9 @@ const MedicinePage = (props: IProps): JSX.Element | null => { } > - + - - d.MedicineId === showMedicineEdit?.Id)} - drugInfo={showMedicineEdit as MedicineRecord} - existingDrugs={showMedicineEdit?.Id === null ? medicineList.map((m) => m.Drug) : []} - fullName={clientFullName(activeClient.clientInfo)} - onClose={(medicineRecord) => { - setShowMedicineEdit(null); - if (medicineRecord) saveMedicine(medicineRecord); - }} - show={showMedicineEdit !== null} - /> - - { - setShowDrugLog(null); - if (drugLogRecord) - saveDrugLog(drugLogRecord).then((updatedDrugLogRecord) => setToast([updatedDrugLogRecord])); - }} - onHide={() => setShowDrugLog(null)} - otc={getMedicineRecord(showDrugLog?.MedicineId as number, medicineOtcList)?.OTC || false} - show={showDrugLog !== null} - /> - - { - setShowDeleteDrugLogRecord(null); - if (drugLogRecord) - mm.deleteDrugLog(showDeleteDrugLogRecord?.Id as number).then(() => { - mm.loadDrugLog(clientId, 5).then((drugLogRecords) => { - setActiveClient({...activeClient, drugLogList: drugLogRecords}); - }); - }); - }} - show={showDeleteDrugLogRecord !== null} - /> - - setToast(null)} - show={toast !== null} - toast={toast as DrugLogRecord[]} - /> ); }; diff --git a/src/components/Pages/RxTabs/RxHistory.tsx b/src/components/Pages/RxTabs/RxHistory.tsx new file mode 100644 index 00000000..c53a3d9a --- /dev/null +++ b/src/components/Pages/RxTabs/RxHistory.tsx @@ -0,0 +1,126 @@ +import MedDrugLogHistory from 'components/Pages/Grids/MedDrugLogHistory'; +import DeleteDrugLogModal from 'components/Pages/Modals/DeleteDrugLogModal'; +import DrugLogEdit from 'components/Pages/Modals/DrugLogEdit'; +import DrugLogToast from 'components/Pages/Toasts/DrugLogToast'; +import {IMedicineManager} from 'managers/MedicineManager'; +import React, {useGlobal, useState} from 'reactn'; +import {TClient} from 'reactn/default'; +import {DrugLogRecord, MedicineRecord} from 'types/RecordTypes'; +import {asyncWrapper, getDrugName, getMedicineRecord} from 'utility/common'; + +interface IProps { + mm: IMedicineManager; + pillboxSelected: (id: number) => void; +} + +const RxHistory = (props: IProps) => { + const pillboxSelected = props.pillboxSelected; + const mm = props.mm; + const [activeClient, setActiveClient] = useGlobal('activeClient'); + const [otcList, setOtcList] = useGlobal('otcList'); + const [activeOtc, setActiveOtc] = useState(null); + const [showDrugLog, setShowDrugLog] = useState(null); + const [toast, setToast] = useState(null); + const [isBusy, setIsBusy] = useState(false); + const [, setErrorDetails] = useGlobal('__errorDetails'); + const [showDeleteDrugLogRecord, setShowDeleteDrugLogRecord] = useState(null); + + /** + * Given a DrugLogRecord Update or Insert the record and rehydrate the drugLogList + * @param {DrugLogRecord} drugLog Druglog record object + */ + const saveDrugLog = async (drugLog: DrugLogRecord): Promise => { + await setIsBusy(true); + const [e, updatedDrugLog] = (await asyncWrapper(mm.updateDrugLog(drugLog))) as [ + unknown, + Promise + ]; + if (e) await setErrorDetails(e); + else { + const [errLoadLog, drugLogs] = (await asyncWrapper( + mm.loadDrugLog(activeClient?.clientInfo?.Id as number, 5) + )) as [unknown, Promise]; + if (errLoadLog) await setErrorDetails(errLoadLog); + else await setActiveClient({...(activeClient as TClient), drugLogList: await drugLogs}); + } + await setIsBusy(false); + return await updatedDrugLog; + }; + + /** + * Fires when user clicks on +Log or the drug log edit button + * @param {DrugLogRecord} drugLogInfo The drugLog record object + */ + const addEditDrugLog = (drugLogInfo?: DrugLogRecord) => { + const drugLogRecord = drugLogInfo + ? {...drugLogInfo} + : ({ + Id: null, + ResidentId: activeClient?.clientInfo.Id, + MedicineId: activeOtc?.Id, + Notes: '' + } as DrugLogRecord); + setShowDrugLog(drugLogRecord); + }; + + const medicineOtcList = activeClient?.medicineList.concat(otcList) as MedicineRecord[]; + + if (activeClient === null) return null; + return ( + <> + addEditDrugLog(drugLogRecord)} + onDelete={(drugLogRecord) => setShowDeleteDrugLogRecord(drugLogRecord)} + onPillClick={(pillboxId) => pillboxSelected(pillboxId)} + /> + + { + setShowDrugLog(null); + if (drugLogRecord) + saveDrugLog(drugLogRecord).then((updatedDrugLogRecord) => setToast([updatedDrugLogRecord])); + }} + onHide={() => setShowDrugLog(null)} + otc={getMedicineRecord(showDrugLog?.MedicineId as number, medicineOtcList)?.OTC || false} + show={showDrugLog !== null} + /> + + { + setShowDeleteDrugLogRecord(null); + if (drugLogRecord) + mm.deleteDrugLog(showDeleteDrugLogRecord?.Id as number).then(() => { + mm.loadDrugLog(activeClient?.clientInfo?.Id as number, 5).then((drugLogRecords) => { + setActiveClient({...activeClient, drugLogList: drugLogRecords}); + }); + }); + }} + show={showDeleteDrugLogRecord !== null} + /> + + setToast(null)} + show={toast !== null} + toast={toast as DrugLogRecord[]} + /> + + ); +}; + +export default RxHistory; diff --git a/src/components/Pages/RxTabs/RxOtc.tsx b/src/components/Pages/RxTabs/RxOtc.tsx new file mode 100644 index 00000000..d965a8d0 --- /dev/null +++ b/src/components/Pages/RxTabs/RxOtc.tsx @@ -0,0 +1,200 @@ +import DrugLogGrid from 'components/Pages/Grids/DrugLogGrid'; +import OtcListGroup from 'components/Pages/ListGroups/OtcListGroup'; +import DeleteDrugLogModal from 'components/Pages/Modals/DeleteDrugLogModal'; +import DrugLogEdit from 'components/Pages/Modals/DrugLogEdit'; +import MedicineEdit from 'components/Pages/Modals/MedicineEdit'; +import DrugLogToast from 'components/Pages/Toasts/DrugLogToast'; +import {IMedicineManager} from 'managers/MedicineManager'; +import Col from 'react-bootstrap/Col'; +import ListGroup from 'react-bootstrap/ListGroup'; +import Row from 'react-bootstrap/Row'; +import React, {useGlobal, useState} from 'reactn'; +import {TClient} from 'reactn/default'; +import {DrugLogRecord, MedicineRecord, newDrugLogRecord} from 'types/RecordTypes'; +import {asyncWrapper, clientFullName, getDrugName, getMedicineRecord} from 'utility/common'; + +interface IProps { + mm: IMedicineManager; +} + +const RxOtc = (props: IProps) => { + const mm = props.mm; + const [activeClient, setActiveClient] = useGlobal('activeClient'); + const [, setErrorDetails] = useGlobal('__errorDetails'); + const clientId = activeClient?.clientInfo.Id; + const [otcList, setOtcList] = useGlobal('otcList'); + const [activeOtc, setActiveOtc] = useState(null); + const [isBusy, setIsBusy] = useState(false); + const [toast, setToast] = useState(null); + const [showMedicineEdit, setShowMedicineEdit] = useState(null); + const [showDrugLog, setShowDrugLog] = useState(null); + const [showDeleteDrugLogRecord, setShowDeleteDrugLogRecord] = useState(null); + + /** + * Fires when the Log 1...4 buttons are clicked. + * @param {number} amount The number of pills (medication) taken + */ + const handleLogOtcDrugAmount = (amount: number) => { + const medicineId = activeOtc?.Id; + const drugLogInfo = {...newDrugLogRecord}; + drugLogInfo.ResidentId = clientId as number; + drugLogInfo.MedicineId = medicineId as number; + drugLogInfo.Notes = amount.toString(); + saveDrugLog(drugLogInfo).then((r) => setToast([r])); + }; + + /** + * Given a DrugLogRecord Update or Insert the record and rehydrate the drugLogList + * @param {DrugLogRecord} drugLog Druglog record object + */ + const saveDrugLog = async (drugLog: DrugLogRecord): Promise => { + await setIsBusy(true); + const [e, updatedDrugLog] = (await asyncWrapper(mm.updateDrugLog(drugLog))) as [ + unknown, + Promise + ]; + if (e) await setErrorDetails(e); + else { + const [errLoadLog, drugLogs] = (await asyncWrapper(mm.loadDrugLog(clientId as number, 5))) as [ + unknown, + Promise + ]; + if (errLoadLog) await setErrorDetails(errLoadLog); + else await setActiveClient({...(activeClient as TClient), drugLogList: await drugLogs}); + } + await setIsBusy(false); + return await updatedDrugLog; + }; + + /** + * Given a MedicineRecord object Update/Insert the record and rehydrate the global otcList / medicineList + * Set the activeOtc with the updated medicine (if Active) + * @param {MedicineRecord} med Medicine record object + */ + const saveMedicine = async (med: MedicineRecord) => { + await setIsBusy(true); + const [e, m] = (await asyncWrapper(mm.updateMedicine(med))) as [unknown, Promise]; + if (e) await setErrorDetails(e); + const updatedMedicineRecord = await m; + const [errLoadOtc, otcMeds] = (await asyncWrapper(mm.loadOtcList())) as [unknown, Promise]; + if (errLoadOtc) await setErrorDetails(errLoadOtc); + else await setOtcList(await otcMeds); + setActiveOtc(updatedMedicineRecord.Active ? updatedMedicineRecord : null); + await setIsBusy(false); + }; + + /** + * Fires when user clicks on +Log or the drug log edit button + * @param {DrugLogRecord} drugLogInfo The drugLog record object + */ + const addEditDrugLog = (drugLogInfo?: DrugLogRecord) => { + const drugLogRecord = drugLogInfo + ? {...drugLogInfo} + : ({ + Id: null, + ResidentId: clientId, + MedicineId: activeOtc?.Id, + Notes: '' + } as DrugLogRecord); + setShowDrugLog(drugLogRecord); + }; + + const medicineOtcList = activeClient?.medicineList.concat(otcList) as MedicineRecord[]; + + if (activeClient === null) return null; + return ( + <> + + + setShowMedicineEdit(medicineRecord)} + logOtcDrug={() => addEditDrugLog(undefined)} + logOtcDrugAmount={(n) => handleLogOtcDrugAmount(n)} + otcList={otcList} + otcSelected={(medicineRecord) => setActiveOtc(medicineRecord)} + /> + + + + +
+ OTC History +
+ setShowDeleteDrugLogRecord(drugLogRecord)} + onEdit={(drugLogRecord) => addEditDrugLog(drugLogRecord)} + gridLists={{ + medicineList: otcList, + drugLogList: activeClient.drugLogList.filter((drug: DrugLogRecord) => { + return otcList.some((m) => { + return m.Id === drug?.MedicineId; + }); + }), + pillboxList: undefined, + pillboxItemList: undefined + }} + /> + + + + + d.MedicineId === showMedicineEdit?.Id)} + drugInfo={showMedicineEdit as MedicineRecord} + existingDrugs={showMedicineEdit?.Id === null ? otcList.map((m) => m.Drug) : []} + fullName={clientFullName(activeClient.clientInfo)} + onClose={(medicineRecord) => { + setShowMedicineEdit(null); + // todo: Existing drugs is not showing warning alert! + if (medicineRecord) saveMedicine(medicineRecord); + }} + show={showMedicineEdit !== null} + /> + + { + setShowDrugLog(null); + if (drugLogRecord) + saveDrugLog(drugLogRecord).then((updatedDrugLogRecord) => setToast([updatedDrugLogRecord])); + }} + onHide={() => setShowDrugLog(null)} + otc={getMedicineRecord(showDrugLog?.MedicineId as number, medicineOtcList)?.OTC || false} + show={showDrugLog !== null} + /> + + { + setShowDeleteDrugLogRecord(null); + if (drugLogRecord) + mm.deleteDrugLog(showDeleteDrugLogRecord?.Id as number).then(() => { + mm.loadDrugLog(clientId as number, 5).then((drugLogRecords) => { + setActiveClient({...activeClient, drugLogList: drugLogRecords}); + }); + }); + }} + show={showDeleteDrugLogRecord !== null} + /> + + setToast(null)} + show={toast !== null} + toast={toast as DrugLogRecord[]} + /> + + ); +}; + +export default RxOtc; diff --git a/src/components/Pages/RxTabs/RxPillbox.tsx b/src/components/Pages/RxTabs/RxPillbox.tsx new file mode 100644 index 00000000..5907e252 --- /dev/null +++ b/src/components/Pages/RxTabs/RxPillbox.tsx @@ -0,0 +1,200 @@ +import PillboxCard from 'components/Pages/Grids/PillboxCard'; +import PillboxListGroup from 'components/Pages/ListGroups/PillboxListGroup'; +import {TPillboxMedLog} from 'components/Pages/MedicinePage'; +import DrugLogToast from 'components/Pages/Toasts/DrugLogToast'; +import {IMedicineManager} from 'managers/MedicineManager'; +import Col from 'react-bootstrap/Col'; +import ListGroup from 'react-bootstrap/ListGroup'; +import Row from 'react-bootstrap/Row'; +import React, {useEffect, useGlobal, useState} from 'reactn'; +import {TClient} from 'reactn/default'; +import TabContent from 'styles/common.css'; +import {DrugLogRecord, PillboxItemRecord, PillboxRecord} from 'types/RecordTypes'; +import {asyncWrapper, isToday, multiSort, SortDirection} from 'utility/common'; + +interface IProps { + mm: IMedicineManager; +} + +const RxPillbox = (props: IProps) => { + const mm = props.mm; + const [activeClient, setActiveClient] = useGlobal('activeClient'); + const [isBusy, setIsBusy] = useState(false); + const [, setErrorDetails] = useGlobal('__errorDetails'); + const [activePillbox, setActivePillbox] = useState(null); + const [toast, setToast] = useState(null); + const [pillboxMedLogList, setPillboxMedLogList] = useState([]); + + // Refresh the pillboxDrugLog[] + useEffect(() => { + if (activePillbox && activeClient) { + const pillboxMedLog = [] as TPillboxMedLog[]; + const pillboxItemList = activeClient.pillboxItemList; + const drugLogList = activeClient.drugLogList; + pillboxItemList.forEach((pbi) => { + if (pbi.PillboxId === activePillbox.Id && pbi.Quantity) { + const drugLogRecord = drugLogList.find( + (dlr) => + dlr.PillboxItemId === pbi.Id && + dlr.MedicineId === pbi.MedicineId && + dlr.Updated && + isToday(dlr.Updated) + ); + + if (drugLogRecord) { + const med = activeClient.medicineList.find((m) => m.Id === drugLogRecord.MedicineId); + pillboxMedLog.push({ + Active: !!med?.Active, + Drug: med?.Drug, + Strength: med?.Strength, + Quantity: pbi.Quantity, + Notes: drugLogRecord.Notes, + PillboxItemId: drugLogRecord.PillboxItemId, + PillboxId: activePillbox.Id, + Updated: drugLogRecord.Updated + }); + } + } + }); + setPillboxMedLogList(multiSort(pillboxMedLog, {Quantity: SortDirection.asc, Drug: SortDirection.desc})); + } + }, [activeClient, activePillbox, setPillboxMedLogList]); + + /** + * Add or update a pillboxRecord record. + * @param {PillboxRecord} pillboxRecord Pillbox record object + */ + const savePillbox = async (pillboxRecord: PillboxRecord) => { + setIsBusy(true); + const [e, updatedPillbox] = (await asyncWrapper(mm.updatePillbox(pillboxRecord))) as [ + unknown, + Promise + ]; + if (e) await setErrorDetails(e); + else setActivePillbox(await updatedPillbox); + const [errLoadPillbox, pillboxes] = (await asyncWrapper( + mm.loadPillboxList(activeClient?.clientInfo.Id as number) + )) as [unknown, Promise]; + if (errLoadPillbox) await setErrorDetails(errLoadPillbox); + else await setActiveClient({...(activeClient as TClient), pillboxList: await pillboxes}); + setIsBusy(false); + }; + + /** + * Delete an existing pillbox. + * @param {number} pillboxId The PK for the Pillbox table + */ + const deletePillbox = async (pillboxId: number) => { + setIsBusy(true); + const [e, pillboxDeleted] = (await asyncWrapper(mm.deletePillbox(pillboxId))) as [unknown, Promise]; + if (e) await setErrorDetails(e); + else if (await pillboxDeleted) { + const [errLoad, pillboxes] = (await asyncWrapper( + mm.loadPillboxList(activeClient?.clientInfo.Id as number) + )) as [unknown, Promise]; + if (errLoad) await setErrorDetails(errLoad); + else { + const pillboxList = await pillboxes; + await setActiveClient({...(activeClient as TClient), pillboxList}); + await setActivePillbox(pillboxList.length > 0 ? pillboxList[0] : null); + } + } else { + await setErrorDetails(new Error('Unable to delete Pillbox. Id: ' + pillboxId)); + } + setIsBusy(false); + }; + + /** + * Add or update a pillboxItem record + * @param {PillboxItemRecord} pillboxItemRecord The pillboxItem record object + */ + const savePillboxItem = async (pillboxItemRecord: PillboxItemRecord) => { + setIsBusy(true); + const [e, updatedPillboxItem] = (await asyncWrapper(mm.updatePillboxItem(pillboxItemRecord))) as [ + unknown, + Promise + ]; + if (e) await setErrorDetails(e); + else if (await updatedPillboxItem) { + const [errLoadPills, pillboxItems] = (await asyncWrapper( + mm.loadPillboxItemList(activeClient?.clientInfo.Id as number) + )) as [unknown, Promise]; + if (errLoadPills) await setErrorDetails(errLoadPills); + else await setActiveClient({...(activeClient as TClient), pillboxItemList: await pillboxItems}); + } + setIsBusy(false); + }; + + /** + * Handle when the user clicks on Log Pillbox + */ + const handleLogPillbox = async () => { + setIsBusy(true); + const toastQ = [] as DrugLogRecord[]; + const [e, loggedPillboxMeds] = (await asyncWrapper(mm.logPillbox(activePillbox?.Id as number))) as [ + unknown, + Promise + ]; + if (e) await setErrorDetails(e); + else { + const loggedPillboxDrugs = await loggedPillboxMeds; + if (loggedPillboxDrugs.length > 0) { + const [errLoadLog, drugLogs] = (await asyncWrapper( + mm.loadDrugLog(activeClient?.clientInfo.Id as number, 5) + )) as [unknown, Promise]; + if (errLoadLog) await setErrorDetails(errLoadLog); + else await setActiveClient({...(activeClient as TClient), drugLogList: await drugLogs}); + loggedPillboxDrugs.forEach((ld) => toastQ.push({...ld})); + setToast(toastQ); + } + } + setIsBusy(false); + }; + + if (activeClient === null) return null; + return ( + <> + + + m.Active), + pillboxList: activeClient.pillboxList, + pillboxItemList: activeClient.pillboxItemList, + drugLogList: activeClient.drugLogList + }} + logPillbox={() => handleLogPillbox()} + onDelete={(pillboxId) => deletePillbox(pillboxId)} + onEdit={(pillboxRecord) => savePillbox(pillboxRecord)} + onSelect={(pillboxId) => + setActivePillbox(activeClient.pillboxList.find((pb) => pb.Id === pillboxId) || null) + } + pillboxMedLogList={pillboxMedLogList} + /> + + + {activePillbox && activePillbox.Id && ( + savePillboxItem(pillboxItemRecord)} + pillboxItemList={activeClient.pillboxItemList} + /> + )} + + + + setToast(null)} + show={toast !== null} + toast={toast as DrugLogRecord[]} + /> + + ); +}; + +export default RxPillbox; diff --git a/src/components/Pages/RxTabs/RxPrint.tsx b/src/components/Pages/RxTabs/RxPrint.tsx new file mode 100644 index 00000000..81274b43 --- /dev/null +++ b/src/components/Pages/RxTabs/RxPrint.tsx @@ -0,0 +1,25 @@ +import CheckoutListGroup from 'components/Pages/ListGroups/CheckoutListGroup'; +import React from 'reactn'; +import {TClient} from 'reactn/default'; +import {DrugLogRecord} from 'types/RecordTypes'; + +interface IProps { + activeClient: TClient; + checkoutList: DrugLogRecord[]; +} + +const RxPrint = (props: IProps) => { + const activeClient = props.activeClient; + const checkoutList = props.checkoutList; + + if (activeClient === null) return null; + return ( + + ); +}; + +export default RxPrint; From 031a12696badc828167c3771624c35961cfbe65e Mon Sep 17 00:00:00 2001 From: ryan Date: Sat, 4 Dec 2021 02:08:23 -0700 Subject: [PATCH 07/11] =?UTF-8?q?=E2=99=BB=20refactor=20Moved=20`activePil?= =?UTF-8?q?lbox`=20state=20up=20to=20MedicinePage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - RxHistory and RxMedicine allow clicking on a pill icon to display RxPillbox since MedicinePage controls which tab is displayed the activePillbox state had to be moved up. --- .eslintrc.js | 2 +- .../Pages/Grids/MedDrugLogHistory.tsx | 8 ++++--- src/components/Pages/MedicinePage.tsx | 11 +++++---- src/components/Pages/RxTabs/RxHistory.tsx | 23 ++++--------------- src/components/Pages/RxTabs/RxMedicine.tsx | 16 +------------ src/components/Pages/RxTabs/RxOtc.tsx | 1 - src/components/Pages/RxTabs/RxPillbox.tsx | 17 ++++++++++---- 7 files changed, 31 insertions(+), 47 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index b914cb73..aeae1ae0 100644 --- 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/src/components/Pages/Grids/MedDrugLogHistory.tsx b/src/components/Pages/Grids/MedDrugLogHistory.tsx index e493123c..65039217 100644 --- 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,6 +13,7 @@ interface IProps { onDelete: (drugLogRecord: DrugLogRecord) => void; onEdit: (drugLogRecord: DrugLogRecord) => void; onPillClick: (pillboxId: number) => void; + disabled: boolean; } /** @@ -19,7 +21,7 @@ interface IProps { * @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 ( <> - {hasPillboxItems && ๐Ÿ’Š indicates drug logged from a Pillbox} diff --git a/src/components/Pages/MedicinePage.tsx b/src/components/Pages/MedicinePage.tsx index 0c44f670..d792b103 100644 --- a/src/components/Pages/MedicinePage.tsx +++ b/src/components/Pages/MedicinePage.tsx @@ -42,7 +42,7 @@ interface IProps { */ const MedicinePage = (props: IProps): JSX.Element | null => { const [activeClient] = useGlobal('activeClient'); - const [, setActivePillbox] = useState(null); // fixme: need to tell RxPillbox active pillbox + const [activePillbox, setActivePillbox] = useState(null); const [activeTabKey, setActiveTabKey] = useState(props.activeTabKey); const [checkoutList, setCheckoutList] = useState([]); const [displayType, setDisplayType] = useState(DISPLAY_TYPE.Medicine); @@ -95,7 +95,6 @@ const MedicinePage = (props: IProps): JSX.Element | null => { { - // fixme: need to tell RxPillbox what pillbox is active setActivePillbox(pillboxList.find((p) => p.Id === id) || null); setDisplayType(DISPLAY_TYPE.Pillbox); }} @@ -150,8 +149,8 @@ const MedicinePage = (props: IProps): JSX.Element | null => { > { - // fixme: need to tell RxPillbox what pillbox is active setActivePillbox(pillboxList.find((p) => p.Id === id) || null); setDisplayType(DISPLAY_TYPE.Pillbox); }} @@ -180,7 +179,11 @@ const MedicinePage = (props: IProps): JSX.Element | null => { } > - + setActivePillbox(pb)} + /> {/* Only show when: activeClient && activeClient.clientInfo */} diff --git a/src/components/Pages/RxTabs/RxHistory.tsx b/src/components/Pages/RxTabs/RxHistory.tsx index c53a3d9a..958ed8e0 100644 --- a/src/components/Pages/RxTabs/RxHistory.tsx +++ b/src/components/Pages/RxTabs/RxHistory.tsx @@ -11,14 +11,14 @@ import {asyncWrapper, getDrugName, getMedicineRecord} from 'utility/common'; interface IProps { mm: IMedicineManager; pillboxSelected: (id: number) => void; + otcList: MedicineRecord[]; } const RxHistory = (props: IProps) => { const pillboxSelected = props.pillboxSelected; const mm = props.mm; + const otcList = props.otcList; const [activeClient, setActiveClient] = useGlobal('activeClient'); - const [otcList, setOtcList] = useGlobal('otcList'); - const [activeOtc, setActiveOtc] = useState(null); const [showDrugLog, setShowDrugLog] = useState(null); const [toast, setToast] = useState(null); const [isBusy, setIsBusy] = useState(false); @@ -47,22 +47,6 @@ const RxHistory = (props: IProps) => { return await updatedDrugLog; }; - /** - * Fires when user clicks on +Log or the drug log edit button - * @param {DrugLogRecord} drugLogInfo The drugLog record object - */ - const addEditDrugLog = (drugLogInfo?: DrugLogRecord) => { - const drugLogRecord = drugLogInfo - ? {...drugLogInfo} - : ({ - Id: null, - ResidentId: activeClient?.clientInfo.Id, - MedicineId: activeOtc?.Id, - Notes: '' - } as DrugLogRecord); - setShowDrugLog(drugLogRecord); - }; - const medicineOtcList = activeClient?.medicineList.concat(otcList) as MedicineRecord[]; if (activeClient === null) return null; @@ -70,13 +54,14 @@ const RxHistory = (props: IProps) => { <> addEditDrugLog(drugLogRecord)} + onEdit={(drugLogRecord) => setShowDrugLog({...drugLogRecord})} onDelete={(drugLogRecord) => setShowDeleteDrugLogRecord(drugLogRecord)} onPillClick={(pillboxId) => pillboxSelected(pillboxId)} /> diff --git a/src/components/Pages/RxTabs/RxMedicine.tsx b/src/components/Pages/RxTabs/RxMedicine.tsx index 7ac10b33..f4fc20f4 100644 --- a/src/components/Pages/RxTabs/RxMedicine.tsx +++ b/src/components/Pages/RxTabs/RxMedicine.tsx @@ -17,7 +17,6 @@ import {DrugLogRecord, MedicineRecord, newDrugLogRecord} from 'types/RecordTypes import {asyncWrapper, calculateLastTaken, clientFullName, getCheckoutList, getDrugName, isToday} from 'utility/common'; interface IProps { - // editDrugLog: (drugLogInfo: DrugLogRecord) => void; // todo: bring this down mm: IMedicineManager; pillboxSelected: (id: number) => void; } @@ -36,19 +35,6 @@ const RxMedicine = (props: IProps) => { const [toast, setToast] = useState(null); const [showDrugLog, setShowDrugLog] = useState(null); - // todo: determine if this is needed - // const [lastTaken, setLastTaken] = useState( - // activeMed?.Id && - // activeClient?.drugLogList ? calculateLastTaken(activeMed.Id, activeClient.drugLogList) : null - // ); - // useEffect(() => { - // setLastTaken( - // activeClient && activeMed && activeMed.Id - // ? calculateLastTaken(activeMed.Id, activeClient.drugLogList) - // : null - // ); - // }, [activeClient, activeMed, activeMed?.Id]); - // Build the dropdown items for the Medicine dropdown useEffect(() => { const itemList = [] as IDropdownItem[]; @@ -225,7 +211,7 @@ const RxMedicine = (props: IProps) => { gridLists={{medicineList, drugLogList, pillboxList, pillboxItemList}} onDelete={(drugLogRecord) => setShowDeleteDrugLogRecord(drugLogRecord)} onEdit={(r) => handleAddEditDrugLog(r)} - onPillClick={(n) => alert('handleOnPillClick(n)')} + onPillClick={(n) => pillboxSelected(n)} /> )} diff --git a/src/components/Pages/RxTabs/RxOtc.tsx b/src/components/Pages/RxTabs/RxOtc.tsx index d965a8d0..acd8fb5f 100644 --- a/src/components/Pages/RxTabs/RxOtc.tsx +++ b/src/components/Pages/RxTabs/RxOtc.tsx @@ -149,7 +149,6 @@ const RxOtc = (props: IProps) => { fullName={clientFullName(activeClient.clientInfo)} onClose={(medicineRecord) => { setShowMedicineEdit(null); - // todo: Existing drugs is not showing warning alert! if (medicineRecord) saveMedicine(medicineRecord); }} show={showMedicineEdit !== null} diff --git a/src/components/Pages/RxTabs/RxPillbox.tsx b/src/components/Pages/RxTabs/RxPillbox.tsx index 5907e252..03c419a1 100644 --- a/src/components/Pages/RxTabs/RxPillbox.tsx +++ b/src/components/Pages/RxTabs/RxPillbox.tsx @@ -14,17 +14,24 @@ import {asyncWrapper, isToday, multiSort, SortDirection} from 'utility/common'; interface IProps { mm: IMedicineManager; + activePillbox: PillboxRecord | null; + activePillboxChanged: (pb: PillboxRecord | null) => void; } const RxPillbox = (props: IProps) => { const mm = props.mm; + const activePillboxChanged = props.activePillboxChanged; const [activeClient, setActiveClient] = useGlobal('activeClient'); const [isBusy, setIsBusy] = useState(false); const [, setErrorDetails] = useGlobal('__errorDetails'); - const [activePillbox, setActivePillbox] = useState(null); const [toast, setToast] = useState(null); const [pillboxMedLogList, setPillboxMedLogList] = useState([]); + const [activePillbox, setActivePillbox] = useState(props.activePillbox); + useEffect(() => { + setActivePillbox(props.activePillbox); + }, [props.activePillbox]); + // Refresh the pillboxDrugLog[] useEffect(() => { if (activePillbox && activeClient) { @@ -71,7 +78,9 @@ const RxPillbox = (props: IProps) => { Promise ]; if (e) await setErrorDetails(e); - else setActivePillbox(await updatedPillbox); + else { + activePillboxChanged(await updatedPillbox); + } const [errLoadPillbox, pillboxes] = (await asyncWrapper( mm.loadPillboxList(activeClient?.clientInfo.Id as number) )) as [unknown, Promise]; @@ -96,7 +105,7 @@ const RxPillbox = (props: IProps) => { else { const pillboxList = await pillboxes; await setActiveClient({...(activeClient as TClient), pillboxList}); - await setActivePillbox(pillboxList.length > 0 ? pillboxList[0] : null); + activePillboxChanged(pillboxList.length > 0 ? pillboxList[0] : null); } } else { await setErrorDetails(new Error('Unable to delete Pillbox. Id: ' + pillboxId)); @@ -170,7 +179,7 @@ const RxPillbox = (props: IProps) => { onDelete={(pillboxId) => deletePillbox(pillboxId)} onEdit={(pillboxRecord) => savePillbox(pillboxRecord)} onSelect={(pillboxId) => - setActivePillbox(activeClient.pillboxList.find((pb) => pb.Id === pillboxId) || null) + activePillboxChanged(activeClient.pillboxList.find((pb) => pb.Id === pillboxId) || null) } pillboxMedLogList={pillboxMedLogList} /> From 98c922250b7e25c917c7d9fce85aa8e0e4fdd2bc Mon Sep 17 00:00:00 2001 From: ryan Date: Sat, 4 Dec 2021 05:11:05 -0700 Subject: [PATCH 08/11] =?UTF-8?q?=F0=9F=91=97=20style=20Code=20formatting?= =?UTF-8?q?=20changes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Moved `TPillboxMedLog` type export from MedicinePage to RxPillbox - RxTabs are hidden if the user can not interact with them. This is done by direct DOM manipulation in the MedicinePage - Changed the name of the enum `DISPLAY_TYPE` to `TAB_KEY` which is a better description. Also changed the `displayType` state name to `activeRxTab`/`setActiveRxTab` - changed the `pillboxSelected` c/b to `onPillboxSelected` - Changed the column width in RxMedicine so the leftmost column is now `col-5` instead of `col-4` which caused the log amount buttons to overflow [Unrelated] - MedicineEdit strength field now has `autoComplete="off"` --- src/components/Pages/Grids/PillboxLogGrid.tsx | 2 +- .../Pages/ListGroups/PillboxListGroup.tsx | 2 +- src/components/Pages/MedicinePage.tsx | 108 ++++++++++-------- src/components/Pages/Modals/MedicineEdit.tsx | 1 + src/components/Pages/RxTabs/RxHistory.tsx | 6 +- src/components/Pages/RxTabs/RxMedicine.tsx | 4 +- src/components/Pages/RxTabs/RxPillbox.tsx | 12 +- 7 files changed, 81 insertions(+), 54 deletions(-) diff --git a/src/components/Pages/Grids/PillboxLogGrid.tsx b/src/components/Pages/Grids/PillboxLogGrid.tsx index 778673c0..420a5bcb 100644 --- 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/ListGroups/PillboxListGroup.tsx b/src/components/Pages/ListGroups/PillboxListGroup.tsx index 90247520..2572762f 100644 --- 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/MedicinePage.tsx b/src/components/Pages/MedicinePage.tsx index d792b103..d742f8e3 100644 --- a/src/components/Pages/MedicinePage.tsx +++ b/src/components/Pages/MedicinePage.tsx @@ -11,19 +11,8 @@ import React, {useEffect, useGlobal, useState} from 'reactn'; import {DrugLogRecord, PillboxRecord} from 'types/RecordTypes'; import {getCheckoutList} from 'utility/common'; -export type TPillboxMedLog = { - Active: boolean; - Drug: string | undefined; - Notes: string | null; - PillboxId?: number | null; - PillboxItemId?: number | null; - Quantity: number; - Strength: string | null | undefined; - Updated: Date | null | undefined; -}; - -// Display states -enum DISPLAY_TYPE { +// Active Rx tab states +enum TAB_KEY { History = 'history', Medicine = 'med', OTC = 'otc', @@ -43,13 +32,12 @@ interface IProps { const MedicinePage = (props: IProps): JSX.Element | null => { const [activeClient] = useGlobal('activeClient'); const [activePillbox, setActivePillbox] = useState(null); - const [activeTabKey, setActiveTabKey] = useState(props.activeTabKey); + const [activeRxTab, setActiveRxTab] = useState(TAB_KEY.Medicine); const [checkoutList, setCheckoutList] = useState([]); - const [displayType, setDisplayType] = useState(DISPLAY_TYPE.Medicine); const [mm] = useGlobal('medicineManager'); const [otcList] = useGlobal('otcList'); - // activeTabKey refresh from prop + const [activeTabKey, setActiveTabKey] = useState(props.activeTabKey); useEffect(() => { setActiveTabKey(props.activeTabKey); }, [props.activeTabKey]); @@ -61,7 +49,36 @@ const MedicinePage = (props: IProps): JSX.Element | null => { } }, [activeClient, setCheckoutList]); - // If there isn't an active client, or this isn't the active tab then do not render + // Observer to show / hide RxTabs + useEffect(() => { + if (activeClient) { + const historyEl = document.getElementById('medicine-page-tabs-tab-' + TAB_KEY.History); + if (historyEl) { + historyEl.style.display = activeClient.drugLogList.length === 0 ? 'none' : 'block'; + if (activeRxTab === TAB_KEY.History && activeClient.drugLogList.length === 0) { + setActiveRxTab(TAB_KEY.Medicine); + } + } + + const pillboxEl = document.getElementById('medicine-page-tabs-tab-' + TAB_KEY.Pillbox); + if (pillboxEl) { + pillboxEl.style.display = activeClient.medicineList.length < 5 ? 'none' : 'block'; + if (activeRxTab === TAB_KEY.Pillbox && activeClient.medicineList.length < 5) { + setActiveRxTab(TAB_KEY.Medicine); + } + } + + const printEl = document.getElementById('medicine-page-tabs-tab-' + TAB_KEY.Print); + if (printEl) { + printEl.style.display = checkoutList.length === 0 ? 'none' : 'block'; + if (activeRxTab === TAB_KEY.Print && checkoutList.length === 0) { + setActiveRxTab(TAB_KEY.Medicine); + } + } + } + }, [activeClient, activeRxTab, checkoutList.length]); + + // If there isn't an active client, or the active tab isn't 'medicine' then do not render if (!activeClient || activeTabKey !== 'medicine') return null; const {drugLogList, pillboxList, medicineList} = activeClient; @@ -69,53 +86,54 @@ const MedicinePage = (props: IProps): JSX.Element | null => { return ( <> setDisplayType((key as DISPLAY_TYPE) || DISPLAY_TYPE.Medicine)} + id="medicine-page-tabs" + activeKey={activeRxTab} + defaultActiveKey={TAB_KEY.Medicine} + onSelect={(key) => setActiveRxTab((key as TAB_KEY) || TAB_KEY.Medicine)} > setDisplayType(DISPLAY_TYPE.Medicine)} + onChange={() => setActiveRxTab(TAB_KEY.Medicine)} size="sm" type="radio" - value={DISPLAY_TYPE.Medicine} + value={TAB_KEY.Medicine} variant="outline-success" > Medicine } - eventKey={DISPLAY_TYPE.Medicine} + eventKey={TAB_KEY.Medicine} > { setActivePillbox(pillboxList.find((p) => p.Id === id) || null); - setDisplayType(DISPLAY_TYPE.Pillbox); + setActiveRxTab(TAB_KEY.Pillbox); }} /> setDisplayType(DISPLAY_TYPE.OTC)} + onChange={() => setActiveRxTab(TAB_KEY.OTC)} size="sm" type="radio" - value={DISPLAY_TYPE.OTC} + value={TAB_KEY.OTC} variant="outline-success" > OTC @@ -125,22 +143,21 @@ const MedicinePage = (props: IProps): JSX.Element | null => { - {/* Only show when: activeClient && activeClient.clientInfo */} setDisplayType(DISPLAY_TYPE.History)} + onChange={() => setActiveRxTab(TAB_KEY.History)} size="sm" type="radio" - value={DISPLAY_TYPE.History} + value={TAB_KEY.History} variant="outline-success" > History @@ -150,9 +167,9 @@ const MedicinePage = (props: IProps): JSX.Element | null => { { + onPillboxSelected={(id) => { setActivePillbox(pillboxList.find((p) => p.Id === id) || null); - setDisplayType(DISPLAY_TYPE.Pillbox); + setActiveRxTab(TAB_KEY.Pillbox); }} /> @@ -160,19 +177,19 @@ const MedicinePage = (props: IProps): JSX.Element | null => { {/* Show when activePillbox && activePillbox.Id */} setDisplayType(DISPLAY_TYPE.Pillbox)} + onChange={() => setActiveRxTab(TAB_KEY.Pillbox)} size="sm" type="radio" - value={DISPLAY_TYPE.Pillbox} + value={TAB_KEY.Pillbox} variant="outline-success" > Pillbox @@ -186,22 +203,21 @@ const MedicinePage = (props: IProps): JSX.Element | null => { /> - {/* Only show when: activeClient && activeClient.clientInfo */} setDisplayType(DISPLAY_TYPE.Print)} + onChange={() => setActiveRxTab(TAB_KEY.Print)} size="sm" type="radio" - value={DISPLAY_TYPE.Print} + value={TAB_KEY.Print} variant="outline-success" > diff --git a/src/components/Pages/Modals/MedicineEdit.tsx b/src/components/Pages/Modals/MedicineEdit.tsx index 9ed2b53b..f7ae6a16 100644 --- a/src/components/Pages/Modals/MedicineEdit.tsx +++ b/src/components/Pages/Modals/MedicineEdit.tsx @@ -245,6 +245,7 @@ const MedicineEdit = (props: IProps): JSX.Element | null => { handleOnChange(e)} placeholder="e.g. 100 MG TABS" diff --git a/src/components/Pages/RxTabs/RxHistory.tsx b/src/components/Pages/RxTabs/RxHistory.tsx index 958ed8e0..8585027f 100644 --- a/src/components/Pages/RxTabs/RxHistory.tsx +++ b/src/components/Pages/RxTabs/RxHistory.tsx @@ -10,12 +10,12 @@ import {asyncWrapper, getDrugName, getMedicineRecord} from 'utility/common'; interface IProps { mm: IMedicineManager; - pillboxSelected: (id: number) => void; + onPillboxSelected: (id: number) => void; otcList: MedicineRecord[]; } const RxHistory = (props: IProps) => { - const pillboxSelected = props.pillboxSelected; + const onPillboxSelected = props.onPillboxSelected; const mm = props.mm; const otcList = props.otcList; const [activeClient, setActiveClient] = useGlobal('activeClient'); @@ -63,7 +63,7 @@ const RxHistory = (props: IProps) => { }} onEdit={(drugLogRecord) => setShowDrugLog({...drugLogRecord})} onDelete={(drugLogRecord) => setShowDeleteDrugLogRecord(drugLogRecord)} - onPillClick={(pillboxId) => pillboxSelected(pillboxId)} + onPillClick={(pillboxId) => onPillboxSelected(pillboxId)} /> { return ( <> - + handleAddEditDrugLog()} @@ -188,7 +188,7 @@ const RxMedicine = (props: IProps) => { /> - +