Feat/react hook form (#36)

* WIP on form changes' * (feat) enhance result-form to react-hook forms * save results after form refactor * close modal on successful update * remove unused imports --------- Co-authored-by: Donald Kibet <[email protected]>
openmrs · Jan 15, 2024 · 228ed06 · 228ed06
1 parent 9a96cb3
commit 228ed06
Show file tree

Hide file tree

Showing 4 changed files with 183 additions and 126 deletions.
diff --git a/package.json b/package.json
@@ -46,8 +46,11 @@
   },
   "dependencies": {
     "@carbon/react": "^1.14.0",
+    "@hookform/resolvers": "^3.3.4",
     "lodash-es": "^4.17.21",
-    "react-to-print": "^2.14.15"
+    "react-hook-form": "^7.49.3",
+    "react-to-print": "^2.14.15",
+    "zod": "^3.22.4"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "*",

diff --git a/src/results/result-form-field.component.tsx b/src/results/result-form-field.component.tsx
@@ -2,82 +2,131 @@ import React from "react";
 import styles from "./result-form.scss";
 import { TextInput, Select, SelectItem } from "@carbon/react";
 import { useTranslation } from "react-i18next";
-
 import { ConceptReference } from "./result-form.resource";
+import { Controller } from "react-hook-form";
 
 interface ResultFormFieldProps {
   concept: ConceptReference;
-  setFormValues?: (value: any) => void;
-  inputValues?: any;
+  control: any;
+  register: any;
 }
 const ResultFormField: React.FC<ResultFormFieldProps> = ({
   concept,
-  setFormValues,
-  inputValues,
+  control,
+  register,
 }) => {
   const { t } = useTranslation();
+  const isTextOrNumeric = (concept) =>
+    concept.datatype?.display === "Text" ||
+    concept.datatype?.display === "Numeric";
+  const isCoded = (concept) => concept.datatype?.display === "Coded";
+  const isPanel = (concept) => concept.setMembers?.length > 0;
 
-  // getInput values
-  const handleInputChange = (memberUuid, value) => {
-    setFormValues((prevValues) => ({
-      ...prevValues,
-      [memberUuid]: value,
-    }));
-  };
+  return (
+    <>
+      {isTextOrNumeric(concept) && (
+        <Controller
+          control={control}
+          name={concept.uuid}
+          render={({ field }) => (
+            <TextInput
+              key={concept.uuid}
+              className={styles.textInput}
+              {...field}
+              type={concept.datatype.display === "Numeric" ? "number" : "text"}
+              labelText={concept?.display}
+              autoFocus
+            />
+          )}
+        />
+      )}
+      {isCoded(concept) && (
+        <Controller
+          name={concept.uuid}
+          control={control}
+          render={({ field }) => (
+            <Select
+              key={concept.uuid}
+              className={styles.textInput}
+              {...field}
+              type="text"
+              labelText={concept?.display}
+            >
+              <SelectItem text={t("option", "Choose an Option")} value="" />
 
-  // create input fields
-  if (concept === undefined) {
-    return null;
-  }
+              {concept?.answers?.map((answer) => (
+                <SelectItem
+                  key={answer.uuid}
+                  text={answer.display}
+                  value={answer.uuid}
+                >
+                  {answer.display}
+                </SelectItem>
+              ))}
+            </Select>
+          )}
+        />
+      )}
 
-  let inputField;
-  if (
-    concept.datatype?.display === "Text" ||
-    concept.datatype?.display === "Numeric"
-  ) {
-    inputField = (
-      <TextInput
-        key={concept.uuid}
-        className={styles.textInput}
-        name={`member-${concept.uuid}-test-id`}
-        id={`member-${concept.uuid}-test-id`}
-        type={concept.datatype.display === "Numeric" ? "number" : "text"}
-        labelText={concept?.display}
-        value={inputValues[`${concept.uuid}`] || ""}
-        onChange={(e) => {
-          handleInputChange(concept.uuid, e.target.value);
-        }}
-      />
-    );
-  } else if (concept?.datatype?.display === "Coded") {
-    inputField = (
-      <Select
-        key={concept.uuid}
-        className={styles.textInput}
-        name={`member-${concept.uuid}-test-id`}
-        id={`member-${concept.uuid}-test-id`}
-        type="text"
-        labelText={concept?.display}
-        value={inputValues[`${concept.uuid}`]}
-        onChange={(e) => {
-          handleInputChange(concept.uuid, e.target.value);
-        }}
-      >
-        <SelectItem text={t("option", "Choose an Option")} value="" />
+      {isPanel(concept) &&
+        concept.setMembers.map((member, index) => {
+          if (isTextOrNumeric(member)) {
+            return (
+              <Controller
+                control={control}
+                name={member.uuid}
+                render={({ field }) => (
+                  <TextInput
+                    key={member.uuid}
+                    className={styles.textInput}
+                    {...field}
+                    type={
+                      member.datatype.display === "Numeric" ? "number" : "text"
+                    }
+                    labelText={member?.display}
+                    autoFocus={index === 0}
+                  />
+                )}
+              />
+            );
+          }
+
+          if (isCoded(member)) {
+            return (
+              <Controller
+                name={member.uuid}
+                control={control}
+                render={({ field }) => (
+                  <Select
+                    key={member.uuid}
+                    className={styles.textInput}
+                    {...field}
+                    type="text"
+                    labelText={member?.display}
+                    autoFocus={index === 0}
+                  >
+                    <SelectItem
+                      text={t("option", "Choose an Option")}
+                      value=""
+                    />
 
-        {concept?.answers?.map((answer) => (
-          <SelectItem
-            key={answer.uuid}
-            text={answer.display}
-            value={answer.uuid}
-          >
-            {answer.display}
-          </SelectItem>
-        ))}
-      </Select>
-    );
-  }
-  return <>{inputField}</>;
+                    {member?.answers?.map((answer) => (
+                      <SelectItem
+                        key={answer.uuid}
+                        text={answer.display}
+                        value={answer.uuid}
+                      >
+                        {answer.display}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                )}
+              />
+            );
+          }
+        })}
+    </>
+  );
 };
 
 export default ResultFormField;