(feat) lab order actions - Add order-actions-slot and switches icons for overflow menu

src/index.ts

@@ -5,6 +5,7 @@ import {
 } from "@openmrs/esm-framework";
 import { configSchema } from "./config-schema";
 import { createHomeDashboardLink } from "./components/create-dashboard-link.component";
+
 import { createDashboardLink } from "@openmrs/esm-patient-common-lib";
 
 const moduleName = "@ugandaemr/esm-laboratory-app";
@@ -87,6 +88,16 @@ export const rejectOrderDialog = getAsyncLifecycle(
   options
 );
 
+export const pickLabRequestButton = getAsyncLifecycle(
+  () => import("./queue-list/pick-lab-request-menu.component"),
+  options
+);
+
+export const rejectOrderButton = getAsyncLifecycle(
+  () => import("./order-actions/reject-order.component"),
+  options
+);
+
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }

src/order-actions/reject-order.component.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback } from "react";
+import { OverflowMenuItem, OverflowMenu } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { showModal } from "@openmrs/esm-framework";
+import { Result } from "../work-list/work-list.resource";
+
+interface RejectOrderOverflowMenuItemProps {
+  order: Result;
+}
+
+const RejectOrderOverflowMenuItem: React.FC<
+  RejectOrderOverflowMenuItemProps
+> = ({ order }) => {
+  const { t } = useTranslation();
+
+  const handleRejectOrder = useCallback(() => {
+    const dispose = showModal("reject-order-dialog", {
+      closeModal: () => dispose(),
+      order,
+    });
+  }, [order]);
+  return (
+    <OverflowMenuItem
+      itemText={t("rejectOrder", "Reject Order")}
+      onClick={handleRejectOrder}
+      style={{
+        maxWidth: "100vw",
+      }}
+      isDelete={true}
+      hasDivider
+    />
+  );
+};
+
+export default RejectOrderOverflowMenuItem;

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

