ft : lab results

src/index.ts

@@ -59,6 +59,11 @@ export const addToWorklistDialog = getAsyncLifecycle(
   options
 );
 
+export const resultsSummaryWorkSpace = getAsyncLifecycle(
+  () => import("./patient-chart/results-summary/results-summary.component"),
+  options
+);
+
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }

src/patient-chart/laboratory-item/view-laboratory-item.component.tsx

@@ -0,0 +1,37 @@
+import { showModal, useSession } from "@openmrs/esm-framework";
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Tooltip } from "@carbon/react";
+import { View } from "@carbon/react/icons";
+import { launchPatientWorkspace } from "@openmrs/esm-patient-common-lib";
+
+interface ViewLaboratoryItemActionMenuProps {
+  closeModal: () => void;
+}
+
+const ViewLaboratoryItemActionMenu: React.FC<
+  ViewLaboratoryItemActionMenuProps
+> = () => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(
+    () =>
+      launchPatientWorkspace("results-summary", {
+        workspaceTitle: `Results Summary Form`,
+      }),
+    []
+  );
+
+  return (
+    <Tooltip align="bottom" label="View Results">
+      <Button
+        kind="ghost"
+        onClick={handleClick}
+        iconDescription={t("viewResults", "View Results ")}
+        renderIcon={(props) => <View size={16} {...props} />}
+      ></Button>
+    </Tooltip>
+  );
+};
+
+export default ViewLaboratoryItemActionMenu;

src/patient-chart/laboratory-order.component.tsx

@@ -1,16 +1,43 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
+  EmptyState,
   EncounterList,
   EncounterListColumn,
   getObsFromEncounter,
 } from "@ohri/openmrs-esm-ohri-commons-lib";
