@evenicanpm/admin-integrate 1.2.2 → 1.4.0

package/src/pages/integration-create/wizard-step.tsx

@@ -0,0 +1,51 @@
+// Custom components
+import { Wizard } from "@evenicanpm/admin-integrate/components/templates";
+// Types
+import type { ProcessConfigMerge } from "@evenicanpm/admin-integrate/components/templates/types";
+// Mui
+import { Box } from "@mui/material";
+// Util
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+const metadata = {
+	name: "",
+	code: "",
+	parallelProcessingGroup: 1,
+	sort: 1,
+};
+
+interface Props {
+	setStep: React.Dispatch<React.SetStateAction<number>>;
+	setProcessConfigMerge: React.Dispatch<
+		React.SetStateAction<ProcessConfigMerge | null>
+	>;
+}
+
+export default function WizardStep(props: Readonly<Props>) {
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+
+	const handleBack = () => {
+		props.setStep(1);
+		router.replace(pathname);
+	};
+
+	const handleFinish = () => {
+		props.setStep(3);
+		router.replace(pathname);
+	};
+
+	return (
+		<Box>
+			<Wizard
+				metadata={metadata}
+				processTemplateGroupId={searchParams.get("group")?.toString()}
+				handleBack={handleBack}
+				handleFinish={handleFinish}
+				setProcessConfigMerge={props.setProcessConfigMerge}
+				isCreateMode
+			/>
+		</Box>
+	);
+}

package/src/pages/integration-details/import-process/copy-tasks-list.tsx

