@evenicanpm/admin-integrate 1.3.0 → 1.6.0

package/src/pages/integration-details/task-drawer/add-task.tsx

@@ -1,15 +1,23 @@
 import type {
+	ConfigExport,
+	ConfigurationMergeMutation,
+	ConfigurationMergeMutationVariables,
 	FilterQueryInput,
 	GetProcessTemplatesQuery,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { processConfigMerge } from "@evenicanpm/admin-integrate/api/process-config/mutation";
 import { getProcessTemplates } from "@evenicanpm/admin-integrate/api/templates/queries";
 import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 import { Wizard } from "@evenicanpm/admin-integrate/components/templates";
 import TemplatesList from "@evenicanpm/admin-integrate/components/templates/templates-list";
-import type { ProcessConfigMerge } from "@evenicanpm/admin-integrate/components/templates/types";
+import type {
+	Metadata,
+	ProcessConfigMerge,
+} from "@evenicanpm/admin-integrate/components/templates/types";
+import { removeTemplateConfig } from "@evenicanpm/admin-integrate/components/templates/wizard";
 import { Box, Typography, useTheme } from "@mui/material";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
 	type TaskAction,
 	TaskActionType,
@@ -19,15 +27,18 @@ import {
 interface Props {
 	taskState: TaskState;
 	dispatch: React.Dispatch<TaskAction>;
+	handleUpdateConfig: (newConfig: ConfigExport) => void;
 }
 
 // steps:
 //  - 0: choose template from list
 //  - 1: wizard (finish --> update flowchart view with added task, close drawer)
-export default function AddTask(props: Props) {
+export default function AddTask(props: Readonly<Props>) {
 	const t = useTranslations("Integrate");
 	const theme = useTheme();
 
+	const processConfigMergeMutation = processConfigMerge();
+
 	const heading: Head[] = [
 		{
 			id: "name",
@@ -44,8 +55,45 @@ export default function AddTask(props: Props) {
 		},
 	];
 
-	const [processConfigMerge, setProcessConfigMerge] =
+	const [processConfigMergeInput, setProcessConfigMergeInput] =
 		useState<ProcessConfigMerge | null>(null);
+
+	useEffect(() => {
+		if (processConfigMergeInput) {
+			const input =
+				removeTemplateConfig(processConfigMergeInput?.input) ||
+				({} as ConfigurationMergeMutationVariables);
+			processConfigMergeMutation.mutate(
+				{
+					input: input,
+				},
+				{
+					onSuccess: async (data: ConfigurationMergeMutation) => {
+						if (data.configurationMerge?.Processes?.[0]?.ProcessTasks)
+							data.configurationMerge.Processes[0].ProcessTasks =
+								data.configurationMerge.Processes[0].ProcessTasks.map(
+									(item, index) => ({
+										...item,
+										Sort:
+											(item?.Sort ?? index) +
+											(props.taskState.sort as number) -
+											1,
+										ParallelProcessingGroup:
+											props.taskState.parallelProcessingGroup,
+									}),
+								);
+						props.handleUpdateConfig(data?.configurationMerge as ConfigExport);
+					},
+					onError: (error) => {
+						console.error("Update failed:", error);
+					},
+				},
+			);
+		}
+	}, [processConfigMergeInput]);
+
+	// const [processConfigMerge, setProcessConfigMerge] =
+	// 	useState<ProcessConfigMerge | null>(null);
 	const [processTemplateId, setProcessTemplateId] = useState<string | null>(
 		null,
 	);
@@ -97,17 +145,21 @@ export default function AddTask(props: Props) {
 					handleRedirect={handleRedirect}
 				/>
 			)}
-			{props.taskState.step === 1 && processTemplateId && (
+			{props.taskState.step === 1 && (
 				<Wizard
 					// todo: should be set to metadata returned from api query for integration details
-					metadata={{
-						name: "",
-						code: "",
-						parallelProcessingGroup: 1,
-						sort: 1,
-					}}
-					setProcessConfigMerge={setProcessConfigMerge}
-					processTemplateId={processTemplateId}
+					metadata={
+						{
+							name: "", // name/code of parent Process is not relevant when editing a single task.
+							code: "",
+							parallelProcessingGroup: props.taskState
+								.parallelProcessingGroup as number,
+							sort: props.taskState.sort as number,
+						} as Metadata
+					}
+					setProcessConfigMerge={setProcessConfigMergeInput}
+					processTemplateId={processTemplateId ?? undefined}
+					isCreateMode
 					handleBack={handleBack}
 					handleFinish={handleNext}
 				/>

package/src/pages/integration-details/task-drawer/edit-task.tsx

@@ -2,14 +2,9 @@ import type {
 	ConfigExport,
 	ConfigurationMergeMutation,
 	ConfigurationMergeMutationVariables,
-	GetProcessTaskByIdQuery,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { processConfigMerge } from "@evenicanpm/admin-integrate/api/process-config/mutation";
-import { getProcessTaskById } from "@evenicanpm/admin-integrate/api/process-task/queries";
-import {
-	Loading,
-	TitleEdit,
-} from "@evenicanpm/admin-integrate/components/core";
+import { TitleEdit } from "@evenicanpm/admin-integrate/components/core";
 import { Wizard } from "@evenicanpm/admin-integrate/components/templates";
 import type {
 	Metadata,
@@ -17,7 +12,13 @@ import type {
 } from "@evenicanpm/admin-integrate/components/templates/types";
 import { removeTemplateConfig } from "@evenicanpm/admin-integrate/components/templates/wizard";
 import ReportProblemIcon from "@mui/icons-material/ReportProblem";
-import { Box, Stack, Typography, useTheme } from "@mui/material";
+import {
+	Box,
+	CircularProgress,
+	Stack,
+	Typography,
+	useTheme,
+} from "@mui/material";
 import { useEffect, useState } from "react";
 import {
 	type TaskAction,
@@ -30,9 +31,10 @@ interface Props {
 	dispatch: React.Dispatch<TaskAction>;
 	handleUpdateConfig: (newConfig: ConfigExport) => void;
 	editable?: boolean;
+	templateConfigInput?: any | null;
 }
 
-export default function EditTask(props: Props) {
+export default function EditTask(props: Readonly<Props>) {
 	const theme = useTheme();
 
 	const processConfigMergeMutation = processConfigMerge();
@@ -49,30 +51,9 @@ export default function EditTask(props: Props) {
 		props.dispatch(action);
 	};
 
-	const { data, isLoading } = getProcessTaskById.useData({
-		id: props.taskState.processTaskId as string,
-	});
-
-	const [metadata, setMetadata] = useState<Metadata | null>(null);
-	const [name, setName] = useState<string>("");
+	const [_name, setName] = useState<string>("");
 	const [sharedCount, setSharedCount] = useState<number>();
 
-	useEffect(() => {
-		const typedData = data as GetProcessTaskByIdQuery;
-
-		if (typedData?.processTaskById) {
-			setMetadata({
-				name: "", // name/code of parent Process is not relevant when editing a single task.
-				code: "",
-				parallelProcessingGroup: typedData.processTaskById
-					.parallelProcessingGroup as number,
-				sort: typedData.processTaskById.sort as number,
-			});
-
-			setName(typedData?.processTaskById?.name as string);
-		}
-	}, [data]);
-
 	const handleNameEdit = (input: string) => {
 		setName(input);
 
@@ -101,74 +82,79 @@ export default function EditTask(props: Props) {
 		}
 	}, [processConfigMergeInput]);
 
-	if (isLoading) {
-		return (
-			<Box sx={{ padding: theme.spacing(10, 3) }}>
-				<Loading />
-			</Box>
-		);
-	}
-
-	const templateConfig = (data as GetProcessTaskByIdQuery)?.processTaskById
-		?.endpoint?.templateConfig;
-
 	return (
 		<>
-			{props.taskState.step === 0 && metadata && (
-				<Box sx={{ marginBottom: theme.spacing(1) }}>
-					<Stack
-						direction="row"
-						spacing={1}
-						sx={{ minHeight: theme.spacing(7) }}
-					>
-						<TitleEdit
-							title={name}
-							onConfirm={handleNameEdit}
-							fullWidth
-							variant="h6"
-							readOnly={!props.editable}
-						/>
-					</Stack>
-					{sharedCount !== undefined && sharedCount > 1 && props?.editable && (
-						<Typography
-							variant="body2"
-							color="error"
-							sx={{
-								display: "flex",
-								alignItems: "center",
-								gap: "5px",
-								fontSize: "12px",
-							}}
+			{props.taskState.step === 0 &&
+				!!props.taskState.sort &&
+				!!props.taskState.parallelProcessingGroup && (
+					<Box sx={{ marginBottom: theme.spacing(1) }}>
+						<Stack
+							direction="row"
+							spacing={1}
+							sx={{ minHeight: theme.spacing(7) }}
 						>
-							<ReportProblemIcon color="error" sx={{ fontSize: "18px" }} />{" "}
-							Changes to this integration tasks will affect other tasks sharing
-							the same <strong>Data Description</strong>
-						</Typography>
-					)}
-				</Box>
-			)}
+							<TitleEdit
+								title={props?.taskState?.name || "Edit Task"}
+								onConfirm={handleNameEdit}
+								fullWidth
+								variant="h6"
+								//readOnly={!props.editable}
+								readOnly={true}
+							/>
+						</Stack>
+						{sharedCount !== undefined &&
+							sharedCount > 1 &&
+							props?.editable && (
+								<Typography
+									variant="body2"
+									color="error"
+									sx={{
+										display: "flex",
+										alignItems: "center",
+										gap: "5px",
+										fontSize: "12px",
+									}}
+								>
+									<ReportProblemIcon color="error" sx={{ fontSize: "18px" }} />{" "}
+									Changes to this integration tasks will affect other tasks
+									sharing the same <strong>Data Description</strong>
+								</Typography>
+							)}
+					</Box>
+				)}
 			{props.taskState.step === 0 &&
-				/*(data as GetProcessTaskByIdQuery).processTaskById?.endpoint
-					?.templateConfig &&*/
-				metadata && (
+				// (data as GetProcessTaskByIdQuery)?.processTaskById?.endpoint
+				// 	?.templateConfig &&
+				!!props.taskState.parallelProcessingGroup &&
+				!!props.taskState.sort && (
 					<Wizard
-						metadata={metadata as Metadata}
+						metadata={
+							{
+								//name: "", // name/code of parent Process is not relevant when editing a single task.
+								//code: "",
+								parallelProcessingGroup: props.taskState
+									.parallelProcessingGroup as number,
+								sort: props.taskState.sort as number,
+								processTaskId: props?.taskState?.processTaskId
+									? Number.parseInt(props.taskState.processTaskId)
+									: null,
+							} as Metadata
+						}
 						setProcessConfigMerge={setProcessConfigMergeInput}
 						handleBack={handleBack}
 						handleFinish={handleFinish}
-						templateConfig={templateConfig}
-						processTemplateId={
-							(data as GetProcessTaskByIdQuery).processTaskById?.endpoint
-								?.processTemplate?.id as string
-						}
+						templateConfig={props.taskState.templateConfig}
+						processTemplateId={props.taskState.processTemplateId as string}
 						isEditMode
+						isCreateMode={false}
 						disableBackToTemplates
 						readOnly={!props.editable}
 						sharedCount={(count: number) => setSharedCount(count)}
 					/>
 				)}
 			{props.taskState.step === 1 && (
-				<Typography>{JSON.stringify(processConfigMergeInput)}</Typography>
+				// <Typography>{JSON.stringify(processConfigMergeInput)}</Typography>
+				<CircularProgress sx={{ margin: theme.spacing(10, 0) }} />
 			)}
 		</>
 	);

package/src/pages/integration-details/task-drawer/task-drawer.tsx

@@ -24,8 +24,11 @@ import {
 
 interface Props extends DrawerProps {
 	taskState: TaskState;
+	renderKey: any;
 	dispatch: React.Dispatch<TaskAction>;
-	handleUpdateConfig: (newConfig: ConfigExport) => void;
+	handleUpdateConfig?: (newConfig: ConfigExport) => void;
+	templateConfigInput?: any | null;
+	config: ConfigExport;
 }
 
 const Drawer = styled(MuiDrawer)({
@@ -40,10 +43,11 @@ const Drawer = styled(MuiDrawer)({
 
 export default function TaskDrawer({
 	taskState,
+	renderKey,
 	dispatch,
 	handleUpdateConfig,
 	...props
-}: Props) {
+}: Readonly<Props>) {
 	const t = useTranslations("Integrate.IntegrationDetails.TaskDrawer");
 
 	const theme = useTheme();
@@ -103,7 +107,16 @@ export default function TaskDrawer({
 			</DrawerButtons>
 			<Box sx={styles.main}>
 				{taskState.mode === TaskMode.ADD && (
-					<AddTask taskState={taskState} dispatch={dispatch} />
+					<AddTask
+						taskState={taskState}
+						dispatch={dispatch}
+						handleUpdateConfig={(newConfig: ConfigExport) => {
+							setEditable(false);
+							if (handleUpdateConfig) {
+								handleUpdateConfig(newConfig);
+							}
+						}}
+					/>
 				)}
 				{taskState.mode === TaskMode.EDIT && (
 					<EditTask
@@ -111,7 +124,12 @@ export default function TaskDrawer({
 						taskState={taskState}
 						dispatch={dispatch}
 						editable={editable}
-						handleUpdateConfig={handleUpdateConfig}
+						handleUpdateConfig={(newConfig: ConfigExport) => {
+							setEditable(false);
+							if (handleUpdateConfig) {
+								handleUpdateConfig(newConfig);
+							}
+						}}
 					/>
 				)}
 			</Box>

package/src/pages/integration-details/task-drawer/task-reducer.ts

@@ -18,6 +18,11 @@ export interface TaskAction {
 
 export interface EditAction extends TaskAction {
 	processTaskId: string;
+	templateConfig?: string;
+	sort?: number;
+	parallelProcessingGroup?: number;
+	processTemplateId?: string;
+	name?: string;
 }
 
 export interface TaskState {
@@ -25,6 +30,11 @@ export interface TaskState {
 	mode: TaskMode;
 	step: number | null;
 	processTaskId?: string | null;
+	templateConfig?: string;
+	sort?: number;
+	parallelProcessingGroup?: number;
+	processTemplateId?: string;
+	name?: string;
 }
 
 export function taskReducer(state: TaskState, action: TaskAction): TaskState {
@@ -43,6 +53,9 @@ export function taskReducer(state: TaskState, action: TaskAction): TaskState {
 				mode: TaskMode.ADD,
 				step: 0,
 				processTaskId: null,
+				sort: (action as EditAction).sort,
+				parallelProcessingGroup: (action as EditAction).parallelProcessingGroup,
+				name: undefined,
 			};
 		}
 		case TaskActionType.OPEN_EDIT: {
@@ -51,18 +64,35 @@ export function taskReducer(state: TaskState, action: TaskAction): TaskState {
 				mode: TaskMode.EDIT,
 				step: 0,
 				processTaskId: (action as EditAction).processTaskId,
+				templateConfig: (action as EditAction).templateConfig,
+				sort: (action as EditAction).sort,
+				parallelProcessingGroup: (action as EditAction).parallelProcessingGroup,
+				processTemplateId: (action as EditAction).processTemplateId,
+				name: (action as EditAction).name,
 			};
 		}
 		case TaskActionType.INCREMENT_STEP: {
+			let step = null;
+
+			if (state.step !== null) {
+				step = state.step + 1;
+			}
+
 			return {
 				...state,
-				step: state.step !== null ? state.step + 1 : null,
+				step,
 			};
 		}
 		case TaskActionType.DECREMENT_STEP: {
+			let step = null;
+
+			if (state.step !== null) {
+				step = Math.max(state.step - 1, 0);
+			}
+
 			return {
 				...state,
-				step: state.step !== null ? Math.max(state.step - 1, 0) : null,
+				step,
 			};
 		}
 		default: {

package/src/pages/scheduler/schedules-list/schedules-list-table.tsx

@@ -16,7 +16,7 @@ interface Props {
 	setDrawerOpen: React.Dispatch<React.SetStateAction<DrawerOpen | null>>;
 }
 
-export default function SchedulesListTable(props: Props) {
+export default function SchedulesListTable(props: Readonly<Props>) {
 	const handleRequestSort = (property: string) => {
 		const current = props.input.sort;
 		if (property === current) {