@openmrs/esm-laboratory-app 1.0.1-pre.106

package/src/queue-list/laboratory-patient-list.component.tsx

@@ -0,0 +1,277 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TabPanel,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Layer,
+  Tag,
+  TableExpandedRow,
+  Tile,
+  Button,
+  DatePicker,
+  DatePickerInput,
+} from "@carbon/react";
+import { TrashCan } from "@carbon/react/icons";
+
+import { useTranslation } from "react-i18next";
+import {
+  age,
+  formatDate,
+  formatDatetime,
+  parseDate,
+  showModal,
+  usePagination,
+  useSession,
+} from "@openmrs/esm-framework";
+import styles from "./laboratory-queue.scss";
+import { getStatusColor } from "../utils/functions";
+import { Result, useGetOrdersWorklist } from "../work-list/work-list.resource";
+import PickLabRequestActionMenu from "./pick-lab-request-menu.component";
+
+interface LaboratoryPatientListProps {}
+
+interface RejectOrderProps {
+  order: Result;
+}
+
+const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => {
+  const { t } = useTranslation();
+
+  const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState("");
+
+  const { workListEntries, isLoading } = useGetOrdersWorklist(
+    activatedOnOrAfterDate,
+    ""
+  );
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+
+  const {
+    goTo,
+    results: paginatedWorklistQueueEntries,
+    currentPage,
+  } = usePagination(workListEntries, currentPageSize);
+
+  const RejectOrder: React.FC<RejectOrderProps> = ({ order }) => {
+    const launchRejectOrderModal = useCallback(() => {
+      const dispose = showModal("reject-order-dialog", {
+        closeModal: () => dispose(),
+        order,
+      });
+    }, [order]);
+    return (
+      <Button
+        kind="ghost"
+        onClick={launchRejectOrderModal}
+        renderIcon={(props) => <TrashCan size={16} {...props} />}
+      />
+    );
+  };
+
+  // get picked orders
+  let columns = [
+    { 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: 3,
+      header: t("accessionNumber", "Accession Number"),
+      key: "accessionNumber",
+    },
+    { 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: 8, header: t("orderer", "Orderer"), key: "orderer" },
+    { id: 9, header: t("urgency", "Urgency"), key: "urgency" },
+    { id: 10, header: t("actions", "Actions"), key: "actions" },
+  ];
+
+  const tableRows = useMemo(() => {
+    return paginatedWorklistQueueEntries
+      ?.filter((item) => item.action === "NEW")
+      .map((entry, index) => ({
+        ...entry,
+        id: entry.uuid,
+        date: {
+          content: (
+            <>
+              <span>{formatDate(parseDate(entry.dateActivated))}</span>
+            </>
+          ),
+        },
+        patient: {
+          content: (
+            <>
+              <span>{entry.patient.display.split("-")[1]}</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> },
+        urgency: { content: <span>{entry.urgency}</span> },
+        actions: {
+          content: (
+            <>
+              <PickLabRequestActionMenu
+                order={paginatedWorklistQueueEntries[index]}
+                closeModal={() => true}
+              />
+              <RejectOrder order={paginatedWorklistQueueEntries[index]} />
+            </>
+          ),
+        },
+      }));
+  }, [paginatedWorklistQueueEntries]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (paginatedWorklistQueueEntries?.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>
+                  <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>
+                    <TableToolbarSearch
+                      onChange={onInputChange}
+                      placeholder={t("searchThisList", "Search this list")}
+                      size="sm"
+                    />
+                  </Layer>
+                </TableToolbarContent>
+              </TableToolbar>
+              <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(
+                          "noWorklistsToDisplay",
+                          "No worklists orders 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>
+      </div>
+    );
+  }
+};
+
+export default LaboratoryPatientList;

package/src/queue-list/laboratory-patient-list.resource.ts

@@ -0,0 +1,86 @@
+import { PatientQueue, UuidDisplay } from "../types/patient-queues";
+import dayjs from "dayjs";
+import useSWR from "swr";
+
+import { formatDate, openmrsFetch, parseDate } from "@openmrs/esm-framework";
+
+export interface MappedPatientQueueEntry {
+  id: string;
+  name: string;
+  patientAge: number;
+  patientSex: string;
+  patientDob: string;
+  patientUuid: string;
+  priority: string;
+  priorityComment: string;
+  status: string;
+  waitTime: string;
+  locationFrom?: string;
+  locationToName?: string;
+  visitNumber: string;
+  identifiers: Array<UuidDisplay>;
+  dateCreated: string;
+  creatorUuid: string;
+  creatorUsername: string;
+  creatorDisplay: string;
+}
+
+export function usePatientQueuesList(
+  currentQueueRoomLocationUuid: string,
+  status: string
+) {
+  const apiUrl = `/ws/rest/v1/patientqueue?v=full&room=${currentQueueRoomLocationUuid}&status=${status}`;
+  return usePatientQueueRequest(apiUrl);
+}
+
+export function usePatientQueueRequest(apiUrl: string) {
+  const { data, error, isLoading, isValidating, mutate } = useSWR<
+    { data: { results: Array<PatientQueue> } },
+    Error
+  >(apiUrl, openmrsFetch, { refreshInterval: 3000 });
+
+  const mappedQueues = data?.data?.results.map((queue: PatientQueue) => {
+    return {
+      ...queue,
+      id: queue.uuid,
+      name: queue.patient?.person.display,
+      patientUuid: queue.patient?.uuid,
+      priorityComment: queue.priorityComment,
+      encounter: queue.encounter,
+      priority:
+        queue.priorityComment === "Urgent" ? "Priority" : queue.priorityComment,
+      priorityLevel: queue.priority,
+      waitTime: queue.dateCreated
+        ? `${dayjs().diff(dayjs(queue.dateCreated), "minutes")}`
+        : "--",
+      status: queue.status,
+      patientAge: queue.patient?.person?.age,
+      patientSex: queue.patient?.person?.gender === "M" ? "MALE" : "FEMALE",
+      patientDob: queue.patient?.person?.birthdate
+        ? formatDate(parseDate(queue.patient.person.birthdate), { time: false })
+        : "--",
+      identifiers: queue.patient?.identifiers,
+      locationFrom: queue.locationFrom?.uuid,
+      locationFromName: queue.locationFrom?.name,
+      locationTo: queue.locationTo?.uuid,
+      locationToName: queue.locationTo?.name,
+      queueRoom: queue.locationTo?.display,
+      visitNumber: queue.visitNumber,
+      dateCreated: queue.dateCreated
+        ? formatDate(parseDate(queue.dateCreated), { time: false })
+        : "--",
+      creatorUuid: queue.creator?.uuid,
+      creatorUsername: queue.creator?.username,
+      creatorDisplay: queue.creator?.display,
+    };
+  });
+
+  return {
+    patientQueueEntries: mappedQueues || [],
+    patientQueueCount: mappedQueues?.length ?? 0,
+    isLoading,
+    isError: error,
+    isValidating,
+    mutate,
+  };
+}

package/src/queue-list/laboratory-queue.component.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from "react";
+import { Tab, Tabs, TabList, TabPanels, Search } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import styles from "./laboratory-queue.scss";
+import LaboratoryPatientList from "./laboratory-patient-list.component";
+
+enum TabTypes {
+  STARRED,
+  SYSTEM,
+  USER,
+  ALL,
+}
+
+const LaboratoryQueueList: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedTab, setSelectedTab] = useState(TabTypes.STARRED);
+  const [searchTermUserInput, setSearchTermUserInput] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [location, setLocation] = useState("");
+
+  const tabs = [
+    {
+      key: "testedOrders",
+      header: t("testedOrders", "Tests ordered"),
+    },
+    {
+      key: "worklist",
+      header: t("worklist", "Worklist"),
+    },
+    {
+      key: "referredTests",
+      header: t("referredTests", "Referred tests"),
+    },
+    {
+      key: "completedTests",
+      header: t("completedTests", "Completed tests"),
+    },
+    {
+      key: "reviewList",
+      header: t("reviewList", "Review List"),
+    },
+    {
+      key: "approveList",
+      header: t("approveList", "Approval List"),
+    },
+  ];
+
+  useEffect(() => {
+    const debounceFn = setTimeout(() => {
+      setSearchTerm(searchTermUserInput);
+    }, 500);
+
+    return () => clearTimeout(debounceFn);
+  }, [searchTermUserInput]);
+
+  return (
+    <main className={`omrs-main-content`}>
+      <section className={styles.orderTabsContainer}>
+        <Tabs
+          className={styles.orderTabs}
+          type="container"
+          tabContentClassName={styles.hiddenTabsContent}
+          onSelectionChange={setSelectedTab}
+        >
+          <TabList
+            aria-label={t("tabList", "Tab List")}
+            contained
+            className={styles.tabsContainer}
+          >
+            {tabs.map((tab, index) => {
+              return (
+                <Tab
+                  title={t(tab.key)}
+                  key={index}
+                  id={"tab-" + index}
+                  className={styles.tab}
+                >
+                  {t(tab.header)}
+                </Tab>
+              );
+            })}
+          </TabList>
+          <div className={styles.searchContainer}>
+            <Search
+              closeButtonLabelText={t("clearSearchInput", "Clear search input")}
+              defaultValue={searchTermUserInput}
+              placeholder={t(
+                "searchByPatientIdOrName",
+                "Search by patient ID or name"
+              )}
+              labelText={t(
+                "searchByPatientIdOrName",
+                "Search by patient ID or name"
+              )}
+              onChange={(e) => {
+                e.preventDefault();
+                setSearchTermUserInput(e.target.value);
+              }}
+              size="md"
+              className={styles.patientSearch}
+            />
+          </div>
+          {/* <TabPanels>
+            {tabs.map((tab, index) => {
+              return (
+                <LaboratoryPatientList
+                  location={location}
+                  searchTerm={searchTerm}
+                  status={tab.status}
+                />
+              );
+            })}
+          </TabPanels> */}
+        </Tabs>
+      </section>
+    </main>
+  );
+};
+
+export default LaboratoryQueueList;

