ft : reject order setup

src/index.ts

@@ -82,6 +82,11 @@ export const reviewItemDialog = getAsyncLifecycle(
   options
 );
 
+export const rejectOrderDialog = getAsyncLifecycle(
+  () => import("./reject-order/reject-order-dialog.component"),
+  options
+);
+
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }

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

@@ -1,7 +1,6 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   DataTable,
-  DataTableHeader,
   DataTableSkeleton,
   Pagination,
   Table,
@@ -21,13 +20,17 @@ import {
   Tag,
   TableExpandedRow,
   Tile,
+  Button,
 } 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";
@@ -51,6 +54,10 @@ import { EmptyState } from "@openmrs/esm-patient-common-lib";
 
 interface LaboratoryPatientListProps {}
 
+interface RejectOrderProps {
+  order: string;
+}
+
 const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => {
   const { t } = useTranslation();
   const session = useSession();
@@ -71,16 +78,33 @@ const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => {
     currentPage,
   } = usePagination(patientQueueEntries, 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} />}
+      />
+    );
+  };
+
   let columns = [
     { id: 0, header: t("visitId", "Visit ID"), key: "visitId" },
     { id: 1, header: t("names", "Names"), key: "names" },
     { id: 2, header: t("age", "Age"), key: "age" },
     { id: 3, header: t("orderedFrom", "Ordered from"), key: "orderedFrom" },
     { id: 4, header: t("waitingTime", "Waiting time"), key: "waitingTime" },
+    { id: 5, header: t("actions", "Actions"), key: "actions" },
   ];
 
   const tableRows = useMemo(() => {
-    return paginatedQueueEntries?.map((entry) => ({
+    return paginatedQueueEntries?.map((entry, index) => ({
       ...entry,
       encounter: entry.encounter,
       visitId: {
@@ -107,6 +131,13 @@ const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => {
           </Tag>
         ),
       },
+      actions: {
+        content: (
+          <>
+            <RejectOrder order={paginatedQueueEntries[index].encounter.uuid} />
+          </>
+        ),
+      },
     }));
   }, [paginatedQueueEntries, t]);
 

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

@@ -0,0 +1,61 @@
+import React from "react";
+
+import {
+  Button,
+  ContentSwitcher,
+  Form,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea,
+  Grid,
+  Checkbox,
+  TextInput,
+  IconButton,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import styles from "./reject-order-dialog.scss";
+
+interface RejectOrderDialogProps {
+  order: string;
+  closeModal: () => void;
+}
+
+const RejectOrderDialog: React.FC<RejectOrderDialogProps> = ({
+  order,
+  closeModal,
+}) => {
+  const { t } = useTranslation();
+  const rejectOrder = async (event) => {
+    event.preventDefault();
+  };
+
+  return (
+    <div>
+      <Form onSubmit={rejectOrder}>
+        <ModalHeader
+          closeModal={closeModal}
+          title={t("rejectOrder", "Reject Order")}
+        />
+        <ModalBody>
+          <div className={styles.modalBody}>
+            <section className={styles.section}></section>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button kind="danger" type="submit">
+            {t("rejectOrder", "Reject Order")}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default RejectOrderDialog;

src/reject-order/reject-order-dialog.scss

@@ -0,0 +1,14 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+section {
+  margin: spacing.$spacing-03;
+}
+
+.sectionTitle {
+  margin-bottom: spacing.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: spacing.$spacing-05;
+}

src/routes.json

@@ -63,6 +63,10 @@
     {
       "name" : "review-item-dialog",
       "component": "reviewItemDialog"
+    },
+    {
+      "name" : "reject-order-dialog",
+      "component": "rejectOrderDialog"
     }
   ]
 }

src/work-list/work-list.component.tsx

@@ -1,7 +1,12 @@
-import React, { useState, useMemo, AnchorHTMLAttributes } from "react";
+import React, {
+  useState,
+  useMemo,
+  AnchorHTMLAttributes,
+  useCallback,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { EmptyState, ErrorState } from "@openmrs/esm-patient-common-lib";
-import { Microscope } from "@carbon/react/icons";
+import { Microscope, TrashCan } from "@carbon/react/icons";
 
 import {
   DataTable,
@@ -33,7 +38,12 @@ import {
 } from "@carbon/react";
 import { Result, useGetOrdersWorklist } from "./work-list.resource";
 import styles from "./work-list.scss";
-import { formatDate, parseDate, usePagination } from "@openmrs/esm-framework";
+import {
+  formatDate,
+  parseDate,
+  showModal,
+  usePagination,
+} from "@openmrs/esm-framework";
 import { launchOverlay } from "../components/overlay/hook";
 import ResultForm from "../results/result-form.component";
 import { getStatusColor } from "../utils/functions";
@@ -47,6 +57,10 @@ interface ResultsOrderProps {
   patientUuid: string;
 }
 
+interface RejectOrderProps {
+  order: string;
+}
+
 const WorkList: React.FC<WorklistProps> = ({ fulfillerStatus }) => {
   const { t } = useTranslation();
 
@@ -68,6 +82,22 @@ const WorkList: React.FC<WorklistProps> = ({ fulfillerStatus }) => {
     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" },
@@ -139,10 +169,13 @@ const WorkList: React.FC<WorklistProps> = ({ fulfillerStatus }) => {
       urgency: { content: <span>{entry.urgency}</span> },
       actions: {
         content: (
-          <ResultsOrder
-            patientUuid={entry.patient.uuid}
-            order={paginatedWorkListEntries[index]}
-          />
+          <>
+            <ResultsOrder
+              patientUuid={entry.patient.uuid}
+              order={paginatedWorkListEntries[index]}
+            />
+            <RejectOrder order={paginatedWorkListEntries[index].uuid} />
+          </>
         ),
       },
     }));