@evenicanpm/admin-integrate 1.2.2 → 1.4.0

package/src/components/integration-view/nodes/empty-node.tsx

@@ -0,0 +1,65 @@
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import { Box, Card, CardContent, CardHeader, Typography } from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import { useTranslations } from "next-intl";
+
+export function EmptyNode(props: NodeProps): JSX.Element {
+	const t = useTranslations("Integrate.IntegrationDetails.View.EmptyNode");
+	return (
+		<Box sx={{ opacity: props.data.disabled ? 0.5 : 1 }}>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle: "dashed",
+					borderColor: "grey.700",
+					backgroundColor: "transparent",
+					width: props.width,
+					"&:hover": {
+						borderColor: props?.data?.disabled ? "grey.700" : "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: props?.data?.disabled ? "#fff" : "#DBF0FE",
+					},
+				}}
+			>
+				<CardHeader
+					title={
+						<Typography
+							variant="h5"
+							sx={{ textAlign: "center", width: "100%" }}
+						>
+							{props?.data?.label as string}
+						</Typography>
+					}
+					sx={{
+						height: 62,
+						display: "flex",
+					}}
+				/>
+				<CardContent
+					sx={{
+						height: props.height,
+						// width: (props.width || 0) + 48,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+						width: "100%",
+						flexDirection: "column",
+					}}
+				>
+					<Typography variant="body2" color="grey.600" pb={3}>
+						{t("firstIntegration")}
+					</Typography>
+					<AddCircleOutlineIcon
+						sx={{
+							color: "grey.600",
+							"&:hover": {
+								color: "#4E97FD", //Blue not implemented in the theme
+							},
+							marginLeft: "-16px",
+						}}
+					/>
+				</CardContent>
+				<Handle type="target" position={Position.Top} />
+			</Card>
+		</Box>
+	);
+}

package/src/components/integration-view/nodes/entry-node.tsx

@@ -1,10 +1,104 @@
-import { Handle, Position } from "@xyflow/react";
+import {
+	Box,
+	Card,
+	CardContent,
+	Divider,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import { useTranslations } from "next-intl";
+import { inputIcon, timerIcon, triggerIcon } from "../task-icon";
+
+export function EntryNode(props: NodeProps): JSX.Element {
+	const t = useTranslations("Integrate.IntegrationDetails.View.EntryNode");
+
+	const theme = useTheme();
+	const styles = getStyles(theme, props);
 
-export function EntryNode(): JSX.Element {
 	return (
-		<div>
+		<Box
+			sx={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				//width: props.width + 24 + theme.spacing(1),
+			}}
+		>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle:
+						props?.data?.isScheduled || props?.data?.isTriggered
+							? "solid"
+							: "dashed",
+					backgroundColor:
+						props?.data?.isScheduled || props?.data?.isTriggered
+							? theme.palette.background.paper
+							: "transparent",
+					"&:hover": {
+						borderColor: "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: "#DBF0FE",
+					},
+					//height: props.height,
+					//width: props.width,
+				}}
+			>
+				{!(props?.data?.isScheduled as boolean) &&
+					!(props?.data?.isTriggered as boolean) && (
+						<CardContent sx={styles.cardContent}>
+							{inputIcon()}
+							<Typography variant="h6" sx={styles.label}>
+								{t("noEntryPoint")}
+							</Typography>
+						</CardContent>
+					)}
+				{(props?.data?.isScheduled as boolean) && (
+					<CardContent sx={styles.cardContent}>
+						{timerIcon()}
+						<Typography variant="h6" sx={styles.label}>
+							{t("scheduled")}
+						</Typography>
+					</CardContent>
+				)}
+				{(props?.data?.isScheduled as boolean) &&
+				(props?.data?.isTriggered as boolean) ? (
+					<Divider sx={styles.divider} />
+				) : null}
+				{(props?.data?.isTriggered as boolean) && (
+					<CardContent sx={styles.cardContent}>
+						{triggerIcon()}
+						<Typography variant="h6" sx={styles.label}>
+							{t("triggered")}
+						</Typography>
+					</CardContent>
+				)}
+			</Card>
 			<Handle type="source" position={Position.Bottom} />
 			<Handle type="target" position={Position.Top} />
-		</div>
+		</Box>
 	);
 }
