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

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

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+import { Tab, Tabs, TabList, TabPanels, TabPanel, Search } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import styles from "./laboratory-queue.scss";
+import LaboratoryPatientList from "./laboratory-patient-list.component";
+import { EmptyState } from "@openmrs/esm-patient-common-lib";
+import WorkList from "../work-list/work-list.component";
+import ReviewList from "../review-list/review-list.component";
+import CompletedList from "../completed-list/completed-list.component";
+
+enum TabTypes {
+  STARRED,
+  SYSTEM,
+  USER,
+  ALL,
+}
+
+const LaboratoryQueueTabs: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedTab, setSelectedTab] = useState(0);
+  return (
+    <main className={`omrs-main-content`}>
+      <section className={styles.orderTabsContainer}>
+        <Tabs
+          selectedIndex={selectedTab}
+          onChange={({ selectedIndex }) => setSelectedTab(selectedIndex)}
+          className={styles.tabs}
+        >
+          <TabList
+            style={{ paddingLeft: "1rem" }}
+            aria-label="Laboratory tabs"
+            contained
+          >
+            <Tab>{t("testedOrders", "Tests ordered")}</Tab>
+            <Tab>{t("worklist", "Worklist")}</Tab>
+            <Tab>{t("referredTests", "Referred tests")}</Tab>
+            <Tab>{t("reviewList", "Review")}</Tab>
+            <Tab>{t("approveList", "Approved")}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel style={{ padding: 0 }}>
+              <div>
+                <div className={styles.headerBtnContainer}></div>
+                <LaboratoryPatientList />
+              </div>
+            </TabPanel>
+            <TabPanel style={{ padding: 0 }}>
+              <div>
+                <div className={styles.headerBtnContainer}></div>
+                <WorkList fulfillerStatus={"IN_PROGRESS"} />
+              </div>
+            </TabPanel>
+            <TabPanel style={{ padding: 0 }}>
+              <div>
+                <div className={styles.headerBtnContainer}></div>
+                <EmptyState
+                  displayText={"referred tests"}
+                  headerTitle={"Referred tests"}
+                />
+              </div>
+            </TabPanel>
+            <TabPanel style={{ padding: 0 }}>
+              <div>
+                <div className={styles.headerBtnContainer}></div>
+                <ReviewList fulfillerStatus={"IN_PROGRESS"} />
+              </div>
+            </TabPanel>
+            <TabPanel style={{ padding: 0 }}>
+              <div>
+                <div className={styles.headerBtnContainer}></div>
+                <CompletedList fulfillerStatus={"COMPLETED"} />
+              </div>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </section>
+    </main>
+  );
+};
+
+export default LaboratoryQueueTabs;

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

@@ -0,0 +1,38 @@
+import { Button, Tooltip } from "@carbon/react";
+import { Notification } from "@carbon/react/icons";
+
+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";
+
+interface PickLabRequestActionMenuProps {
+  order: Order;
+  closeModal: () => void;
+}
+
+const PickLabRequestActionMenu: React.FC<PickLabRequestActionMenuProps> = ({
+  order,
+}) => {
+  const { t } = useTranslation();
+
+  const launchPickLabRequestQueueModal = useCallback(() => {
+    const dispose = showModal("add-to-worklist-dialog", {
+      closeModal: () => dispose(),
+
+      order,
+    });
+  }, [order]);
+
+  return (
+    <Button
+      kind="ghost"
+      onClick={launchPickLabRequestQueueModal}
+      iconDescription={t("pickRequest", "Pick Lab Request ")}
+      renderIcon={(props) => <Notification size={16} {...props} />}
+    />
+  );
+};
+
+export default PickLabRequestActionMenu;

package/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;

package/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,
+  });
+}

package/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;
+}

package/src/results/result-form.component.tsx

