O3-3693: (refactor) Group laboratory tests in the lab app by patient

src/components/orders-table/listOrderDetails.component.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import styles from "./listOrderDetails.scss";
+
+import { useTranslation } from "react-i18next";
+import { showModal } from "@openmrs/esm-framework";
+import { Button, Tile } from "@carbon/react";
+import { OrderDetail } from "./orderDetail.component";
+import { ListOrdersDetailsProps } from "../../types";
+import { launchOverlay } from "../overlay/store";
+import ResultForm from "../../results/result-form.component";
+
+const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
+  const orders = props.groupedOrders?.orders;
+  const patientId = props.groupedOrders?.patientId;
+  const { t } = useTranslation();
+  return (
+    <div className={styles.ordersContainer}>
+      {orders &&
+        orders.map((row) => (
+          <Tile className={styles.orderTile}>
+            <div>
+              <div className={styles.actionBtns}>
+                {props.actions
+                  .sort((a, b) => {
+                    // Replace 'property' with the actual property you want to sort by
+                    if (a.order < b.order) return -1;
+                    if (a.order > b.order) return 1;
+                    return 0;
+                  })
+                  .map((action) => {
+                    if (action.actionName === "pickupLabRequest") {
+                      return (
+                        <Button
+                          kind="primary"
+                          onClick={() => {
+                            const dispose = showModal(
+                              "pickup-lab-request-modal",
+                              {
+                                closeModal: () => dispose(),
+                                order: row,
+                              }
+                            );
+                          }}
+                        >
+                          {t("pickupLabRequest", "PickUp Lab Request")}
+                        </Button>
+                      );
+                    }
+                    if (action.actionName === "labResultsForm") {
+                      return (
+                        <Button
+                          kind="primary"
+                          onClick={() => {
+                            launchOverlay(
+                              t("labResultsForm", "Lab Results form"),
+                              <ResultForm patientUuid={patientId} order={row} />
+                            );
+                          }}
+                        >
+                          {t("labResultsForm", "Lab Results Form")}
+                        </Button>
+                      );
+                    }
+                    if (action.actionName === "rejectLabRequest") {
+                      return (
+                        <Button
+                          kind="danger"
+                          onClick={() => {
+                            const dispose = showModal(
+                              "reject-lab-request-modal",
+                              {
+                                closeModal: () => dispose(),
+                                order: row,
+                              }
+                            );
+                          }}
+                        >
+                          {t("rejectLabRequest", "Reject Lab Request")}
+                        </Button>
+                      );
+                    }
+                  })}
+              </div>
+              <div>
+                <OrderDetail
+                  label={t("date", "DATE").toUpperCase()}
+                  value={row.dateActivated}
+                />
+                <OrderDetail
+                  label={t("orderNumber", "Order Number").toUpperCase()}
+                  value={row.orderNumber}
+                />
+                <OrderDetail
+                  label={t("procedure", "procedure").toUpperCase()}
+                  value={row.display}
+                />
+
+                <OrderDetail
+                  label={t("status", "Status").toUpperCase()}
+                  value={row.fulfillerStatus}
+                />
+                <OrderDetail
+                  label={t("urgency", "urgency").toUpperCase()}
+                  value={row.urgency}
+                />
+                <OrderDetail
+                  label={t("orderer", "orderer").toUpperCase()}
+                  value={row.orderer}
+                />
+                <OrderDetail
+                  label={t("instructions", "Instructions").toUpperCase()}
+                  value={row.instructions}
+                />
+              </div>
+            </div>
+          </Tile>
+        ))}
+    </div>
+  );
+};
+
+export default ListOrderDetails;

src/components/orders-table/listOrderDetails.scss

@@ -0,0 +1,55 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.orderTile {
+  width: 100%;
+  margin: 2px 0 8px;
+  padding: 0 8px 0 8px;
+  background-color: colors.$white-0;
+  border-left: 4px solid var(--brand-03);
+  color: $text-02;
+  margin-bottom: 1rem !important;
+  &:hover{
+    background-color: colors.$white-hover; 
+  }
+}
+
+.ordersContainer {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  margin-bottom: 1rem;
+
+  &:global(.cds--tile) {
+    min-height: 3rem !important;
+    padding-left: 10px !important;
+  }
+}
+
+.ordersContainer > :global(.cds--tile) {
+  min-height: 3rem !important;
+  padding-left: 10px !important;
+  margin: auto;
+}
+
+.orderPropertyDisplay {
+    font-size: 15px !important;
+  }
+
+  .bodyLong01 {
+    font-size: 13px !important;
+  }
+
+  .displayValue {
+    color: #525252;
+    font-weight: bold;
+    width: layout.$spacing-05;
+    height: layout.$spacing-05;
+  }
+
+  .actionBtns {
+    float: right;
+    margin-left: layout.$spacing-05;
+    margin-top: layout.$spacing-07;
+  }

src/components/orders-table/orderDetail.component.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styles from "./orderDetail.scss";
+
+export const OrderDetail: React.FC<{ label: string; value: string | any }> = ({
+  label,
+  value,
+}) => {
+  return (
+    <div>
+      <p className={styles.bodyLong01}>
+        <span className={styles.label01}>{label}</span>
+        {" : "}
+        <span className={styles.displayValue}>{value}</span>
+      </p>
+    </div>
+  );
+};

src/components/orders-table/orderDetail.scss

@@ -0,0 +1,15 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+  .bodyLong01 {
+    font-size: 13px !important;
+  }
+
+  .displayValue {
+    color: #525252;
+    font-weight: bold;
+    width: layout.$spacing-05;
+    height: layout.$spacing-05;
+  }
+