+
+const getStyles = (theme: Theme, props: NodeProps) => {
+	return {
+		cardContent: {
+			height: props.height,
+			width: props.width,
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+		},
+		label: {
+			textAlign: "center",
+			paddingLeft: theme.spacing(1),
+			fontSize: "18px!important",
+		},
+		divider: {
+			width: "80%",
+			margin: `${theme.spacing(1)} auto`,
+			borderColor: "grey.800",
+		},
+	};
+};

package/src/components/integration-view/nodes/execution-entry-node.tsx

@@ -0,0 +1,107 @@
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import {
+	Box,
+	Card,
+	CardContent,
+	Divider,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+
+export function ExecutionEntryNode(props: NodeProps): JSX.Element {
+	const theme = useTheme();
+	const styles = getStyles(theme, props);
+
+	const borderColor = () => {
+		switch (props?.data?.executionStatus) {
+			case "300":
+				return "info.600";
+			case "400":
+				return "success.600";
+			case "450":
+				return "warning.600";
+			case "500":
+				return "error.600";
+			default:
+				return "grey.600";
+		}
+	};
+
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				//width: props.width + 24 + theme.spacing(1),
+			}}
+		>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: borderColor(),
+					"&:hover": {
+						borderColor: "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: "#DBF0FE",
+					},
+				}}
+			>
+				<CardContent sx={styles.cardContent}>
+					{props?.data?.icon as any}
+					<Typography variant="h6" sx={styles.label}>
+						{props?.data?.label as string}
+					</Typography>
+				</CardContent>
+				<Handle type="source" position={Position.Bottom} />
+				<Handle type="target" position={Position.Top} />
+				{props?.data?.icon2 ? (
+					<>
+						<Divider sx={styles.divider} />
+						<CardContent sx={styles.cardContent}>
+							{props?.data?.icon2 as any}
+							<Typography variant="h6" sx={styles.label}>
+								{props?.data?.label2 as string}
+							</Typography>
+						</CardContent>
+					</>
+				) : null}
+			</Card>
+			{props?.data?.isLast ? (
+				<AddCircleOutlineIcon
+					sx={{
+						color: "grey.600",
+						marginLeft: theme.spacing(1),
+						"&:hover": {
+							color: "#4E97FD", //Blue not implemented in the theme
+						},
+					}}
+				/>
+			) : null}
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme, props: NodeProps) => {
+	return {
+		cardContent: {
+			height: props.height,
+			width: props.width,
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+		},
+		label: {
+			textAlign: "center",
+			paddingLeft: theme.spacing(1),
+			fontSize: "18px!important",
+		},
+		divider: {
+			width: "80%",
+			margin: `${theme.spacing(1)} auto`,
+			borderColor: "grey.800",
+		},
+	};
+};

package/src/components/integration-view/nodes/execution-task-node.tsx

