(fix) Enhance result form to handle non-set order concepts

src/results/result-form-field.component.tsx

@@ -0,0 +1,74 @@
+import React, { useState } 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";
+
+interface ResultFormFieldProps {
+  concept: ConceptReference;
+}
+const ResultFormField: React.FC<ResultFormFieldProps> = ({ concept }) => {
+  const { t } = useTranslation();
+  const [inputValues, setInputValues] = useState({});
+
+  // getInput values
+  const handleInputChange = (memberUuid, value) => {
+    setInputValues((prevValues) => ({
+      ...prevValues,
+      [memberUuid]: value,
+    }));
+  };
+
+  // create input fields
+  if (concept === undefined) {
+    return null;
+  }
+
+  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="" />
+
+        {concept?.answers?.map((answer) => (
+          <SelectItem
+            key={answer.uuid}
+            text={answer.display}
+            value={answer.uuid}
+          >
+            {answer.display}
+          </SelectItem>
+        ))}
+      </Select>
+    );
+  }
+  return <>{inputField}</>;
+};
+
+export default ResultFormField;

src/results/result-form.component.tsx

@@ -1,15 +1,6 @@
 import React, { useMemo, useState } from "react";
 import styles from "./result-form.scss";
-import {
-  Button,
-  InlineLoading,
-  TextInput,
-  Select,
-  SelectItem,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from "@carbon/react";
+import { Button, InlineLoading, ModalBody, ModalFooter } from "@carbon/react";
 import { useTranslation } from "react-i18next";
 import { closeOverlay } from "../components/overlay/hook";
 import {
@@ -23,6 +14,7 @@ import {
   useGetOrderConceptByUuid,
 } from "./result-form.resource";
 import { Result } from "../work-list/work-list.resource";
+import ResultFormField from "./result-form-field.component";
 
 interface ResultFormProps {
   patientUuid: string;
@@ -38,9 +30,9 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const [selectedOption, setSelectedOption] = useState();
   const [inputValues, setInputValues] = useState({});
 
-  const [selectedOption, setSelectedOption] = useState();
 
   const bannerState = useMemo(() => {
     if (patient) {
@@ -52,67 +44,23 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
     }
   }, [patient, patientUuid]);
 
-  // getInput values
-  const handleInputChange = (memberUuid, value) => {
-    setInputValues((prevValues) => ({
-      ...prevValues,
-      [memberUuid]: value,
-    }));
-  };
-
   // create input fields
-  const Questions = ({ conceptMembers }) => {
+  const Questions = ({ concept }) => {
     const inputFields = useMemo(() => {
-      return conceptMembers.map((member) => {
-        let inputField;
-
-        if (
-          member.datatype.display === "Text" ||
-          member.datatype.display === "Numeric"
-        ) {
-          inputField = (
-            <TextInput
-              key={member.uuid}
-              className={styles.textInput}
-              name={`member-${member.uuid}-test-id`}
-              id={`member-${member.uuid}-test-id`}
-              type={member.datatype.display === "Numeric" ? "number" : "text"}
-              labelText={member?.display}
-              value={inputValues[member.uuid] || ""}
-              onChange={(e) => handleInputChange(member.uuid, e.target.value)}
-            />
-          );
-        } else if (member.datatype.display === "Coded") {
-          inputField = (
-            <Select
-              key={member.uuid}
-              className={styles.textInput}
-              name={`member-${member.uuid}-test-id`}
-              id={`member-${member.uuid}-test-id`}
-              type="text"
-              labelText={member?.display}
-              value={inputValues[member.uuid] || ""}
-              onChange={(e) => handleInputChange(member.uuid, e.target.value)}
-            >
-              {!setSelectedOption ? (
-                <SelectItem text={t("option", "Choose an Option")} value="" />
-              ) : null}
-              {member?.answers?.map((answer) => (
-                <SelectItem
-                  key={answer.uuid}
-                  text={answer.display}
-                  value={answer.uuid}
-                >
-                  {answer.display}
-                </SelectItem>
-              ))}
-            </Select>
-          );
-        }
+      if (concept === undefined) {
+        return null;
+      }
 
-        return inputField;
-      });
-    }, [conceptMembers]); // Memoize when conceptMembers changes
+      if (concept.set && concept.setMembers.length > 0) {
+        return concept.setMembers.map((member) => {
+          let inputField = <ResultFormField concept={member} />;
+          return inputField;
+        });
+      } else if (!concept.set && concept.setMembers.length === 0) {
+        let inputField = <ResultFormField concept={concept} />;
+        return <>{inputField}</>;
+      }
+    }, [concept]); // Memoize when conceptMembers changes
 
     return <>{inputFields}</>;
   };
@@ -128,26 +76,49 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
       order: { uuid: order.uuid },
       groupMembers: groupMembers,
     };
-    concept.forEach((item) => {
+
+    if (concept.set && concept.setMembers.length > 0) {
+      concept.setMembers.forEach((item) => {
+        let value;
+        if (
+          item.datatype.display === "Numeric" ||
+          item.datatype.display === "Text"
+        ) {
+          value = inputValues[`${item.uuid}`];
+        } else if (item.datatype.display === "Coded") {
+          value = {
+            uuid: inputValues[`${item.uuid}`],
+          };
+        }
+        const groupMember = {
+          concept: { uuid: item.uuid },
+          value: value,
+          status: "FINAL",
+          order: { uuid: order.uuid },
+        };
+        groupMembers.push(groupMember);
+      });
+    } else if (!concept.set && concept.setMembers.length === 0) {
       let value;
       if (
-        item.datatype.display === "Numeric" ||
-        item.datatype.display === "Text"
+        concept.datatype.display === "Numeric" ||
+        concept.datatype.display === "Text"
       ) {
-        value = inputValues[`${item.uuid}`];
-      } else if (item.datatype.display === "Coded") {
+        value = inputValues[`${concept.uuid}`];
+      } else if (concept.datatype.display === "Coded") {
         value = {
-          uuid: inputValues[`${item.uuid}`],
+          uuid: inputValues[`${concept.uuid}`],
         };
       }
       const groupMember = {
-        concept: { uuid: item.uuid },
+        concept: { uuid: concept.uuid },
         value: value,
         status: "FINAL",
         order: { uuid: order.uuid },
       };
       groupMembers.push(groupMember);
-    });
+    }
+
     obsValue.push(ob);
 
     const payload = {
@@ -198,9 +169,9 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
             <ExtensionSlot name="patient-header-slot" state={bannerState} />
           )}
 
