Merge pull request #358 from RyanNerd/356-reverse-rx-lookup

Users can search a drug name listing clients that take that drug

src/components/Pages/ClientPage.tsx

@@ -163,7 +163,7 @@ const ClientPage = (props: IProps): JSX.Element | null => {
 
                 <Form.Control
                     autoFocus
-                    id="cient-page-search-text"
+                    id="client-page-search-text"
                     isValid={searchIsValid}
                     onChange={(changeEvent) => setSearchText(changeEvent.target.value)}
                     onKeyDown={(keyboardEvent: React.KeyboardEvent<HTMLElement>) => {

src/components/Pages/Grids/RxLookupGrid.tsx

@@ -0,0 +1,34 @@
+import Table from 'react-bootstrap/Table';
+import React from 'reactn';
+import {randomString} from 'utility/common';
+
+interface IProps {
+    lookupList: {Drug: string; LastName: string; FirstName: string}[];
+}
+
+const RxLookupGrid = (props: IProps) => {
+    const lookupList = props.lookupList;
+
+    return (
+        <Table bordered size="sm" striped>
+            <tr>
+                <th>Client</th>
+                <th>Drug</th>
+            </tr>
+            <tbody>
+                {lookupList.map((rxItem, index) => {
+                    const key = index || randomString();
+
+                    return (
+                        <tr id={key.toString()} key={`rx-lookup-grid-${key}`}>
+                            <td>{rxItem.FirstName.trim() + ' ' + rxItem.LastName.trim()}</td>
+                            <td>{rxItem.Drug}</td>
+                        </tr>
+                    );
+                })}
+            </tbody>
+        </Table>
+    );
+};
+
+export default RxLookupGrid;

src/components/Pages/LandingPage.tsx

@@ -1,5 +1,6 @@
 import ClientPage from 'components/Pages/ClientPage';
 import ManagementPage from 'components/Pages/ManagementPage';
+import RxLookup from 'components/Pages/RxLookup';
 import RxPage from 'components/Pages/RxPage';
 import {ReactNode} from 'react';
 import Tab from 'react-bootstrap/Tab';
@@ -48,11 +49,14 @@ const LandingPage = (props: IProps) => {
 
     // Observer to show / hide tabs based on if logged in and if a client has been selected
     useEffect(() => {
-        ['resident', 'medicine', 'management'].map((tab) => {
+        ['resident', 'medicine', 'management', 'rx-lookup'].map((tab) => {
             const element = document.getElementById('landing-page-tabs-tab-' + tab);
             if (element) {
-                if (tab === 'resident' || tab === 'management') element.style.display = apiKey ? 'block' : 'none';
-                else element.style.display = apiKey && activeClient ? 'block' : 'none';
+                if (tab === 'resident' || tab === 'management' || tab === 'rx-lookup') {
+                    element.style.display = apiKey ? 'block' : 'none';
+                } else {
+                    element.style.display = apiKey && activeClient ? 'block' : 'none';
+                }
             }
         });
     }, [activeClient, apiKey]);
@@ -118,6 +122,12 @@ const LandingPage = (props: IProps) => {
                 </Tab.Content>
             </Tab>
 
+            <Tab disabled={!apiKey} eventKey="rx-lookup" title={<Title activeKey={'rx-lookup'}>Rx Lookup</Title>}>
+                <Tab.Content>
+                    <RxLookup activeTabKey={activeTabKey} />
+                </Tab.Content>
+            </Tab>
+
             <Tab disabled={!errorDetails} eventKey="error" title={<Title activeKey="error">Diagnostics</Title>}>
                 <Tab.Content>
                     <DiagnosticPage

src/components/Pages/Modals/ClientEdit.tsx

@@ -30,7 +30,6 @@ const ClientEdit = (props: IProps): JSX.Element | null => {
             if (info.Notes === null) info.Notes = '';
             if (info.Nickname === null) info.Nickname = '';
             if (info.HMIS === null) info.HMIS = 0;
-            if (info.EnrollmentId === null) info.EnrollmentId = 0;
             setClientInfo(info);
         }
     }, [props.clientInfo]);
@@ -284,21 +283,6 @@ const ClientEdit = (props: IProps): JSX.Element | null => {
                         </Col>
                     </Form.Group>
 
-                    <Form.Group as={Row}>
-                        <Form.Label column sm="2">
-                            EnrollmentId
-                        </Form.Label>
-                        <Col sm="4">
-                            <Form.Control
-                                autoComplete="off"
-                                type="number"
-                                name="EnrollmentId"
-                                onChange={(changeEvent) => handleOnChange(changeEvent)}
-                                value={clientInfo.EnrollmentId}
-                            />
-                        </Col>
-                    </Form.Group>
-
                     <Form.Group as={Row}>
                         <Form.Label column sm="2">
                             Notes

src/components/Pages/RxLookup.tsx

@@ -0,0 +1,72 @@
+import RxLookupGrid from 'components/Pages/Grids/RxLookupGrid';
+import Form from 'react-bootstrap/Form';
+import React, {useEffect, useGlobal, useState} from 'reactn';
+
+interface IProps {
+    activeTabKey: string;
+}
+
+const RxLookup = (props: IProps) => {
+    const activeTabKey = props.activeTabKey;
+    const [providers] = useGlobal('providers');
+    const [clientList] = useGlobal('clientList');
+    const medicineProvider = providers.medicineProvider;
+    const [rxResult, setRxResult] = useState<{Drug: string; LastName: string; FirstName: string}[] | []>([]);
+    const [searchText, setSearchText] = useState('');
+
+    useEffect(() => {
+        if (searchText.length > 1) {
+            const findRx = async (drugName: string) => {
+                const result = [] as {Drug: string; LastName: string; FirstName: string}[];
+                const medicineSearchCriteria = {
+                    where: [['Drug', 'LIKE', drugName + '%']],
+                    orderBy: [['ResidentId']]
+                };
+                const meds = await medicineProvider.search(medicineSearchCriteria);
+
+                for (const m of meds) {
+                    if (m.ResidentId) {
+                        const client = clientList.find((c) => c.Id === m.ResidentId);
+
+                        if (client?.Id) {
+                            // eslint-disable-next-line no-console
+                            console.log('client', client);
+                            result.push({FirstName: client.FirstName, LastName: client.LastName, Drug: m.Drug});
+                        }
+                    }
+                }
+                setRxResult(result);
+            };
+            findRx(searchText);
+        } else {
+            setRxResult([]);
+        }
+    }, [clientList, medicineProvider, searchText]);
+
+    if (activeTabKey !== 'rx-lookup') return null;
+
+    return (
+        <Form>
+            <Form.Control
+                autoFocus
+                id="rx-look-up-search-box"
+                onChange={(changeEvent) => setSearchText(changeEvent.target.value)}
+                onKeyDown={(keyboardEvent: React.KeyboardEvent<HTMLElement>) => {
+                    if (keyboardEvent.key === 'Enter') keyboardEvent.preventDefault();
+                }}
+                placeholder="Drug name"
+                style={{width: '350px'}}
+                type="search"
+                value={searchText}
+            />
+
+            {rxResult.length > 0 && (
+                <div className="my-3">
+                    <RxLookupGrid lookupList={rxResult} />{' '}
+                </div>
+            )}
+        </Form>
+    );
+};
+
+export default RxLookup;

src/providers/ClientProvider.ts

@@ -111,6 +111,9 @@ const ClientProvider = (url: string): IClientProvider => {
             if (response.success) {
                 return response.data as ClientRecord;
             } else {
+                if (response.status === 404) {
+                    return {} as ClientRecord;
+                }
                 throw response;
             }
         },

src/types/RecordTypes.ts

@@ -10,7 +10,6 @@ export type ClientRecord = {
     Nickname: string;
     Notes: string;
     HMIS: number;
-    EnrollmentId: number;
     Updated?: null | Date;
     UserId?: number;
     deleted_at?: null | Date;