@@ -0,0 +1,88 @@
+import type { ProcessTaskExecution } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { ExecutionTag } from "@evenicanpm/admin-integrate/components/execution";
+import { Box, Card, CardContent, Typography, useTheme } from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import { mapIconByOrchestrationType } from "../task-icon";
+
+export function ExecutionTaskNode(props: NodeProps): JSX.Element {
+	const theme = useTheme();
+
+	const borderColor = () => {
+		switch (
+			(props?.data?.processTaskExecution as ProcessTaskExecution)
+				?.executionStatus?.id
+		) {
+			case "300":
+				return "info.600";
+			case "400":
+				return "success.600";
+			case "450":
+				return "warning.600";
+			case "500":
+				return "error.600";
+			default:
+				return "grey.600";
+		}
+	};
+
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				opacity: !props?.data?.disabled || props?.data?.selected ? 1 : 0.5,
+			}}
+		>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: borderColor(),
+					"&:hover": {
+						borderColor: props?.data?.disabled ? "grey.700" : "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: props?.data?.disabled ? "#fff" : "#DBF0FE",
+					},
+				}}
+			>
+				<CardContent
+					sx={{
+						height: props.height,
+						width: props.width,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					{mapIconByOrchestrationType(
+						(props?.data?.processTask as ProcessTaskExecution)
+							?.orchestrationType?.code as string,
+					)}
+					<Typography
+						variant="h6"
+						sx={{
+							textAlign: "center",
+							fontSize: "18px!important",
+							paddingLeft: theme.spacing(0.7),
+							marginRight: theme.spacing(1),
+						}}
+					>
+						{
+							(props?.data?.processTaskExecution as ProcessTaskExecution)
+								?.name as string
+						}
+					</Typography>
+					<ExecutionTag
+						executionStatusId={
+							(props?.data?.processTaskExecution as ProcessTaskExecution)
+								?.executionStatus?.id as string
+						}
+						sx={{ marginRight: props?.data?.isLast ? theme.spacing(4) : 0 }}
+					/>
+				</CardContent>
+				<Handle type="target" position={Position.Top} />
+				<Handle type="source" position={Position.Bottom} />
+			</Card>
+		</Box>
+	);
+}

package/src/components/integration-view/nodes/group-node.tsx

