@evenicanpm/admin-integrate 1.2.2 → 1.4.0

package/src/components/integration-view/utils/mapping.ts

@@ -0,0 +1,404 @@
+import {
+	ProcessExecutionDetails,
+	ConfigExport,
+	ProcessExport,
+	ProcessTask,
+	ProcessTaskExport,
+	ProcessTaskExecution,
+} from "@evenicanpm/admin-core/src/api/e4/graphqlRequestSdk";
+import { Process } from "../../../../../admin-core/src/api/e4/graphqlRequestSdk";
+import {
+	ElkExtendedEdgeWithFlow,
+	ElkNodeWithFlow,
+	GroupNode,
+	// ProcessTaskExecutionNode,
+	// ProcessTaskNode,
+} from "../elk-types";
+import { MarkerType } from "@xyflow/react";
+import _ from "lodash";
+
+const markerEnd = {
+	type: MarkerType.ArrowClosed,
+	width: 20,
+	height: 20,
+};
+
+export function mapToCamelCase(processTask: ProcessTaskExport): ProcessTask {
+	let key,
+		keys = Object.keys(processTask);
+	let n = keys.length;
+	let newobj: { [key: string]: any } = {};
+	while (n--) {
+		key = keys[n];
+		newobj[key.substring(0, 1).toLowerCase() + key.substring(1)] =
+			processTask[key as keyof typeof processTask];
+	}
+
+	return {
+		...newobj,
+		id: newobj.processTaskId,
+		name: newobj.name,
+		sort: newobj.sort,
+		orchestrationType: {
+			code: newobj.orchestrationType,
+		},
+		parallelProcessingGroup: newobj.parallelProcessingGroup,
+	} as ProcessTask;
+}
+
+export const mapEmptyNodesAndEdges = (
+	data: Process | ProcessExecutionDetails,
+	nodeWidth: number,
+) => {
+	const nodes: ElkNodeWithFlow[] = [];
+	const edges: ElkExtendedEdgeWithFlow[] = [];
+
+	const entryPoint: ElkNodeWithFlow = {
+		id: "entry-point",
+		type: "entry-node",
+		data: {
+			isScheduled: false,
+			isTriggered: false,
+		},
+		width: nodeWidth,
+		height:
+			(data as Process)?.isScheduled && (data as Process)?.isTriggered
+				? 104
+				: 70,
+		position: { x: 0, y: 0 },
+		layoutOptions: {
+			"org.eclipse.elk.priority": "1",
+		},
+	};
+
+	nodes.push(entryPoint);
+
+	const entryPointConnector: ElkNodeWithFlow = {
+		id: "entry-point-connector",
+		position: { x: 0, y: 0 },
+		type: "connection-node",
+		width: 1,
+		height: 1,
+		//extent: "parent",
+	};
+
+	nodes.push(entryPointConnector);
+
+	const groupId = `group-1`;
+
+	const emptyNode = {
+		id: groupId,
+		data: {
+			label: `Group 1`,
+		},
+		position: { x: 0, y: 0 },
+		type: "empty-node",
+		children: [],
+		layoutOptions: {
+			"org.eclipse.elk.priority": groupId,
+		},
+		draggable: false,
+		width: nodeWidth,
+		height: 100,
+	};
+
+	nodes.push(emptyNode);
+
+	edges.push(
+		{
+			id: `entry-point-entry-point-connector`,
+			sources: ["entry-point"],
+			targets: ["entry-point-connector"],
+			type: "default-edge",
+		},
+		{
+			id: `entry-point-connector-${groupId}`,
+			sources: ["entry-point-connector"],
+			targets: [groupId],
+			type: "default-edge",
+			markerEnd: markerEnd,
+		},
+	);
+
+	return {
+		nodes,
+		edges,
+	};
+};
+
+// Helper to build groups, nodes, and edges
+function buildGroupsAndEdges({
+	entryPoint,
+	entryPointConnector,
+	groupLabels,
+	getGroupTasks,
+	// nodeWidth,
+	variant,
+	onAdd,
+	mapTaskToNode,
+	groupSortKey = "Sort",
+	taskIdKey = "id",
+	taskNameKey = "name",
+	connectorIdPrefix = "group-",
+}: {
+	entryPoint: ElkNodeWithFlow;
+	entryPointConnector: ElkNodeWithFlow;
+	groupLabels: number[];
+	getGroupTasks: Function;
+	// nodeWidth: number,
+	variant: "process" | "process-execution";
+	onAdd?: Function;
+	mapTaskToNode: Function;
+	groupSortKey: string;
+	taskIdKey: string;
+	taskNameKey: string;
+	connectorIdPrefix: string;
+}) {
+	const groups: GroupNode[] = groupLabels.map((groupLabel: any) => ({
+		id: `group-${groupLabel}`,
+		data: {
+			label: `Group ${groupLabel}`,
+			variant: variant,
+			parallelProcessingGroup: groupLabel,
+			canEdit: !!onAdd,
+		},
+		position: { x: 0, y: 0 },
+		type: "group-node",
+		children: [],
+		layoutOptions: {
+			"org.eclipse.elk.priority": `${groupLabel}`,
+		},
+		draggable: false,
+	}));
+	const edges: any[] = [];
+	edges.push({
+		id: `entry-point-entry-point-connector`,
+		sources: ["entry-point"],
+		targets: ["entry-point-connector"],
+		type: "default-edge",
+	});
+	groups.forEach((group) => {
+		edges.push({
+			id: `entry-point-connector-${group.id}`,
+			sources: ["entry-point-connector"],
+			targets: [group.id],
+			type: "default-edge",
+			markerEnd: markerEnd,
+		});
+		const groupTasks = getGroupTasks(group);
+		const tasksPartitioned = _.values(_.groupBy(groupTasks, groupSortKey));
+		const groupNodes: any[] = [];
+		tasksPartitioned.forEach((partition) => {
+			partition.forEach((task: any, index: number) => {
+				groupNodes.push(mapTaskToNode(task, index, partition.length, group.id));
+			});
+		});
+		let prevConnectorId: string | null = null;
+		tasksPartitioned.forEach((partition, tpIndex) => {
+			_.sortBy(partition, [(task: any) => task[taskNameKey]]);
+			if (prevConnectorId) {
+				partition.forEach((task: any) => {
+					edges.push({
+						id: `${prevConnectorId}-${task[taskIdKey] || task[taskNameKey]}`,
+						sources: [prevConnectorId],
+						targets: [`task-${task[taskIdKey] || task[taskNameKey]}`],
+						type: "default-edge",
+						markerEnd: markerEnd,
+					});
+				});
+			}
+			const connectorId = `${connectorIdPrefix}${group.id}-connect-${tpIndex}`;
+			prevConnectorId = connectorId;
+			if (tpIndex !== tasksPartitioned.length - 1) {
+				partition.forEach((task: any) => {
+					edges.push({
+						id: `task-${task[taskIdKey] || task[taskNameKey]}-${connectorId}`,
+						sources: [`task-${task[taskIdKey] || task[taskNameKey]}`],
+						targets: [connectorId],
+						type: "default-edge",
+					});
+				});
+			}
+			if (prevConnectorId && tpIndex !== tasksPartitioned.length - 1) {
+				groupNodes.push({
+					id: prevConnectorId,
+					position: { x: 0, y: 0 },
+					type: "connection-node",
+					width: 1,
+					height: 1,
+					extent: "parent",
+					parentId: group.id,
+				});
+			}
+		});
+		group.children = groupNodes;
+	});
+	return { nodes: [entryPoint, entryPointConnector, ...groups], edges };
+}
+
+export const mapProcessConfigToNodesAndEdges = (
+	data: ConfigExport,
+	nodeWidth: number,
+	variant: "process" | "process-execution",
+	onAdd?: Function,
+) => {
+	const process = data.Processes?.[0] as ProcessExport;
+	const entryPoint: ElkNodeWithFlow = {
+		id: "entry-point",
+		type: "entry-node",
+		data: {
+			isScheduled:
+				variant === "process" ? !!process?.ProcessScheduleGroup : false,
+			isTriggered: variant === "process" ? !!process?.IsTriggered : false,
+		},
+		width: nodeWidth,
+		height: process?.ProcessScheduleGroup && process?.IsTriggered ? 104 : 70,
+		position: { x: 0, y: 0 },
+		layoutOptions: {
+			"org.eclipse.elk.priority": "1",
+		},
+	};
+	const entryPointConnector: ElkNodeWithFlow = {
+		id: "entry-point-connector",
+		position: { x: 0, y: 0 },
+		type: "connection-node",
+		width: 1,
+		height: 1,
+	};
+	let groupLabels = _.uniq(
+		_.map(process?.ProcessTasks, "ParallelProcessingGroup"),
+	);
+	groupLabels = _.sortBy(groupLabels);
+	return buildGroupsAndEdges({
+		entryPoint,
+		entryPointConnector,
+		groupLabels,
+		getGroupTasks: (group: any) =>
+			_.sortBy(
+				process?.ProcessTasks?.filter(
+					(task) =>
+						task?.ParallelProcessingGroup?.toString() ===
+						group.id.split("-")[1],
+				),
+				["Sort", "Name"],
+			),
+		//nodeWidth,
+		variant,
+		onAdd,
+		mapTaskToNode: (
+			task: any,
+			index: number,
+			partitionLen: number,
+			parentId: string,
+		) => ({
+			id: `task-${task?.ProcessTaskId || task?.Name}`,
+			data: {
+				processTask: mapToCamelCase(task as ProcessTaskExport) || undefined,
+				label: task?.Name as string,
+				isLast: onAdd ? index === partitionLen - 1 : false,
+				onAdd: index === partitionLen - 1 ? onAdd : undefined,
+			},
+			position: { x: 0, y: 0 },
+			type: variant === "process" ? "task-node" : "execution-task-node",
+			width: nodeWidth + (index === partitionLen - 1 ? 64 : 0),
+			height: 70,
+			parentId,
+		}),
+		groupSortKey: "Sort",
+		taskIdKey: "ProcessTaskId",
+		taskNameKey: "Name",
+		connectorIdPrefix: "group-",
+	});
+};
+
+export const mapProcessTasksToNodesAndEdges = (
+	data: Process | ProcessExecutionDetails,
+	nodeWidth: number,
+	variant: "process" | "process-execution",
+) => {
+	const entryPoint: ElkNodeWithFlow = {
+		id: "entry-point",
+		type: "entry-node",
+		data: {
+			isScheduled:
+				variant === "process" ? !!(data as Process)?.isScheduled : false,
+			isTriggered:
+				variant === "process" ? !!(data as Process)?.isTriggered : false,
+		},
+		width: nodeWidth,
+		height:
+			(data as Process)?.isScheduled && (data as Process)?.isTriggered
+				? 104
+				: 70,
+		position: { x: 0, y: 0 },
+		layoutOptions: {
+			"org.eclipse.elk.priority": "1",
+		},
+	};
+	const entryPointConnector: ElkNodeWithFlow = {
+		id: "entry-point-connector",
+		position: { x: 0, y: 0 },
+		type: "connection-node",
+		width: 1,
+		height: 1,
+	};
+	let groupLabels: number[];
+	if (variant === "process") {
+		groupLabels = _.uniq(
+			_.map((data as Process)?.processTasks, "parallelProcessingGroup"),
+		);
+	} else {
+		groupLabels = _.uniq(
+			_.map(
+				(data as ProcessExecutionDetails)?.processTaskExecutions,
+				"parallelProcessingGroup",
+			),
+		);
+	}
+	groupLabels = _.sortBy(groupLabels);
+	return buildGroupsAndEdges({
+		entryPoint,
+		entryPointConnector,
+		groupLabels,
+		getGroupTasks: (group: any) =>
+			_.sortBy(
+				(variant === "process"
+					? (data as Process)?.processTasks
+					: (data as ProcessExecutionDetails)?.processTaskExecutions
+				)?.filter(
+					(task) =>
+						task?.parallelProcessingGroup?.toString() ===
+						group.id.split("-")[1],
+				),
+				["sort", "name"],
+			),
+		//nodeWidth,
+		variant,
+		onAdd: undefined,
+		mapTaskToNode: (
+			task: any,
+			index: number,
+			partitionLen: number,
+			parentId: string,
+		) => ({
+			id: `task-${task?.id}`,
+			data: {
+				processTask: variant === "process" ? (task as ProcessTask) : undefined,
+				processTaskExecution:
+					variant === "process-execution"
+						? (task as ProcessTaskExecution)
+						: undefined,
+				isLast: index === partitionLen - 1,
+			},
+			position: { x: 0, y: 0 },
+			type: variant === "process" ? "task-node" : "execution-task-node",
+			width: nodeWidth + (index === partitionLen - 1 ? 64 : 0),
+			height: 70,
+			parentId,
+		}),
+		groupSortKey: "sort",
+		taskIdKey: "id",
+		taskNameKey: "name",
+		connectorIdPrefix: "group-",
+	});
+};

