@evenicanpm/admin-integrate 1.2.2 → 1.4.0

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

@@ -0,0 +1,172 @@
+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 {
+	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 { useEffect, useState } from "react";
+import {
+	type TaskAction,
+	TaskActionType,
+	type TaskState,
+} from "./task-reducer";
+
+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: Readonly<Props>) {
+	const t = useTranslations("Integrate");
+	const theme = useTheme();
+
+	const processConfigMergeMutation = processConfigMerge();
+
+	const heading: Head[] = [
+		{
+			id: "name",
+			label: t("Templates.ListHeader.name"),
+			align: "left",
+			width: "95%",
+			sortable: true,
+		},
+		{
+			id: "view",
+			label: t("Templates.ListHeader.actions"),
+			align: "right",
+			width: "5%",
+		},
+	];
+
+	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,
+	);
+
+	const [input, setInput] = useState<FilterQueryInput>({
+		sort: "name",
+		sortDesc: false,
+		top: 10,
+		skip: 0,
+	});
+
+	const { data, isLoading } = getProcessTemplates.useData({
+		input: input,
+	});
+
+	const handleNext = () => {
+		const action: TaskAction = { type: TaskActionType.INCREMENT_STEP };
+		props.dispatch(action);
+	};
+	const handleBack = () => {
+		const action: TaskAction = { type: TaskActionType.DECREMENT_STEP };
+		props.dispatch(action);
+	};
+
+	const handleRedirect = (id: string) => {
+		setProcessTemplateId(id);
+		handleNext();
+	};
+
+	return (
+		<>
+			{props.taskState.step === 0 && (
+				<Box sx={{ marginBottom: theme.spacing(3) }}>
+					<Typography variant="h6">
+						{t("IntegrationDetails.AddTask.title")}
+					</Typography>
+					<Typography variant="body1">
+						{t("IntegrationDetails.AddTask.descList")}
+					</Typography>
+				</Box>
+			)}
+			{props.taskState.step === 0 && (
+				<TemplatesList
+					heading={heading}
+					data={data as GetProcessTemplatesQuery}
+					loading={isLoading}
+					input={input}
+					setInput={setInput}
+					handleRedirect={handleRedirect}
+				/>
+			)}
+			{props.taskState.step === 1 && (
+				<Wizard
+					// todo: should be set to metadata returned from api query for integration details
+					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}
+				/>
+			)}
+			{props.taskState.step === 2 && (
+				<Typography>{JSON.stringify(processConfigMerge)}</Typography>
+			)}
+		</>
+	);
+}

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

@@ -0,0 +1,161 @@
+import type {
+	ConfigExport,
+	ConfigurationMergeMutation,
+	ConfigurationMergeMutationVariables,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { processConfigMerge } from "@evenicanpm/admin-integrate/api/process-config/mutation";
+import { TitleEdit } from "@evenicanpm/admin-integrate/components/core";
+import { Wizard } from "@evenicanpm/admin-integrate/components/templates";
+import type {
+	Metadata,
+	ProcessConfigMerge,
+} 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,
+	CircularProgress,
+	Stack,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+import {
+	type TaskAction,
+	TaskActionType,
+	type TaskState,
+} from "./task-reducer";
+
+interface Props {
+	taskState: TaskState;
+	dispatch: React.Dispatch<TaskAction>;
+	handleUpdateConfig: (newConfig: ConfigExport) => void;
+	editable?: boolean;
+	templateConfigInput?: any | null;
+}
+
+export default function EditTask(props: Readonly<Props>) {
+	const theme = useTheme();
+
+	const processConfigMergeMutation = processConfigMerge();
+
+	const [processConfigMergeInput, setProcessConfigMergeInput] =
+		useState<ProcessConfigMerge | null>(null);
+
+	const handleFinish = () => {
+		const action: TaskAction = { type: TaskActionType.INCREMENT_STEP };
+		props.dispatch(action);
+	};
+	const handleBack = () => {
+		const action: TaskAction = { type: TaskActionType.DECREMENT_STEP };
+		props.dispatch(action);
+	};
+
+	const [_name, setName] = useState<string>("");
+	const [sharedCount, setSharedCount] = useState<number>();
+
+	const handleNameEdit = (input: string) => {
+		setName(input);
+
+		// TODO: on name change confirm, update main config state in details pg w/ updated name/code for this task
+		// props.handleUpdateConfig(...)
+	};
+
+	useEffect(() => {
+		if (processConfigMergeInput) {
+			const input =
+				removeTemplateConfig(processConfigMergeInput?.input) ||
+				({} as ConfigurationMergeMutationVariables);
+			processConfigMergeMutation.mutate(
+				{
+					input: input,
+				},
+				{
+					onSuccess: async (data: ConfigurationMergeMutation) => {
+						props.handleUpdateConfig(data?.configurationMerge as ConfigExport);
+					},
+					onError: (error) => {
+						console.error("Update failed:", error);
+					},
+				},
+			);
+		}
+	}, [processConfigMergeInput]);
+
+	return (
+		<>
+			{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) }}
+						>
+							<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 &&
+				!!props.taskState.parallelProcessingGroup &&
+				!!props.taskState.sort && (
+					<Wizard
+						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={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>
+				<CircularProgress sx={{ margin: theme.spacing(10, 0) }} />
+			)}
+		</>
+	);
+}

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

