schedule orders ui

src/index.ts

@@ -6,6 +6,7 @@ import laboratoryReferralWorkspaceComponent from "./patient-chart/laboratory-wor
 import laboratory from "./laboratory.component";
 import laboratoryOrder from "./patient-chart/patient-laboratory-order-results.component";
 import addToWorklist from "./ordered-orders/lab-dialogs/add-to-worklist-dialog.component";
+import scheduleTestOrders from "./ordered-orders/lab-dialogs/schedulue-test-orders-dialog.component";
 import sendEmail from "./patient-chart/results-summary/send-email-dialog.component";
 import reviewItemDialogComponent from "./reviewed-orders/dialog/review-item.component";
 import rejectOrderDialogComponent from "./reject-order/reject-order-dialog.component";
@@ -70,6 +71,11 @@ export const laboratoryOrderComponent = getSyncLifecycle(
 
 export const addToWorklistDialog = getSyncLifecycle(addToWorklist, options);
 
+export const scheduleTestOrdersDialog = getSyncLifecycle(
+  scheduleTestOrders,
+  options
+);
+
 export const sendEmailDialog = getSyncLifecycle(sendEmail, options);
 
 export const reviewItemDialog = getSyncLifecycle(

src/ordered-orders/lab-dialogs/schedulue-test-orders-dialog.component.tsx

@@ -0,0 +1,229 @@
+import React, { useMemo, useState } from "react";
+import {
+  Button,
+  Form,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Select,
+  SelectItem,
+  TextInput,
+} from "@carbon/react";
+import { Order } from "@openmrs/esm-patient-common-lib";
+import { useTranslation } from "react-i18next";
+import styles from "./add-to-worklist-dialog.scss";
+import {
+  showNotification,
+  showSnackbar,
+  useLayoutType,
+} from "@openmrs/esm-framework";
+import {
+  GenerateSpecimenId,
+  useReferralLocations,
+  useSpecimenTypes,
+} from "./add-to-worklist-dialog.resource";
+import { extractErrorMessagesFromResponse } from "../../utils/functions";
+interface ScheduleTestOrdersDialogProps {
+  orders: Order[];
+  closeModal: () => void;
+}
+
+const ScheduleTestOrdersDialog: React.FC<ScheduleTestOrdersDialogProps> = ({
+  orders,
+  closeModal,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === "tablet";
+
+  const { specimenTypes } = useSpecimenTypes();
+  const { referrals } = useReferralLocations();
+
+  const [specimenType, setSpecimenType] = useState();
+  const [selectedReferral, setSelectedReferral] = useState("");
+  const [specimenID, setSpecimenID] = useState("");
+
+  const tableHeaders = useMemo(
+    () => [
+      { id: 0, header: t("test", "Test"), key: "test" },
+      { id: 1, header: t("specimenId", "Specimen ID"), key: "specimenId" },
+      {
+        id: 2,
+        header: t("specimenSource", "Specimen Source"),
+        key: "specimenSource",
+      },
+      { id: 3, header: t("referralLab", "Referral Lab"), key: "referralLab" },
+    ],
+    [t]
+  );
+
+  const tableRows = useMemo(() => {
+    return orders?.map((order) => ({
+      ...order,
+      id: order.uuid,
+      test: order.display,
+      specimenId: (
+        <div style={{ width: "100px" }}>
+          <TextInput
+            type="text"
+            id="specimentId"
+            value={specimenID}
+            onChange={(e) => setSpecimenID(e.target.value)}
+          />
+        </div>
+      ),
+      specimenSource: (
+        <Select
+          labelText=""
+          id="specimen-types"
+          name="specimen-types"
+          value={specimenType}
+          onChange={(event) => setSpecimenType(event.target.value)}
+        >
+          {!specimenType ? (
+            <SelectItem
+              text={t("specimenType", "Select Specimen Type")}
+              value=""
+            />
+          ) : null}
+          {specimenTypes.map((type) => (
+            <SelectItem key={type.uuid} text={type.display} value={type.uuid}>
+              {type.display}
+            </SelectItem>
+          ))}
+        </Select>
+      ),
+      referralLab: (
+        <Select
+          labelText=""
+          id="referralLocation"
+          name="referralLocation"
+          value={selectedReferral}
+          onChange={(event) => setSelectedReferral(event.target.value)}
+        >
+          {!selectedReferral ? (
+            <SelectItem
+              text={t("selectAreferralPoint", "Select a referal point")}
+              value=""
+            />
+          ) : null}
+          {referrals.map((referral) => (
+            <SelectItem
+              key={referral.uuid}
+              text={referral.display}
+              value={referral.display}
+            >
+              {referral.display}
+            </SelectItem>
+          ))}
+        </Select>
+      ),
+    }));
+  }, [orders]);
+
+  const generateId = async (e, uuid: string) => {
+    e.preventDefault();
+    GenerateSpecimenId(uuid).then(
+      (resp) => {
+        setSpecimenID(resp.data.results[0].sampleId);
+        showSnackbar({
+          isLowContrast: true,
+          title: t("generatesampleID", "Generate Sample Id"),
+          kind: "success",
+          subtitle: t(
+            "generateSuccessfully",
+            "You have successfully generated a Sample Id"
+          ),
+        });
+      },
+      (error) => {
+        const errorMessages = extractErrorMessagesFromResponse(error);
+
+        showNotification({
+          title: t(`errorGeneratingId', 'Error Generating Sample Id`),
+          kind: "error",
+          critical: true,
+          description: errorMessages.join(", "),
+        });
+      }
+    );
+  };
+
+  return (
+    <div>
+      <Form>
+        <ModalHeader closeModal={closeModal} title={"Schedule Orders"} />
+        <ModalBody>
+          <div className={styles.modalBody}>
+            <div style={{ marginBottom: "1rem" }}>
+              <Button kind="primary" onClick={generateId}>
+                Generate ID
+              </Button>
+            </div>
+
+            <DataTable
+              rows={tableRows}
+              headers={tableHeaders}
+              size={isTablet ? "lg" : "sm"}
+              useZebraStyles
+            >
+              {({
+                rows,
+                headers,
+                getHeaderProps,
+                getRowProps,
+                getTableProps,
+                getTableContainerProps,
+              }) => (
+                <TableContainer {...getTableContainerProps()}>
+                  <Table {...getTableProps()} aria-label="testorders">
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader {...getHeaderProps({ header })}>
+                            {header.header}
+                          </TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => (
+                        <TableRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell
+                              key={cell.id}
+                              className={styles.testCell}
+                            >
+                              {cell.value}
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              )}
+            </DataTable>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button type="submit" onClick={""}>
+            {t("scheduleOrders", "Schedule Orders")}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default ScheduleTestOrdersDialog;

src/ordered-orders/pick-lab-request-menu.component.tsx

@@ -13,7 +13,6 @@ const PickLabRequestActionMenu: React.FC<PickLabRequestActionMenuProps> = ({
   order,
 }) => {
   const { t } = useTranslation();
-
   const launchPickLabRequestModal = useCallback(() => {
     const dispose = showModal("add-to-worklist-dialog", {
       closeModal: () => dispose(),

src/ordered-orders/schedule-test-orders.component.tsx

@@ -0,0 +1,28 @@
+import { Button } from "@carbon/react";
+import { showModal } from "@openmrs/esm-framework";
+import { Order } from "@openmrs/esm-patient-common-lib";
+import React, { useCallback } from "react";
+
+interface ScheduleTestOrdersButtonProps {
+  orders: Order[];
+  closeModal: () => void;
+}
+
+const ScheduleTestOrdersButton: React.FC<ScheduleTestOrdersButtonProps> = ({
+  orders,
+}) => {
+  const launchPickLabRequestModal = useCallback(() => {
+    const dispose = showModal("schedule-test-orders-dialog", {
+      orders,
+      closeModal: () => dispose(),
+    });
+  }, [orders]);
+
+  return (
+    <Button kind="primary" onClick={launchPickLabRequestModal}>
+      Schedule Orders
+    </Button>
+  );
+};
+
+export default ScheduleTestOrdersButton;

src/ordered-orders/tests-ordered-list.component.tsx

@@ -35,12 +35,11 @@ const TestsOrderedList: React.FC = () => {
   const isTablet = useLayoutType() === "tablet";
   const locations = useLocations();
 
-  const { patientQueueEntries, isLoading, isError, mutate } =
-    usePatientQueuesList(
-      session?.sessionLocation?.uuid,
-      status,
-      session.user.systemId
-    );
+  const { patientQueueEntries, isLoading, isError } = usePatientQueuesList(
+    session?.sessionLocation?.uuid,
+    status,
+    session.user.systemId
+  );
 
   const pageSizes = [10, 20, 30, 40, 50];
   const [currentPageSize, setPageSize] = useState(10);