package/src/components/layouts/main-layout.tsx

@@ -1,10 +1,9 @@
 "use client";
-import { styled } from "@mui/material";
 
 import BodyWrapper from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-body-wrapper";
-import DashboardSidebar from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-sidebar/dashboard-sidebar";
-
 import { LayoutProvider } from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-layout-context";
+import DashboardSidebar from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-sidebar/dashboard-sidebar";
+import { styled } from "@mui/material";
 
 // STYLED COMPONENT
 const StyledContainer = styled("div")(() => ({
@@ -15,7 +14,7 @@ const StyledContainer = styled("div")(() => ({
 export default function MainLayout({
 	children,
 }: {
-	children: React.ReactNode;
+	readonly children: React.ReactNode;
 }) {
 	return (
 		<LayoutProvider>

package/src/components/layouts/root-container.tsx

@@ -1,10 +1,7 @@
-import React from "react";
-
-import { Theme, useTheme } from "@mui/material";
-import { Container, Box, Stack } from "@mui/material";
-import { SxProps, Breakpoint } from "@mui/system";
-
 import { IntegrateFooter } from "@evenicanpm/admin-integrate/components/footer";
+import { Box, Container, Stack, type Theme, useTheme } from "@mui/material";
+import type { Breakpoint, SxProps } from "@mui/system";
+import type React from "react";
 
 interface Props {
 	maxWidth?: false | Breakpoint;
@@ -12,17 +9,14 @@ interface Props {
 	sx?: SxProps;
 }
 
-export default function RootContainer(props: Props) {
+export default function RootContainer(props: Readonly<Props>) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
 	const defaultMaxWidth = "xl";
 
 	return (
-		<Container
-			maxWidth={props.maxWidth !== undefined ? props.maxWidth : defaultMaxWidth}
-			sx={props.sx}
-		>
+		<Container maxWidth={props.maxWidth ?? defaultMaxWidth} sx={props.sx}>
 			<Box sx={styles.root}>
 				<Stack spacing={2}>{props.children}</Stack>
 				<IntegrateFooter />

package/src/components/link-cards/link-card.tsx

@@ -1,19 +1,30 @@
 // STYLED COMPONENTS
-import { BodyText, TitleText, Wrapper } from "./styles";
-import React from "react";
-import { redirect, RedirectType } from "next/navigation";
+
 import { Box, CardActionArea } from "@mui/material";
+import { RedirectType, redirect } from "next/navigation";
+import type React from "react";
+import { BodyText, TitleText, Wrapper } from "./styles";
 
 // ============================================================
 type Props = {
 	title: string;
 	description?: string;
 	url?: string;
+	onClick?: () => void;
 	children?: React.ReactNode;
 };
 // ============================================================
-export default function LinkCard({ title, description, url, children }: Props) {
+export default function LinkCard({
+	title,
+	description,
+	url,
+	onClick,
+	children,
+}: Readonly<Props>) {
 	const handleRedirect = () => {
+		if (onClick) {
+			onClick();
+		}
 		if (url) {
 			redirect(url, RedirectType.push);
 		}

package/src/components/link-cards/styles.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import styled from "@mui/material/styles/styled";
 import { Card, Typography } from "@mui/material";
+import styled from "@mui/material/styles/styled";
 
 // STYLED COMPONENTS
 export const Wrapper = styled(Card)(({ theme }) => ({

package/src/components/list-filter/date-filter.tsx

@@ -1,8 +1,9 @@
-import { Typography, FormControl } from "@mui/material";
+import { FormControl, Typography } from "@mui/material";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import React, { useState } from "react";
-import { DateFilter, FilterProps } from "./list-filter-types";
 import { useTranslations } from "next-intl";
+import type React from "react";
+import { useState } from "react";
+import type { DateFilter, FilterProps } from "./list-filter-types";
 
 const DateFilterComponent: React.FC<FilterProps<DateFilter>> = ({
 	filter,
@@ -17,7 +18,9 @@ const DateFilterComponent: React.FC<FilterProps<DateFilter>> = ({
 
 	const updateValue = (date: null | Date | string) => {
 		const newValue: string | null =
-			date !== null && typeof date !== "string" && !isNaN(date?.getTime())
+			date !== null &&
+			typeof date !== "string" &&
+			!Number.isNaN(date?.getTime())
 				? date.toISOString()
 				: null;
 

package/src/components/list-filter/date-range-filter.tsx

@@ -1,9 +1,15 @@
-import { Box, Typography, Theme, useTheme, FormControl } from "@mui/material";
-import { useTranslations } from "next-intl";
-
+import {
+	Box,
+	FormControl,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import React, { useState } from "react";
-import { DateRangeFilter, FilterProps } from "./list-filter-types";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useState } from "react";
+import type { DateRangeFilter, FilterProps } from "./list-filter-types";
 
 const DateRangeFilterComponent: React.FC<FilterProps<DateRangeFilter>> = ({
 	filter,
@@ -23,7 +29,9 @@ const DateRangeFilterComponent: React.FC<FilterProps<DateRangeFilter>> = ({
 
 	const updateValue = (part: "start" | "end", date: null | Date | string) => {
 		const dateValue: string | null =
-			date !== null && typeof date !== "string" && !isNaN(date?.getTime())
+			date !== null &&
+			typeof date !== "string" &&
+			!Number.isNaN(date?.getTime())
 				? date.toISOString()
 				: null;
 
@@ -44,7 +52,7 @@ const DateRangeFilterComponent: React.FC<FilterProps<DateRangeFilter>> = ({
 		let errorValue: typeof error = {
 			start: null,
 			end: null,
-			...(error ? error : {}),
+			...error,
 			[part]: newError ? t("Filter.invalidDate") : null,
 		};
 

package/src/components/list-filter/index.ts

@@ -1,6 +1,6 @@
 export { default as DateFilter } from "./date-filter";
 export { default as DateRangeFilter } from "./date-range-filter";
 export { default as ListFilter } from "./list-filter";
+export * from "./list-filter-types";
 export { default as MultiSelectFilterComponent } from "./multi-select-filter";
 export { default as SelectFilterComponent } from "./select-filter";
-export * from "./list-filter-types";

package/src/components/list-filter/list-filter.tsx

@@ -1,42 +1,42 @@
 "use client";
-import { debounce } from "lodash";
-import { useTranslations } from "next-intl";
-import React, { useEffect, useState } from "react";
 
 import {
-	Search,
-	FilterAltOutlined,
-	CloseOutlined,
 	ArrowForwardIos,
+	CloseOutlined,
 	Delete,
+	FilterAltOutlined,
+	Search,
 } from "@mui/icons-material";
 import {
+	Badge,
 	Box,
 	Button,
+	ClickAwayListener,
 	IconButton,
-	TextField,
 	InputAdornment,
-	Select,
 	MenuItem,
-	Theme,
-	useTheme,
 	Paper,
 	Popper,
-	Badge,
-	ClickAwayListener,
+	Select,
+	TextField,
+	type Theme,
+	useTheme,
 } from "@mui/material";
-import {
-	Filters,
+import { debounce } from "lodash";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { OutlinedIconButton } from "../button";
+import DateFilterComponent from "./date-filter";
+import DateRangeFilterComponent from "./date-range-filter";
+import type {
+	FilterConfig,
 	FilterResult,
+	Filters,
 	ListFilterOutput,
-	FilterConfig,
 } from "./list-filter-types";
-
-import { OutlinedIconButton } from "../button";
-import SelectFilterComponent from "./select-filter";
 import MultiSelectFilterComponent from "./multi-select-filter";
-import DateFilterComponent from "./date-filter";
-import DateRangeFilterComponent from "./date-range-filter";
+import SelectFilterComponent from "./select-filter";
 
 interface FilterProps<FilterShape extends Filters> {
 	setFilters: (filterUpdate: ListFilterOutput<FilterShape>) => void;
@@ -74,14 +74,14 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 			if (filter.type === "select" && filter.value)
 				return {
 					...values,
-					// @ts-ignore
+					// @ts-expect-error
 					[key]: filter.options.find((o) => o.id === filter.value[0].id),
 				};
 			if (filter.type === "multiSelect" && filter.value)
 				return {
 					...values,
 					[key]: filter.options.filter((o) =>
-						// @ts-ignore
+						// @ts-expect-error
 						filter.value.find((v) => v.id === o.id),
 					),
 				};
@@ -217,7 +217,12 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 								<FilterAltOutlined />
 							</OutlinedIconButton>
 						</Badge>
-						<Popper open={open} anchorEl={anchorEl} placement="bottom-start">
+						<Popper
+							sx={{ zIndex: theme.zIndex.drawer + 1 }}
+							open={open}
+							anchorEl={anchorEl}
+							placement="bottom-start"
+						>
 							<Paper sx={styles.popOut} elevation={3}>
 								<Box sx={styles.closeRow}>
 									{manualClose ? (
@@ -298,7 +303,7 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 												startIcon={<Delete />}
 												onClick={handleFilterClear}
 											>
-												Clear
+												{t("clear")}
 											</Button>
 										) : (
 											""
@@ -308,10 +313,10 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 											variant="contained"
 											color="info"
 											startIcon={<ArrowForwardIos />}
-											disabled={Object.values(filterErrors).some((v) => v)}
+											disabled={Object.values(filterErrors).some(Boolean)}
 											onClick={handleFilterSet}
 										>
-											Filter
+											{t("filter")}
 										</Button>
 									</Box>
 								</Box>