feat: migration

Improved the migration page
hisptz · Oct 1, 2024 · 17a4006 · 17a4006
1 parent 93b9caf
commit 17a4006
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 34 deletions.
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/packages/app/src/modules/ScorecardMigration/components/MigrateButton.tsx b/packages/app/src/modules/ScorecardMigration/components/MigrateButton.tsx
@@ -22,13 +22,13 @@ export function MigrateButton({ scorecards, selected, onProgressUpdate, onClearS
 	const { show } = useAlert(({ message }) => message, ({ type }) => ({ ...type, duration: 3000 }));
 	const count = selected.length;
 
-
 	const onMigrateClick = useCallback(async () => {
 		setLoading(true);
 		const selectedScorecards = scorecards.filter(scorecard => selected.includes(scorecard.id));
 		for (const scorecard of selectedScorecards) {
 			const results = await migrate(scorecard);
 			onProgressUpdate(prev => {
+				console.log(results);
 				return {
 					...prev,
 					[scorecard.id]: results
@@ -46,7 +46,6 @@ export function MigrateButton({ scorecards, selected, onProgressUpdate, onClearS
 		setLoading(false);
 	}, [selected, scorecards, onProgressUpdate, goToNextStep, migrate]);
 
-
 	return (
 		<Button loading={loading} onClick={onMigrateClick} primary disabled={count === 0}>
 			{loading ? i18n.t("Migrating scorecard(s)... ({{progress}}/{{count}})", {

diff --git a/packages/app/src/modules/ScorecardMigration/components/OldScorecardList.tsx b/packages/app/src/modules/ScorecardMigration/components/OldScorecardList.tsx
@@ -3,9 +3,10 @@ import { FullPageError } from "@scorecard/shared";
 import { CircularLoader, Tag } from "@dhis2/ui";
 import { SimpleDataTable, SimpleDataTableColumn, SimpleDataTableRow } from "@hisptz/dhis2-ui";
 import i18n from "@dhis2/d2-i18n";
-import { useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { fromPairs, get, uniq } from "lodash";
 import { MigrateButton } from "./MigrateButton";
+import { OldScorecardSchema } from "../schemas/old";
 
 
 const columns: SimpleDataTableColumn[] = [
@@ -24,11 +25,11 @@ const columns: SimpleDataTableColumn[] = [
 
 ];
 
-export function OldScorecardList() {
-	const { loading, scorecards, error, refetch, existingScorecards } = useOldScorecards();
-	const [selectedConfig, setSelectedConfig] = useState<string[]>([]);
-	const [progress, setProgress] = useState<Record<string, "SUCCESS" | "EXISTS" | "FAILED">>({});
 
+function MigrationTable({ scorecards, existingScorecards }: { scorecards: Array<OldScorecardSchema>; existingScorecards: Array<string> }) {
+
+	const [selectedConfig, setSelectedConfig] = useState<string[]>([]);
+	const [progress, setProgress] = useState<Record<string, "SUCCESS" | "EXISTS" | "FAILED">>(fromPairs(existingScorecards.map((id) => ([id, "EXISTS"]))));
 
 	const onRemove = (values: string[]) => {
 		setSelectedConfig((prevState) => {
@@ -57,7 +58,6 @@ export function OldScorecardList() {
 
 	const rows = useMemo(() => scorecards?.map((config) => {
 		const selectable = !["EXISTS", "SUCCESS"].includes(get(progress, config.id));
-
 		return {
 			id: config.id,
 			title: config.header.title,
@@ -68,13 +68,23 @@ export function OldScorecardList() {
 				disableSelection: !selectable
 			}
 		} as SimpleDataTableRow;
-	}) ?? [], [scorecards]);
+	}) ?? [], [scorecards, progress]);
 
-	useEffect(() => {
-		if (existingScorecards) {
-			setProgress(fromPairs(existingScorecards.map((id) => ([id, "EXISTS"]))));
-		}
-	}, [existingScorecards]);
+	return (
+		<div className="column w-100 h-100 flex-1 gap-16 pb-32">
+			<span style={{ fontSize: 14 }}>{i18n.t("Only the scorecard's owner can migrate their scorecards")}</span>
+			<SimpleDataTable tableProps={{ scrollHeight: "100%", bordered: true }} onRowDeselect={onRemove} selectedRows={selectedConfig} onRowSelect={onAdd} selectable columns={columns} rows={rows} />
+			<div className="row end">
+				{
+					!!scorecards && (<MigrateButton onClearSelection={() => setSelectedConfig([])} progress={progress} onProgressUpdate={setProgress} selected={selectedConfig} scorecards={scorecards!} />)
+				}
+			</div>
+		</div>
+	);
+}
+
+export function OldScorecardList() {
+	const { loading, scorecards, error, refetch, existingScorecards } = useOldScorecards();
 
 	if (loading) {
 		return <div className="column center items-center w-100 h-100 flex-1">
@@ -91,14 +101,7 @@ export function OldScorecardList() {
 	}
 
 	return (
-		<div className="column w-100 h-100 flex-1 gap-16 pb-32">
-			<SimpleDataTable tableProps={{ scrollHeight: "100%", bordered: true }} onRowDeselect={onRemove} selectedRows={selectedConfig} onRowSelect={onAdd} selectable columns={columns} rows={rows} />
-			<div className="row end">
-				{
-					!!scorecards && (<MigrateButton onClearSelection={() => setSelectedConfig([])} progress={progress} onProgressUpdate={setProgress} selected={selectedConfig} scorecards={scorecards!} />)
-				}
-			</div>
-		</div>
+		<MigrationTable scorecards={scorecards ?? []} existingScorecards={existingScorecards} />
 	);
 
 }
diff --git a/packages/app/src/modules/ScorecardMigration/hooks/data.ts b/packages/app/src/modules/ScorecardMigration/hooks/data.ts
@@ -1,15 +1,22 @@
-import { DATASTORE_NAMESPACE, DATASTORE_OLD_SCORECARD_ENDPOINT } from "@scorecard/shared";
+import { DATASTORE_NAMESPACE, DATASTORE_OLD_SCORECARD_ENDPOINT, UserState } from "@scorecard/shared";
 import { OldScorecardSchema } from "../schemas/old";
 import { useDataQuery } from "@dhis2/app-runtime";
 import { Pager } from "@hisptz/dhis2-ui";
+import { useRecoilValue } from "recoil";
 
 
-const query = {
+const query: any = {
 	data: {
 		resource: `${DATASTORE_OLD_SCORECARD_ENDPOINT}`,
-		params: {
-			fields: ".",
-			paging: false
+		params: ({ userId }: { userId: string }) => {
+
+			return {
+				fields: ".",
+				paging: false,
+				filter: [
+					`user.id:eq:${userId}`
+				]
+			};
 		}
 	},
 	newConfig: {
@@ -29,7 +36,12 @@ type Response = {
 }
 
 export function useOldScorecards() {
-	const { data, loading, error, refetch } = useDataQuery<Response>(query);
+	const user = useRecoilValue(UserState);
+	const { data, loading, error, refetch } = useDataQuery<Response>(query, {
+		variables: {
+			userId: user?.id
+		}
+	});
 
 	const scorecards = data?.data?.entries?.map(({ value, key }) => ({
 		...value,