@@ -0,0 +1,157 @@
+import type { ConfigExport } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { DrawerButtons } from "@evenicanpm/admin-integrate/components/core";
+import { EditOutlined } from "@mui/icons-material";
+import {
+	Box,
+	Button,
+	type DrawerProps,
+	Drawer as MuiDrawer,
+	type Theme,
+	useTheme,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { usePathname, useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import AddTask from "./add-task";
+import EditTask from "./edit-task";
+import {
+	type TaskAction,
+	TaskActionType,
+	TaskMode,
+	type TaskState,
+} from "./task-reducer";
+
+interface Props extends DrawerProps {
+	taskState: TaskState;
+	renderKey: any;
+	dispatch: React.Dispatch<TaskAction>;
+	handleUpdateConfig?: (newConfig: ConfigExport) => void;
+	templateConfigInput?: any | null;
+	config: ConfigExport;
+}
+
+const Drawer = styled(MuiDrawer)({
+	position: "relative", //imp
+	//width: 625, //drawer width
+	"& .MuiDrawer-paper": {
+		width: 625, //drawer width
+		position: "absolute", //imp
+		transition: "none !important",
+	},
+});
+
+export default function TaskDrawer({
+	taskState,
+	renderKey,
+	dispatch,
+	handleUpdateConfig,
+	...props
+}: Readonly<Props>) {
+	const t = useTranslations("Integrate.IntegrationDetails.TaskDrawer");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const router = useRouter();
+	const pathname = usePathname();
+
+	const [editable, setEditable] = useState<boolean>(false);
+	const [reloadKey, setReloadKey] = useState<number>(Date.now());
+
+	const confirmCancel = () => {
+		if (editable) {
+			return confirm(t("confirmTaskUpdateText"));
+		}
+		return true;
+	};
+
+	const handleClose = () => {
+		if (!confirmCancel()) return;
+
+		const action: TaskAction = { type: TaskActionType.CLOSE };
+		dispatch(action);
+		setEditable(false);
+	};
+
+	const handleEdit = () => {
+		if (!confirmCancel()) return;
+
+		if (editable) setReloadKey(Date.now());
+		setEditable(!editable);
+	};
+
+	useEffect(() => {
+		if (taskState.step === null || taskState.step === 0) {
+			router.replace(pathname);
+		}
+	}, [taskState.step]);
+
+	return (
+		<Drawer
+			{...props}
+			variant="persistent"
+			sx={{ padding: theme.spacing(2), width: taskState.open ? 525 : 0 }}
+		>
+			<DrawerButtons handleClose={handleClose}>
+				{taskState.mode === TaskMode.EDIT && (
+					<Button
+						variant={editable ? "outlined" : "contained"}
+						color={editable ? "error" : "info"}
+						onClick={handleEdit}
+						endIcon={<EditOutlined />}
+					>
+						{editable ? t("cancel") : t("edit")}
+					</Button>
+				)}
+			</DrawerButtons>
+			<Box sx={styles.main}>
+				{taskState.mode === TaskMode.ADD && (
+					<AddTask
+						taskState={taskState}
+						dispatch={dispatch}
+						handleUpdateConfig={(newConfig: ConfigExport) => {
+							setEditable(false);
+							if (handleUpdateConfig) {
+								handleUpdateConfig(newConfig);
+							}
+						}}
+					/>
+				)}
+				{taskState.mode === TaskMode.EDIT && (
+					<EditTask
+						key={reloadKey}
+						taskState={taskState}
+						dispatch={dispatch}
+						editable={editable}
+						handleUpdateConfig={(newConfig: ConfigExport) => {
+							setEditable(false);
+							if (handleUpdateConfig) {
+								handleUpdateConfig(newConfig);
+							}
+						}}
+					/>
+				)}
+			</Box>
+		</Drawer>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			//width: 600,
+			padding: theme.spacing(2),
+		},
+		drawer: {
+			//width: 600,
+		},
+		enableEdit: {
+			backgroundColor: "info.main",
+			"&:hover": {
+				backgroundColor: "info.400",
+			},
+			color: "white",
+		},
+	};
+};

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

@@ -0,0 +1,103 @@
+export enum TaskActionType {
+	CLOSE = "CLOSE",
+	OPEN_ADD = "OPEN_ADD",
+	OPEN_EDIT = "OPEN_EDIT",
+	INCREMENT_STEP = "INCREMENT_STEP",
+	DECREMENT_STEP = "DECREMENT_STEP",
+}
+
+export enum TaskMode {
+	NONE = "NONE",
+	ADD = "ADD",
+	EDIT = "EDIT",
+}
+
+export interface TaskAction {
+	type: TaskActionType;
+}
+
+export interface EditAction extends TaskAction {
+	processTaskId: string;
+	templateConfig?: string;
+	sort?: number;
+	parallelProcessingGroup?: number;
+	processTemplateId?: string;
+	name?: string;
+}
+
+export interface TaskState {
+	open: boolean;
+	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 {
+	switch (action.type) {
+		case TaskActionType.CLOSE: {
+			return {
+				open: false,
+				mode: TaskMode.NONE,
+				step: null,
+				processTaskId: null,
+			};
+		}
+		case TaskActionType.OPEN_ADD: {
+			return {
+				open: true,
+				mode: TaskMode.ADD,
+				step: 0,
+				processTaskId: null,
+				sort: (action as EditAction).sort,
+				parallelProcessingGroup: (action as EditAction).parallelProcessingGroup,
+				name: undefined,
+			};
+		}
+		case TaskActionType.OPEN_EDIT: {
+			return {
+				open: true,
+				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,
+			};
+		}
+		case TaskActionType.DECREMENT_STEP: {
+			let step = null;
+
+			if (state.step !== null) {
+				step = Math.max(state.step - 1, 0);
+			}
+
+			return {
+				...state,
+				step,
+			};
+		}
+		default: {
+			console.error(`${action.type} is not a valid action for detailsReducer`);
+			return state;
+		}
+	}
+}

package/src/pages/integrations/integrations.tsx

@@ -1,20 +1,17 @@
-import React, { useState } from "react";
-import { useTranslations } from "next-intl";
-
-// MUI
-import { Box } from "@mui/material";
-
-// API
+import type {
+	GetProcessesQuery,
+	ProcessInput,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { getProcesses } from "@evenicanpm/admin-integrate/api/Integrations/queries";
-import { ProcessInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// Custom components
 import {
+	type Crumb,
 	IntegrateBreadcrumbs,
-	Crumb,
 } from "@evenicanpm/admin-integrate/components/breadcrumbs";
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import IntegrationList from "./integration-list";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { IntegrationList } from "@evenicanpm/admin-integrate/components/integration-list";
+import { Box } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
 
 export default function Integrations() {
 	const t = useTranslations("Integrate");
@@ -84,7 +81,7 @@ export default function Integrations() {
 			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
 			<IntegrationList
 				heading={heading}
-				data={data}
+				data={data as GetProcessesQuery}
 				loading={isLoading}
 				input={input}
 				setInput={setInput}

package/src/pages/scheduler/scheduler.tsx

@@ -1,31 +1,19 @@
-import React, { useState } from "react";
-import { useTranslations } from "next-intl";
-
-// API
-import { getScheduledProcesses } from "@evenicanpm/admin-integrate/api/scheduler/queries";
-import {
-	ScheduledProcessInput,
+import type {
 	GetScheduledProcessesQuery,
+	ScheduledProcessInput,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
+import { getScheduledProcesses } from "@evenicanpm/admin-integrate/api/scheduler/queries";
+import {
+	type Crumb,
+	IntegrateBreadcrumbs,
+} from "@evenicanpm/admin-integrate/components/breadcrumbs";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import ScheduleDrawer from "@evenicanpm/admin-integrate/components/scheduler/schedule-drawer";
+import type { DrawerOpen } from "@evenicanpm/admin-integrate/components/scheduler/schedule-drawer/schedule-drawer";
 import { Box } from "@mui/material";
-
-// Custom components
-import { IntegrateBreadcrumbs } from "@evenicanpm/admin-integrate/components/breadcrumbs";
-
-// Local components
+import { useTranslations } from "next-intl";
+import { useState } from "react";
 import SchedulesList from "./schedules-list";
-import ScheduleDrawer from "./schedule-drawer";
-
-// Types
-import { Crumb } from "@evenicanpm/admin-integrate/components/breadcrumbs";
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-
-export type DrawerOpen = {
-	id: string;
-	group?: boolean;
-};
 
 export default function Scheduler() {
 	const t = useTranslations("Integrate");