-import moment from "moment";
+import styles from "./laboratory-order.scss";
+import { age, usePagination, useSession } from "@openmrs/esm-framework";
+import { usePatientQueuesList } from "../queue-list/laboratory-patient-list.resource";
 import {
-  moduleName,
-  LABORATARORY_ENCOUNTER_TYPE,
-  TEST_ORDER_ENCOUNTER_TYPE,
-} from "../constants";
+  DataTable,
+  DataTableHeader,
+  DataTableSkeleton,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TabPanel,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Layer,
+  Tag,
+  TableExpandedRow,
+} from "@carbon/react";
+import LabTests from "../queue-list/lab-tests/lab-tests.component";
+import {
+  formatWaitTime,
+  getTagColor,
+  trimVisitNumber,
+} from "../utils/functions";
+import ViewLaboratoryItemActionMenu from "./laboratory-item/view-laboratory-item.component";
 
 interface LaboratoryOrderOverviewProps {
   patientUuid: string;
@@ -21,68 +48,193 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const columnsLab: EncounterListColumn[] = useMemo(
-    () => [
-      {
-        key: "encounterDate",
-        header: t("encounterDate", "Encounter Date"),
-        getValue: (encounter) => {
-          return moment(encounter.encounterDatetime).format("DD-MMM-YYYY");
-        },
+  const session = useSession();
+
+  // const { patientQueueEntries, isLoading } = usePatientQueuesList(
+  //   session?.sessionLocation?.uuid,
+  //   status
+  // );
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [page, setPage] = useState(1);
+  const [currentPageSize, setPageSize] = useState(10);
+  const [nextOffSet, setNextOffSet] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // const {
+  //   goTo,
+  //   results: paginatedQueueEntries,
+  //   currentPage,
+  // } = usePagination(patientQueueEntries, currentPageSize);
+
+  const items = [
+    {
+      encounterDate: "2023-04-05",
+      orders: ["test", "test", "test", "test", "test", "test", "test", "test"],
+      location: session.sessionLocation.display,
+      results: "tests returned",
+    },
+    {
+      encounterDate: "2023-04-05",
+      orders: ["test", "test", "test", "test", "test", "test", "test", "test"],
+      location: session.sessionLocation.display,
+      results: "tests returned",
+    },
+  ];
+
+  let columns = [
+    {
+      id: 0,
+      header: t("encounterDate", "Encouter Date"),
+      key: "encounterDate",
+    },
+    { id: 1, header: t("orders", "Order"), key: "orders" },
+    { id: 2, header: t("location", "Location"), key: "location" },
+    { id: 3, header: t("status", "Status"), key: "status" },
+    { id: 4, header: t("actions", "Action"), key: "actions" },
+  ];
+
+  const tableRows = useMemo(() => {
+    return items?.map((entry) => ({
+      ...entry,
+      encounterDate: {
+        content: <span>{entry.encounterDate}</span>,
       },
-      {
-        key: "testOrders",
-        header: t("deliveryType", "Test Order(s)"),
-        getValue: (encounter) => {
-          return getObsFromEncounter(encounter, TEST_ORDER_ENCOUNTER_TYPE);
-        },
+      orders: {
+        content: (
+          <>
+            {entry.orders.map((order) => {
+              return <Tag role="tooltip">{order}</Tag>;
+            })}
+          </>
+        ),
       },
-
-      {
-        key: "actions",
-        header: t("actions", "Actions"),
-        getValue: (encounter) => {
-          const baseActions = [
-            {
-              form: {
-                name: "HMIS LAB 001:General Laboratory Test Request Form",
-              },
-              encounterUuid: encounter.uuid,
-              intent: "*",
-              label: "View Details",
-              mode: "view",
-            },
-            {
-              form: {
-                name: "HMIS LAB 001:General Laboratory Test Request Form",
-              },
-              encounterUuid: encounter.uuid,
-              intent: "*",
-              label: "Edit Form",
-              mode: "edit",
-            },
-          ];
-          return baseActions;
-        },
+      location: {
+        content: <span>{entry.location}</span>,
       },
-    ],
-    [t]
-  );
-  const headerTitle = t("Laboratory");
+      status: {
+        content: <span>{entry.results}</span>,
+      },
+      actions: {
+        content: (
+          <>
+            <ViewLaboratoryItemActionMenu closeModal={() => true} />
+          </>
+        ),
+      },
+    }));
+  }, [items]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (items?.length) {
+    return (
+      <div>
+        <div className={styles.headerBtnContainer}></div>
+        <DataTable rows={tableRows} headers={columns} isSortable useZebraStyles>
+          {({
+            rows,
+            headers,
+            getHeaderProps,
+            getTableProps,
+            getRowProps,
+            onInputChange,
+          }) => (
+            <TableContainer className={styles.tableContainer}>
+              <TableToolbar
+                style={{
+                  position: "static",
+                  height: "3rem",
+                  overflow: "visible",
+                  backgroundColor: "color",
+                }}
+              >
+                <TableToolbarContent>
+                  <Layer>
+                    <TableToolbarSearch
+                      onChange={onInputChange}
+                      placeholder={t("searchThisList", "Search this list")}
+                      size="sm"
+                    />
+                  </Layer>
+                </TableToolbarContent>
+              </TableToolbar>
+              <Table
+                {...getTableProps()}
+                className={styles.activePatientsTable}
+              >
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader />
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => {
+                    return (
+                      <React.Fragment key={row.id}>
+                        <TableExpandRow {...getRowProps({ row })} key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.value?.content ?? cell.value}
+                            </TableCell>
+                          ))}
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow
+                            className={styles.expandedLabQueueVisitRow}
+                            colSpan={headers.length + 2}
+                          >
+                            <>
+                              <LabTests />
+                            </>
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow
+                            className={styles.hiddenRow}
+                            colSpan={headers.length + 2}
+                          />
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {/* <Pagination
+                forwardText="Next page"
+                backwardText="Previous page"
+                page={currentPage}
+                pageSize={currentPageSize}
+                pageSizes={pageSizes}
+                totalItems={patientQueueEntries?.length}
+                className={styles.pagination}
+                onChange={({ pageSize, page }) => {
+                  if (pageSize !== currentPageSize) {
+                    setPageSize(pageSize);
+                  }
+                  if (page !== currentPage) {
+                    goTo(page);
+                  }
+                }}
+              /> */}
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  }
 
   return (
-    <EncounterList
-      patientUuid={patientUuid}
-      encounterType={LABORATARORY_ENCOUNTER_TYPE}
-      formList={[{ name: "HMIS LAB 001:General Laboratory Test Request Form" }]}
-      columns={columnsLab}
-      description={headerTitle}
-      headerTitle={headerTitle}
-      launchOptions={{
-        displayText: "Add",
-        moduleName: moduleName,
-      }}
-    />
+    <div>
+      <div className={styles.headerBtnContainer}></div>
+      <EmptyState displayText={"Tests Ordered"} headerTitle={"Tests Ordered"} />
+    </div>
   );
 };
 

src/patient-chart/laboratory-order.scss

@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+@import '../root.scss';
+.headerBtnContainer {
+    background-color: $ui-background;
+    padding: spacing.$spacing-05;
+    text-align: right;
+  }

src/patient-chart/results-summary/results-summary.component.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const ResultsSummary = () => {
+  return <span>Laboratory Results</span>;
+};
+
+export default ResultsSummary;

src/queue-list/lab-dialogs/add-to-worklist-dialog.resource.ts

@@ -117,3 +117,10 @@ export function useSpecimenTypes() {
     isLoading,
   };
 }
+
+// generate specimen id
+export function useGenerateSampleID() {
+  return {
+    sampleID: {},
+  };
+}

src/routes.json

@@ -47,6 +47,10 @@
     {
       "name": "add-to-worklist-dialog",
       "component": "addToWorklistDialog"
+    },
+    {
+      "name": "results-summary",
+      "component": "resultsSummaryWorkSpace"
     }
   ]
 }