package/src/queue-list/laboratory-queue.scss

@@ -0,0 +1,213 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+@import '../root.scss';
+
+title {
+  width: 6.938rem;
+  height: 1.75rem;
+  margin: 0.438rem 22.875rem 0.813rem 0;
+  font-family: IBMPlexSans;
+  font-size: 1.25rem;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: normal;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.breadcrumbsSlot {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+.orderTabsContainer {
+  height: 100%;
+  width: 100%;
+
+  :global(.cds--tab-content) {
+    padding: 0 !important;
+  }
+}
+
+.orderTabs {
+  grid-column: 'span 2';
+  padding: 0 spacing.$spacing-05;
+}
+
+.newListButton {
+  width: fit-content;
+  justify-self: end;
+  align-self: center;
+}
+
+.tabsContainer {
+  background-color: $ui-02;
+
+  :global(.cds--tabs__nav-item--selected) {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+
+  :global(.cds--tab--list) button {
+    max-width: 12rem !important;
+  }
+}
+
+.hiddenTabsContent,
+.tabs .hiddenTabsContent {
+  display: none;
+}
+
+.patientListTableContainer {
+  grid-row: 3 / 4;
+  grid-column: 1 / 2;
+  height: 100%;
+  margin: 0.5rem spacing.$spacing-05;
+  background-color: $ui-01;
+  border: 0.5px solid #e0e0e0;
+
+  :global(.cds--data-table-container) {
+    padding-top: 0 !important;
+  }
+
+  tbody>tr>:nth-child(2) {
+    white-space: nowrap;
+  }
+
+  :global(.cds--data-table td) {
+    height: unset !important;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 1) td {
+    background-color: $ui-02;
+    border-bottom: 1px solid $ui-03;
+    border-top: 1px solid $ui-03;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 3) td {
+    background-color: $ui-01;
+    border-bottom: 1px solid $ui-03;
+  }
+}
+
+.tableContainer {
+  background-color: $ui-01;
+  margin: 0 spacing.$spacing-05;
+  padding: 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  th {
+    color: $text-02;
+  }
+
+  :global(.cds--data-table) {
+    background-color: $ui-03;
+  }
+
+  .toolbarContent {
+    height: spacing.$spacing-07;
+    margin-bottom: spacing.$spacing-02;
+  }
+}
+
+.activePatientsTable tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+.headerBtnContainer {
+  background-color: $ui-background;
+  padding: spacing.$spacing-05;
+  text-align: right;
+}
+
+.searchContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  padding-top: 0.5rem;
+
+  :global(.cds--search-magnifier-icon) {
+    z-index: 0 !important;
+  }
+
+  input {
+    background-color: #fff;
+  }
+}
+
+.addOrderBtn {
+  width: 10rem !important;
+  padding: 0.5rem !important;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.patientSearch {
+  width: 25rem;
+  border-bottom-color: $ui-03;
+}
+
+.locationFilter {
+  width: 25rem;
+}
+
+.search {
+  width: 100%;
+  max-width: 16rem;
+  background-color: $ui-02;
+  border-bottom-color: $ui-03;
+}
+
+.container {
+  background-color: $ui-01;
+}
+
+.expandedLabQueueVisitRow {
+  :global(.cds--tab-content) {
+    padding: 0.5rem 0;
+  }
+
+  td {
+    padding: 0.5rem;
+
+    > div {
+      max-height: max-content !important;
+      background-color: $ui-02;
+    }
+  }
+
+  th[colspan] td[colspan] > div:first-child {
+    padding: 0 1rem;
+  }
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}