Merge branch 'main' into panel

openmrs · Jan 16, 2024 · 428a0f3 · 428a0f3
2 parents 0e9699e + 48e7126
commit 428a0f3
Show file tree

Hide file tree

Showing 27 changed files with 788 additions and 421 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -0,0 +1,18 @@
+## Requirements
+
+- [ ] This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a [conventional commit](https://o3-dev.docs.openmrs.org/#/getting_started/contributing?id=your-pr-title-should-indicate-the-type-of-change-it-is) label. See existing PR titles for inspiration.
+- [ ] My work conforms to the [OpenMRS 3.0 Styleguide](https://om.rs/styleguide) and [design documentation](https://zeroheight.com/23a080e38/p/880723-introduction).
+- [ ] My work includes tests or is validated by existing tests.
+
+## Summary
+<!-- Please describe what problems your PR addresses. -->
+
+## Screenshots
+<!-- Required if you are making UI changes. -->
+
+## Related Issue
+<!-- Paste the link to the Jira ticket here if one exists. -->
+<!-- https://issues.openmrs.org/browse/O3- -->
+
+## Other
+<!-- Anything not covered above -->
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -9,7 +9,7 @@ on:
     types:
       - created
 env:
-  ESM_NAME: "@ugandaemr/openmrs-esm-laboratory-app"
+  ESM_NAME: "@openmrs/esm-laboratory-app"
   JS_NAME: "openmrs-esm-laboratory-app.js"
 
 jobs:

diff --git a/README.md b/README.md
@@ -3,13 +3,21 @@
 A frontend module for managing laboratory requests and queues built on OpenMRS 3.x
 
 For more information, please refer to the
-[OpenMRS 3.x Frontend Documentation](https://openmrs.github.io/openmrs-esm-core/#/).
+[OpenMRS 3.x Frontend Documentation](https://o3-docs.openmrs.org/).
+
+### Dashboard
+
+<img src="https://raw.githubusercontent.com/openmrs/openmrs-esm-laboratory/main/assets/screenshots/labs_general_dashboard.png" />
+
+### Adding Results
+
+<img src="https://raw.githubusercontent.com/openmrs/openmrs-esm-laboratory/main/assets/screenshots/labs_enter_results.png" />
 
 # Getting Started
 
 ```sh
 # Clone the repository
-git clone [email protected]:METS-Programme/openmrs-esm-laboratory.git
+git clone [email protected]:openmrs/openmrs-esm-laboratory.git
 
 # to install dependencies
 yarn

diff --git a/assets/screenshots/labs_enter_results.png b/assets/screenshots/labs_enter_results.png
diff --git a/assets/screenshots/labs_general_dashboard.png b/assets/screenshots/labs_general_dashboard.png
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@ugandaemr/openmrs-esm-laboratory-app",
-  "version": "1.0.1",
+  "name": "@openmrs/esm-laboratory-app",
+  "version": "1.0.0",
   "license": "MPL-2.0",
   "description": "Laboratory microfrontend for OpenMRS 3.x",
   "browser": "dist/openmrs-esm-laboratory-app.js",
@@ -35,19 +35,22 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/METS-Programme/openmrs-esm-laboratory.git"
+    "url": "git+https://github.com/openmrs/openmrs-esm-laboratory.git"
   },
-  "homepage": "https://github.com/METS-Programme/openmrs-esm-laboratory#readme",
+  "homepage": "https://github.com/openmrs/openmrs-esm-laboratory#readme",
   "publishConfig": {
     "access": "public"
   },
   "bugs": {
-    "url": "https://github.com/METS-Programme/openmrs-esm-laboratory/issues"
+    "url": "https://github.com/openmrs/openmrs-esm-laboratory/issues"
   },
   "dependencies": {
     "@carbon/react": "^1.14.0",
+    "@hookform/resolvers": "^3.3.4",
     "lodash-es": "^4.17.21",
-    "react-to-print": "^2.14.15"
+    "react-hook-form": "^7.49.3",
+    "react-to-print": "^2.14.15",
+    "zod": "^3.22.4"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "*",

diff --git a/src/completed-list/completed-list.component.tsx b/src/completed-list/completed-list.component.tsx
@@ -34,11 +34,88 @@ import {
 import styles from "./completed-list.scss";
 import { getStatusColor } from "../utils/functions";
 
-interface CompletedlistProps {
+interface CompletedListProps {
   fulfillerStatus: string;
 }
 
-const CompletedList: React.FC<CompletedlistProps> = ({ fulfillerStatus }) => {
+interface TableRowProps {
+  entry: {
+    uuid: string;
+    orderNumber: string;
+    accessionNumber: string;
+    concept: { display: string };
+    action: string;
+    fulfillerStatus: string;
+    orderer: { display: string };
+    urgency: string;
+    dateActivated: string;
+    patient: { display: string };
+  };
+}
+
+const StatusTag: React.FC<{ fulfillerStatus: string }> = ({
+  fulfillerStatus,
+}) => {
+  return (
+    <Tag>
+      <span
+        className={styles.statusContainer}
+        style={{ color: `${getStatusColor(fulfillerStatus)}` }}
+      >
+        <span>{fulfillerStatus}</span>
+      </span>
+    </Tag>
+  );
+};
+
+const CustomTableRow: React.FC<TableRowProps> = ({ entry }) => {
+  const {
+    uuid,
+    orderNumber,
+    accessionNumber,
+    concept,
+    action,
+    fulfillerStatus,
+    orderer,
+    urgency,
+    dateActivated,
+    patient,
+  } = entry;
+
+  return (
+    <TableRow key={uuid}>
+      <TableCell>
+        <span>{formatDate(parseDate(dateActivated))}</span>
+      </TableCell>
+      <TableCell>
+        <span>{orderNumber}</span>
+      </TableCell>
+      <TableCell>
+        <span>{patient.display.split("-")[1]}</span>
+      </TableCell>
+      <TableCell>
+        <span>{accessionNumber}</span>
+      </TableCell>
+      <TableCell>
+        <span>{concept.display}</span>
+      </TableCell>
+      <TableCell>
+        <span className="single-line-content">{action}</span>
+      </TableCell>
+      <TableCell>
+        <StatusTag fulfillerStatus={fulfillerStatus} />
+      </TableCell>
+      <TableCell>
+        <span>{orderer.display}</span>
+      </TableCell>
+      <TableCell>
+        <span>{urgency}</span>
+      </TableCell>
+    </TableRow>
+  );
+};
+
+const CompletedList: React.FC<CompletedListProps> = ({ fulfillerStatus }) => {
   const { t } = useTranslation();
 
   const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState("");
@@ -59,173 +136,49 @@ const CompletedList: React.FC<CompletedlistProps> = ({ fulfillerStatus }) => {
     currentPage,
   } = usePagination(workListEntries, currentPageSize);
 
-  // get picked orders
-  let columns = [
+  const tableColumns = [
     { id: 0, header: t("date", "Date"), key: "date" },
-
     { id: 1, header: t("orderNumber", "Order Number"), key: "orderNumber" },
+    { id: 2, header: t("patient", "Patient"), key: "patient" },
     {
-      id: 2,
+      id: 3,
       header: t("accessionNumber", "Accession Number"),
       key: "accessionNumber",
     },
-    { id: 3, header: t("test", "Test"), key: "test" },
-    { id: 4, header: t("action", "Action"), key: "action" },
-    { id: 5, header: t("status", "Status"), key: "status" },
-    { id: 6, header: t("orderer", "Orderer"), key: "orderer" },
-    { id: 7, header: t("orderType", "Order Type"), key: "orderType" },
+    { id: 4, header: t("test", "Test"), key: "test" },
+    { id: 5, header: t("action", "Action"), key: "action" },
+    { id: 6, header: t("status", "Status"), key: "status" },
+    { id: 7, header: t("orderer", "Orderer"), key: "orderer" },
     { id: 8, header: t("urgency", "Urgency"), key: "urgency" },
   ];
 
   const tableRows = useMemo(() => {
-    return paginatedWorkListEntries?.map((entry, index) => ({
-      ...entry,
-      id: entry.uuid,
-      date: {
-        content: (
-          <>
-            <span>{formatDate(parseDate(entry.dateActivated))}</span>
-          </>
-        ),
-      },
-      orderNumber: { content: <span>{entry.orderNumber}</span> },
-      accessionNumber: { content: <span>{entry.accessionNumber}</span> },
-      test: { content: <span>{entry.concept.display}</span> },
-      action: { content: <span>{entry.action}</span> },
-      status: {
-        content: (
-          <>
-            <Tag>
-              <span
-                className={styles.statusContainer}
-                style={{ color: `${getStatusColor(entry.fulfillerStatus)}` }}
-              >
-                <span>{entry.fulfillerStatus}</span>
-              </span>
-            </Tag>
-          </>
-        ),
-      },
-      orderer: { content: <span>{entry.orderer.display}</span> },
-      orderType: { content: <span>{entry.orderType.display}</span> },
-      urgency: { content: <span>{entry.urgency}</span> },
-    }));
+    return paginatedWorkListEntries?.map((entry, index) => (
+      <CustomTableRow key={index} entry={entry} />
+    ));
   }, [paginatedWorkListEntries]);
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
   }
 
-  if (paginatedWorkListEntries?.length >= 0) {
+  if (paginatedWorkListEntries?.length > 0) {
     return (
       <div>
         <div className={styles.headerBtnContainer}></div>
-        <DataTable rows={tableRows} headers={columns} useZebraStyles>
-          {({
-            rows,
-            headers,
-            getHeaderProps,
-            getTableProps,
-            getRowProps,
-            onInputChange,
-          }) => (
-            <TableContainer className={styles.tableContainer}>
-              <TableToolbar
-                style={{
-                  position: "static",
-                  height: "3rem",
-                  overflow: "visible",
-                  backgroundColor: "color",
-                }}
-              >
-                <TableToolbarContent className={styles.toolbar}>
-                  <Layer style={{ margin: "5px" }}>
-                    <DatePicker dateFormat="Y-m-d" datePickerType="single">
-                      <DatePickerInput
-                        labelText={""}
-                        id="activatedOnOrAfterDate"
-                        placeholder="YYYY-MM-DD"
-                        onChange={(event) => {
-                          setActivatedOnOrAfterDate(event.target.value);
-                        }}
-                        type="date"
-                        value={activatedOnOrAfterDate}
-                      />
-                    </DatePicker>
-                  </Layer>
-                  <Layer style={{ margin: "5px" }}>
-                    <TableToolbarSearch
-                      onChange={onInputChange}
-                      placeholder={t("searchThisList", "Search this list")}
-                      size="sm"
-                    />
-                  </Layer>
-                </TableToolbarContent>
-              </TableToolbar>
-              <br />
-              <Table
-                {...getTableProps()}
-                className={styles.activePatientsTable}
-              >
-                <TableHead>
-                  <TableRow>
-                    {headers.map((header) => (
-                      <TableHeader {...getHeaderProps({ header })}>
-                        {header.header?.content ?? header.header}
-                      </TableHeader>
-                    ))}
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {rows.map((row, index) => {
-                    return (
-                      <React.Fragment key={row.id}>
-                        <TableRow {...getRowProps({ row })} key={row.id}>
-                          {row.cells.map((cell) => (
-                            <TableCell key={cell.id}>
-                              {cell.value?.content ?? cell.value}
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      </React.Fragment>
-                    );
-                  })}
-                </TableBody>
-              </Table>
-              {rows.length === 0 ? (
-                <div className={styles.tileContainer}>
-                  <Tile className={styles.tile}>
-                    <div className={styles.tileContent}>
-                      <p className={styles.content}>
-                        {t(
-                          "noCompletedListToDisplay",
-                          "No Completed List to display"
-                        )}
-                      </p>
-                    </div>
-                  </Tile>
-                </div>
-              ) : null}
-              <Pagination
-                forwardText="Next page"
-                backwardText="Previous page"
-                page={currentPage}
-                pageSize={currentPageSize}
-                pageSizes={pageSizes}
-                totalItems={workListEntries?.length}
-                className={styles.pagination}
-                onChange={({ pageSize, page }) => {
-                  if (pageSize !== currentPageSize) {
-                    setPageSize(pageSize);
-                  }
-                  if (page !== currentPage) {
-                    goTo(page);
-                  }
-                }}
-              />
-            </TableContainer>
-          )}
-        </DataTable>
+        <DataTable rows={tableRows} headers={tableColumns} useZebraStyles />
+      </div>
+    );
+  } else {
+    return (
+      <div className={styles.tileContainer}>
+        <Tile className={styles.tile}>
+          <div className={styles.tileContent}>
+            <p className={styles.content}>
+              {t("noCompletedListToDisplay", "No Completed List to display")}
+            </p>
+          </div>
+        </Tile>
       </div>
     );
   }

diff --git a/src/completed-list/completed-list.scss b/src/completed-list/completed-list.scss
@@ -229,4 +229,5 @@ title {
   @include type.type-style('heading-compact-02');
   color: $text-02;
   margin-bottom: 0.5rem;
-}
+}
+
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,4 +1,4 @@
-export const moduleName = "@ugandaemr/openmrs-esm-laboratory-app";
+export const moduleName = "@openmrs/esm-laboratory-app";
 
 export const LABORATARORY_ENCOUNTER_TYPE =
   "cbf01392-ca29-11e9-a32f-2a2ae2dbcce4";