@@ -1,10 +1,10 @@
-import { Box, Card, CardContent, CardHeader, Typography } from "@mui/material";
-import { Handle, NodeProps, Position } from "@xyflow/react";
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import { Box, Card, CardContent, CardHeader, Typography } from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
 
 export function GroupNode(props: NodeProps): JSX.Element {
 	return (
-		<Box>
+		<Box sx={{ opacity: props.data.disabled ? 0.5 : 1 }}>
 			<Card
 				sx={{
 					borderWidth: 1,
@@ -15,13 +15,17 @@ export function GroupNode(props: NodeProps): JSX.Element {
 			>
 				<CardHeader
 					title={
-						<Typography variant="h5" sx={{ textAlign: "center" }}>
+						<Typography
+							variant="h5"
+							sx={{ textAlign: "center", width: "100%" }}
+						>
 							{props?.data?.label as string}
 						</Typography>
 					}
 					sx={{
 						height: 62,
 						paddingRight: "48px",
+						display: "flex",
 					}}
 				/>
 				<CardContent
@@ -34,15 +38,31 @@ export function GroupNode(props: NodeProps): JSX.Element {
 						paddingRight: "48px",
 					}}
 				>
-					<AddCircleOutlineIcon
-						sx={{
-							color: "grey.600",
-							"&:hover": {
-								color: "#4E97FD", //Blue not implemented in the theme
-							},
-							marginLeft: "-16px",
-						}}
-					/>
+					{props.data.variant === "process" && !!props?.data?.canEdit ? (
+						<AddCircleOutlineIcon
+							sx={{
+								color: "grey.600",
+								"&:hover": {
+									color: "#4E97FD", //Blue not implemented in the theme
+								},
+								marginLeft: "-16px",
+							}}
+							onClick={(e) => {
+								e.stopPropagation();
+								e.preventDefault();
+
+								document.dispatchEvent(
+									new CustomEvent("addItem", {
+										detail: {
+											sort: (props?.data?.maxSort as number) + 1,
+											paralellelProcessingGroup:
+												props?.data?.parallelProcessingGroup,
+										},
+									}),
+								);
+							}}
+						/>
+					) : null}
 				</CardContent>
 				<Handle type="target" position={Position.Top} />
 			</Card>

package/src/components/integration-view/nodes/row-node.tsx

@@ -0,0 +1,19 @@
+import { Box } from "@mui/material";
+import type { NodeProps } from "@xyflow/react";
+
+export function RowNode(props: NodeProps): JSX.Element {
+	return (
+		// <Box sx={{ opacity: props.data.disabled ? 0.5 : 1 }}>
+		<Box>
+			<Box
+				sx={{
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: "grey.700",
+					width: props.width,
+					height: props.height,
+				}}
+			></Box>
+		</Box>
+	);
+}

package/src/components/integration-view/nodes/task-node.tsx

@@ -1,7 +1,15 @@
-import { Box, Card, CardContent, Typography, useTheme } from "@mui/material";
-import { Handle, NodeProps, Position } from "@xyflow/react";
-
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import {
+	Box,
+	Card,
+	CardContent,
+	Typography,
+	IconButton,
+	useTheme,
+} from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import type { ProcessTask } from "../../../../../admin-core/src/api/e4/graphqlRequestSdk";
+import { mapIconByOrchestrationType } from "../task-icon";
 
 export function TaskNode(props: NodeProps): JSX.Element {
 	const theme = useTheme();
@@ -12,6 +20,7 @@ export function TaskNode(props: NodeProps): JSX.Element {
 				display: "flex",
 				justifyContent: "center",
 				alignItems: "center",
+				opacity: !props?.data?.disabled || props?.data?.selected ? 1 : 0.5,
 				//width: props.width + 24 + theme.spacing(1),
 			}}
 		>
@@ -21,9 +30,12 @@ export function TaskNode(props: NodeProps): JSX.Element {
 					borderStyle: "solid",
 					borderColor: "grey.700",
 					"&:hover": {
-						borderColor: "#4E97FD", //Blue not implemented in the theme
-						backgroundColor: "#DBF0FE",
+						borderColor: props?.data?.disabled ? "grey.700" : "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: props?.data?.disabled ? "#fff" : "#DBF0FE",
 					},
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
 				}}
 			>
 				<CardContent
@@ -35,27 +47,49 @@ export function TaskNode(props: NodeProps): JSX.Element {
 						alignItems: "center",
 					}}
 				>
-					{props?.data?.icon as any}
+					{mapIconByOrchestrationType(
+						(props?.data?.processTask as ProcessTask)?.orchestrationType
+							?.code as string,
+					)}
 					<Typography
 						variant="h6"
 						sx={{ textAlign: "center", paddingLeft: theme.spacing(1) }}
 					>
-						{props?.data?.label as string}
+						{(props?.data?.processTask as ProcessTask)?.name as string}
 					</Typography>
 				</CardContent>
 				<Handle type="target" position={Position.Top} />
 				<Handle type="source" position={Position.Bottom} />
 			</Card>
-			{props?.data?.isLast ? (
-				<AddCircleOutlineIcon
-					sx={{
-						color: "grey.600",
-						marginLeft: theme.spacing(1),
-						"&:hover": {
-							color: "#4E97FD", //Blue not implemented in the theme
-						},
+			{props?.data.isLast ? (
+				<IconButton
+					onClick={(e) => {
+						e.stopPropagation();
+						e.preventDefault();
+
+						document.dispatchEvent(
+							new CustomEvent("addItem", {
+								detail: {
+									sort: (props?.data?.processTask as ProcessTask)
+										?.sort as number,
+									paralellelProcessingGroup: (
+										props?.data?.processTask as ProcessTask
+									)?.parallelProcessingGroup,
+								},
+							}),
+						);
 					}}
-				/>
+				>
+					<AddCircleOutlineIcon
+						sx={{
+							color: "grey.600",
+							marginLeft: theme.spacing(1),
+							"&:hover": {
+								color: "#4E97FD", //Blue not implemented in the theme
+							},
+						}}
+					/>
+				</IconButton>
 			) : null}
 		</Box>
 	);