@hisptz/react-ui
Version:
A collection of reusable complex DHIS2 react ui components.
77 lines (73 loc) • 3.26 kB
JavaScript
import { useDataQuery } from "@dhis2/app-runtime";
import i18n from "@dhis2/d2-i18n";
import PropTypes from "prop-types";
import React, { useEffect } from "react";
import Error from "../../../../Shared/Componets/Error/ErrorAPIResult";
import Loader from "../../../../Shared/Componets/Loaders/Loader";
import classes from "./introduction.module.css";
const query = {
indicatorsDetails: {
resource: "indicators",
id: _ref => {
let {
id
} = _ref;
return id;
},
params: {
fields: ["id", "name", "displayDescription", "href", "numeratorDescription", "denominatorDescription", "indicatorType[displayName,id]"]
}
}
};
export default function Introduction(_ref2) {
var _indicatorDetails$ind;
let {
id
} = _ref2;
const {
loading,
error,
data,
refetch
} = useDataQuery(query, {
variables: {
id
}
});
useEffect(() => {
refetch({
id
});
}, [id]);
if (loading) {
return /*#__PURE__*/React.createElement(Loader, null);
}
if (error) {
return /*#__PURE__*/React.createElement(Error, {
error: error
});
}
const indicatorDetails = data === null || data === void 0 ? void 0 : data.indicatorsDetails;
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", {
id: "test-indicator-details"
}, indicatorDetails === null || indicatorDetails === void 0 ? void 0 : indicatorDetails.name, " "), /*#__PURE__*/React.createElement("h3", null, i18n.t("Introduction")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", {
id: "test-indicator-details"
}, indicatorDetails === null || indicatorDetails === void 0 ? void 0 : indicatorDetails.name, " "), i18n.t("is a"), /*#__PURE__*/React.createElement("b", null, " ", indicatorDetails === null || indicatorDetails === void 0 ? void 0 : (_indicatorDetails$ind = indicatorDetails.indicatorType) === null || _indicatorDetails$ind === void 0 ? void 0 : _indicatorDetails$ind.displayName, " "), i18n.t("indicator, measured by"), /*#__PURE__*/React.createElement("b", {
id: "test-indicator-details"
}, " ", indicatorDetails === null || indicatorDetails === void 0 ? void 0 : indicatorDetails.numeratorDescription, " "), i18n.t("to"), /*#__PURE__*/React.createElement("b", {
id: "test-indicator-details"
}, " ", indicatorDetails === null || indicatorDetails === void 0 ? void 0 : indicatorDetails.denominatorDescription, " ")), /*#__PURE__*/React.createElement("p", {
id: "test-indicator-details"
}, i18n.t("Its described as {{variable}}", {
variable: indicatorDetails === null || indicatorDetails === void 0 ? void 0 : indicatorDetails.displayDescription
})), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
onClick: () => {// onClickIdentified(indicatorDetails?.id)
}
}, i18n.t("Identified by:"), " ", /*#__PURE__*/React.createElement("span", {
id: "test-indicator-details",
className: classes.identifylink
}, " ", indicatorDetails === null || indicatorDetails === void 0 ? void 0 : indicatorDetails.id, " "), " "))));
}
Introduction.propTypes = {
id: PropTypes.string.isRequired
};