From 8e89a92441c5879cd98ffc7c2733bb648e6c27bb Mon Sep 17 00:00:00 2001 From: divyanshu_Kumar <154233802+d1vyanshu-kumar@users.noreply.github.com> Date: Tue, 25 Jun 2024 14:38:37 +0530 Subject: [PATCH 1/2] #1116 | Enhance concept screen to display form, section, and question names --- src/formDesigner/components/ConceptDetails.js | 191 +++++++++++------- 1 file changed, 118 insertions(+), 73 deletions(-) diff --git a/src/formDesigner/components/ConceptDetails.js b/src/formDesigner/components/ConceptDetails.js index bb3d88071..3b781cfdc 100644 --- a/src/formDesigner/components/ConceptDetails.js +++ b/src/formDesigner/components/ConceptDetails.js @@ -19,12 +19,75 @@ import UserInfo from "../../common/model/UserInfo"; import { connect } from "react-redux"; import { Privilege } from "openchs-models"; -function ConceptDetails({ userInfo, ...props }) { +function ConceptDetails({ subjectType, formMappings, userInfo, ...props }) { const [editAlert, setEditAlert] = useState(false); const [data, setData] = useState({}); const [usage, setUsage] = useState({}); const [addressLevelTypes, setAddressLevelTypes] = useState([]); const [subjectTypeOptions, setSubjectTypeOptions] = React.useState([]); + const [fdata, setFdata] = useState({}); + const [idToNameConverter, setIdToNameConverter] = useState({}); + + const fetchFormData = async formUuid => { + try { + const response = await http.get(`/forms/export?formUUID=${formUuid}`); + const form = response.data; + const formDetails = {}; + const idToName = {}; + form.formElementGroups.forEach(feg => { + feg.formElements.forEach(fe => { + const concept = fe.concept; + if (!feg.voided && !fe.voided) { + if (!formDetails[form.name]) { + formDetails[form.name] = []; + } + const elementDetails = { + formName: form.name, + sectionName: feg.name, + questionName: fe.name, + parentUUID: fe.parentFormElementUuid, + conceptName: concept.name, + dataType: concept.dataType + }; + formDetails[form.name].push(elementDetails); + idToName[fe.uuid] = fe.name; + } + }); + }); + + setFdata(prevFdata => ({ + ...prevFdata, + ...formDetails + })); + setIdToNameConverter(prevdata => ({ + ...prevdata, + ...idToName + })); + } catch (error) { + console.error("Error fetching form data:", error); + alert("Failed to fetch form data. Please try again later."); + } + }; + + useEffect(() => { + const fetchUsageAndFormDetails = async () => { + try { + const usageResponse = await http.get(`/web/concept/usage/${props.match.params.uuid}`); + setUsage(usageResponse.data); + + if (usageResponse.data.forms) { + usageResponse.data.forms.forEach(form => { + fetchFormData(form.formUUID); + }); + } + } catch (error) { + console.error("Error fetching usage data:", error); + } + }; + + fetchUsageAndFormDetails(); + }, [props.match.params.uuid]); + useEffect(() => { http.get("/web/concept/" + props.match.params.uuid).then(response => { setData(response.data); @@ -48,12 +111,14 @@ function ConceptDetails({ userInfo, ...props }) { }); } }); + http.get("/web/concept/usage/" + props.match.params.uuid).then(response => { setUsage(response.data); }); }, [props.match.params.uuid]); const hasEditPrivilege = UserInfo.hasPrivilege(userInfo, Privilege.PrivilegeType.EditConcept); + return ( <> @@ -86,41 +151,31 @@ function ConceptDetails({ userInfo, ...props }) {
Low absolute
- - {!isNil(data.lowAbsolute) ? data.lowAbsolute : } - + {!isNil(data.lowAbsolute) ? data.lowAbsolute : }

High Absolute
- - {!isNil(data.highAbsolute) ? data.highAbsolute : } - + {!isNil(data.highAbsolute) ? data.highAbsolute : }

Low Normal
- - {!isNil(data.lowNormal) ? data.lowNormal : } - + {!isNil(data.lowNormal) ? data.lowNormal : }

