UNPKG

@hisptz/react-ui

Version:

A collection of reusable complex DHIS2 react ui components.

73 lines (68 loc) 3.39 kB
import { useDataQuery } from "@dhis2/app-runtime"; import i18n from "@dhis2/d2-i18n"; import { DataTable, TableHead, TableBody, DataTableRow, DataTableColumnHeader } from "@dhis2/ui"; 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 IndicatorGroupRow from "./indicatorGroupRow"; const query = { indicatorGroups: { resource: "programIndicators", id: _ref => { let { id } = _ref; return id; }, params: { fields: ["programIndicatorGroups[id,code,displayName,programIndicators[id,displayName]]"] } } }; export default function ProgramIndicatorFacts(_ref2) { var _data$indicatorGroups, _data$indicatorGroups2, _data$indicatorGroups3, _data$indicatorGroups4; let { id } = _ref2; const { loading, error, data, refetch } = useDataQuery(query, { variables: { id } }); useEffect(() => { refetch({ id }); }, [id]); if (loading) { return /*#__PURE__*/React.createElement(Loader, { text: "" }); } if (error) { return /*#__PURE__*/React.createElement(Error, { error: error }); } if ((data === null || data === void 0 ? void 0 : (_data$indicatorGroups = data.indicatorGroups) === null || _data$indicatorGroups === void 0 ? void 0 : (_data$indicatorGroups2 = _data$indicatorGroups.programIndicatorGroups) === null || _data$indicatorGroups2 === void 0 ? void 0 : _data$indicatorGroups2.length) === 0) { return /*#__PURE__*/React.createElement("p", null, i18n.t("There are no indicator facts associated with this Program Indicator"), " "); } return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, i18n.t("Program Indicator facts"), " "), /*#__PURE__*/React.createElement("p", null, i18n.t("Belongs to the following program groups of indicators"), " "), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DataTable, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, null, i18n.t("#")), /*#__PURE__*/React.createElement(DataTableColumnHeader, null, i18n.t("Name")), /*#__PURE__*/React.createElement(DataTableColumnHeader, null, i18n.t("Code")), /*#__PURE__*/React.createElement(DataTableColumnHeader, null, i18n.t("Indicators")))), /*#__PURE__*/React.createElement(TableBody, null, data === null || data === void 0 ? void 0 : (_data$indicatorGroups3 = data.indicatorGroups) === null || _data$indicatorGroups3 === void 0 ? void 0 : (_data$indicatorGroups4 = _data$indicatorGroups3.programIndicatorGroups) === null || _data$indicatorGroups4 === void 0 ? void 0 : _data$indicatorGroups4.map((group, index) => { return /*#__PURE__*/React.createElement(IndicatorGroupRow, { key: group === null || group === void 0 ? void 0 : group.id, no: index, name: group === null || group === void 0 ? void 0 : group.displayName, code: group === null || group === void 0 ? void 0 : group.code, indicators: group === null || group === void 0 ? void 0 : group.programIndicators }); }))))); } ProgramIndicatorFacts.prototype = { id: PropTypes.string.isRequired };