(fix) O3-3618: Prevent submitting empty lab results form (#79)

* (fix) O3-3618: Validates against submission of empty results form * Fixup --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Aug 17, 2024 · 78e157e · 78e157e
1 parent a0cdf08
commit 78e157e
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 123 deletions.
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "dependencies": {
         "@carbon/react": "^1.14.0",
         "lodash-es": "^4.17.21",
-        "react-hook-form": "^7.49.3"
+        "react-hook-form": "^7.52.1"
     },
     "peerDependencies": {
         "@openmrs/esm-framework": "*",

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-field.component.tsx b/src/results/result-form-field.component.tsx
@@ -1,22 +1,22 @@
 import React from "react";
-import styles from "./result-form.scss";
-import { TextInput, Select, SelectItem } from "@carbon/react";
+import { Select, SelectItem, TextInput } from "@carbon/react";
+import { Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { ConceptReference } from "./result-form.resource";
-import { Controller } from "react-hook-form";
+import styles from "./result-form.scss";
 
 interface ResultFormFieldProps {
   concept: ConceptReference;
   control: any;
   register: any;
-  errors: any;
 }
+
 const ResultFormField: React.FC<ResultFormFieldProps> = ({
   concept,
   control,
-  errors,
 }) => {
   const { t } = useTranslation();
+
   const isTextOrNumeric = (concept) =>
     concept.datatype?.display === "Text" ||
     concept.datatype?.display === "Numeric";
@@ -44,17 +44,9 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
 
   return (
     <>
-      {Object.keys(errors).length > 0 && (
-        <div className={styles.errorDiv}>
-          {t("allFieldsRequired", "All fields are required")}
-        </div>
-      )}
       {isTextOrNumeric(concept) && (
         <Controller
           control={control}
-          rules={{
-            required: true,
-          }}
           name={concept.uuid}
           render={({ field }) => (
             <TextInput
@@ -78,17 +70,13 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
         <Controller
           name={concept.uuid}
           control={control}
-          rules={{
-            required: true,
-          }}
           render={({ field }) => (
             <Select
               key={concept.uuid}
               className={styles.textInput}
               {...field}
               type="text"
               labelText={concept?.display}
-              rules={{ required: true }}
             >
               <SelectItem
                 text={t("chooseOption", "Choose an option")}
@@ -116,9 +104,6 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
               <Controller
                 control={control}
                 name={member.uuid}
-                rules={{
-                  required: true,
-                }}
                 render={({ field }) => (
                   <TextInput
                     key={member.uuid}
@@ -145,9 +130,6 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
               <Controller
                 name={member.uuid}
                 control={control}
-                rules={{
-                  required: true,
-                }}
                 render={({ field }) => (
                   <Select
                     key={member.uuid}