High normal
- - {!isNil(data.highNormal) ? data.highNormal : } - + {!isNil(data.highNormal) ? data.highNormal : }

Unit
- - {!isNil(data.unit) ? data.unit : } - + {!isNil(data.unit) ? data.unit : }
)} @@ -133,25 +188,15 @@ function ConceptDetails({ userInfo, ...props }) { return ( !answer.voided && (
- + - } + control={} label="abnormal" style={{ marginLeft: "5px" }} disabled={true} /> - } + control={} label="unique" disabled={true} /> @@ -169,10 +214,7 @@ function ConceptDetails({ userInfo, ...props }) { Within Catchment
- {data.keyValues.find(keyValue => keyValue.key === "isWithinCatchment").value === - true - ? "Yes" - : "No"} + {data.keyValues.find(keyValue => keyValue.key === "isWithinCatchment").value === true ? "Yes" : "No"}

@@ -182,14 +224,9 @@ function ConceptDetails({ userInfo, ...props }) { {addressLevelTypes .filter(addressLevelType => - data.keyValues - .find(keyValue => keyValue.key === "lowestAddressLevelTypeUUIDs") - .value.includes(addressLevelType.value) + data.keyValues.find(keyValue => keyValue.key === "lowestAddressLevelTypeUUIDs").value.includes(addressLevelType.value) ) - .map( - (addressLevelType, index, array) => - addressLevelType.label + (index === array.length - 1 ? "" : ", ") - )} + .map((addressLevelType, index, array) => addressLevelType.label + (index === array.length - 1 ? "" : ", "))}

@@ -197,14 +234,10 @@ function ConceptDetails({ userInfo, ...props }) { Highest Location Level
- {data.keyValues.find( - keyValue => keyValue.key === "highestAddressLevelTypeUUID" - ) !== undefined ? ( + {data.keyValues.find(keyValue => keyValue.key === "highestAddressLevelTypeUUID") !== undefined ? ( addressLevelTypes.find( addressLevelType => - data.keyValues.find( - keyValue => keyValue.key === "highestAddressLevelTypeUUID" - ).value === addressLevelType.value + data.keyValues.find(keyValue => keyValue.key === "highestAddressLevelTypeUUID").value === addressLevelType.value ).label ) : ( @@ -221,9 +254,7 @@ function ConceptDetails({ userInfo, ...props }) { { subjectTypeOptions.find( - subjectType => - data.keyValues.find(keyValue => keyValue.key === "subjectTypeUUID") - .value === subjectType.uuid + subjectType => data.keyValues.find(keyValue => keyValue.key === "subjectTypeUUID").value === subjectType.uuid ).name } @@ -239,13 +270,7 @@ function ConceptDetails({ userInfo, ...props }) { data.keyValues.map((keyValue, index) => { return (

- + {data.dataType !== "NA" && ( <> - Used in forms + Used in forms (Form name → Page name → Question Name)
- {isEmpty(usage.forms) && ( - Not used in the form. - )} + {isEmpty(usage.forms) && Not used in the form.} {usage.forms && ( -
    - {" "} - {usage.forms.map((form, index) => { +
    + {Object.keys(fdata).map(formName => { + const form = usage.forms.find(form => form.formName === formName); + // Group elements by section name + const sections = fdata[formName].reduce((acc, element) => { + if (!acc[element.sectionName]) { + acc[element.sectionName] = []; + } + acc[element.sectionName].push(element); + return acc; + }, {}); + return ( - <> -
  • - {form.formName} -

    -

    • - +
    + {Object.keys(sections).map(sectionName => ( +
    + {/* Render questions under the section */} + {sections[sectionName].map((element, index) => ( +
    + {element.conceptName === data.name && ( + + + {formName} + +  → {sectionName} + {element.parentUUID && <> → {idToNameConverter[element.parentUUID]}} +  → {element.questionName} + + )} +
    + ))} +
    + ))} +
    ); })} -
+
)} )} Answer to
- {isEmpty(usage.concepts) && ( - Not used in any answer. - )} + {isEmpty(usage.concepts) && Not used in any answer.} {usage.concepts && (