Added Selenium tests for inventory page

osler/assets/core/all-patients/PatientTable.js

@@ -3,7 +3,7 @@ import axios from 'axios';
 import TableManager from './TableManager';
 import Container from 'react-bootstrap/Container';
 import globalFilter from './globalFilter';
-
+import { DateTime } from 'luxon'
 
 function PatientTable(props) {
 
@@ -29,12 +29,11 @@ function PatientTable(props) {
             if (wu == null) {
               return 'Intake';
             }
-            const date = new Date(wu.written_datetime);
+            const dt = DateTime.fromISO(wu.written_datetime);
             const options = {
               year: 'numeric', month: 'short', day: 'numeric'
             }
-            // should default to current locale
-            const dateString = date.toLocaleDateString(undefined, options);
+            const dateString = dt.toLocaleString(options);
             const infoString = wu.is_pending ? "Pending from" : "Seen";
             return (
               <div>
@@ -98,7 +97,7 @@ function PatientTable(props) {
             columns={columns} 
             data={data}
             globalFilter={globalFilter}
-            id='all-patients-table' 
+            id='all-patients-table'
           />
         )}
     </Container>

osler/assets/core/all-patients/SearchBar.js

@@ -22,8 +22,8 @@ function SearchBar({
       <FormControl
         aria-label="search bar"
         aria-describedby="search-addon"
-        id="all-patients-filter-input"
-        placeholder="Filter by patient name"
+        id="search-bar"
+        placeholder="Search"
         value={value || ""}
         onChange={e => {
           setValue(e.target.value);

osler/assets/core/all-patients/TableManager.js

@@ -1,12 +1,12 @@
 import React from "react";
-import { useTable, useGlobalFilter, usePagination } from "react-table";
+import { useTable, useGlobalFilter, usePagination, useSortBy } from "react-table";
 import SearchBar from "./SearchBar";
 import PaginationBar from "./PaginationBar";
 import Table from "react-bootstrap/Table";
-
+import { BsArrowUp, BsArrowDown } from "react-icons/bs"
 
 function TableManager({ columns, data, globalFilter, id }) {
-  // mainly follow official example from react-table
+
   const {
     getTableProps,
     getTableBodyProps,
@@ -27,24 +27,37 @@ function TableManager({ columns, data, globalFilter, id }) {
       columns,
       data,
       globalFilter: globalFilter,
-      initialState: { pageIndex: 0 },
+      initialState: { 
+        pageIndex: 0,
+      },
     },
     useGlobalFilter,
-    usePagination
+    useSortBy,
+    usePagination,
   );
 
   return (
     <div>
-      <SearchBar
+      {<SearchBar
         globalFilter={state.globalFilter}
         setGlobalFilter={setGlobalFilter}
-      />
+      />}
       <Table {...getTableProps()} id={id}>
         <thead>
           {headerGroups.map((headerGroup) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column) => (
-                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
+                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
+                  {column.render("Header")}
+                  {column.isSorted &&
+                    <span>
+                      {column.isSortedDesc
+                        ? <BsArrowDown />
+                        : <BsArrowUp />
+                      }
+                    </span>
+                  }
+                </th>
               ))}
             </tr>
           ))}

osler/assets/inventory/drug-list/DrugListTable.js

@@ -0,0 +1,193 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import TableManager from '../../core/all-patients/TableManager';
+import CSRFToken from '../../util/CSRFToken';
+import compare from '../../util/compare';
+import simpleComparator from '../../util/simpleComparator';
+import Container from 'react-bootstrap/Container';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+import globalFilter from './globalFilter';
+import { DateTime } from 'luxon';
+
+
+function DrugListTable(props) {
+
+  const [state, setState] = useState({ 'show': false, 'drug': {} });
+
+  const handleClose = () => {
+    setState({ 'show': false, 'drug': {} });
+  }
+  const handleShow = (e, row) => {
+    setState({ 'show': true, 'drug': row });
+  }
+
+  const nameComparator = simpleComparator('name');
+  const categoryComparator = simpleComparator('category');
+  const expirationDateComparator = simpleComparator('expiration_date');
+  const stockComparator = simpleComparator('stock');
+
+  const manufacturerComparator = React.useMemo(() => (rowA,rowB,columnId,desc) => {
+    let cmp = compare(rowA.original.unit,rowB.original.unit);
+    if (cmp == 0) {
+      cmp = compare(rowA.original.manufacturer.toLowerCase(), rowB.original.manufacturer.toLowerCase());
+    }
+    return cmp;
+  });
+
+  const doseComparator = React.useMemo(() => (rowA,rowB,columnId,desc) => {
+    let cmp = compare(rowA.original.unit,rowB.original.unit);
+    if (cmp == 0) {
+      cmp = compare(rowA.original.dose, rowB.original.dose);
+    }
+    return cmp;
+  });
+
+  const columns = React.useMemo(
+    () => {
+      let cols = [
+        {
+          Header: 'Name',
+          accessor: (row) => <a href={"drug/update/" + row.id}>{row.name}</a>,
+          sortType: nameComparator,
+        },
+        {
+          Header: 'Dose',
+          accessor: (row) => `${row.dose} ${row.unit}`,
+          sortType: doseComparator,
+        },
+        {
+          Header: 'Category',
+          accessor: (row) => <strong>{row.category}</strong>,
+          sortType: categoryComparator,
+        },
+        {
+          Header: 'Stock',
+          accessor: (row) => <strong>{row.stock}</strong>,
+          sortType: stockComparator,
+        },
+        {
+          Header: 'Lot Number',
+          accessor: 'lot_number',
+        },
+        {
+          Header: 'Expiration Date',
+          accessor: (row) => {
+            const dt = DateTime.fromISO(row.expiration_date);
+            const now = DateTime.now();
+            const options = {
+              year: 'numeric', month: 'short', day: 'numeric'
+            }
+
+            if (dt <= now) {
+              return <strong style={{color: "red"}}>{dt.toLocaleString(options)}</strong>
+            }
+            if (dt <= now.plus({ days: 60})) {
+              return <strong style={{color: "gold"}}>{dt.toLocaleString(options)}</strong>
+            }
+            return dt.toLocaleString(options);
+          },
+          sortType: expirationDateComparator,
+        },
+        {
+          Header: 'Manufacturer',
+          accessor: 'manufacturer',
+          sortType: manufacturerComparator,
+        },
+        {
+          Header: 'Dispense',
+          accessor: (row) => {
+            return (
+              <Button variant="success" onClick={e => handleShow(e, row)}>
+                Dispense
+              </Button>
+            );
+          },
+          disableSortBy: true,
+        }
+      ]
+      return cols;
+    }
+    ,
+    []
+  );
+
+  const [loading, setLoading] = useState(true);
+  const [drugs, setDrugs] = useState([]);
+  const [patients, setPatients] = useState([]);
+
+  useEffect(() => {
+    const drugUrl = "/api/drugs";
+    const ptUrl = "/api/patients/?fields=name,age,gender,id&filter=active";
+    Promise.all([
+      axios.get(drugUrl), 
+      axios.get(ptUrl),
+    ]).then(function(res) {
+      setDrugs(res[0].data);
+      setPatients(res[1].data);
+      setLoading(false);
+    });
+  }, []);
+
+  return (
+    <Container>
+      {loading ? (
+        <span>Loading...</span>
+      ) : (
+        <>
+          <TableManager
+            columns={columns}
+            data={drugs}
+            globalFilter={globalFilter}
+            id='drug-list-table'
+          />
+          <Modal show={state.show} onHide={handleClose}>
+            {state.drug &&
+              <Form action="/inventory/drug-dispense/" method="post">
+                <CSRFToken />
+                <Modal.Header closeButton>
+                  <Modal.Title>Dispense Drug</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <Form.Group>
+                      <Form.Label>
+                        How much <strong>{state.drug.dose} {state.drug.unit}</strong> would you like to dispense? (Current stock: <strong>{state.drug.stock}</strong>)
+                      </Form.Label>
+                      <Form.Control type="number" min={1} max={state.drug.stock} defaultValue={1} name="num" id="num"/>
+                    </Form.Group>
+                    <Form.Group>
+                      <Form.Control type="hidden" name="pk" id="pk" value={state.drug.id} />
+                    </Form.Group>
+                    <Form.Group>
+                      <Form.Label>
+                        For which patient would you like to dispense <strong>{state.drug.name}</strong>?
+                      </Form.Label>
+                      <Form.Control as="select" name="patient_pk" id="patient_pk">
+                        <option disabled value> -- select patient -- </option>
+                        {patients.map(pt => 
+                          <option value={pt.id} key={pt.id}>
+                            {pt.name} {pt.age}/{pt.gender}
+                          </option>
+                        )}
+                      </Form.Control>
+                    </Form.Group>
+                </Modal.Body>
+                <Modal.Footer>
+                <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                </Button>
+                <Button variant="primary" type="submit">
+                    Dispense Drug
+                </Button>
+                </Modal.Footer>
+              </Form>
+            }
+          </Modal>
+        </>
+      )}
+    </Container>
+  );
+}
+
+export default DrugListTable

osler/assets/inventory/drug-list/globalFilter.js

@@ -0,0 +1,10 @@
+function globalFilter(rows, columnIds, globalFilterValue) {
+    const filterValue = globalFilterValue.toLowerCase();
+    return rows.filter((row) => {
+      const name = row.original.name.toLowerCase();
+      const lot_number = row.original.lot_number.toLowerCase();
+      return (name.includes(filterValue) || lot_number.includes(filterValue));
+    });
+}
+
+export default globalFilter;

osler/assets/inventory/drug-list/index.js

@@ -0,0 +1,13 @@
+import "regenerator-runtime/runtime";
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import DrugListTable from './DrugListTable';
+
+
+export function render(props) {
+    ReactDOM.render(
+        <DrugListTable {...props} />,
+        document.getElementById('root')
+    );
+}

osler/assets/util/CSRFToken.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import getCookie from './getCookie';
+
+const csrftoken = getCookie('csrftoken');
+
+const CSRFToken = () => {
+    return (
+        <input type="hidden" name="csrfmiddlewaretoken" value={csrftoken} />
+    );
+};
+export default CSRFToken;

osler/assets/util/compare.js

@@ -0,0 +1,7 @@
+function compare(a,b) {
+    if (a < b) return -1;
+    if (b > a) return 1;
+    return 0;
+}
+
+export default compare;

osler/assets/util/getCookie.js

@@ -0,0 +1,17 @@
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+export default getCookie;

osler/assets/util/simpleComparator.js

@@ -0,0 +1,7 @@
+import compare from './compare';
+import React from 'react';
+
+const simpleComparator = (field) => React.useMemo(
+() => (rowA,rowB,columnId,desc) => compare(rowA.original[field],rowB.original[field]));
+
+export default simpleComparator;