@evenicanpm/admin-integrate 1.1.0 → 1.2.0

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

@@ -1,10 +1,51 @@
+import { Box, Card, CardContent, CardHeader, Typography } from "@mui/material";
 import { Handle, NodeProps, Position } from "@xyflow/react";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 
 export function GroupNode(props: NodeProps): JSX.Element {
-  return (
-    <div>
-      <Handle type="source" position={Position.Bottom} />
-      <Handle type="target" position={Position.Top} />
-    </div>
-  );
+	return (
+		<Box>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: "grey.700",
+					width: props.width,
+				}}
+			>
+				<CardHeader
+					title={
+						<Typography variant="h5" sx={{ textAlign: "center" }}>
+							{props?.data?.label as string}
+						</Typography>
+					}
+					sx={{
+						height: 62,
+						paddingRight: "48px",
+					}}
+				/>
+				<CardContent
+					sx={{
+						height: props.height,
+						width: (props.width || 0) + 48,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "flex-end",
+						paddingRight: "48px",
+					}}
+				>
+					<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/task-node.tsx

@@ -1,17 +1,62 @@
+import { Box, Card, CardContent, Typography, useTheme } from "@mui/material";
 import { Handle, NodeProps, Position } from "@xyflow/react";
 
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+
 export function TaskNode(props: NodeProps): JSX.Element {
-  return (
-    <div
-      className="task-node"
-      style={{
-        padding: "10px",
-        border: "1px solid #ddd",
-        borderRadius: "30px",
-      }}
-    >
-      <Handle type="source" position={Position.Bottom} />
-      <Handle type="target" position={Position.Top} />
-    </div>
-  );
+	const theme = useTheme();
+
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				//width: props.width + 24 + theme.spacing(1),
+			}}
+		>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: "grey.700",
+					"&:hover": {
+						borderColor: "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: "#DBF0FE",
+					},
+				}}
+			>
+				<CardContent
+					sx={{
+						height: props.height,
+						width: props.width,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					{props?.data?.icon as any}
+					<Typography
+						variant="h6"
+						sx={{ textAlign: "center", paddingLeft: theme.spacing(1) }}
+					>
+						{props?.data?.label 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
+						},
+					}}
+				/>
+			) : null}
+		</Box>
+	);
 }

package/src/components/integration-view/temp-data/initialElements.tsx