@@ -0,0 +1,223 @@
+import React, { useMemo, useState } from "react";
+import styles from "./result-form.scss";
+import {
+  Button,
+  InlineLoading,
+  TextInput,
+  Select,
+  SelectItem,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { closeOverlay } from "../components/overlay/hook";
+import {
+  ExtensionSlot,
+  showNotification,
+  showToast,
+  usePatient,
+} from "@openmrs/esm-framework";
+import {
+  UpdateEncounter,
+  useGetOrderConceptByUuid,
+} from "./result-form.resource";
+import { Result } from "../work-list/work-list.resource";
+
+interface ResultFormProps {
+  patientUuid: string;
+  order: Result;
+}
+
+const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
+  const { t } = useTranslation();
+
+  const { patient, isLoading } = usePatient(patientUuid);
+
+  const { concept } = useGetOrderConceptByUuid(order.concept.uuid);
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [inputValues, setInputValues] = useState({});
+
+  const [selectedOption, setSelectedOption] = useState();
+
+  const bannerState = useMemo(() => {
+    if (patient) {
+      return {
+        patient,
+        patientUuid,
+        hideActionsOverflow: true,
+      };
+    }
+  }, [patient, patientUuid]);
+
+  // getInput values
+  const handleInputChange = (memberUuid, value) => {
+    setInputValues((prevValues) => ({
+      ...prevValues,
+      [memberUuid]: value,
+    }));
+  };
+
+  // create input fields
+  const Questions = ({ conceptMembers }) => {
+    const inputFields = useMemo(() => {
+      return conceptMembers.map((member) => {
+        let inputField;
+
+        if (
+          member.datatype.display === "Text" ||
+          member.datatype.display === "Numeric"
+        ) {
+          inputField = (
+            <TextInput
+              key={member.uuid}
+              className={styles.textInput}
+              name={`member-${member.uuid}-test-id`}
+              id={`member-${member.uuid}-test-id`}
+              type={member.datatype.display === "Numeric" ? "number" : "text"}
+              labelText={member?.display}
+              value={inputValues[member.uuid] || ""}
+              onChange={(e) => handleInputChange(member.uuid, e.target.value)}
+            />
+          );
+        } else if (member.datatype.display === "Coded") {
+          inputField = (
+            <Select
+              key={member.uuid}
+              className={styles.textInput}
+              name={`member-${member.uuid}-test-id`}
+              id={`member-${member.uuid}-test-id`}
+              type="text"
+              labelText={member?.display}
+              value={inputValues[member.uuid] || ""}
+              onChange={(e) => handleInputChange(member.uuid, e.target.value)}
+            >
+              {!setSelectedOption ? (
+                <SelectItem text={t("option", "Choose an Option")} value="" />
+              ) : null}
+              {member?.answers?.map((answer) => (
+                <SelectItem
+                  key={answer.uuid}
+                  text={answer.display}
+                  value={answer.uuid}
+                >
+                  {answer.display}
+                </SelectItem>
+              ))}
+            </Select>
+          );
+        }
+
+        return inputField;
+      });
+    }, [conceptMembers]); // Memoize when conceptMembers changes
+
+    return <>{inputFields}</>;
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // assign value to test
+    let groupMembers = [];
+    let obsValue = [];
+    const ob = {
+      concept: { uuid: order.concept.uuid },
+      status: "FINAL",
+      order: { uuid: order.uuid },
+      groupMembers: groupMembers,
+    };
+    concept.forEach((item) => {
+      let value;
+      if (
+        item.datatype.display === "Numeric" ||
+        item.datatype.display === "Text"
+      ) {
+        value = inputValues[`${item.uuid}`];
+      } else if (item.datatype.display === "Coded") {
+        value = {
+          uuid: inputValues[`${item.uuid}`],
+        };
+      }
+      const groupMember = {
+        concept: { uuid: item.uuid },
+        value: value,
+        status: "FINAL",
+        order: { uuid: order.uuid },
+      };
+      groupMembers.push(groupMember);
+    });
+    obsValue.push(ob);
+
+    const payload = {
+      obs: obsValue,
+    };
+    setIsSubmitting(true);
+    // update encounter
+    UpdateEncounter(order.encounter.uuid, payload).then(
+      () => {
+        setIsSubmitting(false);
+        showToast({
+          critical: true,
+          title: t("updateEncounter", "Update Encounter"),
+          kind: "success",
+          description: t(
+            "generateSuccessfully",
+            "You have successfully encounter with test results"
+          ),
+        });
+      },
+      (err) => {
+        setIsSubmitting(false);
+        showNotification({
+          title: t(
+            `errorUpdatingEncounter', 'Error occurred while updating encounter`
+          ),
+          kind: "error",
+          critical: true,
+          description: err?.message,
+        });
+      }
+    );
+  };
+
+  return (
+    <>
+      <div className="">
+        <ModalBody>
+          {isLoading && (
+            <InlineLoading
+              className={styles.bannerLoading}
+              iconDescription="Loading"
+              description="Loading banner"
+              status="active"
+            />
+          )}
+          {patient && (
+            <ExtensionSlot name="patient-header-slot" state={bannerState} />
+          )}
+
+          {concept?.length > 0 && (
+            <section className={styles.section}>
+              <Questions conceptMembers={concept} />
+            </section>
+          )}
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            disabled={isSubmitting}
+            onClick={() => closeOverlay()}
+            kind="secondary"
+          >
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button onClick={(e) => handleSubmit(e)}>Save tests</Button>
+        </ModalFooter>
+      </div>
+    </>
+  );
+};
+
+export default ResultForm;