From e14f4c44138fcdb8f252b5b2a4f904899b0f9303 Mon Sep 17 00:00:00 2001
From: Ojwang' Antony <ojwangantony.g7kenya@gmail.com>
Date: Wed, 17 Jan 2024 14:43:27 +0300
Subject: [PATCH] mark fields in the lab result form as required (#37)

* mark fields in the lab result form as required

* mend
---
 src/results/result-form-field.component.tsx | 20 ++++++++++++++++-
 src/results/result-form.component.tsx       | 24 +++++++++++----------
 src/results/result-form.scss                |  4 ++++
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/results/result-form-field.component.tsx b/src/results/result-form-field.component.tsx
index cc768c9..f74aa6f 100644
--- a/src/results/result-form-field.component.tsx
+++ b/src/results/result-form-field.component.tsx
@@ -9,11 +9,12 @@ interface ResultFormFieldProps {
   concept: ConceptReference;
   control: any;
   register: any;
+  errors: any;
 }
 const ResultFormField: React.FC<ResultFormFieldProps> = ({
   concept,
   control,
-  register,
+  errors,
 }) => {
   const { t } = useTranslation();
   const isTextOrNumeric = (concept) =>
@@ -24,9 +25,15 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
 
   return (
     <>
+      {Object.keys(errors).length > 0 && (
+        <div className={styles.errorDiv}>All fields are required</div>
+      )}
       {isTextOrNumeric(concept) && (
         <Controller
           control={control}
+          rules={{
+            required: true,
+          }}
           name={concept.uuid}
           render={({ field }) => (
             <TextInput
@@ -40,10 +47,14 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
           )}
         />
       )}
+
       {isCoded(concept) && (
         <Controller
           name={concept.uuid}
           control={control}
+          rules={{
+            required: true,
+          }}
           render={({ field }) => (
             <Select
               key={concept.uuid}
@@ -51,6 +62,7 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
               {...field}
               type="text"
               labelText={concept?.display}
+              rules={{ required: true }}
             >
               <SelectItem text={t("option", "Choose an Option")} value="" />
 
@@ -75,6 +87,9 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
               <Controller
                 control={control}
                 name={member.uuid}
+                rules={{
+                  required: true,
+                }}
                 render={({ field }) => (
                   <TextInput
                     key={member.uuid}
@@ -96,6 +111,9 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
               <Controller
                 name={member.uuid}
                 control={control}
+                rules={{
+                  required: true,
+                }}
                 render={({ field }) => (
                   <Select
                     key={member.uuid}
diff --git a/src/results/result-form.component.tsx b/src/results/result-form.component.tsx
index 1a0a506..70fe344 100644
--- a/src/results/result-form.component.tsx
+++ b/src/results/result-form.component.tsx
@@ -27,8 +27,9 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
   const {
     control,
     register,
-    formState: { isSubmitting },
+    formState: { isSubmitting, errors },
     getValues,
+    handleSubmit,
   } = useForm<{ testResult: string }>({
     defaultValues: {},
   });
@@ -52,7 +53,7 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
     return <div>Loading test details</div>;
   }
 
-  const handleSubmit = (e) => {
+  const onSubmit = (data, e) => {
     e.preventDefault();
     // assign result to test order
     const documentedValues = getValues();
@@ -168,16 +169,17 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
             <ExtensionSlot name="patient-header-slot" state={bannerState} />
           )}
           {/* // we need to display test name for test panels */}
-          {concept.setMembers.length > 0 && (
-            <div>Test panel: {concept.display}</div>
-          )}
+          {concept.setMembers.length > 0 && <div>{concept.display}</div>}
           {concept && (
             <section className={styles.section}>
-              <ResultFormField
-                register={register}
-                concept={concept}
-                control={control}
-              />
+              <form>
+                <ResultFormField
+                  register={register}
+                  concept={concept}
+                  control={control}
+                  errors={errors}
+                />
+              </form>
             </section>
           )}
         </ModalBody>
@@ -190,7 +192,7 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
           >
             {t("cancel", "Cancel")}
           </Button>
-          <Button onClick={handleSubmit}>Save test results</Button>
+          <Button onClick={handleSubmit(onSubmit)}>Save test results</Button>
         </ModalFooter>
       </div>
     </>
diff --git a/src/results/result-form.scss b/src/results/result-form.scss
index 12aca1b..03d1f27 100644
--- a/src/results/result-form.scss
+++ b/src/results/result-form.scss
@@ -16,4 +16,8 @@ section {
 
 .textInput {
   margin: 5px;
+}
+
+.errorDiv {
+  color: red;
 }
\ No newline at end of file