@@ -0,0 +1,265 @@
+import type {
+	GetProcessByIdWithTasksQuery,
+	ProcessTask,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { getQueryClient } from "@evenicanpm/admin-core/api/sdk/get-query-client";
+import { copyProcess } from "@evenicanpm/admin-integrate/api/process/mutations";
+import { buildProcessByIdQueryKey } from "@evenicanpm/admin-integrate/api/process/queries/get-process-by-id.query";
+import {
+	TableHeader,
+	TableSkeleton,
+} from "@evenicanpm/admin-integrate/components/data-table";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { ArrowLeft } from "@mui/icons-material";
+import {
+	Box,
+	Button,
+	Card,
+	Skeleton,
+	Stack,
+	Table,
+	TableBody,
+	TableContainer,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import CopyTasksRow from "./copy-tasks-row";
+import {
+	type AlertAction,
+	type ImportAction,
+	ImportActionType,
+	type ImportState,
+} from "./import-process-reducer";
+
+interface Props {
+	data: GetProcessByIdWithTasksQuery;
+	loading: boolean;
+	importState: ImportState;
+	dispatch: React.Dispatch<ImportAction>;
+}
+
+export default function CopyTasksList(props: Readonly<Props>) {
+	const t = useTranslations("Integrate.IntegrationDetails.ImportProcess");
+
+	const params = useParams<{ processId: string }>();
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const heading: Head[] = [
+		{
+			id: "actions",
+			label: t("TaskList.actions"),
+			align: "center",
+			width: "5%",
+		},
+		{
+			id: "name",
+			label: t("TaskList.name"),
+			align: "left",
+			width: "45%",
+		},
+		{
+			id: "endpoint",
+			label: t("TaskList.endpoint"),
+			align: "left",
+			width: "45%",
+		},
+	];
+
+	const [checked, setChecked] = useState<{ [key: string]: boolean } | null>(
+		null,
+	);
+	const anyChecked =
+		checked === null ? false : Object.values(checked).some(Boolean);
+	const disableConfirm =
+		props.loading || !!props.importState.alert || !anyChecked;
+
+	useEffect(() => {
+		if (props.data?.processById?.processTasks) {
+			if (props.data.processById.processTasks.length === 0) {
+				props.dispatch({
+					type: ImportActionType.ALERT,
+					alert: t("Alert.targetEmpty"),
+				} as AlertAction);
+			} else {
+				const ids = props.data.processById.processTasks.map((pt) => pt?.id);
+				const newChecked: { [key: string]: boolean } = {};
+				for (const id of ids) {
+					newChecked[id as string] = true;
+				}
+				setChecked(newChecked);
+			}
+		}
+	}, [props.data]);
+
+	const toggleChecked = (id: string) => {
+		const newChecked = { ...checked };
+		newChecked[id] = !newChecked[id];
+		setChecked(newChecked);
+	};
+
+	const copy = copyProcess();
+
+	const handleConfirm = () => {
+		if (props.data?.processById && checked) {
+			const idsToCopy: string[] = [];
+			for (const id of Object.keys(checked)) {
+				if (checked[id]) {
+					idsToCopy.push(id as string);
+				}
+			}
+
+			props.dispatch({ type: ImportActionType.SAVE });
+
+			copy.mutate(
+				{
+					sourceId: props.data.processById.id,
+					targetId: params.processId,
+					processTaskIds: idsToCopy,
+				},
+				{
+					onSuccess: async () => {
+						props.dispatch({ type: ImportActionType.CLOSE });
+						const qc = getQueryClient();
+						props.dispatch({ type: ImportActionType.SAVESUCCESS });
+
+						return qc.invalidateQueries({
+							queryKey: buildProcessByIdQueryKey.byInput({
+								id: params.processId,
+							}),
+						});
+					},
+					onError: (error) => {
+						props.dispatch({ type: ImportActionType.SAVESUCCESS });
+
+						console.error("CopyProcess failed:", error);
+					},
+				},
+			);
+		}
+	};
+
+	return (
+		<Box>
+			{(props.loading || !props.data) && (
+				<Box>
+					<Typography sx={styles.name} variant="h6">
+						<Skeleton />
+					</Typography>
+					<Card>
+						<TableSkeleton
+							heading={heading}
+							perPage={10}
+							rowSx={styles.rowSx}
+						/>
+					</Card>
+				</Box>
+			)}
+			{!props.loading && props.data?.processById?.processTasks && (
+				<Box>
+					<Typography sx={styles.name} variant="h6">
+						{props.data.processById.name as string}
+					</Typography>
+					<Card>
+						{props.data.processById.processTasks.length > 0 && checked && (
+							<TableContainer>
+								<Table>
+									<TableHeader
+										heading={heading}
+										orderBy={"name"}
+										order={"asc"}
+										rowSx={styles.rowSx}
+									/>
+									<TableBody>
+										{props.data.processById.processTasks.map((pt) =>
+											pt ? (
+												<CopyTasksRow
+													key={pt.id}
+													item={pt as ProcessTask}
+													heading={heading}
+													checked={checked[pt.id]}
+													toggleChecked={toggleChecked}
+													alert={props.importState.alert}
+												/>
+											) : (
+												<></>
+											),
+										)}
+									</TableBody>
+								</Table>
+							</TableContainer>
+						)}
+						{props.data.processById.processTasks.length === 0 && (
+							<Box
+								display="flex"
+								justifyContent="center"
+								alignItems="center"
+								sx={{
+									minHeight: theme.spacing(20),
+									marginBottom: theme.spacing(2),
+								}}
+							>
+								<Stack spacing={1} justifyContent="center" alignItems="center">
+									<Typography variant="h6" color="info">
+										{t("TaskList.listEmptyTitle")}
+									</Typography>
+									<Typography variant="body1">
+										{t("TaskList.listEmptyBody")}
+									</Typography>
+								</Stack>
+							</Box>
+						)}
+					</Card>
+				</Box>
+			)}
+
+			<Box sx={styles.buttons} display="flex" justifyContent="space-between">
+				<Button
+					variant="contained"
+					color="primary"
+					onClick={() => {
+						props.dispatch({ type: ImportActionType.DESELECT });
+						props.dispatch({
+							type: ImportActionType.ALERT,
+							alert: null,
+						} as AlertAction);
+					}}
+					startIcon={<ArrowLeft />}
+				>
+					{t("back")}
+				</Button>
+				<Button
+					sx={{
+						"&.Mui-disabled": {
+							transitionDuration: "0s",
+						},
+					}}
+					variant="contained"
+					color="success"
+					disabled={disableConfirm}
+					onClick={handleConfirm}
+				>
+					{t("confirm")}
+				</Button>
+			</Box>
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		name: {
+			marginBottom: theme.spacing(2),
+		},
+		rowSx: {
+			height: theme.spacing(7.5),
+		},
+		buttons: {
+			margin: theme.spacing(2, 0, 4),
+		},
+	};
+};

package/src/pages/integration-details/import-process/copy-tasks-row.tsx

@@ -0,0 +1,77 @@
+import type { ProcessTask } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import {
+	StyledTableCell,
+	StyledTableRow,
+} from "@evenicanpm/admin-integrate/components/data-table/table-row";
+import {
+	Box,
+	Checkbox,
+	Stack,
+	type SxProps,
+	type TableCellProps,
+	Typography,
+} from "@mui/material";
+
+interface Props {
+	item: ProcessTask;
+	heading: Head[]; // for alignment
+	checked: boolean;
+	toggleChecked: (id: string) => void;
+	alert: string | null;
+	sx?: SxProps;
+}
+
+export default function CopyTasksRow(props: Readonly<Props>) {
+	const headings = {
+		actions: props.heading.find((h) => h.id === "actions"),
+		name: props.heading.find((h) => h.id === "name"),
+		endpoint: props.heading.find((h) => h.id === "endpoint"),
+	};
+
+	const toggleChecked = () => {
+		props.toggleChecked(props.item.id);
+	};
+
+	return (
+		<StyledTableRow sx={props.sx}>
+			{headings.actions && (
+				<StyledTableCell
+					align={headings.actions.align as TableCellProps["align"]}
+					width={headings.actions.width}
+				>
+					<Checkbox
+						checked={props.checked}
+						onClick={toggleChecked}
+						disabled={!!props.alert}
+					/>
+				</StyledTableCell>
+			)}
+			{headings.name && (
+				<StyledTableCell
+					align={headings.name.align as TableCellProps["align"]}
+					width={headings.name.width}
+				>
+					<Stack spacing={1} direction="row">
+						<Box display="flex" justifyContent="flex-start" alignItems="center">
+							{/* TODO: icon here */}
+						</Box>
+						<Box display="flex" justifyContent="flex-start" alignItems="center">
+							<Typography>{props.item.name ?? ""}</Typography>
+						</Box>
+					</Stack>
+				</StyledTableCell>
+			)}
+			{headings.endpoint && (
+				<StyledTableCell
+					align={headings.endpoint.align as TableCellProps["align"]}
+					width={headings.endpoint.width}
+				>
+					<Box display="flex" justifyContent="flex-start" alignItems="center">
+						<Typography>{props.item.endpoint?.name ?? ""}</Typography>
+					</Box>
+				</StyledTableCell>
+			)}
+		</StyledTableRow>
+	);
+}

package/src/pages/integration-details/import-process/import-confirm.tsx

@@ -0,0 +1,61 @@
+import type { GetProcessByIdWithTasksQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { getProcessByIdWithTasks } from "@evenicanpm/admin-integrate/api/process/queries";
+import { Box, type Theme, useTheme } from "@mui/material";
+import { useParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect } from "react";
+import CopyTasksList from "./copy-tasks-list";
+import {
+	type AlertAction,
+	type ImportAction,
+	ImportActionType,
+	type ImportState,
+} from "./import-process-reducer";
+
+interface Props {
+	importState: ImportState;
+	dispatch: React.Dispatch<ImportAction>;
+}
+
+export default function ImportConfirm(props: Readonly<Props>) {
+	const t = useTranslations("Integrate.IntegrationDetails.ImportProcess");
+	const params = useParams<{ processId: string }>();
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const { data, isLoading } = getProcessByIdWithTasks.useData({
+		id: props.importState.selectedId ?? "",
+	});
+
+	useEffect(() => {
+		const typedData = data as GetProcessByIdWithTasksQuery;
+		if (typedData?.processById) {
+			if (typedData.processById.id === params.processId) {
+				props.dispatch({
+					type: ImportActionType.ALERT,
+					alert: t("Alert.same"),
+				} as AlertAction);
+			}
+		}
+	}, [data]);
+
+	return (
+		<Box sx={styles.main}>
+			<CopyTasksList
+				data={data as GetProcessByIdWithTasksQuery}
+				loading={isLoading}
+				importState={props.importState}
+				dispatch={props.dispatch}
+			/>
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			marginTop: theme.spacing(2),
+		},
+	};
+};

package/src/pages/integration-details/import-process/import-drawer.tsx

@@ -0,0 +1,48 @@
+import { DrawerButtons } from "@evenicanpm/admin-integrate/components/core";
+import {
+	Box,
+	Drawer,
+	type DrawerProps,
+	type Theme,
+	useTheme,
+} from "@mui/material";
+import ImportProcess from "./import-process";
+import {
+	type ImportAction,
+	ImportActionType,
+	type ImportState,
+} from "./import-process-reducer";
+
+interface Props extends DrawerProps {
+	importState: ImportState;
+	dispatch: React.Dispatch<ImportAction>;
+}
+
+export default function ImportDrawer({
+	importState,
+	dispatch,
+	...props
+}: Readonly<Props>) {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	return (
+		<Drawer {...props}>
+			<DrawerButtons
+				handleClose={() => dispatch({ type: ImportActionType.CLOSE })}
+			/>
+			<Box sx={styles.main}>
+				<ImportProcess importState={importState} dispatch={dispatch} />
+			</Box>
+		</Drawer>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			maxWidth: `100vw`,
+			minWidth: `min(${theme.spacing(100)}, 100vw)`,
+		},
+	};
+};

package/src/pages/integration-details/import-process/import-process-reducer.ts

@@ -0,0 +1,90 @@
+export enum ImportActionType {
+	CLOSE = "CLOSE",
+	OPEN = "OPEN",
+	SELECT = "SELECT",
+	DESELECT = "DESELECT",
+	ALERT = "ALERT",
+	SAVE = "SAVE",
+	SAVESUCCESS = "SAVESUCCESS",
+}
+
+export interface ImportAction {
+	type: ImportActionType;
+}
+
+export interface SelectProcessAction extends ImportAction {
+	selectedId: string;
+}
+
+export interface AlertAction extends ImportAction {
+	alert: string | null;
+}
+
+export interface ImportState {
+	open: boolean;
+	step: number | null;
+	selectedId?: string | null;
+	alert: string | null;
+	loading: boolean;
+}
+
+export function importReducer(
+	state: ImportState,
+	action: ImportAction,
+): ImportState {
+	switch (action.type) {
+		case ImportActionType.CLOSE: {
+			return {
+				open: false,
+				step: null,
+				selectedId: null,
+				alert: null,
+				loading: false,
+			};
+		}
+		case ImportActionType.OPEN: {
+			return {
+				...state,
+				open: true,
+				step: 0,
+				selectedId: null,
+			};
+		}
+		case ImportActionType.ALERT: {
+			return {
+				...state,
+				alert: (action as AlertAction).alert,
+			};
+		}
+		case ImportActionType.SELECT: {
+			return {
+				...state,
+				selectedId: (action as SelectProcessAction).selectedId,
+				step: 1,
+			};
+		}
+		case ImportActionType.DESELECT: {
+			return {
+				...state,
+				selectedId: null,
+				step: 0,
+			};
+		}
+		case ImportActionType.SAVE: {
+			return {
+				...state,
+				loading: true,
+			};
+		}
+		case ImportActionType.SAVESUCCESS: {
+			return {
+				...state,
+				loading: false,
+			};
+		}
+		default: {
+			console.error(`${action.type} is not a valid action for importReducer`);
+			return state;
+		}
+	}
+}