Fixup

openmrs · Aug 17, 2024 · e9dd9aa · e9dd9aa
1 parent 40862fe
commit e9dd9aa
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 53 deletions.
diff --git a/src/components/orders-table/list-order-details.component.tsx b/src/components/orders-table/list-order-details.component.tsx
@@ -9,9 +9,10 @@ import ResultForm from "../../results/result-form.component";
 import styles from "./list-order-details.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 &&
@@ -31,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",
@@ -48,6 +50,7 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
                     if (action.actionName === "labResultsForm") {
                       return (
                         <Button
+                          key={`${action.actionName}-${row.uuid}`}
                           kind="primary"
                           onClick={() => {
                             launchOverlay(
@@ -63,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(
@@ -82,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()}
                   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/order-detail.component.tsx b/src/components/orders-table/order-detail.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,4 +1,5 @@
 import React, { useMemo, useState } from "react";
+import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 import {
   DataTable,
@@ -23,7 +24,6 @@ import {
   TableToolbarSearch,
   Tile,
 } from "@carbon/react";
-import dayjs from "dayjs";
 import {
   formatDate,
   parseDate,
@@ -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) {

diff --git a/src/components/orders-table/orders-data-table.scss b/src/components/orders-table/orders-data-table.scss
@@ -26,7 +26,6 @@
 
   :global(.cds--table-toolbar) {
     position: static;
-    margin: 0.5rem;
   }
 
   :global(.cds--overflow-menu) {
@@ -48,12 +47,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;
   }

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";
@@ -42,14 +43,11 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
   const { laboratoryOrderTypeUuid, encounterTypeUuid } = useConfig<Config>();
   const [showEmptyFormErrorNotification, setShowEmptyFormErrorNotification] =
     useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const {
-    control,
-    register,
-    formState: { isSubmitting },
-    getValues,
-    handleSubmit,
-  } = useForm<{ testResult: string }>({
+  const { control, getValues, handleSubmit, register } = useForm<{
+    testResult: string;
+  }>({
     defaultValues: {},
   });
 
@@ -69,14 +67,16 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
   );
 
   const onSubmit = () => {
-    const formValues = getValues();
+    setIsSubmitting(true);
 
+    const formValues = getValues();
     const isEmptyForm = Object.values(formValues).every(
       (value) => value === "" || value === null || value === undefined
     );
 
     if (isEmptyForm) {
       setShowEmptyFormErrorNotification(true);
+      setIsSubmitting(false);
       return;
     }
 
@@ -114,6 +114,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,12 +153,12 @@ 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(
-      (response) => {
-        if (response.ok) {
+    updateOrderResult(encounterPayload, orderDiscontinuationPayload)
+      .then(
+        (res) => {
           showSnackbar({
             isLowContrast: true,
             title: t("updateEncounter", "Update lab results"),
@@ -180,6 +181,7 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
                   "You have successfully completed the test order"
                 ),
               });
+
               mutate(
                 (key) =>
                   typeof key === "string" &&
@@ -189,7 +191,6 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
                 undefined,
                 { revalidate: true }
               );
-              closeOverlay();
             },
             (err) => {
               showNotification({
@@ -204,20 +205,23 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
             }
           );
 
-          return response;
+          return res;
+        },
+        (err) => {
+          showNotification({
+            title: t("errorUpdatingEncounter", "Error updating test results"),
+            kind: "error",
+            critical: true,
+            description: err?.message,
+          });
         }
-      },
-      (err) => {
-        showNotification({
-          title: t("errorUpdatingEncounter", "Error updating test results"),
-          kind: "error",
-          critical: true,
-          description: err?.message,
-        });
-      }
-    );
+      )
+      .finally(() => {
+        closeOverlay();
+      });
 
     setShowEmptyFormErrorNotification(false);
+    setIsSubmitting(false);
   };
 
   if (isLoadingPatient || isLoadingConcepts) {
@@ -250,14 +254,19 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
       <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
         <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")}
+          {/* TODO: Consider simulating a delay in the submission process to get
+          this loading state to show */}
+          {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: {

diff --git a/translations/en.json b/translations/en.json
@@ -1,6 +1,5 @@
 {
   "all": "All",
-  "allFieldsRequired": "All fields are required",
   "cancel": "Cancel",
   "checkFilters": "Please check the filters above and try again",
   "chooseOption": "Choose an option",
@@ -9,6 +8,7 @@
   "date": "Date",
   "declinedStatus": "DECLINED",
   "discard": "Discard",
+  "error": "Error",
   "errorMarkingOrderFulfillStatus": "Error occurred while marking order fulfill status",
   "errorPickingOrder', 'Error picking order": "",
   "errorRejectingRequest": "Error rejecting lab request",
@@ -39,6 +39,7 @@
   "pickRequest": "Pick lab request",
   "pickRequestConfirmationText": "Continuing will update the request status to \"In Progress\" and advance it to the next stage. Are you sure you want to proceed?",
   "pickupLabRequest": "Pick up lab request",
+  "pleaseFillField": "Please fill at least one field",
   "previousPage": "Previous page",
   "procedure": "procedure",
   "receivedStatus": "RECEIVED",
@@ -48,6 +49,7 @@
   "rejectLabRequestTitle": "Lab request rejected",
   "results": "Results",
   "save": "Save",
+  "saving": "Saving",
   "searchThisList": "Search this list",
   "status": "Status",
   "tabletOverlay": "Tablet overlay",