-          {concept?.length > 0 && (
+          {concept && (
             <section className={styles.section}>
-              <Questions conceptMembers={concept} />
+              <Questions concept={concept} />
             </section>
           )}
         </ModalBody>

src/results/result-form.resource.ts

@@ -14,23 +14,13 @@ export interface ConceptResponse {
   descriptions: Description[];
   mappings: Mapping[];
   answers: any[];
-  setMembers: ConceptResponse[];
+  setMembers: ConceptReference[];
   auditInfo: AuditInfo;
   attributes: any[];
   links: Link18[];
   resourceVersion: string;
 }
 
-export interface ConceptMiniResponse {
-  uuid: string;
-  display: string;
-  name: Name;
-  datatype: Datatype;
-  conceptClass: ConceptClass;
-  set: boolean;
-  answers: any[];
-}
-
 export interface Name {
   display: string;
   uuid: string;
@@ -152,7 +142,7 @@ export interface Link8 {
   resourceAlias: string;
 }
 
-export interface SetMember {
+export interface ConceptReference {
   uuid: string;
   display: string;
   name: Name3;
@@ -315,34 +305,15 @@ export function useGetOrderConceptByUuid(uuid: string) {
     { data: ConceptResponse },
     Error
   >(apiUrl, openmrsFetch);
-  console.log("Mini concept data: ", data);
-  const defList = new Array();
-  defList.push(data?.data);
   return {
-    concept: data?.data ? data?.data.setMembers : defList,
+    concept: data?.data,
     isLoading,
     isError: error,
     isValidating,
     mutate,
   };
 }
 
-export function useGetOrderConceptDetailsByUuid(uuid: string) {
-  const apiUrl = `/ws/rest/v1/concept/${uuid}?v=full`;
-  const { data, error, isLoading, isValidating, mutate } = useSWR<
-    { data: ConceptResponse },
-    Error
-  >(apiUrl, openmrsFetch);
-  console.log("log url", data);
-
-  return {
-    concept: data?.data ?? {},
-    isLoading,
-    isError: error,
-    isValidating,
-    mutate,
-  };
-}
 // create observation
 export async function UpdateEncounter(uuid: string, payload: any) {
   const abortController = new AbortController();