fix: scorecard form

Improvement of the data groups configuration drag and drop
hisptz · Sep 11, 2024 · 5b372b2 · 5b372b2
1 parent f884cfa
commit 5b372b2
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 153 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -51,9 +51,6 @@
     "@dhis2/app-service-datastore": "^1.0.0-alpha.2",
     "@dhis2/multi-calendar-dates": "^1.2.4",
     "@dhis2/ui": "^9.11.0",
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/modifiers": "^7.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@hisptz/dhis2-analytics": "^2.0.20",
     "@hisptz/dhis2-ui": "^2.0.17",
     "@hisptz/dhis2-utils": "^2.0.5",

diff --git a/...onfiguration/components/DataGroups/components/DataGroup/components/DataGroupDraggable.tsx b/...onfiguration/components/DataGroups/components/DataGroup/components/DataGroupDraggable.tsx
diff --git a/...onfiguration/components/DataGroups/components/DataGroup/components/DataGroupDroppable.tsx b/...onfiguration/components/DataGroups/components/DataGroup/components/DataGroupDroppable.tsx
diff --git a/...aConfiguration/components/DataGroups/components/DataGroup/components/LinkingContainer.tsx b/...aConfiguration/components/DataGroups/components/DataGroup/components/LinkingContainer.tsx
@@ -13,16 +13,17 @@ export function LinkingContainer({
 									 onDelete,
 									 onLink,
 									 onUnlink,
-									 groupIndex
-								 }: { groupIndex: number; chunk: Array<ScorecardDataHolder>; onDelete: (index: number) => void, onLink: (index1: number, index2: number) => void, onUnlink: (index: number) => void }) {
-	const { linkable, hasLink, onIconClick, onUnlinkClick } =
+									 groupIndex,
+									 index
+								 }: { index: number; groupIndex: number; chunk: Array<ScorecardDataHolder>; onDelete: (index: number) => void, onLink: (index1: number, index2: number) => void, onUnlink: (index: number) => void }) {
+	const { linkable, hasLink, getIndex, onIconClick, onUnlinkClick } =
 		useLinkManage({ onLink, onUnlink, chunk, groupIndex });
 
 	return (
 		<div className="linking-container">
 			<div className="row align-items-center">
 				<div className="column">
-					{chunk?.map((source: ScorecardDataHolder, index) => (
+					{chunk?.map((source: ScorecardDataHolder, i) => (
 						<Tooltip
 							content={i18n.t(
 								"Click to configure, drag to rearrange"
@@ -35,7 +36,7 @@ export function LinkingContainer({
 								onUnlink={onUnlinkClick}
 								onDelete={onDelete}
 								key={`group-${groupIndex}-holder-${source}`}
-								index={index}
+								index={getIndex(source.id as string)}
 							/>
 						</Tooltip>
 					))}

diff --git a/...agement/components/DataConfiguration/components/DataGroups/components/DataGroup/index.tsx b/...agement/components/DataConfiguration/components/DataGroups/components/DataGroup/index.tsx
@@ -2,8 +2,7 @@ import i18n from "@dhis2/d2-i18n";
 import { Button, colors, IconDragHandle24, Tooltip } from "@dhis2/ui";
 import { IconAdd24, IconChevronDown24 } from "@dhis2/ui-icons";
 import React, { useRef, useState } from "react";
-import useDataGroupLayout from "../../../../hooks/useDataGroupLayout";
-import useDataGroupManage from "../../../../hooks/useDataGroupManage";
+import useDataGroupManage from "../../../../hooks/useDataGroupLayout";
 import { Accordion, AccordionDetails, AccordionSummary } from "./components/Accordions";
 import GroupTitle from "./components/GroupTitle";
 import { isEmpty } from "lodash";
@@ -14,13 +13,8 @@ import DataSourceSelectorModal from "../DataSourceSelectorModal";
 export function DataGroup(
 	{ index, onRemove }: { index: number, onRemove: (index: number) => void }
 ) {
-	const {
-		onDataSourceAdd,
-		group
-	} = useDataGroupManage({ index });
-
-	const { dataHolderChunks, expanded, toggleExpansion, remove, onLink, onUnlink, onDragEnd } = useDataGroupLayout({ index });
 
+	const { dataHolderChunks, expanded, toggleExpansion, remove, onLink, onUnlink, onDragEnd, group, onDataItemAdd, selectedDataItems } = useDataGroupManage({ index });
 	const { id, dataHolders } = group;
 	const [openAdd, setOpenAdd] = useState(false);
 	const summaryRef = useRef();
@@ -43,7 +37,7 @@ export function DataGroup(
 									"Click to {{action}}, drag to rearrange",
 									{
 										action:
-											expanded === id
+											expanded
 												? i18n.t("collapse")
 												: i18n.t("expand")
 									}
@@ -85,7 +79,7 @@ export function DataGroup(
 									) : (
 										<DragDropContext onDragEnd={onDragEnd}>
 											<Droppable droppableId={`${id}`}>
-												{(provided: any) => (
+												{(provided) => (
 													<div
 														className="w-100"
 														{...provided.droppableProps}
@@ -94,6 +88,7 @@ export function DataGroup(
 														{dataHolderChunks?.map(
 															(chunk, i) => (
 																<LinkingContainer
+																	index={i}
 																	groupIndex={index}
 																	onDelete={remove}
 																	onUnlink={onUnlink}
@@ -122,8 +117,8 @@ export function DataGroup(
 								</div>
 								{openAdd && (
 									<DataSourceSelectorModal
-										disabled={[]}
-										onSelect={onDataSourceAdd}
+										disabled={selectedDataItems}
+										onSelect={onDataItemAdd}
 										onClose={() => setOpenAdd(false)}
 										open={openAdd}
 									/>

diff --git a/...gement/components/DataConfiguration/components/DataGroups/components/DataSource/index.tsx b/...gement/components/DataConfiguration/components/DataGroups/components/DataSource/index.tsx
@@ -1,7 +1,5 @@
 import i18n from "@dhis2/d2-i18n";
-import { Button, IconDragHandle24 } from "@dhis2/ui";
-import { getDataSourceShortName } from "@scorecard/shared";
-import { Avatar } from "@material-ui/core";
+import { Button, IconDragHandle24, UserAvatar } from "@dhis2/ui";
 import { IconDelete16 } from "@dhis2/ui-icons";
 import React from "react";
 import { ScorecardDataSource } from "@hisptz/dhis2-analytics";
@@ -12,12 +10,10 @@ export default function DataSource({ dataSource, index, onDelete }: { dataSource
 		<div>
 			<div className="container-bordered data-source p-8 w-100">
 				<div className="row space-between align-items-center">
-					<div className="row align-items-center ">
+					<div className="row flex-1 align-items-center">
 						<IconDragHandle24 />
-						<Avatar className="data-source avatar">
-							{getDataSourceShortName(type)}
-						</Avatar>
-						<p className="data-source name">{label}</p>
+						<UserAvatar name={type} />
+						<p className="data-source name flex-1">{label}</p>
 					</div>
 					<div>
 						<Button

diff --git a/.../components/DataConfiguration/components/DataGroups/components/DataSourceHolder/index.tsx b/.../components/DataConfiguration/components/DataGroups/components/DataSourceHolder/index.tsx
@@ -10,6 +10,7 @@ export default function DataSourceHolder({
 											 dataHolder,
 											 onDelete,
 											 groupIndex
+
 										 }: { index: number; dataHolder: ScorecardDataHolder, onDelete: (index: number) => void, groupIndex: number; onUnlink: (index: number) => void }) {
 	const { setValue, getValues } = useFormContext<ScorecardConfig>();
 	const { id, dataSources } = dataHolder ?? {};

diff --git a/.../src/modules/ScorecardManagement/components/DataConfiguration/hooks/useDataGroupLayout.ts b/.../src/modules/ScorecardManagement/components/DataConfiguration/hooks/useDataGroupLayout.ts
@@ -1,21 +1,51 @@
 import { useBoolean } from "usehooks-ts";
-import { useFieldArray, useFormContext } from "react-hook-form";
-import { ScorecardConfig } from "@hisptz/dhis2-analytics";
+import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
+import { ScorecardConfig, ScorecardLegend } from "@hisptz/dhis2-analytics";
 import { useCallback, useMemo } from "react";
 import { customChunk } from "../components/DataGroups/components/DataGroup/utils";
 import { DropResult } from "react-beautiful-dnd";
-import { head } from "lodash";
+import { flattenDeep, head } from "lodash";
 import { uid } from "@hisptz/dhis2-utils";
+import { generateLegendDefaults } from "@scorecard/shared";
+import { getNonDefaultLegendDefinitions } from "../../General/utils/utils";
+import { SelectedDataItem } from "@hisptz/dhis2-ui";
 
 export default function useDataGroupLayout({
 											   index
 										   }: { index: number }) {
 	const { value: expanded, toggle: toggleExpansion } = useBoolean(false);
 	// @ts-ignore
-	const { fields, remove, insert, replace, swap, move } = useFieldArray<ScorecardConfig, `dataSelection.dataGroups.${number}.dataHolders`>({
+	const { fields, remove, insert, replace, move, append } = useFieldArray<ScorecardConfig, `dataSelection.dataGroups.${number}.dataHolders`>({
 		name: `dataSelection.dataGroups.${index}.dataHolders`
 	});
 	const { getValues, setValue } = useFormContext<ScorecardConfig>();
+	const nonDefaultLegendDefinitions = getNonDefaultLegendDefinitions(getValues("legendDefinitions"));
+	const group = useWatch<ScorecardConfig, `dataSelection.dataGroups.${number}`>({
+		name: `dataSelection.dataGroups.${index}`
+	});
+
+	const onDataItemAdd = (items: SelectedDataItem[]) => {
+		for (const item of items) {
+			append({
+				id: uid(),
+				dataSources: [
+					{
+						id: item.id,
+						highIsGood: true,
+						type: item.type,
+						label: item.displayName,
+						weight: 100,
+						showColors: true,
+						displayArrows: false,
+						effectiveGap: 5,
+						legends: generateLegendDefaults({ legendDefinitions: nonDefaultLegendDefinitions, weight: 100, highIsGood: true }) as unknown as ScorecardLegend[],
+						specificTargetsSet: false,
+						specificTargets: []
+					}
+				]
+			});
+		}
+	};
 
 	const dataHolderChunks = useMemo(() => {
 		const dataHolders = getValues(`dataSelection.dataGroups.${index}.dataHolders`);
@@ -25,9 +55,7 @@ export default function useDataGroupLayout({
 	const onDragEnd = useCallback((result: DropResult) => {
 		const { source, destination } = result ?? {};
 
-		console.log({
-			result
-		});
+
 		if (source && destination) {
 			move(source.index, destination.index);
 		}
@@ -70,7 +98,14 @@ export default function useDataGroupLayout({
 
 	};
 
+	const selectedDataItems = useMemo(() => {
+		return flattenDeep(group.dataHolders.map(({ dataSources }) => dataSources.map(({ id }) => id)));
+	}, [group]);
+
 	return {
+		group,
+		selectedDataItems,
+		onDataItemAdd,
 		toggleExpansion,
 		onLink,
 		onUnlink,

diff --git a/...s/app/src/modules/ScorecardManagement/components/DataConfiguration/hooks/useLinkManage.ts b/...s/app/src/modules/ScorecardManagement/components/DataConfiguration/hooks/useLinkManage.ts
@@ -1,6 +1,7 @@
-import { head, last } from "lodash";
+import { findIndex, head, last } from "lodash";
 import { useFormContext } from "react-hook-form";
 import { ScorecardConfig, ScorecardDataHolder } from "@hisptz/dhis2-analytics";
+import { useCallback } from "react";
 
 export default function useLinkManage({
 										  groupIndex,
@@ -34,9 +35,18 @@ export default function useLinkManage({
 		hasLink ? onUnlinkClick() : onLinkClick();
 	};
 
+	const getIndex = useCallback(
+		(id: string) => {
+			const dataHolders = getValues(`dataSelection.dataGroups.${groupIndex}.dataHolders`) ?? [];
+			return findIndex(dataHolders, ["id", id]);
+		},
+		[getValues, chunk]
+	);
+
 	return {
 		linkable,
 		hasLink,
+		getIndex,
 		onIconClick,
 		onLinkClick,
 		onUnlinkClick