@evenicanpm/admin-integrate 1.2.2 → 1.4.0

package/src/{pages → components}/scheduler/schedule-drawer/schedule-drawer-legacy.tsx

@@ -1,22 +1,13 @@
-import { useEffect } from "react";
-
-// Api
+import type { GetProcessScheduleByIdQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { getProcessScheduleById } from "@evenicanpm/admin-integrate/api/scheduler/queries";
-import { GetProcessScheduleByIdQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// Mui
+import { DrawerButtons } from "@evenicanpm/admin-integrate/components/core";
 import { Divider } from "@mui/material";
-
-// Local components
-import ScheduleDrawerButtons from "./schedule-drawer-buttons";
+import { useEffect } from "react";
+import type { Edited } from "./edited";
 import ScheduleDetails from "./schedule-details";
 import ScheduleDetailsIntegrations from "./schedule-details-integrations";
 import ScheduleDetailsSkeleton from "./schedule-details-skeleton";
-
-// Types
-import { DrawerOpen } from "../scheduler";
-import { Edited } from "./edited";
-import { ProcessScheduleById } from "./schedule-drawer";
+import type { DrawerOpen, ProcessScheduleById } from "./schedule-drawer";
 
 interface Props {
 	drawerOpen: DrawerOpen;
@@ -27,7 +18,7 @@ interface Props {
 	handleClose: () => void;
 }
 
-export default function ScheduleDrawerLegacy(props: Props) {
+export default function ScheduleDrawerLegacy(props: Readonly<Props>) {
 	const styles = getStyles();
 
 	const { data } = getProcessScheduleById.useData({
@@ -47,23 +38,14 @@ export default function ScheduleDrawerLegacy(props: Props) {
 		}
 	}, [data]);
 
-	const handleSave = () => {};
-
 	return (
 		<>
-			<ScheduleDrawerButtons
-				handleClose={props.handleClose}
-				handleSave={handleSave}
-				edited={props.edited}
-				readOnly
-			/>
-			<Divider sx={styles.divider} />
+			<DrawerButtons handleClose={() => props.handleClose()} />
 			{props.details ? (
 				<>
 					<ScheduleDetails
 						id={props.drawerOpen.id}
 						details={props.details}
-						setDetails={props.setDetails}
 						edited={props.edited}
 						setEdited={props.setEdited}
 						readOnly
@@ -72,7 +54,6 @@ export default function ScheduleDrawerLegacy(props: Props) {
 					<ScheduleDetailsIntegrations
 						data={data as GetProcessScheduleByIdQuery}
 						details={props.details}
-						setDetails={props.setDetails}
 						edited={props.edited}
 						setEdited={props.setEdited}
 						readOnly

package/src/components/scheduler/schedule-drawer/schedule-drawer.tsx

@@ -0,0 +1,116 @@
+import type {
+	GetProcessByIdQuery,
+	GetProcessScheduleByIdQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { Box, Drawer, type Theme, useTheme } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useEffect, useReducer, useState } from "react";
+import {
+	DetailsActionType,
+	detailsReducer,
+	type SetDefaultScheduledProcessAction,
+} from "./details-reducer";
+import { type Edited, initialEdited } from "./edited";
+import ScheduleDrawerGroup from "./schedule-drawer-group";
+import ScheduleDrawerLegacy from "./schedule-drawer-legacy";
+
+export type DrawerOpen = {
+	id: string;
+	group?: boolean;
+	addMode?: boolean;
+};
+
+export type ProcessScheduleById =
+	GetProcessScheduleByIdQuery["processScheduleById"];
+
+interface Props {
+	drawerOpen: DrawerOpen | null;
+	setDrawerOpen: (drawerOpen: DrawerOpen | null) => void;
+	processData?: GetProcessByIdQuery;
+	handleSave?: (loading: boolean) => void;
+}
+
+export default function ScheduleDrawer(props: Readonly<Props>) {
+	const t = useTranslations("Integrate.Scheduler");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [edited, setEdited] = useState<Edited>(initialEdited);
+
+	const [detailsGroup, dispatchDetailsGroup] = useReducer(detailsReducer, {
+		details: null,
+	});
+	const [detailsLegacy, setDetailsLegacy] =
+		useState<ProcessScheduleById | null>(null);
+
+	const handleClose = (confirmClose?: boolean) => {
+		if (confirmClose) {
+			const isEdited = Object.values(edited).some(Boolean);
+			if (isEdited && !props.drawerOpen?.addMode) {
+				const confirmClose = confirm(t("unsavedChanges"));
+				if (!confirmClose) return;
+			}
+		}
+		dispatchDetailsGroup({ type: DetailsActionType.CLOSE });
+		setDetailsLegacy(null);
+		setEdited(initialEdited);
+		props.setDrawerOpen(null);
+	};
+
+	useEffect(() => {
+		if (props.drawerOpen?.group && props.processData?.processById) {
+			dispatchDetailsGroup({
+				type: DetailsActionType.SET_DEFAULT_SCHEDULED_PROCESS,
+				defaultScheduledProcess: {
+					id: props.processData.processById.id,
+					name: props.processData.processById.name as string,
+					processIcon: props.processData.processById.processIcon as string,
+				},
+			} as SetDefaultScheduledProcessAction);
+		}
+	}, [props.drawerOpen, props.processData]);
+
+	return (
+		<Drawer
+			open={props.drawerOpen !== null}
+			onClose={() => handleClose(true)}
+			anchor="right"
+		>
+			<Box sx={styles.main}>
+				{(props.drawerOpen?.group || props.drawerOpen?.addMode) && (
+					<ScheduleDrawerGroup
+						drawerOpen={props.drawerOpen}
+						detailsState={detailsGroup}
+						dispatchDetails={dispatchDetailsGroup}
+						edited={edited}
+						setEdited={setEdited}
+						handleClose={handleClose}
+						handleSave={props.handleSave}
+					/>
+				)}
+				{props.drawerOpen &&
+					!props.drawerOpen.group &&
+					!props.drawerOpen.addMode && (
+						<ScheduleDrawerLegacy
+							drawerOpen={props.drawerOpen}
+							details={detailsLegacy}
+							setDetails={setDetailsLegacy}
+							edited={edited}
+							setEdited={setEdited}
+							handleClose={handleClose}
+						/>
+					)}
+			</Box>
+		</Drawer>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			maxWidth: `100vw`,
+			minWidth: `min(${theme.spacing(70)}, 100vw)`,
+		},
+	};
+};

package/src/components/scheduler/schedule-drawer/sortable-integration-row.tsx

@@ -0,0 +1,130 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import {
+	StyledIconButton,
+	StyledTableCell,
+	StyledTableRow,
+} from "@evenicanpm/admin-integrate/components/data-table/table-row";
+import { ScheduleIntegrationIcon } from "@evenicanpm/admin-integrate/components/scheduler";
+import { DeleteOutline, DragIndicator } from "@mui/icons-material";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import {
+	Box,
+	IconButton,
+	Stack,
+	type TableCellProps,
+	Typography,
+} from "@mui/material";
+import type { Process } from "./schedule-details-integrations";
+
+interface Props {
+	item: Process;
+	processes: Process[];
+	heading: Head[];
+	handleDeleteIntegration: (item: Process) => void;
+	handleClickAddIntegration: (item: Process) => void;
+	readOnly?: boolean;
+	nonScheduledMode?: boolean;
+}
+
+export default function SortableIntegrationRow(props: Readonly<Props>) {
+	const styles = getStyles();
+
+	const { attributes, listeners, setNodeRef, transform, transition } =
+		useSortable({ id: props.item.id });
+
+	const transformStyles = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+	};
+
+	const handleClickDelete = () => {
+		if (!props.readOnly) {
+			props.handleDeleteIntegration(props.item);
+		}
+	};
+
+	const handleClickAdd = () => {
+		if (!props.readOnly) {
+			props.handleClickAddIntegration(props.item);
+		}
+	};
+
+	const isInProcesses = props.processes
+		? props.processes.some((process) => process.id === props.item.id)
+		: false;
+
+	const listenersProps = props.readOnly ? {} : listeners;
+
+	return (
+		<StyledTableRow
+			ref={setNodeRef}
+			sx={{ ...transformStyles, ...styles.row }}
+			{...attributes}
+		>
+			{props.nonScheduledMode ? null : (
+				<StyledTableCell
+					align={props.heading[0].align as TableCellProps["align"]}
+					width={props.heading[0].width}
+					sx={{ padding: 0 }}
+				>
+					<IconButton {...listenersProps} disableRipple>
+						<DragIndicator />
+					</IconButton>
+				</StyledTableCell>
+			)}
+			<StyledTableCell
+				align={
+					props.heading[props.nonScheduledMode ? 0 : 1]
+						.align as TableCellProps["align"]
+				}
+				width={props.heading[props.nonScheduledMode ? 0 : 1].width}
+			>
+				<Stack spacing={1} direction="row">
+					<Box display="flex" justifyContent="flex-end" alignItems="center">
+						<ScheduleIntegrationIcon
+							processIcon={props.item.processIcon || "999"}
+						/>
+					</Box>
+					<Box display="flex" justifyContent="flex-end" alignItems="center">
+						<Typography variant="caption">{props.item.name}</Typography>
+					</Box>
+				</Stack>
+			</StyledTableCell>
+			<StyledTableCell
+				align={
+					props.heading[props.nonScheduledMode ? 1 : 2]
+						.align as TableCellProps["align"]
+				}
+				width={props.heading[props.nonScheduledMode ? 1 : 2].width}
+			>
+				{props.nonScheduledMode ? (
+					<StyledIconButton
+						onClick={handleClickAdd}
+						disabled={props.readOnly || isInProcesses}
+					>
+						<AddCircleOutlineIcon
+							color={props.readOnly || isInProcesses ? "disabled" : "info"}
+						/>
+					</StyledIconButton>
+				) : (
+					<StyledIconButton
+						onClick={handleClickDelete}
+						disabled={props.readOnly}
+					>
+						<DeleteOutline color={props.readOnly ? "disabled" : "error"} />
+					</StyledIconButton>
+				)}
+			</StyledTableCell>
+		</StyledTableRow>
+	);
+}
+
+const getStyles = () => {
+	return {
+		row: {
+			backgroundColor: "white",
+		},
+	};
+};

package/src/components/scheduler/schedule-filter.ts

@@ -1,4 +1,4 @@
-import {
+import type {
 	Filters,
 	MultiSelectFilter,
 } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";

package/src/components/scheduler/schedule-icon.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from "react";
+import { Block, CalendarToday, ReportGmailerrorred } from "@mui/icons-material";
+import { Box, Popover, type Theme, Typography, useTheme } from "@mui/material";
 import { useTranslations } from "next-intl";
-
-import { Theme, useTheme } from "@mui/material";
-import { Box, Popover, Typography } from "@mui/material";
-import { CalendarToday, Block, ReportGmailerrorred } from "@mui/icons-material";
+import type React from "react";
+import { useState } from "react";
 
 interface Props {
 	isLegacy?: boolean;
@@ -17,7 +16,7 @@ const ScheduleIcon: React.FC<Props> = (props: Props) => {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
-	const iconMap: { [key: string]: any } = {
+	const iconMap: { [key: string]: React.ReactNode } = {
 		enabled: <CalendarToday color="success" />,
 		disabled: <Block sx={{ color: "grey.600" }} />,
 		legacy: <ReportGmailerrorred color="error" />,

package/src/components/scheduler/schedule-integration-icon.tsx

@@ -0,0 +1,31 @@
+import CodeIcon from "@mui/icons-material/Code";
+import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
+import EmailIcon from "@mui/icons-material/Email";
+import IosShareIcon from "@mui/icons-material/IosShare";
+import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+import StorageIcon from "@mui/icons-material/Storage";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import type { SxProps } from "@mui/material";
+import { purple } from "@mui/material/colors";
+
+interface Props {
+	processIcon: string;
+	sx?: SxProps;
+}
+
+const ScheduleIntegrationIcon: React.FC<Props> = (props: Props) => {
+	const color = purple[500];
+	const statusIconMap: { [key: string]: React.ReactNode } = {
+		DB: <StorageIcon color="success" />,
+		Webhook: <ElectricBoltIcon color="error" />,
+		Restful: <CodeIcon color="info" />,
+		Table: <TableChartIcon sx={{ color: color }} />,
+		Email: <EmailIcon color="warning" />,
+		Export: <IosShareIcon color="primary" />,
+		noIcon: <QuestionMarkIcon color="info" />,
+	};
+
+	return statusIconMap[props.processIcon] || statusIconMap.noIcon;
+};
+
+export default ScheduleIntegrationIcon;

package/src/components/templates/index.ts

@@ -0,0 +1 @@
+export { default as Wizard } from "./wizard";