From 7eb7073bda7fe49f36ebfa71db24fe27db0c5780 Mon Sep 17 00:00:00 2001
From: Jabar Jeremy <24471994+jabahum@users.noreply.github.com>
Date: Mon, 27 Nov 2023 10:21:30 +0300
Subject: [PATCH] Ft/reject-order-setup (#16)

* ft : reject order setup

* ft : add reject order submission

* fix : reject order
---
 src/index.ts                                  |   5 +
 .../laboratory-patient-list.component.tsx     |  37 +++++-
 .../reject-order-dialog.component.tsx         | 114 ++++++++++++++++++
 .../reject-order-dialog.resource.ts           |  14 +++
 src/reject-order/reject-order-dialog.scss     |  14 +++
 src/routes.json                               |   4 +
 src/work-list/work-list.component.tsx         |  47 ++++++--
 7 files changed, 225 insertions(+), 10 deletions(-)
 create mode 100644 src/reject-order/reject-order-dialog.component.tsx
 create mode 100644 src/reject-order/reject-order-dialog.resource.ts
 create mode 100644 src/reject-order/reject-order-dialog.scss

diff --git a/src/index.ts b/src/index.ts
index e42a09e1..8ef22254 100644
--- a/src/index.ts
+++ b/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);
 }
diff --git a/src/queue-list/laboratory-patient-list.component.tsx b/src/queue-list/laboratory-patient-list.component.tsx
index 8215e5d8..a691eac0 100644
--- a/src/queue-list/laboratory-patient-list.component.tsx
+++ b/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]);
 
diff --git a/src/reject-order/reject-order-dialog.component.tsx b/src/reject-order/reject-order-dialog.component.tsx
new file mode 100644
index 00000000..6a251b80
--- /dev/null
+++ b/src/reject-order/reject-order-dialog.component.tsx
@@ -0,0 +1,114 @@
+import React, { useState } 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";
+import { Result } from "../work-list/work-list.resource";
+import { RejectOrder } from "./reject-order-dialog.resource";
+import { showNotification, showToast } from "@openmrs/esm-framework";
+
+interface RejectOrderDialogProps {
+  order: Result;
+  closeModal: () => void;
+}
+
+const RejectOrderDialog: React.FC<RejectOrderDialogProps> = ({
+  order,
+  closeModal,
+}) => {
+  const { t } = useTranslation();
+
+  const [notes, setNotes] = useState("");
+
+  const rejectOrder = async (event) => {
+    event.preventDefault();
+
+    const payload = {
+      fulfillerStatus: "EXCEPTION", // Todo changed to Declined when UgEMR module is upgraded to 2.6.1
+      fulfillerComment: notes,
+    };
+    RejectOrder(order.uuid, payload).then(
+      (resp) => {
+        showToast({
+          critical: true,
+          title: t("rejectOrder", "Rejected Order"),
+          kind: "success",
+          description: t(
+            "successfullyrejected",
+            `You have successfully rejected an Order with OrderNumber ${order.orderNumber} `
+          ),
+        });
+        closeModal();
+      },
+      (err) => {
+        showNotification({
+          title: t(`errorRejecting order', 'Error Rejecting a order`),
+          kind: "error",
+          critical: true,
+          description: err?.message,
+        });
+      }
+    );
+  };
+
+  return (
+    <div>
+      <Form onSubmit={rejectOrder}>
+        <ModalHeader
+          closeModal={closeModal}
+          title={t("rejectOrder", "Reject Order")}
+        />
+        <ModalBody>
+          <div className={styles.modalBody}>
+            <section className={styles.section}>
+              <h5 className={styles.section}>
+                {order?.accessionNumber} &nbsp; · &nbsp;{order?.fulfillerStatus}{" "}
+                &nbsp; · &nbsp;
+                {order?.orderNumber}
+                &nbsp;
+              </h5>
+            </section>
+            <br />
+            <section className={styles.section}>
+              <TextArea
+                labelText={t("notes", "Enter Comments ")}
+                id="nextNotes"
+                name="nextNotes"
+                invalidText="Required"
+                helperText="Please enter comment"
+                maxCount={500}
+                enableCounter
+                onChange={(e) => setNotes(e.target.value)}
+              />
+            </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;
diff --git a/src/reject-order/reject-order-dialog.resource.ts b/src/reject-order/reject-order-dialog.resource.ts
new file mode 100644
index 00000000..50bf72f3
--- /dev/null
+++ b/src/reject-order/reject-order-dialog.resource.ts
@@ -0,0 +1,14 @@
+import { FetchResponse, openmrsFetch, useConfig } from "@openmrs/esm-framework";
+
+export async function RejectOrder(uuid: string, body: any) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/order/${uuid}/fulfillerdetails/`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+    body: body,
+  });
+}
diff --git a/src/reject-order/reject-order-dialog.scss b/src/reject-order/reject-order-dialog.scss
new file mode 100644
index 00000000..e76de4d0
--- /dev/null
+++ b/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;
+}
diff --git a/src/routes.json b/src/routes.json
index 32207046..394370bc 100644
--- a/src/routes.json
+++ b/src/routes.json
@@ -63,6 +63,10 @@
     {
       "name" : "review-item-dialog",
       "component": "reviewItemDialog"
+    },
+    {
+      "name" : "reject-order-dialog",
+      "component": "rejectOrderDialog"
     }
   ]
 }
diff --git a/src/work-list/work-list.component.tsx b/src/work-list/work-list.component.tsx
index bd16d261..4f10c6a9 100644
--- a/src/work-list/work-list.component.tsx
+++ b/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: Result;
+}
+
 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]} />
+          </>
         ),
       },
     }));