From eed3804a4a8655edf0acdee584217b5da8618434 Mon Sep 17 00:00:00 2001 From: Arnau Sanchez Date: Mon, 8 Apr 2024 12:04:41 +0200 Subject: [PATCH 01/10] Set unique dataSet.shortName (compulsory on DHIS >= 40) --- src/models/ProjectDb.ts | 2 ++ src/models/__tests__/data/project-db-metadata.json | 10 ++++++---- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/models/ProjectDb.ts b/src/models/ProjectDb.ts index 5c7cdbc1..50256bec 100644 --- a/src/models/ProjectDb.ts +++ b/src/models/ProjectDb.ts @@ -297,6 +297,7 @@ export default class ProjectDb { const dataSetTargetMetadata = this.getDataSetMetadata(orgUnit, { name: `${project.name} Target`, + shortName: `${project.name.slice(0, 25)} [${project.id}] Target`, code: "TARGET", attributeValues: dataSetAttributeValues, workflow: { id: config.dataApprovalWorkflows.project.id }, @@ -306,6 +307,7 @@ export default class ProjectDb { const dataSetActualMetadata = this.getDataSetMetadata(orgUnit, { name: `${project.name} Actual`, + shortName: `${project.name.slice(0, 25)} [${project.id}] Actual`, code: "ACTUAL", attributeValues: dataSetAttributeValues, workflow: { id: config.dataApprovalWorkflows.project.id }, diff --git a/src/models/__tests__/data/project-db-metadata.json b/src/models/__tests__/data/project-db-metadata.json index 6d357913..745d0186 100644 --- a/src/models/__tests__/data/project-db-metadata.json +++ b/src/models/__tests__/data/project-db-metadata.json @@ -46,7 +46,6 @@ "created": "2020-01-02T12:32:30.449", "lastUpdated": "2020-01-02T14:28:43.045", "name": "Abaco", - "shortName": "Abaco", "id": "GG0k0oNhgS7", "publicAccess": "rw------", "lastUpdatedBy": { @@ -63,14 +62,14 @@ { "id": "eu2XF73JOzl" } - ] + ], + "shortName": "Abaco" }, { "code": "FUNDER_AGRIDIUS", "created": "2020-01-02T11:55:10.244", "lastUpdated": "2020-01-02T14:28:43.050", "name": "Agridius Foundation", - "shortName": "Agridius Foundation", "id": "em8NIwi0KvM", "publicAccess": "rw------", "lastUpdatedBy": { @@ -83,7 +82,8 @@ "attributeValues": [], "translations": [], "userAccesses": [], - "organisationUnits": [] + "organisationUnits": [], + "shortName": "Agridius Foundation" }, { "code": "FUNDER_AC", @@ -158,6 +158,7 @@ "timelyDays": 0, "formType": "DEFAULT", "name": "MyProject Target", + "shortName": "MyProject [WGC0DJ0YSis] Target", "code": "WGC0DJ0YSis_TARGET", "attributeValues": [ { @@ -578,6 +579,7 @@ "timelyDays": 0, "formType": "DEFAULT", "name": "MyProject Actual", + "shortName": "MyProject [WGC0DJ0YSis] Actual", "code": "WGC0DJ0YSis_ACTUAL", "attributeValues": [ { From 9ad3aaa32eb6557ec779573acf7a00de1cec1f63 Mon Sep 17 00:00:00 2001 From: Arnau Sanchez Date: Mon, 8 Apr 2024 12:08:29 +0200 Subject: [PATCH 02/10] Use key visualization for dashboardItem --- src/models/Dashboard.ts | 2 +- .../__tests__/data/project-db-metadata.json | 24 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/models/Dashboard.ts b/src/models/Dashboard.ts index 2921bdb0..1af05985 100644 --- a/src/models/Dashboard.ts +++ b/src/models/Dashboard.ts @@ -146,7 +146,7 @@ export function getChartDashboardItem( return { id: getUid("dashboardItem", chart.id), type: "CHART" as const, - chart: { id: chart.id }, + visualization: { id: chart.id }, ...(dashboardItemAttributes || {}), }; } diff --git a/src/models/__tests__/data/project-db-metadata.json b/src/models/__tests__/data/project-db-metadata.json index 745d0186..93e60f6e 100644 --- a/src/models/__tests__/data/project-db-metadata.json +++ b/src/models/__tests__/data/project-db-metadata.json @@ -1080,7 +1080,7 @@ { "id": "ys0CVedHirZ", "type": "CHART", - "chart": { + "visualization": { "id": "uG9C9z46CNK" }, "width": 58, @@ -1091,7 +1091,7 @@ { "id": "KI0C90Ol10x", "type": "CHART", - "chart": { + "visualization": { "id": "qmsj4FqnVPX" }, "width": 29, @@ -1102,7 +1102,7 @@ { "id": "uYY7v977Ubm", "type": "CHART", - "chart": { + "visualization": { "id": "uiyYMLiDaK2" }, "width": 29, @@ -1113,7 +1113,7 @@ { "id": "qUqsDmtiBLF", "type": "CHART", - "chart": { + "visualization": { "id": "u6Sin4Fy1Wt" }, "width": 29, @@ -1124,7 +1124,7 @@ { "id": "mwMpIdPdu8H", "type": "CHART", - "chart": { + "visualization": { "id": "ukewRkZsyCI" }, "width": 29, @@ -1162,7 +1162,7 @@ { "id": "e6UAresDcfM", "type": "CHART", - "chart": { + "visualization": { "id": "GqYJDh6asM8" }, "width": 58, @@ -1173,7 +1173,7 @@ { "id": "CQuufxhy672", "type": "CHART", - "chart": { + "visualization": { "id": "me6p7L8VHXl" }, "width": 58, @@ -1301,7 +1301,7 @@ { "id": "CkcoElgGMuu", "type": "CHART", - "chart": { + "visualization": { "id": "CYYNLjxd96q" }, "width": 58, @@ -1312,7 +1312,7 @@ { "id": "GqqyIiwIxog", "type": "CHART", - "chart": { + "visualization": { "id": "Gi2PegQJhbu" }, "width": 29, @@ -1323,7 +1323,7 @@ { "id": "mCeCHYX6DOG", "type": "CHART", - "chart": { + "visualization": { "id": "Ww2X5s48uQx" }, "width": 29, @@ -1334,7 +1334,7 @@ { "id": "O8EPBVIg4zK", "type": "CHART", - "chart": { + "visualization": { "id": "CMqisHj7sP9" }, "width": 29, @@ -1345,7 +1345,7 @@ { "id": "OI8TXjJJwfS", "type": "CHART", - "chart": { + "visualization": { "id": "WGWGaYtwJzp" }, "width": 29, From f3740eb54c381fb5f5dfff3957e4eac93b4f120f Mon Sep 17 00:00:00 2001 From: Arnau Sanchez Date: Mon, 8 Apr 2024 12:14:02 +0200 Subject: [PATCH 03/10] Fix dashboard render on 2.40 --- src/components/dashboard/Dashboard.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/dashboard/Dashboard.tsx b/src/components/dashboard/Dashboard.tsx index f87bb8f1..e937d22f 100644 --- a/src/components/dashboard/Dashboard.tsx +++ b/src/components/dashboard/Dashboard.tsx @@ -124,13 +124,16 @@ function autoResizeIframeByContent( iframe: HTMLIFrameElement, setHeight: (height: number) => void ): IntervalId { - const resize = () => { - // Get the first element that has the real height of the full dashboard (and not the forced large value). + function resize() { + // Get element with real height of the dashboard (not the initially forced large value). const document = iframe?.contentWindow?.document; const height = document?.querySelector(".dashboard-scroll-container > div")?.scrollHeight; - if (height && height > 0) setHeight(height); - }; + if (height && height > 1000) { + setHeight(height); + } + } + return window.setInterval(resize, 1000); } From 9b1155e6c5893016b46ec8e6dc0dac804b7a28d5 Mon Sep 17 00:00:00 2001 From: Arnau Sanchez Date: Thu, 11 Apr 2024 12:01:27 +0200 Subject: [PATCH 04/10] Use approval-app lib (only yarn link) --- package.json | 3 +- src/index.ts | 11 +- src/models/ProjectDataSet.ts | 2 +- src/pages/data-approval/DataApproval.tsx | 65 +++----- src/pages/data-approval/DataApprovalTable.tsx | 60 ++++++++ yarn.lock | 145 +++++++++++++++--- 6 files changed, 218 insertions(+), 68 deletions(-) create mode 100644 src/pages/data-approval/DataApprovalTable.tsx diff --git a/package.json b/package.json index 5b4c7048..765253b7 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "url": "git+https://github.com/eyeseetea/project-monitoring-app.git" }, "dependencies": { - "@dhis2/app-runtime": "2.11.1", + "@dhis2/app-runtime": "3.2.1", "@dhis2/d2-i18n": "1.1.1", "@dhis2/d2-i18n-extract": "1.0.8", "@dhis2/d2-i18n-generate": "1.2.0", @@ -51,6 +51,7 @@ "striptags": "3.2.0", "styled-components": "^5.2.1", "styled-jsx": "3.4.1", + "use-debounce": "7.0.0", "word-wrap": "1.2.5", "xlsx": "^0.18.5" }, diff --git a/src/index.ts b/src/index.ts index d9a70b0c..a958bcb9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,8 +11,12 @@ import "./utils/lodash-mixins"; import { D2Api } from "./types/d2-api"; import i18n from "./locales"; +import { Config } from "@dhis2/app-service-config/build/types/types"; + import whyDidYouRender from "@welldone-software/why-did-you-render"; +const apiVersion = 40; + async function getBaseUrl(): Promise { if (process.env.NODE_ENV === "development") { const baseUrl = `/dhis2`; @@ -43,7 +47,12 @@ async function main() { const api = new D2Api({ baseUrl, backend: "fetch", timeout: 60 * 1000 }); const userSettings = (await api.get("/userSettings").getData()) as UserSettings; configI18n(userSettings); - const config = { baseUrl, apiVersion: 30 }; + + const config: Config = { + baseUrl: baseUrl, + apiVersion: apiVersion, + systemInfo: d2.system.systemInfo, + }; try { ReactDOM.render( diff --git a/src/models/ProjectDataSet.ts b/src/models/ProjectDataSet.ts index 959bdbe1..4fa7f979 100644 --- a/src/models/ProjectDataSet.ts +++ b/src/models/ProjectDataSet.ts @@ -223,7 +223,7 @@ export default class ProjectDataSet { .getData(); } - private getAttributeOptionCombo() { + getAttributeOptionCombo() { const categoryOption = this.config.categoryOptions[this.dataSetType]; const aoc = categoryOption.categoryOptionCombos[0]; if (!aoc) throw new Error("Cannot get attribute option combo"); diff --git a/src/pages/data-approval/DataApproval.tsx b/src/pages/data-approval/DataApproval.tsx index 3f7ef344..87414b8c 100644 --- a/src/pages/data-approval/DataApproval.tsx +++ b/src/pages/data-approval/DataApproval.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect } from "react"; import moment from "moment"; import { useRouteMatch } from "react-router"; import { makeStyles } from "@material-ui/core/styles"; @@ -17,14 +17,7 @@ import { useDialog } from "./data-approval-hooks"; import { DataApprovalMessage } from "./DataApprovalMessage"; import { useGoTo } from "../../router"; import { useHistory } from "react-router-dom"; - -declare global { - interface Window { - jQuery: any; - } -} - -const jQuery = window.jQuery || {}; +import DataApprovalTable from "./DataApprovalTable"; const monthFormat = "YYYYMM"; @@ -34,7 +27,6 @@ type State = { loading: boolean; error?: string; project?: Project; - report?: string; showApproveButton: boolean; showUnapproveButton: boolean; }; @@ -53,7 +45,7 @@ const DataApproval: React.FC = () => { showApproveButton: false, showUnapproveButton: false, }); - const { project, report, error } = state; + const { project, error } = state; const classes = useStyles(); const projectDataSet = React.useMemo(() => { @@ -106,15 +98,11 @@ const DataApproval: React.FC = () => { useEffect(() => loadData(projectId, api, config, setState), [api, config, projectId]); useEffect(() => { - getReport(projectDataSet, projectPeriod, setState); + setApprovalStatus(projectDataSet, projectPeriod, setState); }, [projectDataSet, projectPeriod]); useDebugValuesOnDev(project, setState); - const reportHtml = useMemo(() => { - return { __html: report || "" }; - }, [report]); - const dataApprovalDialog = useDialog(); const setDate = React.useCallback( @@ -139,6 +127,13 @@ const DataApproval: React.FC = () => { [goTo, projectDataSetType, projectId, projectPeriod] ); + const periodStartEnd = React.useMemo(() => { + return { + startDate: moment(projectPeriod, monthFormat).format("YYYY-MM"), + endDate: moment(projectPeriod, monthFormat).add(1, "month").format("YYYY-MM"), + }; + }, [projectPeriod]); + if (!projectPeriod || !projectDataSetType) return null; return ( @@ -172,7 +167,7 @@ const DataApproval: React.FC = () => { {error &&

{error}

} - {report && ( + {projectDataSet && ( { href={api.baseUrl + "/dhis-web-commons/css/light_blue/light_blue.css"} /> -
+ {state.showApproveButton && (