@@ -0,0 +1,224 @@
+import { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "../elk-types";
+
+import StorageIcon from "@mui/icons-material/Storage";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import SystemUpdateAltIcon from "@mui/icons-material/SystemUpdateAlt";
+
+import { MarkerType } from "@xyflow/react";
+import { Box } from "@mui/material";
+
+const pullIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "success.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "success.600",
+				padding: "2px",
+			}}
+		>
+			<StorageIcon sx={{ color: "success.500" }} />
+		</Box>
+	);
+};
+
+const chartIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "paste.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "paste.600",
+				padding: "2px",
+			}}
+		>
+			<TableChartIcon sx={{ color: "paste.600" }} />
+		</Box>
+	);
+};
+
+const inputIcon = () => {
+	return (
+		<Box>
+			<SystemUpdateAltIcon sx={{ color: "grey.600" }} />
+		</Box>
+	);
+};
+
+export const initialNodes: ElkNodeWithFlow[] = [
+	{
+		id: "1",
+		type: "task-node",
+		data: { label: "Set Entry Point", icon: inputIcon() },
+		width: 450,
+		height: 70,
+		position: { x: 0, y: 0 },
+		layoutOptions: {
+			"org.eclipse.elk.priority": "1",
+		},
+	},
+
+	{
+		id: "2",
+		data: { label: "Group 1" },
+		position: { x: 0, y: 0 },
+		type: "group-node",
+		children: [
+			{
+				id: "2gs",
+				data: {
+					label: "Pull Data From External MS DB 1",
+					icon: pullIcon(),
+					isLast: true,
+				},
+				position: { x: 0, y: 0 },
+				type: "task-node",
+				width: 450,
+				height: 70,
+				extent: "parent",
+			},
+
+			{
+				id: "2g1",
+				data: {
+					label: "Stage Data 1",
+					icon: chartIcon(),
+				},
+				position: { x: 0, y: 0 },
+				width: 450,
+				height: 70,
+				type: "task-node",
+				extent: "parent",
+			},
+			{
+				id: "2gconnect1",
+				position: { x: 0, y: 0 },
+				type: "connection-node",
+				width: 1,
+				height: 1,
+				extent: "parent",
+			},
+			{
+				id: "2g3",
+				data: {
+					label: "Stage Data 2",
+					icon: chartIcon(),
+				},
+				position: { x: 0, y: 0 },
+				type: "task-node",
+				width: 450,
+				height: 70,
+				extent: "parent",
+			},
+			{
+				id: "2g4",
+				data: {
+					label: "Process Data",
+					icon: chartIcon(),
+					isLast: true,
+				},
+				position: { x: 0, y: 0 },
+				type: "task-node",
+				width: 450,
+				height: 70,
+				extent: "parent",
+			},
+			{
+				id: "2gconnect2",
+				position: { x: 0, y: 0 },
+				type: "connection-node",
+				width: 1,
+				height: 1,
+				extent: "parent",
+			},
+			{
+				id: "2g2",
+				data: {
+					label: "Stage Data 3",
+					icon: chartIcon(),
+					isLast: true,
+				},
+				position: { x: 0, y: 0 },
+				type: "task-node",
+				width: 450,
+				height: 70,
+				extent: "parent",
+			},
+		],
+		layoutOptions: {
+			"org.eclipse.elk.priority": "2",
+		},
+	},
+];
+
+const markerEnd = {
+	type: MarkerType.ArrowClosed,
+	width: 20,
+	height: 20,
+};
+
+export const initialEdges: ElkExtendedEdgeWithFlow[] = [
+	{ id: "e1-2", sources: ["1"], targets: ["2"], type: "default-edge" },
+	{
+		id: "2gs-2gc",
+		sources: ["2gs"],
+		targets: ["2gconnect1"],
+		type: "default-edge",
+	},
+	{
+		id: "2gs-2g1",
+		sources: ["2gconnect1"],
+		targets: ["2g1"],
+		type: "default-edge",
+		markerEnd: markerEnd,
+	},
+	{
+		id: "2gs-2g2",
+		sources: ["2gconnect1"],
+		targets: ["2g2"],
+		type: "default-edge",
+		markerEnd: markerEnd,
+	},
+	{
+		id: "2gs-2g3",
+		sources: ["2gconnect1"],
+		targets: ["2g3"],
+		type: "default-edge",
+		markerEnd: markerEnd,
+	},
+	{
+		id: "2g1-2g4",
+		sources: ["2g1"],
+		targets: ["2gconnect2"],
+		type: "default-edge",
+	},
+	{
+		id: "2g2-2g4",
+		sources: ["2g2"],
+		targets: ["2gconnect2"],
+		type: "default-edge",
+	},
+	{
+		id: "2g3-2g4",
+		sources: ["2g3"],
+		targets: ["2gconnect2"],
+		type: "default-edge",
+	},
+	{
+		id: "2gc-2g4",
+		sources: ["2gconnect2"],
+		targets: ["2g4"],
+		type: "default-edge",
+		markerEnd: markerEnd,
+	},
+];

package/src/components/integration-view/types.ts

@@ -3,10 +3,10 @@ interface ElkOptions {}
 interface ElkPosition {}
 
 interface ElkItem {
-  id: string;
-  type: "input";
-  data: { label: string };
-  x: number;
-  y: number;
-  layoutOptions: ElkOptions;
+	id: string;
+	type: "input";
+	data: { label: string };
+	x: number;
+	y: number;
+	layoutOptions: ElkOptions;
 }

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

@@ -7,22 +7,22 @@ import DashboardSidebar from "@evenicanpm/admin-core/components/layouts/main-das
 import { LayoutProvider } from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-layout-context";
 
 // STYLED COMPONENT
