Fixup

openmrs · Aug 13, 2024 · 2a1384b · 2a1384b
1 parent 50ce7d6
commit 2a1384b
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 53 deletions.
diff --git a/src/components/orders-table/listOrderDetails.component.tsx b/src/components/orders-table/listOrderDetails.component.tsx
@@ -1,18 +1,18 @@
 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 { showModal } from "@openmrs/esm-framework";
 import { launchOverlay } from "../overlay/store";
+import { ListOrdersDetailsProps } from "../../types";
+import { OrderDetail } from "./orderDetail.component";
 import ResultForm from "../../results/result-form.component";
+import styles from "./listOrderDetails.scss";
 
 const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
+  const { t } = useTranslation();
   const orders = props.groupedOrders?.orders;
   const patientId = props.groupedOrders?.patientId;
-  const { t } = useTranslation();
+
   return (
     <div className={styles.ordersContainer}>
       {orders &&
@@ -32,6 +32,7 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
                       return (
                         <Button
                           kind="primary"
+                          key={`${action.actionName}-${row.uuid}`}
                           onClick={() => {
                             const dispose = showModal(
                               "pickup-lab-request-modal",
@@ -49,6 +50,7 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
                     if (action.actionName === "labResultsForm") {
                       return (
                         <Button
+                          key={`${action.actionName}-${row.uuid}`}
                           kind="primary"
                           onClick={() => {
                             launchOverlay(
@@ -64,6 +66,7 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
                     if (action.actionName === "rejectLabRequest") {
                       return (
                         <Button
+                          key={`${action.actionName}-${row.uuid}`}
                           kind="danger"
                           onClick={() => {
                             const dispose = showModal(
@@ -83,29 +86,28 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
               </div>
               <div>
                 <OrderDetail
-                  label={t("date", "DATE").toUpperCase()}
+                  label={t("date", "Date").toUpperCase()}
                   value={row.dateActivated}
                 />
                 <OrderDetail
-                  label={t("orderNumber", "Order Number").toUpperCase()}
+                  label={t("orderNumber", "Order number").toUpperCase()}
                   value={row.orderNumber}
                 />
                 <OrderDetail
-                  label={t("procedure", "procedure").toUpperCase()}
+                  label={t("procedure", "Procedure").toUpperCase()}
                   value={row.display}
                 />
-
                 <OrderDetail
                   label={t("status", "Status").toUpperCase()}
                   value={row.fulfillerStatus}
                 />
                 <OrderDetail
-                  label={t("urgency", "urgency").toUpperCase()}
+                  label={t("urgency", "Urgency").toUpperCase()}
                   value={row.urgency}
                 />
                 <OrderDetail
-                  label={t("orderer", "orderer").toUpperCase()}
-                  value={row.orderer}
+                  label={t("orderer", "Orderer").toUpperCase()}
+                  value={row.orderer?.display}
                 />
                 <OrderDetail
                   label={t("instructions", "Instructions").toUpperCase()}

diff --git a/src/components/orders-table/orderDetail.component.tsx b/src/components/orders-table/orderDetail.component.tsx
@@ -9,7 +9,7 @@ export const OrderDetail: React.FC<{ label: string; value: string | any }> = ({
     <div>
       <p className={styles.bodyLong01}>
         <span className={styles.label01}>{label}</span>
-        {" : "}
+        {": "}
         <span className={styles.displayValue}>{value}</span>
       </p>
     </div>

diff --git a/src/components/orders-table/orders-data-table.component.tsx b/src/components/orders-table/orders-data-table.component.tsx
@@ -1,43 +1,43 @@
 import React, { useMemo, useState } from "react";
+import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 import {
   DataTable,
   DataTableSkeleton,
+  DatePicker,
+  DatePickerInput,
+  Dropdown,
+  Layer,
   Pagination,
   Table,
   TableBody,
   TableCell,
   TableContainer,
-  TableHead,
-  TableHeader,
+  TableExpandedRow,
   TableExpandHeader,
   TableExpandRow,
-  TableExpandedRow,
+  TableHead,
+  TableHeader,
   TableRow,
-  Tile,
-  Dropdown,
   TableToolbar,
   TableToolbarContent,
-  Layer,
   TableToolbarSearch,
-  DatePicker,
-  DatePickerInput,
+  Tile,
 } from "@carbon/react";
 import {
   formatDate,
   parseDate,
   useConfig,
   usePagination,
 } from "@openmrs/esm-framework";
-import styles from "./orders-data-table.scss";
+import { isoDateTimeString } from "../../constants";
 import { FulfillerStatus, OrdersDataTableProps } from "../../types";
 import {
   useLabOrders,
   useSearchGroupedResults,
 } from "../../laboratory-resource";
-import dayjs from "dayjs";
-import { isoDateTimeString } from "../../constants";
 import ListOrderDetails from "./listOrderDetails.component";
+import styles from "./orders-data-table.scss";
 
 const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
   const { t } = useTranslation();
@@ -57,18 +57,18 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
     activatedOnOrAfterDate
   );
 
-  const flattenedLabOrders = useMemo(() => {
-    return labOrders.map((eachObject) => {
-      return {
-        ...eachObject,
-        dateActivated: formatDate(parseDate(eachObject.dateActivated)),
-        patientName: eachObject.patient?.display.split("-")[1],
-        patientUuid: eachObject.patient?.uuid,
-        status: eachObject.fulfillerStatus ?? "--",
-        orderer: eachObject.orderer?.display.split("-")[1],
-      };
-    });
-  }, [labOrders]);
+  const flattenedLabOrders = useMemo(
+    () =>
+      labOrders.map((labOrder) => ({
+        ...labOrder,
+        dateActivated: formatDate(parseDate(labOrder.dateActivated)),
+        patientName: labOrder.patient?.display.split("-")[1],
+        patientUuid: labOrder.patient?.uuid,
+        status: labOrder.fulfillerStatus ?? "--",
+        orderer: labOrder.orderer,
+      })),
+    [labOrders]
+  );
 
   function groupOrdersById(orders) {
     if (orders && orders.length > 0) {
@@ -203,7 +203,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
                       <p>
                         {t(
                           "onOrAfterDateFilter",
-                          "Filter orders on or after : "
+                          "Filter orders on or after: "
                         )}
                       </p>
                       <DatePicker

diff --git a/src/components/orders-table/orders-data-table.scss b/src/components/orders-table/orders-data-table.scss
@@ -25,7 +25,6 @@
 
   :global(.cds--table-toolbar) {
     position: static;
-    margin: 0.5rem;
   }
 
   :global(.cds--overflow-menu) {
@@ -39,12 +38,12 @@
 }
 
 .toolbarItem {
+  margin-left: 1rem;
   display: flex;
-  margin: 5px 10px;
   align-items: center;
 
   & p {
-    padding-right: 5px;
+    padding-right: 0.5rem;
     @include type.type-style('body-01');
     color: colors.$gray-70;
   }
@@ -83,4 +82,4 @@
 
 .singleLineDisplay {
   white-space: nowrap;
-}
+}
diff --git a/src/results/result-form.component.tsx b/src/results/result-form.component.tsx
@@ -4,6 +4,7 @@ import {
   Button,
   ButtonSet,
   Form,
+  InlineLoading,
   InlineNotification,
   Stack,
 } from "@carbon/react";
@@ -22,7 +23,7 @@ import {
 } from "@openmrs/esm-framework";
 import {
   useGetOrderConceptByUuid,
-  UpdateOrderResult,
+  updateOrderResult,
 } from "./result-form.resource";
 import { Config } from "../config-schema";
 import { closeOverlay } from "../components/overlay/store";
@@ -45,10 +46,10 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
 
   const {
     control,
-    register,
     formState: { isSubmitting },
     getValues,
     handleSubmit,
+    register,
   } = useForm<{ testResult: string }>({
     defaultValues: {},
   });
@@ -114,6 +115,7 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
       });
     } else if (!concept.set && concept.setMembers.length === 0) {
       let value;
+
       if (
         concept.datatype.display === "Numeric" ||
         concept.datatype.display === "Text"
@@ -152,10 +154,10 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
       encounter: order.encounter.uuid,
       patient: order.patient.uuid,
       concept: order.concept.uuid,
-      orderer: order.orderer,
+      orderer: order.orderer?.uuid,
     };
 
-    UpdateOrderResult(encounterPayload, orderDiscontinuationPayload).then(
+    updateOrderResult(encounterPayload, orderDiscontinuationPayload).then(
       (response) => {
         if (response.ok) {
           showSnackbar({
@@ -254,13 +256,17 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
         <Button
           className={styles.button}
           disabled={isSubmitting}
-          onClick={() => closeOverlay()}
+          onClick={closeOverlay}
           kind="secondary"
         >
           {t("cancel", "Cancel")}
         </Button>
         <Button className={styles.button} onClick={handleSubmit(onSubmit)}>
-          {t("save", "Save")}
+          {isSubmitting ? (
+            <InlineLoading description={t("saving", "Saving") + "..."} />
+          ) : (
+            <span>{t("save", "Save")}</span>
+          )}
         </Button>
       </ButtonSet>
     </Form>

diff --git a/src/results/result-form.resource.ts b/src/results/result-form.resource.ts
@@ -308,7 +308,7 @@ export interface ObPayload {
 }
 
 // get order concept
-export async function GetOrderConceptByUuid(uuid: string) {
+export async function getOrderConceptByUuid(uuid: string) {
   const abortController = new AbortController();
   return openmrsFetch(`${restBaseUrl}/concept/${uuid}?v=full`, {
     headers: {
@@ -334,7 +334,7 @@ export function useGetOrderConceptByUuid(uuid: string) {
   };
 }
 
-export async function UpdateEncounter(uuid: string, payload: any) {
+export async function updateEncounter(uuid: string, payload: any) {
   const abortController = new AbortController();
   return openmrsFetch(`${restBaseUrl}/encounter/${uuid}`, {
     method: "POST",
@@ -346,8 +346,8 @@ export async function UpdateEncounter(uuid: string, payload: any) {
   });
 }
 
-//TODO: the calls to update order and observations for results should be transactional to allow for rollback
-export async function UpdateOrderResult(
+// TODO: the calls to update order and observations for results should be transactional to allow for rollback
+export async function updateOrderResult(
   encounterPayload: any,
   orderPayload: any
 ): Promise<FetchResponse<any>> {

diff --git a/translations/en.json b/translations/en.json
@@ -27,7 +27,7 @@
   "nextPage": "Next page",
   "noLabRequestsFoundCheckFilters": "No lab requests found. Please check your filters and try again.",
   "onHoldStatus": "ON_HOLD",
-  "onOrAfterDateFilter": "Filter orders on or after : ",
+  "onOrAfterDateFilter": "Filter orders on or after: ",
   "option": "Choose an Option",
   "orderer": "orderer",
   "orderNumber": "Order Number",
@@ -48,6 +48,7 @@
   "rejectLabRequestTitle": "Lab Request Rejected",
   "results": "Results",
   "save": "Save",
+  "saving": "Saving",
   "searchThisList": "Search this list",
   "status": "Status",
   "tabletOverlay": "Tablet overlay",