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

package/src/queue-list/lab-dialogs/add-to-worklist-dialog.component.tsx

@@ -0,0 +1,323 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { MappedQueueEntry } from "../../types";
+import {
+  Button,
+  ContentSwitcher,
+  Form,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea,
+  Grid,
+  Checkbox,
+  TextInput,
+  IconButton,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { MappedPatientQueueEntry } from "../laboratory-patient-list.resource";
+import styles from "./add-to-worklist-dialog.scss";
+import {
+  navigate,
+  showNotification,
+  showToast,
+  useLocations,
+  useSession,
+} from "@openmrs/esm-framework";
+import { Renew } from "@carbon/react/icons";
+import {
+  GenerateSpecimenId,
+  GetOrderByUuid,
+  UpdateOrder,
+  useQueueRoomLocations,
+  useSpecimenTypes,
+} from "./add-to-worklist-dialog.resource";
+import { Encounter, Order } from "../../types/patient-queues";
+
+interface AddToWorklistDialogProps {
+  queueId;
+  encounter: Encounter;
+  order: Order;
+  closeModal: () => void;
+}
+
+const AddToWorklistDialog: React.FC<AddToWorklistDialogProps> = ({
+  queueId,
+  encounter,
+  order,
+  closeModal,
+}) => {
+  const { t } = useTranslation();
+
+  const locations = useLocations();
+
+  const sessionUser = useSession();
+
+  const [selectedLocation, setSelectedLocation] = useState("");
+
+  const [preferred, setPreferred] = useState(false);
+
+  const [specimenID, setSpecimenID] = useState();
+
+  const { specimenTypes } = useSpecimenTypes();
+
+  const [orderer, setOrderer] = useState("");
+
+  const [concept, setConcept] = useState("");
+
+  const [patient, setPatient] = useState("");
+
+  const [encounterUuid, setEncounterUuid] = useState("");
+
+  const { queueRoomLocations } = useQueueRoomLocations(
+    sessionUser?.sessionLocation?.uuid
+  );
+
+  const [specimenType, setSpecimenType] = useState();
+
+  const [selectedNextQueueLocation, setSelectedNextQueueLocation] = useState(
+    queueRoomLocations[0]?.uuid
+  );
+
+  const filteredlocations = queueRoomLocations?.filter(
+    (location) => location.uuid != selectedLocation
+  );
+
+  useEffect(() => {
+    if (locations?.length && sessionUser) {
+      setSelectedLocation(sessionUser?.sessionLocation?.uuid);
+    }
+  }, [locations, sessionUser]);
+
+  // GetOrderByUuid
+  GetOrderByUuid(order.uuid).then(
+    (resp) => {
+      setOrderer(resp.data?.orderer?.uuid);
+      setConcept(resp.data?.concept?.uuid);
+      setPatient(resp.data?.patient?.uuid);
+      setEncounterUuid(resp.data?.encounter.uuid);
+    },
+    (err) => {
+      showNotification({
+        title: t(`errorGettingOrder', 'Error Getting Order Id`),
+        kind: "error",
+        critical: true,
+        description: err?.message,
+      });
+    }
+  );
+
+  const pickLabRequestQueue = async (event) => {
+    event.preventDefault();
+    // pick lab test
+    let body = {
+      sampleId: specimenID,
+      specimenSourceId: specimenType,
+      unProcessedOrders: "",
+      patientQueueId: queueId,
+    };
+
+    UpdateOrder(order.uuid, body).then(
+      () => {
+        showToast({
+          critical: true,
+          title: t("pickedAnOrder", "Picked an order"),
+          kind: "success",
+          description: t(
+            "pickSuccessfully",
+            "You have successfully picked an Order"
+          ),
+        });
+        closeModal();
+      },
+      (error) => {
+        showNotification({
+          title: t(`errorPicking an order', 'Error Picking an Order`),
+          kind: "error",
+          critical: true,
+          description: error?.message,
+        });
+      }
+    );
+  };
+
+  const onChecked = () => {
+    setPreferred(!preferred);
+  };
+
+  const generateId = async (e) => {
+    e.preventDefault();
+    // generate sample Id
+    GenerateSpecimenId(order.uuid).then(
+      (resp) => {
+        setSpecimenID(resp.data.results[0].sampleId);
+        showToast({
+          critical: true,
+          title: t("generatesampleID", "Generate Sample Id"),
+          kind: "success",
+          description: t(
+            "generateSuccessfully",
+            "You have successfully generated a Sample Id"
+          ),
+        });
+      },
+      (err) => {
+        showNotification({
+          title: t(`errorGeneratingId', 'Error Generating Sample Id`),
+          kind: "error",
+          critical: true,
+          description: err?.message,
+        });
+      }
+    );
+  };
+
+  return (
+    <div>
+      <Form onSubmit={pickLabRequestQueue}>
+        <ModalHeader
+          closeModal={closeModal}
+          title={t("pickRequest", "Pick Lab Request")}
+        />
+        <ModalBody>
+          <div className={styles.modalBody}>
+            <section className={styles.section}>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  alignContent: "stretch",
+                }}
+              >
+                <div className={styles.sectionTitle}>
+                  {t("specimenID", "Specimen ID")}
+                </div>
+
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    columnGap: "10px",
+                  }}
+                >
+                  <div style={{ width: "430px" }}>
+                    <TextInput
+                      type="text"
+                      id="specimentID"
+                      value={specimenID}
+                    />
+                  </div>
+                  <div style={{ width: "50px" }}>
+                    <Button
+                      hasIconOnly
+                      onClick={(e) => generateId(e)}
+                      renderIcon={(props) => <Renew size={16} {...props} />}
+                    />
+                  </div>
+                </div>
+              </div>
+            </section>
+            <section className={styles.section}>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  alignContent: "stretch",
+                }}
+              >
+                <div className={styles.sectionTitle}>
+                  {t("specimenType", "Specimen Type")}
+                </div>
+                <div style={{ width: "500px" }}>
+                  <section className={styles.section}>
+                    <Select
+                      labelText=" Specimen Type"
+                      id="speciment-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>
+                  </section>
+                </div>
+              </div>
+            </section>
+            <section
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                alignContent: "stretch",
+              }}
+            >
+              <div>
+                <Checkbox
+                  checked={preferred}
+                  onChange={onChecked}
+                  labelText={"Referred"}
+                  id="test-referred"
+                />
+              </div>
+              {preferred && (
+                <div style={{ width: "500px" }}>
+                  <section className={styles.section}>
+                    <Select
+                      labelText={t("location", "Location ")}
+                      id="nextQueueLocation"
+                      name="nextQueueLocation"
+                      invalidText="Required"
+                      value={selectedNextQueueLocation}
+                      onChange={(event) =>
+                        setSelectedNextQueueLocation(event.target.value)
+                      }
+                    >
+                      {filteredlocations.map((location) => (
+                        <SelectItem
+                          key={location.uuid}
+                          text={location.display}
+                          value={location.uuid}
+                        >
+                          {location.display}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </section>
+                </div>
+              )}
+            </section>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button type="submit" onClick={pickLabRequestQueue}>
+            {t("pickPatient", "Pick Lab Request")}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default AddToWorklistDialog;

package/src/queue-list/lab-dialogs/add-to-worklist-dialog.resource.ts

@@ -0,0 +1,155 @@
+import { FetchResponse, openmrsFetch, useConfig } from "@openmrs/esm-framework";
+import { useMemo } from "react";
+import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
+
+export interface QueueRoomsResponse {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  address1: string;
+  address2: string;
+  cityvillage: string;
+  stateprovince: string;
+  country: string;
+  postalcode: string;
+  latitude: string;
+  longitude: string;
+  countydistrict: string;
+  address3: string;
+  address4: string;
+  address5: string;
+  address6: string;
+  parentLocation: ParentLocation;
+  childLocations: String[];
+  retired: boolean;
+  attributes: String[];
+  address7: string;
+  address8: string;
+  address9: string;
+  address10: string;
+  address11: string;
+  address12: string;
+  address13: string;
+  address14: string;
+  address15: string;
+  resourceVersion: string;
+}
+
+export interface ParentLocation {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  address1: string;
+  address2: string;
+  cityVillage: string;
+  stateProvince: string;
+  country: string;
+  postalcode: string;
+  latitude: string;
+  longitude: string;
+  countydistrict: string;
+  address3: string;
+  address4: string;
+  address5: string;
+  address6: string;
+  parentLocation: ParentLocation;
+  childLocations: ChildLocations[];
+  retired: boolean;
+  attributes: String[];
+  address7: string;
+  address8: string;
+  address9: string;
+  address10: string;
+  address11: string;
+  address12: string;
+  address13: string;
+  address14: string;
+  address15: string;
+  resourceversion: string;
+}
+
+export interface ChildLocations {
+  uuid: string;
+  display: string;
+}
+
+export interface ParentLocation {
+  uuid: string;
+  display: string;
+}
+
+// get queue rooms
+export function useQueueRoomLocations(currentQueueLocation: string) {
+  const apiUrl = `/ws/rest/v1/location/${currentQueueLocation}?v=full`;
+  const { data, error, isLoading } = useSWR<{ data: QueueRoomsResponse }>(
+    apiUrl,
+    openmrsFetch
+  );
+
+  const queueRoomLocations = useMemo(
+    () =>
+      data?.data?.parentLocation?.childLocations?.map((response) => response) ??
+      [],
+    [data?.data?.parentLocation?.childLocations]
+  );
+  return {
+    queueRoomLocations: queueRoomLocations ? queueRoomLocations : [],
+    isLoading,
+    error,
+  };
+}
+
+// get specimen types
+export function useSpecimenTypes() {
+  const config = useConfig();
+  const { laboratorySpecimenTypeConcept } = config;
+
+  const apiUrl = `/ws/rest/v1/concept/${laboratorySpecimenTypeConcept}`;
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse>(
+    apiUrl,
+    openmrsFetch
+  );
+
+  return {
+    specimenTypes: data ? data?.data?.answers : [],
+    isLoading,
+  };
+}
+
+// generate specimen id
+export async function GenerateSpecimenId(uuid: string) {
+  const abortController = new AbortController();
+  return openmrsFetch(`/ws/rest/v1/generatesampleId?uuid=${uuid}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+  });
+}
+
+// update Order
+export async function UpdateOrder(uuid: string, body: any) {
+  const abortController = new AbortController();
+  return openmrsFetch(`/ws/rest/v1/accessionorder/${uuid}`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+    body: body,
+  });
+}
+
+export async function GetOrderByUuid(uuid: string) {
+  const abortController = new AbortController();
+  return openmrsFetch(`/ws/rest/v1/order/${uuid}`, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+  });
+}

package/src/queue-list/lab-dialogs/add-to-worklist-dialog.scss

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

package/src/queue-list/lab-tests/lab-tests.component.tsx

@@ -0,0 +1,116 @@
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+import {
+  DataTable,
+  DataTableHeader,
+  DataTableSkeleton,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TabPanel,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Layer,
+  Tag,
+  TableExpandedRow,
+} from "@carbon/react";
+import { ErrorState } from "@openmrs/esm-framework";
+import { Encounter } from "../../types/patient-queues";
+import styles from "../laboratory-queue.scss";
+import PickLabRequestActionMenu from "../pick-lab-request-menu.component";
+
+interface LabTestsProps {
+  encounter: Encounter;
+  queueId: string;
+}
+
+const LabTests: React.FC<LabTestsProps> = ({ encounter, queueId }) => {
+  const { t } = useTranslation();
+  // console.info(encounter);
+  let columns = [
+    { id: 1, header: t("order", "Order"), key: "order", align: "left" },
+    {
+      id: 2,
+      header: t("orderType", "OrderType"),
+      key: "orderType",
+      align: "center",
+    },
+    { id: 3, header: t("actions", "Actions"), key: "actions", align: "center" },
+  ];
+
+  const tableRows = useMemo(() => {
+    return encounter?.orders?.map((item) => ({
+      ...item,
+      id: item.uuid,
+      order: {
+        content: <span>{item.display}</span>,
+      },
+      orderType: {
+        content: <span>{item.type}</span>,
+      },
+      actions: {
+        content: (
+          <PickLabRequestActionMenu closeModal={() => true} order={item} />
+        ),
+      },
+    }));
+  }, [encounter]);
+
+  if (!encounter) {
+    return (
+      <ErrorState
+        error={"Error Loading encounter"}
+        headerTitle={"Tests Error"}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <div className={styles.headerBtnContainer}></div>
+      <DataTable rows={tableRows} headers={columns} isSortable useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+          <TableContainer className={styles.tableContainer}>
+            <Table {...getTableProps()} className={styles.activePatientsTable}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => {
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableRow {...getRowProps({ row })} key={row.id}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>
+                            {cell.value?.content ?? cell.value}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
+  );
+};
+
+export default LabTests;

package/src/queue-list/lab-tests/lab-tests.resource.ts

@@ -0,0 +1,17 @@
+import { FetchResponse, openmrsFetch, useConfig } from "@openmrs/esm-framework";
+import useSWR from "swr";
+import { EncounterResponse } from "../../patient-chart/laboratory-item/view-laboratory-item.resource";
+export function useGetLabOrders(encounterUuid: string) {
+  const apiUrl = `/ws/rest/v1/encounter/${encounterUuid}?v=full`;
+
+  const { data, error, isLoading } = useSWR<{ data: EncounterResponse }, Error>(
+    apiUrl,
+    openmrsFetch
+  );
+
+  return {
+    labOrders: data?.data ? data?.data?.orders : [],
+    isLoading,
+    isError: error,
+  };
+}

package/src/queue-list/lab-tests/lab-tests.scss

@@ -0,0 +1,12 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.cardContainer {
+  background-color: $ui-02 ;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 spacing.$spacing-05 spacing.$spacing-10 spacing.$spacing-03;
+  flex-flow: row wrap;
+  margin-top: - spacing.$spacing-03;
+}