-const StyledContainer = styled("div")(({ theme }) => ({
-  margin: 0,
-  padding: 0,
+const StyledContainer = styled("div")(() => ({
+	margin: 0,
+	padding: 0,
 }));
 
 export default function MainLayout({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) {
-  return (
-    <LayoutProvider>
-      <DashboardSidebar />
-      <BodyWrapper>
-        <StyledContainer>{children}</StyledContainer>
-      </BodyWrapper>
-    </LayoutProvider>
-  );
+	return (
+		<LayoutProvider>
+			<DashboardSidebar />
+			<BodyWrapper>
+				<StyledContainer>{children}</StyledContainer>
+			</BodyWrapper>
+		</LayoutProvider>
+	);
 }

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

@@ -7,37 +7,37 @@ import { SxProps, Breakpoint } from "@mui/system";
 import { IntegrateFooter } from "@evenicanpm/admin-integrate/components/footer";
 
 interface Props {
-  maxWidth?: false | Breakpoint;
-  children: React.ReactNode;
-  sx?: SxProps;
+	maxWidth?: false | Breakpoint;
+	children: React.ReactNode;
+	sx?: SxProps;
 }
 
 export default function RootContainer(props: Props) {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  const defaultMaxWidth = "xl";
+	const defaultMaxWidth = "xl";
 
-  return (
-    <Container
-      maxWidth={props.maxWidth !== undefined ? props.maxWidth : defaultMaxWidth}
-      sx={props.sx}
-    >
-      <Box sx={styles.root}>
-        <Stack spacing={2}>{props.children}</Stack>
-        <IntegrateFooter />
-      </Box>
-    </Container>
-  );
+	return (
+		<Container
+			maxWidth={props.maxWidth !== undefined ? props.maxWidth : defaultMaxWidth}
+			sx={props.sx}
+		>
+			<Box sx={styles.root}>
+				<Stack spacing={2}>{props.children}</Stack>
+				<IntegrateFooter />
+			</Box>
+		</Container>
+	);
 }
 
 const getStyles = (theme: Theme) => {
-  return {
-    root: {
-      margin: theme.spacing(3, 4),
-      display: "flex",
-      flexDirection: "column",
-      minHeight: `calc(100vh - ${theme.spacing(20)})`,
-    },
-  };
+	return {
+		root: {
+			margin: theme.spacing(3, 4),
+			display: "flex",
+			flexDirection: "column",
+			minHeight: `calc(100vh - ${theme.spacing(20)})`,
+		},
+	};
 };

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

@@ -6,31 +6,31 @@ import { Box, CardActionArea } from "@mui/material";
 
 // ============================================================
 type Props = {
-  title: string;
-  description?: string;
-  url?: string;
-  children?: React.ReactNode;
+	title: string;
+	description?: string;
+	url?: string;
+	children?: React.ReactNode;
 };
 // ============================================================
 export default function LinkCard({ title, description, url, children }: Props) {
-  const handleRedirect = () => {
-    if (url) {
-      redirect(url, RedirectType.push);
-    }
-  };
+	const handleRedirect = () => {
+		if (url) {
+			redirect(url, RedirectType.push);
+		}
+	};
 
-  return (
-    <Box sx={{ height: "100%" }}>
-      <CardActionArea onClick={handleRedirect} sx={{ height: "100%" }}>
-        <Wrapper>
-          {/* Add the icon as a child */}
-          {children}
-          <TitleText variant="h5" sx={{ textAlign: "center" }}>
-            {title}
-          </TitleText>
-          <BodyText variant="body1">{description}</BodyText>
-        </Wrapper>
-      </CardActionArea>
-    </Box>
-  );
+	return (
+		<Box sx={{ height: "100%" }}>
+			<CardActionArea onClick={handleRedirect} sx={{ height: "100%" }}>
+				<Wrapper>
+					{/* Add the icon as a child */}
+					{children}
+					<TitleText variant="h5" sx={{ textAlign: "center" }}>
+						{title}
+					</TitleText>
+					<BodyText variant="body1">{description}</BodyText>
+				</Wrapper>
+			</CardActionArea>
+		</Box>
+	);
 }

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

@@ -5,25 +5,25 @@ import { Card, Typography } from "@mui/material";
 
 // STYLED COMPONENTS
 export const Wrapper = styled(Card)(({ theme }) => ({
-  display: "flex",
-  height: "100%",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
-  border: `1px solid ${theme.palette.grey[300]}`,
-  borderRadius: theme.shape.borderRadius,
-  paddingLeft: theme.spacing(4),
-  paddingRight: theme.spacing(4),
-  paddingTop: theme.spacing(3),
-  paddingBottom: theme.spacing(3),
-  backgroundColor: theme.palette.common.white,
+	display: "flex",
+	height: "100%",
+	flexDirection: "column",
+	alignItems: "center",
+	justifyContent: "center",
+	border: `1px solid ${theme.palette.grey[300]}`,
+	borderRadius: theme.shape.borderRadius,
+	paddingLeft: theme.spacing(4),
+	paddingRight: theme.spacing(4),
+	paddingTop: theme.spacing(3),
+	paddingBottom: theme.spacing(3),
+	backgroundColor: theme.palette.common.white,
 }));
 
 export const TitleText = styled(Typography)({
-  textAlign: "center",
+	textAlign: "center",
 });
 
 export const BodyText = styled(Typography)(({ theme }) => ({
-  color: theme.palette.grey[600],
-  textAlign: "center",
+	color: theme.palette.grey[600],
+	textAlign: "center",
 }));

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

@@ -1,55 +1,51 @@
-import { Typography, Theme, useTheme, FormControl } from "@mui/material";
+import { Typography, FormControl } 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";
 
 const DateFilterComponent: React.FC<FilterProps<DateFilter>> = ({
-  filter,
-  onSet,
-  onError,
-  current,
+	filter,
+	onSet,
+	onError,
+	current,
 }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
-  const t = useTranslations("Integrate.Filter");
-
-  const [value, setValue] = useState(current);
-  const [error, setError] = useState<string | null>(null);
-
-  const updateValue = (date: null | Date | string) => {
-    const newValue =
-      typeof date !== "string" && !isNaN(date?.getTime())
-        ? date.toISOString()
-        : null;
-
-    setValue(newValue);
-    onSet(newValue);
-  };
-
-  const updateError = (error: string | null) => {
-    setError(error ? t("invalidDate") : null);
-    onError(!!error);
-  };
-
-  return (
-    <FormControl>
-      <Typography>{filter.label}</Typography>
-      <DatePicker
-        value={value && new Date(value as string)}
-        onChange={updateValue}
-        onError={updateError}
-        slotProps={{
-          field: { clearable: true },
-          textField: {
-            helperText: error,
-          },
-        }}
-      />
-    </FormControl>
-  );
+	const t = useTranslations("Integrate");
+
+	const [value, setValue] = useState(current);
+	const [error, setError] = useState<string | null>(null);
+
+	const updateValue = (date: null | Date | string) => {
+		const newValue: string | null =
+			date !== null && typeof date !== "string" && !isNaN(date?.getTime())
+				? date.toISOString()
+				: null;
+
+		setValue(newValue);
+		onSet(newValue);
+	};
+
+	const updateError = (error: string | null) => {
+		setError(error ? t("Filter.invalidDate") : null);
+		onError(!!error);
+	};
+
+	return (
+		<FormControl>
+			<Typography>{t(filter.label)}</Typography>
+			<DatePicker
+				value={value && new Date(value as string)}
+				onChange={updateValue}
+				onError={updateError}
+				slotProps={{
+					field: { clearable: true },
+					textField: {
+						helperText: error,
+					},
+				}}
+			/>
+		</FormControl>
+	);
 };
 
-const getStyles = (theme: Theme) => ({});
-
 export default DateFilterComponent;