@evenicanpm/admin-integrate 1.2.2 → 1.3.0

package/src/pages/executions/executions-list/executions-list.tsx

@@ -1,38 +1,44 @@
-import React, { useState, useEffect } from "react";
-import { useTranslations } from "next-intl";
-
 // API
-import { GetProcessExecutionsQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Card, Box, Stack, Typography, Grid2 as Grid } from "@mui/material";
-
+import type {
+	GetProcessExecutionsQuery,
+	ProcessExecutionInput,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 // Custom components
 import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
 import {
 	TablePagination,
 	TableSkeleton,
 } from "@evenicanpm/admin-integrate/components/data-table";
-import { ListFilter } from "@evenicanpm/admin-integrate/components/list-filter";
-
-// Local components
-import ExecutionsListTable from "./executions-list-table";
-
 // Types
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { ListFilterOutput } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 import {
-	ExecutionsListFilters,
+	type ExecutionsListFilters,
 	executionListFilters,
 } from "@evenicanpm/admin-integrate/components/execution/execution-filter";
+import { ListFilter } from "@evenicanpm/admin-integrate/components/list-filter";
+import type { ListFilterOutput } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+// MUI
+import {
+	Box,
+	Card,
+	Grid2 as Grid,
+	Stack,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useState } from "react";
+// Local components
+import ExecutionsListTable from "./executions-list-table";
 
 // Returned from processExecutions query
 export interface Item {
 	id: string;
 	name: string;
 	startDate: string;
+	endDate?: string;
 	executionStatus: {
 		id: string;
 	};

package/src/pages/executions/executions.tsx

@@ -1,28 +1,24 @@
-import React, { useState } from "react";
-import { useTranslations } from "next-intl";
-
-// API
-import { getProcessExecutions } from "@evenicanpm/admin-integrate/api/dashboard/queries";
-import {
-	ProcessExecutionInput,
+import type {
 	GetProcessExecutionsQuery,
+	ProcessExecutionInput,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { Box } from "@mui/material";
-
+// API
+import { getProcessExecutions } from "@evenicanpm/admin-integrate/api/dashboard/queries";
 // Custom components
 import {
+	type Crumb,
 	IntegrateBreadcrumbs,
-	Crumb,
 } from "@evenicanpm/admin-integrate/components/breadcrumbs";
+// Types
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 
+// MUI
+import { Box } from "@mui/material";
+import { useTranslations } from "next-intl";
+import React, { useState } from "react";
 // Local components
 import ExecutionsList from "./executions-list";
 
-// Types
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-
 export default function Executions() {
 	const t = useTranslations("Integrate");
 	const l = useTranslations("Integrate.Executions.ListHeader");

package/src/pages/integration-create/index.ts

@@ -0,0 +1 @@
+export { default } from "./integration-create";

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

@@ -0,0 +1,174 @@
+import type { ConfigurationMergeMutationVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	processConfigImport,
+	processConfigMerge,
+} from "@evenicanpm/admin-integrate/api/process-config/mutation";
+import {
+	type Crumb,
+	IntegrateBreadcrumbs,
+} from "@evenicanpm/admin-integrate/components/breadcrumbs";
+import { IntegrationDetailsHeader } from "@evenicanpm/admin-integrate/components/header";
+import { removeTemplateConfig } from "@evenicanpm/admin-integrate/components/templates/wizard";
+import { slugify } from "@evenicanpm/admin-integrate/utils/slugify";
+import { Clear, SaveOutlined } from "@mui/icons-material";
+import { Box, Button, Card, type Theme, useTheme } from "@mui/material";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import PreCreationStep from "./pre-creation-step";
+import SelectStep from "./select-step";
+import TemplateListStep from "./template-list-step";
+import WizardStep from "./wizard-step";
+
+export default function IntegrationCreate() {
+	const t = useTranslations("Integrate");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const pathname = usePathname();
+	const processConfigMergeMutation = processConfigMerge();
+	const processConfigImportMutation = processConfigImport();
+
+	const breadcrumbs: Crumb[] = [
+		{
+			name: t("Header.dashboard"),
+			url: "/e4integrate",
+		},
+		{
+			name: t("Header.integrations"),
+			url: "/e4integrate/integrations",
+		},
+		{
+			name: t("Header.newIntegration"),
+		},
+	];
+
+	const [name, setName] = useState<string>("");
+	const [step, setStep] = useState<number>(0);
+	const [processConfig, setProcessConfig] = useState<any | null>(null);
+
+	useEffect(() => {
+		if (searchParams.get("group")) {
+			setStep(2);
+		}
+	}, [searchParams]);
+
+	const handleCancel = () => {
+		if (step > 0) {
+			const confirmClose = confirm(t("Common.unsavedChanges"));
+			if (!confirmClose) return;
+			setStep(0);
+			router.replace(pathname);
+		} else {
+			router.push("/e4integrate/integrations");
+		}
+	};
+
+	const handleProcessConfigMerge = (configMergeInput: any) => {
+		const newProcessConfigMerge = { ...configMergeInput };
+		const code = slugify(name);
+		for (const c of newProcessConfigMerge.input.config) {
+			c.name = name;
+			c.code = code;
+		}
+
+		processConfigMergeMutation.mutate(
+			{
+				input:
+					removeTemplateConfig(newProcessConfigMerge?.input) ||
+					({} as ConfigurationMergeMutationVariables),
+			},
+			{
+				onSuccess: ({ configurationMerge }) =>
+					setProcessConfig(configurationMerge),
+				onError: (error) => {
+					console.error("Update failed:", error);
+				},
+			},
+		);
+	};
+
+	const handleProcessConfigImport = () => {
+		processConfigImportMutation.mutate(
+			{
+				config: processConfig,
+				reRoutedFromMerge: true,
+			},
+			{
+				onSuccess: (res) => {
+					console.log("res", res);
+					router.push("/e4integrate/integrations");
+				},
+				onError: (error) => {
+					console.error("Update failed:", error);
+				},
+			},
+		);
+	};
+
+	useEffect(() => {
+		// Case when name of process is edited after config merge has been called (ie on pre-creation step), when sending config to import.
+		// If name is changed during wizard step, name is already updated in payload to config merge.
+		if (processConfig?.Processes) {
+			const newConfig = { ...processConfig };
+			const code = slugify(name);
+			newConfig.Processes[0].Name = name;
+			newConfig.Processes[0].Process = code;
+		}
+	}, [name]);
+
+	return (
+		<>
+			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+			<Card>
+				<Box sx={styles.header}>
+					<IntegrationDetailsHeader
+						name={name || t("Templates.defaultNewName")}
+						setName={setName}
+						toolbar={step === 3 ? "disabled" : "hidden"}
+						draft
+						untitled={name === ""}
+					>
+						<Button
+							color="error"
+							variant="contained"
+							startIcon={<Clear />}
+							onClick={handleCancel}
+						>
+							{t("Templates.cancel")}
+						</Button>
+						<Button
+							color="info"
+							variant="contained"
+							startIcon={<SaveOutlined />}
+							onClick={handleProcessConfigImport}
+							disabled={step !== 3}
+						>
+							{t("Templates.create")}
+						</Button>
+					</IntegrationDetailsHeader>
+				</Box>
+				{step === 0 && <SelectStep setStep={setStep} />}
+				{step === 1 && <TemplateListStep />}
+				{step === 2 && (
+					<WizardStep
+						setStep={setStep}
+						setProcessConfigMerge={handleProcessConfigMerge}
+					/>
+				)}
+				{step === 3 && <PreCreationStep processConfig={processConfig} />}
+			</Card>
+		</>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		header: {
+			padding: theme.spacing(2),
+		},
+	};
+};

package/src/pages/integration-create/pre-creation-step.tsx

@@ -0,0 +1,12 @@
+//import type { ProcessConfigMerge } from "@evenicanpm/admin-integrate/components/templates/types";
+import { Box } from "@mui/material";
+
+interface Props {
+	processConfig: any | null;
+}
+
+export default function PreCreationStep(props: Props) {
+	// TODO: render integration
+	console.log("processConfigMerge payload:", props.processConfig);
+	return <Box></Box>;
+}

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

@@ -0,0 +1,105 @@
+// Custom components
+import LinkCard from "@evenicanpm/admin-integrate/components/link-cards";
+import {
+	DescriptionOutlined,
+	InsertDriveFileOutlined,
+} from "@mui/icons-material";
+
+// Mui
+import {
+	Box,
+	Grid2 as Grid,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import type React from "react";
+
+interface Props {
+	setStep: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export default function SelectStep(props: Props) {
+	const t = useTranslations("Integrate.Templates");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const handleClickBlank = () => {
+		props.setStep(3);
+	};
+
+	const handleClickTemplate = () => {
+		props.setStep(1);
+	};
+
+	return (
+		<Box sx={styles.main}>
+			<Grid container spacing={1} maxWidth={theme.spacing(70)}>
+				<Grid size={{ xs: 12 }}>
+					<Typography variant="h6" align="center">
+						{t("selectStepTitle")}
+					</Typography>
+				</Grid>
+				<Grid size={{ xs: 12, md: 6 }}>
+					<LinkCard
+						title={t("selectBlank")}
+						description={t("selectBlankDescription")}
+						onClick={handleClickBlank}
+					>
+						<Box
+							sx={{
+								...styles.iconSquare,
+								color: "grey.600",
+								backgroundColor: "grey.300",
+							}}
+						>
+							<InsertDriveFileOutlined sx={styles.icon} />
+						</Box>
+					</LinkCard>
+				</Grid>
+				<Grid size={{ xs: 12, md: 6 }}>
+					<LinkCard
+						title={t("selectTemplate")}
+						description={t("selectTemplateDescription")}
+						onClick={handleClickTemplate}
+					>
+						<Box
+							sx={{
+								...styles.iconSquare,
+								color: "bluish.600",
+								backgroundColor: "bluish.300",
+							}}
+						>
+							<DescriptionOutlined sx={styles.icon} />
+						</Box>
+					</LinkCard>
+				</Grid>
+			</Grid>
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			backgroundColor: theme.palette.grey[50],
+			padding: theme.spacing(2),
+			border: `1px solid ${theme.palette.grey[300]}`,
+			minHeight: `min(${theme.spacing(80)}, 60vh)`,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+		},
+		iconSquare: {
+			padding: theme.spacing(1),
+			paddingBottom: theme.spacing(0.5),
+			marginBottom: theme.spacing(1),
+			borderRadius: 1,
+		},
+		icon: {
+			fontSize: "h4.fontSize",
+		},
+	};
+};

package/src/pages/integration-create/template-list-step.tsx

@@ -0,0 +1,77 @@
+import type {
+	FilterQueryInput,
+	GetProcessTemplateGroupsQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { getProcessTemplateGroups } from "@evenicanpm/admin-integrate/api/templates/queries";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import TemplatesList from "@evenicanpm/admin-integrate/components/templates/templates-list";
+import { Box, Typography, useTheme } from "@mui/material";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+export default function TemplateListStep() {
+	const t = useTranslations("Integrate.Templates");
+
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const theme = useTheme();
+
+	const heading: Head[] = [
+		{
+			id: "name",
+			label: t("ListHeader.name"),
+			align: "left",
+			width: "95%",
+			sortable: true,
+		},
+		{
+			id: "view",
+			label: t("ListHeader.actions"),
+			align: "right",
+			width: "5%",
+		},
+	];
+
+	// TODO: initialize input based on url query params
+	const [input, setInput] = useState<FilterQueryInput>({
+		sort: "name",
+		sortDesc: false,
+		top: 10,
+		skip: 0,
+	});
+
+	const { data, isLoading } = getProcessTemplateGroups.useData({
+		input: input,
+	});
+
+	const handleRedirect = (id: string) => {
+		const currentParams = new URLSearchParams(searchParams.toString());
+		currentParams.set("group", id);
+		router.replace(`${pathname}?${currentParams.toString()}`);
+	};
+
+	return (
+		<Box
+			sx={{
+				backgroundColor: theme.palette.grey[50],
+				padding: theme.spacing(2),
+				border: `1px solid ${theme.palette.grey[300]}`,
+			}}
+		>
+			<Box sx={{ margin: theme.spacing(2, 0) }}>
+				<Typography variant="h6">{t("listStepTitle")}</Typography>
+			</Box>
+			<TemplatesList
+				heading={heading}
+				data={data as GetProcessTemplateGroupsQuery}
+				loading={isLoading}
+				input={input}
+				setInput={setInput}
+				handleRedirect={handleRedirect}
+				isTemplateGroupsList
+			/>
+		</Box>
+	);
+}

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

@@ -0,0 +1,50 @@
+// 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: 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}
+			/>
+		</Box>
+	);
+}