@hisptz/react-ui
Version:
A collection of reusable complex DHIS2 react ui components.
192 lines (170 loc) • 7.59 kB
JavaScript
import React from "react";
import { useDataEngine, useDataQuery } from "@dhis2/app-runtime";
import { DataTableRow, DataTableCell } from "@dhis2/ui";
import { useEffect, useState } from "react";
import { getFinalWordFormula, getFormulaSources, getSummaryValueFromApi, lowerCaseAllWordsExceptFirstLetters } from "../../../../Utils/Functions/FormulaFunctions";
import { dataTypes } from "../../../../Utils/Models";
const query = {
programIndicator: {
resource: "programIndicators",
id: _ref => {
let {
id
} = _ref;
return id;
},
params: {
fields: ["id", "displayName", "aggregationType", "analyticsType", "analyticsPeriodBoundaries[id,analyticsPeriodBoundaryType,boundaryTarget]", "filter", "programIndicatorGroups[id,displayName]", "legendSets[id,displayName]"]
}
}
};
export default function Row(props) {
var _data$programIndicato5;
//props
const programIndicator = props.programInd;
const id = programIndicator.id;
const {
loading,
error,
data
} = useDataQuery(query, {
variables: {
id
}
}); //hooks
const engine = useDataEngine();
const [dataElementsArray, setDataElementArray] = useState([]);
const [attributesArray, setAttributesArray] = useState([]);
const [constantsArray, setConstantsArray] = useState([]);
useEffect(() => {
var _data$programIndicato;
if (data !== null && data !== void 0 && (_data$programIndicato = data.programIndicator) !== null && _data$programIndicato !== void 0 && _data$programIndicato.filter) {
var _data$programIndicato2;
const tempArr = getFormulaSources(data === null || data === void 0 ? void 0 : (_data$programIndicato2 = data.programIndicator) === null || _data$programIndicato2 === void 0 ? void 0 : _data$programIndicato2.filter, "#{");
if (tempArr.length) {
getWordData(tempArr, 0), () => {};
}
}
}, [data]);
useEffect(() => {
var _data$programIndicato3;
const tempArr = getFormulaSources(data === null || data === void 0 ? void 0 : (_data$programIndicato3 = data.programIndicator) === null || _data$programIndicato3 === void 0 ? void 0 : _data$programIndicato3.filter, "A{");
if (tempArr.length) {
getWordData(tempArr, 3), () => {};
}
}, [data]);
useEffect(() => {
var _data$programIndicato4;
const tempArr = getFormulaSources(data === null || data === void 0 ? void 0 : (_data$programIndicato4 = data.programIndicator) === null || _data$programIndicato4 === void 0 ? void 0 : _data$programIndicato4.filter, "C{");
if (tempArr.length) {
getWordData(tempArr, 4), () => {};
}
}, [data]); //variables
const wordDtEl = [];
const attributes = [];
const constants = [];
const final_filter_result = getFinalWordFormula(data === null || data === void 0 ? void 0 : (_data$programIndicato5 = data.programIndicator) === null || _data$programIndicato5 === void 0 ? void 0 : _data$programIndicato5.filter, dataElementsArray, [], [], attributesArray, constantsArray, null, null); // if(loading){
// return <CircularLoader />
// }
// if(error){
// return <i>Something went wrong</i>
// }
async function getWordData(arr, type) {
//arr for array of id of datas to get their values, type indicates the data type of data eg dataElement=0 program indicator=1, reporting rates=2
const allPromises = [];
let i = 0;
for (i = 0; i < arr.length; i++) {
//reverse the element since here, for dataElement it goes as programStage, then
const proms = getSummaryValueFromApi(engine, arr[i]);
allPromises.push(proms);
}
i = 0;
await Promise.all(allPromises).then(value => {
if (type === dataTypes.DATA_ELEMENT) {
value.map(val => {
//We always return array just for uniformity
if (val.length > 1) {
//array of two elements first element is dataElement second element of array is category option combo
wordDtEl.push({
id: arr[i],
val: val[0] + " " + val[1]
});
} else {
//this is array of one element for data element that are just pure no category options
wordDtEl.push({
id: arr[i],
val: val[0]
});
}
++i;
});
}
if (type === dataTypes.ATTRIBUTES) {
//for Attribute
value.map(val => {
//We always return array just for uniformity
attributes.push({
id: arr[i],
val: val[0]
});
++i;
});
}
if (type === dataTypes.CONSTANTS) {
value.map(val => {
//We always return array just for uniformity
constants.push({
id: arr[i],
val: val[0]
});
++i;
});
}
if (wordDtEl.length === arr.length) {
//array is full so we reload to update UI
setDataElementArray(wordDtEl);
}
if (attributes.length === arr.length) {
//array is full so we reload to update UI
setAttributesArray(attributes);
}
if (constants.length === arr.length) {
//array is full so we reload to update UI
setConstantsArray(constants);
}
});
}
function OtherCells(prog) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataTableCell, {
bordered: true
}, final_filter_result), /*#__PURE__*/React.createElement(DataTableCell, {
bordered: true
}, prog === null || prog === void 0 ? void 0 : prog.aggregationType), /*#__PURE__*/React.createElement(DataTableCell, {
bordered: true
}, prog === null || prog === void 0 ? void 0 : prog.analyticsType), /*#__PURE__*/React.createElement(DataTableCell, {
bordered: true
}, /*#__PURE__*/React.createElement("ol", null, prog === null || prog === void 0 ? void 0 : prog.analyticsPeriodBoundaries.map(boundary => {
var _boundary$analyticsPe;
return /*#__PURE__*/React.createElement("li", {
key: boundary.id
}, lowerCaseAllWordsExceptFirstLetters(boundary === null || boundary === void 0 ? void 0 : (_boundary$analyticsPe = boundary.analyticsPeriodBoundaryType) === null || _boundary$analyticsPe === void 0 ? void 0 : _boundary$analyticsPe.replace(/_/g, " ")));
}))), /*#__PURE__*/React.createElement(DataTableCell, {
bordered: true
}, /*#__PURE__*/React.createElement("ol", null, prog === null || prog === void 0 ? void 0 : prog.legendSets.map(legend => {
return /*#__PURE__*/React.createElement("li", {
key: legend.id
}, legend === null || legend === void 0 ? void 0 : legend.displayName);
}))), /*#__PURE__*/React.createElement(DataTableCell, {
bordered: true
}, /*#__PURE__*/React.createElement("ol", null, prog === null || prog === void 0 ? void 0 : prog.programIndicatorGroups.map(group => {
return /*#__PURE__*/React.createElement("li", {
key: group.id
}, group === null || group === void 0 ? void 0 : group.displayName);
}))));
}
return /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
bordered: true
}, programIndicator === null || programIndicator === void 0 ? void 0 : programIndicator.val), /*#__PURE__*/React.createElement(DataTableCell, {
bordered: true
}, programIndicator === null || programIndicator === void 0 ? void 0 : programIndicator.location), OtherCells(data === null || data === void 0 ? void 0 : data.programIndicator));
}