(fix)O3-3618: Required Field Message Alert for Labs is Not Clear and …

…is Not Noticeable
openmrs · Aug 2, 2024 · 0dd13d3 · 0dd13d3
1 parent 7497f45
commit 0dd13d3
Show file tree

Hide file tree

Showing 4 changed files with 2,149 additions and 597 deletions.
diff --git a/package.json b/package.json
@@ -44,8 +44,10 @@
     },
     "dependencies": {
         "@carbon/react": "^1.14.0",
+        "@hookform/resolvers": "^3.9.0",
         "lodash-es": "^4.17.21",
-        "react-hook-form": "^7.49.3"
+        "react-hook-form": "^7.52.1",
+        "zod": "^3.23.8"
     },
     "peerDependencies": {
         "@openmrs/esm-framework": "*",
@@ -55,7 +57,7 @@
         "react-router-dom": "6.x"
     },
     "devDependencies": {
-        "@openmrs/esm-framework": "next",
+        "@openmrs/esm-framework": "^5.7.3-pre.2153",
         "@openmrs/esm-patient-common-lib": "next",
         "@openmrs/esm-styleguide": "next",
         "@swc/cli": "^0.1.62",
@@ -87,7 +89,7 @@
         "jest-cli": "^28.1.3",
         "jest-environment-jsdom": "^28.1.3",
         "lint-staged": "^14.0.1",
-        "openmrs": "next",
+        "openmrs": "^5.7.3-pre.2153",
         "prettier": "^2.8.8",
         "pretty-quick": "^3.1.3",
         "raw-loader": "^4.0.2",

diff --git a/src/results/result-form-field.component.tsx b/src/results/result-form-field.component.tsx
@@ -1,16 +1,42 @@
 import React from "react";
 import styles from "./result-form.scss";
 import { TextInput, Select, SelectItem } from "@carbon/react";
-import { useTranslation } from "react-i18next";
+import { TFunction, useTranslation } from "react-i18next";
 import { ConceptReference } from "./result-form.resource";
-import { Controller } from "react-hook-form";
+import { Controller, UseFormRegister } from "react-hook-form";
+import { ZodSchema, z } from "zod";
+
+const isNumeric = (concept: ConceptReference): boolean =>
+  concept.datatype.display === "Numeric";
+
+const defaultNumericValue = () => 0;
+
+const createResultFormFieldSchema = (
+  concepts: ConceptReference[],
+  t: TFunction
+): ZodSchema => {
+  const fields = concepts.reduce((acc, concept) => {
+    const fieldValidation = isNumeric(concept)
+      ? z.coerce
+          .number()
+          .min(0, { message: t("enterValidNumber", "Enter a valid number") })
+      : z
+          .string()
+          .min(1, { message: t("fieldRequired", "This field is required") });
+
+    return { ...acc, [concept.uuid]: fieldValidation };
+  }, {} as Record<string, z.ZodString | z.ZodNumber>);
+
+  return z.object(fields);
+};
 
 interface ResultFormFieldProps {
+  register: UseFormRegister<{ testResult: string }>;
   concept: ConceptReference;
   control: any;
-  register: any;
   errors: any;
 }
+
 const ResultFormField: React.FC<ResultFormFieldProps> = ({
   concept,
   control,
@@ -26,16 +52,16 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
   const printValueRange = (concept: ConceptReference) => {
     if (concept?.datatype?.display === "Numeric") {
       const maxVal = Math.max(
-        concept?.hiAbsolute,
-        concept?.hiCritical,
-        concept?.hiNormal
+        concept?.hiAbsolute ?? 0,
+        concept?.hiCritical ?? 0,
+        concept?.hiNormal ?? 0
       );
       const minVal = Math.min(
-        concept?.lowAbsolute,
-        concept?.lowCritical,
-        concept?.lowNormal
+        concept?.lowAbsolute ?? 0,
+        concept?.lowCritical ?? 0,
+        concept?.lowNormal ?? 0
       );
-      return ` (${minVal ?? 0} - ${maxVal > 0 ? maxVal : "--"} ${
+      return ` (${minVal} - ${maxVal > 0 ? maxVal : "--"} ${
         concept?.units ?? ""
       })`;
     }
@@ -44,18 +70,11 @@ 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}
+          rules={{ required: true }}
           render={({ field }) => (
             <TextInput
               key={concept.uuid}
@@ -69,6 +88,8 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
                   : "")
               }
               autoFocus
+              invalid={!!errors[concept.uuid]}
+              invalidText={errors[concept.uuid]?.message}
             />
           )}
         />
@@ -78,23 +99,20 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
         <Controller
           name={concept.uuid}
           control={control}
-          rules={{
-            required: true,
-          }}
+          rules={{ required: true }}
           render={({ field }) => (
             <Select
               key={concept.uuid}
               className={styles.textInput}
               {...field}
-              type="text"
               labelText={concept?.display}
-              rules={{ required: true }}
+              invalid={!!errors[concept.uuid]}
+              invalidText={errors[concept.uuid]?.message}
             >
               <SelectItem
                 text={t("chooseOption", "Choose an Option")}
                 value=""
               />
-
               {concept?.answers?.map((answer) => (
                 <SelectItem
                   key={answer.uuid}
@@ -114,14 +132,12 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
           if (isTextOrNumeric(member)) {
             return (
               <Controller
+                key={member.uuid}
                 control={control}
                 name={member.uuid}
-                rules={{
-                  required: true,
-                }}
+                rules={{ required: true }}
                 render={({ field }) => (
                   <TextInput
-                    key={member.uuid}
                     className={styles.textInput}
                     {...field}
                     type={
@@ -134,6 +150,8 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
                         : "")
                     }
                     autoFocus={index === 0}
+                    invalid={!!errors[member.uuid]}
+                    invalidText={errors[member.uuid]?.message}
                   />
                 )}
               />
@@ -143,25 +161,23 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
           if (isCoded(member)) {
             return (
               <Controller
+                key={member.uuid}
                 name={member.uuid}
                 control={control}
-                rules={{
-                  required: true,
-                }}
+                rules={{ required: true }}
                 render={({ field }) => (
                   <Select
-                    key={member.uuid}
                     className={styles.textInput}
                     {...field}
-                    type="text"
                     labelText={member?.display}
                     autoFocus={index === 0}
+                    invalid={!!errors[member.uuid]}
+                    invalidText={errors[member.uuid]?.message}
                   >
                     <SelectItem
-                      text={t("option", "Choose an Option")}
+                      text={t("chooseOption", "Choose an Option")}
                       value=""
                     />
-
                     {member?.answers?.map((answer) => (
                       <SelectItem
                         key={answer.uuid}