@@ -9,6 +9,8 @@ import {
   TableContainer,
   TableExpandHeader,
   TableExpandRow,
+  OverflowMenuItem,
+  OverflowMenu,
   TableHead,
   TableHeader,
   TableRow,
@@ -24,10 +26,11 @@ import {
   DatePicker,
   DatePickerInput,
 } from "@carbon/react";
-import { TrashCan } from "@carbon/react/icons";
+import { TrashCan, OverflowMenuVertical } from "@carbon/react/icons";
 
 import { useTranslation } from "react-i18next";
 import {
+  ExtensionSlot,
   age,
   formatDate,
   formatDatetime,
@@ -39,7 +42,7 @@ import {
 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";
+import OrderCustomOverflowMenuComponent from "../ui-components/overflow-menu.component";
 
 interface LaboratoryPatientListProps {}
 
@@ -65,23 +68,6 @@ const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => {
     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" },
@@ -136,11 +122,22 @@ const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => {
         actions: {
           content: (
             <>
-              <PickLabRequestActionMenu
-                order={paginatedWorklistQueueEntries[index]}
-                closeModal={() => true}
-              />
-              <RejectOrder order={paginatedWorklistQueueEntries[index]} />
+              <OrderCustomOverflowMenuComponent
+                menuTitle={
+                  <>
+                    <OverflowMenuVertical
+                      size={16}
+                      style={{ marginLeft: "0.3rem" }}
+                    />
+                  </>
+                }
+              >
+                <ExtensionSlot
+                  className={styles.menuLink}
+                  state={{ order: paginatedWorklistQueueEntries[index] }}
+                  name="order-actions-slot"
+                />
+              </OrderCustomOverflowMenuComponent>
             </>
           ),
         },
@@ -155,7 +152,12 @@ const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => {
     return (
       <div>
         <div className={styles.headerBtnContainer}></div>
-        <DataTable rows={tableRows} headers={columns} useZebraStyles>
+        <DataTable
+          rows={tableRows}
+          headers={columns}
+          useZebraStyles
+          overflowMenuOnHover={true}
+        >
           {({
             rows,
             headers,

src/queue-list/pick-lab-request-menu.component.tsx

@@ -1,11 +1,8 @@
-import { Button, Tooltip } from "@carbon/react";
-import { Notification } from "@carbon/react/icons";
-
+import { OverflowMenuItem } from "@carbon/react";
 import { showModal } from "@openmrs/esm-framework";
 import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import { MappedPatientQueueEntry } from "./laboratory-patient-list.resource";
-import { Encounter, Order } from "../types/patient-queues";
+import { Order } from "../types/patient-queues";
 
 interface PickLabRequestActionMenuProps {
   order: Order;
@@ -17,7 +14,7 @@ const PickLabRequestActionMenu: React.FC<PickLabRequestActionMenuProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const launchPickLabRequestQueueModal = useCallback(() => {
+  const launchPickLabRequestModal = useCallback(() => {
     const dispose = showModal("add-to-worklist-dialog", {
       closeModal: () => dispose(),
 
@@ -26,11 +23,12 @@ const PickLabRequestActionMenu: React.FC<PickLabRequestActionMenuProps> = ({
   }, [order]);
 
   return (
-    <Button
-      kind="ghost"
-      onClick={launchPickLabRequestQueueModal}
-      iconDescription={t("pickRequest", "Pick Lab Request ")}
-      renderIcon={(props) => <Notification size={16} {...props} />}
+    <OverflowMenuItem
+      itemText={t("pickLabRequest", "Pick Lab Request")}
+      onClick={launchPickLabRequestModal}
+      style={{
+        maxWidth: "100vw",
+      }}
     />
   );
 };

src/routes.json

@@ -67,6 +67,16 @@
     {
       "name" : "reject-order-dialog",
       "component": "rejectOrderDialog"
+    },
+    {
+      "name": "pick-lab-request-button",
+      "component": "pickLabRequestButton",
+      "slot": "order-actions-slot"
+    },
+    {
+      "name": "reject-order-button",
+      "component": "rejectOrderButton",
+      "slot": "order-actions-slot"
     }
   ]
 }

src/ui-components/overflow-menu.component.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import classNames from "classnames";
+import { useLayoutType } from "@openmrs/esm-framework";
+import styles from "./overflow-menu.scss";
+
+interface OrderCustomOverflowMenuComponentProps {
+  menuTitle: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const OrderCustomOverflowMenuComponent: React.FC<
+  OrderCustomOverflowMenuComponentProps
+> = ({ children, menuTitle }) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const isTablet = useLayoutType() === "tablet";
+  const wrapperRef = useRef(null);
+
+  const toggleShowMenu = useCallback(() => setShowMenu((state) => !state), []);
+
+  useEffect(() => {
+    /**
+     * Toggle showMenu if clicked on outside of element
+     */
+    function handleClickOutside(event: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setShowMenu(false);
+      }
+    }
+
+    // Bind the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [wrapperRef]);
+
+  return (
+    <div
+      data-overflow-menu
+      className={classNames("cds--overflow-menu", styles.container)}
+      ref={wrapperRef}
+    >
+      <button
+        className={classNames(
+          "cds--btn",
+          "cds--btn--ghost",
+          "cds--overflow-menu__trigger",
+          { "cds--overflow-menu--open": showMenu },
+          styles.overflowMenuButton
+        )}
+        aria-haspopup="true"
+        aria-expanded={showMenu}
+        id="custom-actions-overflow-menu-trigger"
+        aria-controls="custom-actions-overflow-menu"
+        onClick={toggleShowMenu}
+      >
+        {menuTitle}
+      </button>
+      <div
+        className={classNames(
+          "cds--overflow-menu-options",
+          "cds--overflow-menu--flip",
+          styles.menu,
+          {
+            [styles.show]: showMenu,
+          }
+        )}
+        tabIndex={0}
+        data-floating-menu-direction="bottom"
+        role="menu"
+        aria-labelledby="custom-actions-overflow-menu-trigger"
+        id="custom-actions-overflow-menu"
+      >
+        <ul
+          className={classNames("cds--overflow-menu-options__content", {
+            "cds--overflow-menu-options--lg": isTablet,
+          })}
+        >
+          {children}
+        </ul>
+        <span />
+      </div>
+    </div>
+  );
+};
+
+export default OrderCustomOverflowMenuComponent;

src/ui-components/overflow-menu.scss

@@ -0,0 +1,39 @@
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  position: relative;
+  top: 0px;
+}
+
+.menu {
+  display: none;
+  top: 3.125rem;
+  min-width: initial;
+  left: auto;
+  right: 0;
+  background-color: $ui-01;
+  margin-right: 0.2rem;
+  box-shadow: 0 6px 6px rgb(0 0 0 / 30%);
+}
+
+.show {
+  display: block;
+}
+
+.overflowMenuButton {
+  width: auto;
+  height: auto;
+  padding: 0.875rem 1rem;
+  color: colors.$blue-60;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: colors.$gray-10-hover;
+  }
+}
+
+.deceased {
+  color: colors.$blue-40;
+}

translations/en.json

@@ -12,5 +12,7 @@
   "transferred": "Transferred",
   "visitId": "Visit ID",
   "waitingTime": "Waiting time",
-  "worklist": "Worklist"
+  "worklist": "Worklist",
+  "rejectOrder": "Reject Order",
+  "pickLabRequest": "Pick Lab Request"
 }