feat: dimension selector

Improved dimension selector
hisptz · Aug 8, 2024 · 73738ea · 73738ea
1 parent 2484cde
commit 73738ea
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 8 deletions.
diff --git a/packages/app/i18n/en.pot b/packages/app/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-08-08T10:26:04.971Z\n"
-"PO-Revision-Date: 2024-08-08T10:26:04.971Z\n"
+"POT-Creation-Date: 2024-08-08T12:12:32.681Z\n"
+"PO-Revision-Date: 2024-08-08T12:12:32.681Z\n"
 
 msgid "Welcome to Scorecard App!"
 msgstr "Welcome to Scorecard App!"
@@ -330,12 +330,15 @@ msgstr "Migrating scorecards"
 msgid "of"
 msgstr "of"
 
-msgid "Select period"
-msgstr "Select period"
+msgid "Getting your scorecard configuration..."
+msgstr "Getting your scorecard configuration..."
 
 msgid "Select organisation unit"
 msgstr "Select organisation unit"
 
+msgid "Select period"
+msgstr "Select period"
+
 msgid "and {{number}} more"
 msgstr "and {{number}} more"
 

diff --git a/packages/app/src/locales/en/translations.json b/packages/app/src/locales/en/translations.json
@@ -105,8 +105,9 @@
     "Preparing migration...": "Preparing migration...",
     "Migrating scorecards": "Migrating scorecards",
     "of": "of",
-    "Select period": "Select period",
+    "Getting your scorecard configuration...": "Getting your scorecard configuration...",
     "Select organisation unit": "Select organisation unit",
+    "Select period": "Select period",
     "and {{number}} more": "and {{number}} more",
     "Create a new scorecard in the scorecard app to see it here.": "Create a new scorecard in the scorecard app to see it here.",
     "Confirm scorecard selection": "Confirm scorecard selection",

diff --git a/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardViewPage.tsx b/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardViewPage.tsx
@@ -1,6 +1,42 @@
 import { DimensionFilterArea } from "./components/DimensionFilterArea";
+import { useScorecardConfig } from "./hooks/data";
+import { FullPageError, FullPageLoader } from "@scorecard/shared";
+import i18n from "@dhis2/d2-i18n";
+import { useEffect } from "react";
+import { useDimensions } from "./hooks/dimensions";
+import { OrgUnitSelection } from "@hisptz/dhis2-utils";
 
 export function ScorecardViewPage() {
+	const { setDimensions } = useDimensions();
+	const { config, loading, error, refetch } = useScorecardConfig();
+
+	useEffect(() => {
+		if (config) {
+			setDimensions({
+				orgUnitSelection: config.orgUnitSelection as OrgUnitSelection,
+				periods: config.periodSelection.periods,
+			});
+		}
+	}, [config]);
+
+	if (loading) {
+		return (
+			<FullPageLoader
+				text={i18n.t("Getting your scorecard configuration...")}
+			/>
+		);
+	}
+	if (error) {
+		return (
+			<FullPageError
+				error={error}
+				resetErrorBoundary={() => {
+					refetch();
+				}}
+			/>
+		);
+	}
+
 	return (
 		<div
 			style={{

diff --git a/...corecardViewPage/components/DimensionFilterArea/components/CustomOrgUnitSelectorModal.tsx b/...corecardViewPage/components/DimensionFilterArea/components/CustomOrgUnitSelectorModal.tsx
@@ -122,7 +122,10 @@ export function OrgUnitDimensionSelection() {
 		<>
 			{loading ? null : (
 				<CustomOrgUnitSelectorModal
-					selected={orgUnit}
+					selected={{
+						...orgUnit,
+						orgUnits: orgUnitWithData,
+					}}
 					onClose={hideOrgUnit}
 					hide={orgUnitHidden}
 					onSelect={setOrgUnit}

diff --git a/packages/app/src/modules/Main/components/ScorecardViewPage/hooks/data.ts b/packages/app/src/modules/Main/components/ScorecardViewPage/hooks/data.ts
@@ -1,10 +1,10 @@
-import { DATASTORE_NAMESPACE } from "../../../constants";
 import { ScorecardConfig } from "@hisptz/dhis2-analytics";
 import { useDataQuery } from "@dhis2/app-runtime";
 import { useParams } from "react-router-dom";
 import { useMemo } from "react";
+import { DATASTORE_NAMESPACE } from "@scorecard/shared";
 
-const query = {
+const query: any = {
 	config: {
 		resource: `dataStore/${DATASTORE_NAMESPACE}`,
 		id: ({ id }: { id: string }) => id,

diff --git a/packages/app/src/modules/Main/components/ScorecardViewPage/hooks/dimensions.ts b/packages/app/src/modules/Main/components/ScorecardViewPage/hooks/dimensions.ts
@@ -32,6 +32,25 @@ export function useDimensions() {
 		[setParams],
 	);
 
+	const setDimensions = ({
+		orgUnitSelection,
+		periods,
+	}: {
+		orgUnitSelection: OrgUnitSelection;
+		periods: { id: string }[];
+	}) => {
+		const ous = getOrgUnitIdsFromOrgUnitSelection(orgUnitSelection);
+		setParams((prev) => {
+			if (!prev.get("ou") || !prev.get("pe")) {
+				const updatedParams = new URLSearchParams(prev);
+				updatedParams.set("ou", ous.join(";"));
+				updatedParams.set("pe", periods.map(({ id }) => id).join(";"));
+				return updatedParams;
+			}
+			return prev;
+		});
+	};
+
 	const setPeriod = useCallback(
 		(periods: string[]) => {
 			setParam("pe")(periods.join(";"));
@@ -49,5 +68,6 @@ export function useDimensions() {
 		orgUnit,
 		setPeriod,
 		setOrgUnit,
+		setDimensions,
 	};
 }