@evenicanpm/admin-integrate 1.1.0 → 1.2.0

package/src/pages/scheduler/schedule-drawer/schedule-details-main.tsx

@@ -0,0 +1,292 @@
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+// Api
+import { ProcessScheduleGroupDetailsUpdate } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import {
+	Box,
+	Stack,
+	Typography,
+	Switch,
+	TextField,
+	Select,
+	MenuItem,
+	SelectChangeEvent,
+} from "@mui/material";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import { InfoOutlined } from "@mui/icons-material";
+
+// Custom components
+import { DaySelector } from "@evenicanpm/admin-integrate/components/scheduler";
+import {
+	DateTimePopover,
+	EditedTypography,
+} from "@evenicanpm/admin-integrate/components/core";
+
+// Types
+import { Edited } from "./edited";
+import { IsDay } from "@evenicanpm/admin-integrate/components/scheduler";
+
+interface Props {
+	details: ProcessScheduleGroupDetailsUpdate;
+	setDetails: (newDetails: ProcessScheduleGroupDetailsUpdate) => void;
+	edited: Edited;
+	setEdited: (newEdited: Edited) => void;
+	readOnly?: boolean;
+}
+
+export default function ScheduleDetailsMain(props: Props) {
+	const t = useTranslations("Integrate.Scheduler");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [dateError, setDateError] = useState<string | null>(null);
+
+	const [interval, setInterval] = useState<string>(
+		props.details.interval?.toString() || "1",
+	);
+	const [intervalError, setIntervalError] = useState<string | null>(null);
+
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+	const open = Boolean(anchorEl);
+
+	const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+
+	const handleEnabledChange = () => {
+		props.setDetails({
+			...props.details,
+			isDisabled: !props.details.isDisabled,
+		});
+		if (!props.edited.enabled) {
+			props.setEdited({
+				...props.edited,
+				enabled: true,
+			});
+		}
+	};
+
+	const handleDayChange = (newDays: IsDay) => {
+		props.setDetails({
+			...props.details,
+			...newDays,
+		});
+		if (!props.edited.days) {
+			props.setEdited({
+				...props.edited,
+				days: true,
+			});
+		}
+	};
+
+	const handleStartDateChange = (newStartDate: string | null) => {
+		if (newStartDate) {
+			try {
+				const date = new Date(newStartDate);
+				props.setDetails({
+					...props.details,
+					startDate: date.toISOString(),
+				});
+				setDateError(null);
+				if (!props.edited.startDate) {
+					props.setEdited({
+						...props.edited,
+						startDate: true,
+					});
+				}
+			} catch {
+				setDateError(t("invalidDate"));
+			}
+		} else {
+			setDateError(t("invalidDate"));
+		}
+	};
+
+	const handleStartDateError = (newError: string | null) => {
+		setDateError(newError ? t("invalidDate") : null);
+	};
+
+	const handleIntervalChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setInterval(event.target.value);
+		const newInterval = Number(event.target.value);
+
+		if (!isNaN(newInterval)) {
+			props.setDetails({
+				...props.details,
+				interval: newInterval,
+			});
+			if (!props.edited.recurrence) {
+				props.setEdited({
+					...props.edited,
+					recurrence: true,
+				});
+			}
+			setIntervalError(null);
+		} else {
+			setIntervalError(t("invalidInterval"));
+		}
+	};
+
+	const handleIntervalUnitChange = (event: SelectChangeEvent) => {
+		props.setDetails({
+			...props.details,
+			intervalUnitId: event.target.value,
+		});
+		if (!props.edited.recurrence) {
+			props.setEdited({
+				...props.edited,
+				recurrence: true,
+			});
+		}
+	};
+
+	return (
+		<Box sx={styles.main}>
+			<Stack spacing={2}>
+				{/* Enabled/disabled switch */}
+				<Box>
+					<Stack direction="row" spacing={1} alignItems="flex-end">
+						<Typography variant="body1">
+							{props.details.isDisabled ? t("disabled") : t("enabled")}
+						</Typography>
+						<EditedTypography edited={props.edited.enabled} />
+					</Stack>
+					<Switch
+						color="info"
+						checked={!props.details.isDisabled}
+						onChange={handleEnabledChange}
+						disabled={props.readOnly}
+					/>
+				</Box>
+
+				{/* Day of the week selector */}
+				<Box>
+					<Stack direction="row" spacing={1} alignItems="flex-end">
+						<Typography variant="body1">{t("daysOfTheWeek")}</Typography>
+						<EditedTypography edited={props.edited.days} />
+					</Stack>
+					<DaySelector
+						days={props.details as IsDay}
+						setDays={handleDayChange}
+						disabled={props.readOnly}
+					/>
+				</Box>
+
+				{/* Start date */}
+				<Box>
+					<Stack direction="row" spacing={1} alignItems="flex-end">
+						<Typography variant="body1">{t("startDate")}</Typography>
+						<Box
+							onMouseEnter={handlePopoverOpen}
+							onMouseLeave={handlePopoverClose}
+							display="flex"
+							alignItems="flex-end"
+							sx={{
+								fontSize: theme.typography.h5.fontSize,
+								paddingBottom: theme.spacing(0.25),
+							}}
+						>
+							<InfoOutlined color="disabled" fontSize="inherit" />
+						</Box>
+						<EditedTypography edited={props.edited.startDate} />
+					</Stack>
+					<DateTimePicker
+						sx={styles.startDatePicker}
+						value={props.details.startDate}
+						onChange={handleStartDateChange}
+						onError={handleStartDateError}
+						views={["year", "month", "day", "hours", "minutes", "seconds"]}
+						slotProps={{
+							textField: {
+								helperText: dateError || "",
+							},
+						}}
+						disabled={props.readOnly}
+					/>
+					<DateTimePopover
+						dateIsoString={props.details.startDate}
+						sx={{ pointerEvents: "none" }}
+						open={open}
+						anchorEl={anchorEl}
+						anchorOrigin={{
+							vertical: "center",
+							horizontal: "right",
+						}}
+						transformOrigin={{
+							vertical: "center",
+							horizontal: "left",
+						}}
+						onClose={handlePopoverClose}
+						disableRestoreFocus
+					/>
+				</Box>
+
+				{/* Recurrence */}
+				<Box>
+					<Stack direction="row" spacing={1} alignItems="flex-end">
+						<Typography variant="body1">{t("recurrence")}</Typography>
+						<EditedTypography edited={props.edited.recurrence} />
+					</Stack>
+					<Stack direction="row" spacing={1} alignItems="flex-start">
+						<TextField
+							value={interval}
+							onChange={handleIntervalChange}
+							error={intervalError !== null}
+							helperText={intervalError || ""}
+							slotProps={{
+								htmlInput: {
+									sx: {
+										textAlign: "right",
+									},
+								},
+							}}
+							sx={styles.recurrenceInterval}
+							disabled={props.readOnly}
+						/>
+						<Select
+							value={props.details.intervalUnitId || "1"}
+							onChange={handleIntervalUnitChange}
+							sx={styles.recurrenceUnit}
+							disabled={props.readOnly}
+						>
+							<MenuItem value={"1"}>{t("minutes")}</MenuItem>
+							<MenuItem value={"2"}>{t("hours")}</MenuItem>
+						</Select>
+					</Stack>
+				</Box>
+			</Stack>
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			margin: theme.spacing(1, 0),
+		},
+		startDatePicker: {
+			width: "fit-content",
+		},
+		recurrenceInterval: {
+			maxWidth: theme.spacing(15),
+			"& .MuiInputBase-input": {
+				padding: theme.spacing(1),
+			},
+		},
+		recurrenceUnit: {
+			minWidth: theme.spacing(12),
+			"& .MuiSelect-select": {
+				padding: theme.spacing(1),
+			},
+		},
+	};
+};

package/src/pages/scheduler/schedule-drawer/schedule-details-name.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+
+// Api
+import { ProcessScheduleGroupDetailsUpdate } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Box, Stack } from "@mui/material";
+
+// Custom components
+import { ScheduleIcon } from "@evenicanpm/admin-integrate/components/scheduler";
+import {
+	TitleEdit,
+	EditedTypography,
+} from "@evenicanpm/admin-integrate/components/core";
+
+// Types
+import { Edited } from "./edited";
+
+interface Props {
+	details: ProcessScheduleGroupDetailsUpdate;
+	setDetails: (newDetails: ProcessScheduleGroupDetailsUpdate) => void;
+	edited: Edited;
+	setEdited: (newEdited: Edited) => void;
+	readOnly?: boolean;
+}
+
+export default function ScheduleDetailsName(props: Props) {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const onConfirm = (input: string) => {
+		if (input !== props.details.name) {
+			props.setDetails({
+				...props.details,
+				name: input,
+				code: input.replaceAll(" ", "_").toLowerCase(),
+			});
+			props.setEdited({
+				...props.edited,
+				name: true,
+			});
+		}
+	};
+
+	return (
+		<Box sx={styles.main}>
+			<Stack direction="row" spacing={1} sx={styles.stack}>
+				<Box display="flex" justifyContent="center" alignItems="center">
+					<ScheduleIcon
+						isDisabled={props.details.isDisabled || false}
+						isLegacy={props.readOnly || false}
+						enablePopover
+					/>
+				</Box>
+				<TitleEdit
+					title={props.details.name || ""}
+					onConfirm={onConfirm}
+					readOnly={props.readOnly}
+					fullWidth
+				/>
+			</Stack>
+			<EditedTypography edited={props.edited.name} />
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			marginBottom: theme.spacing(2),
+		},
+		stack: {
+			minHeight: theme.spacing(7),
+		},
+	};
+};

package/src/pages/scheduler/schedule-drawer/schedule-details-skeleton.tsx

@@ -0,0 +1,64 @@
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Skeleton, Stack, Box } from "@mui/material";
+
+export default function ScheduleDetailsSkeleton() {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	return (
+		<Stack sx={styles.main} spacing={1}>
+			<Box
+				sx={{
+					paddingBottom: theme.spacing(3),
+				}}
+			>
+				<Skeleton variant="rectangular" height={theme.spacing(6)} />
+			</Box>
+
+			<Skeleton />
+			<Skeleton />
+
+			<Skeleton />
+			<Skeleton />
+
+			<Skeleton />
+			<Skeleton />
+
+			<Skeleton />
+			<Skeleton />
+
+			<Skeleton />
+			<Skeleton />
+
+			<Skeleton />
+			<Skeleton />
+
+			<Skeleton />
+			<Skeleton />
+
+			<Skeleton />
+			<Skeleton />
+
+			<Skeleton />
+			<Skeleton />
+
+			<Skeleton />
+			<Skeleton />
+
+			<Skeleton />
+			<Skeleton />
+
+			<Skeleton />
+			<Skeleton />
+		</Stack>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			margin: theme.spacing(2, 3),
+		},
+	};
+};

package/src/pages/scheduler/schedule-drawer/schedule-details.tsx

@@ -0,0 +1,42 @@
+// Api
+import { ProcessScheduleGroupDetailsUpdate } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Box } from "@mui/material";
+
+// Local components
+import ScheduleDetailsName from "./schedule-details-name";
+import ScheduleDetailsMain from "./schedule-details-main";
+
+// Types
+import { Edited } from "./edited";
+
+interface Props {
+	id: string;
+	details: ProcessScheduleGroupDetailsUpdate;
+	setDetails: (newDetails: ProcessScheduleGroupDetailsUpdate) => void;
+	edited: Edited;
+	setEdited: (newEdited: Edited) => void;
+	readOnly?: boolean;
+}
+
+export default function ScheduleDetails(props: Props) {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	return (
+		<Box sx={styles.main}>
+			<ScheduleDetailsName {...props} />
+			<ScheduleDetailsMain {...props} />
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			padding: theme.spacing(1, 3, 2),
+		},
+	};
+};

package/src/pages/scheduler/schedule-drawer/schedule-drawer-buttons.tsx

@@ -0,0 +1,72 @@
+import { useTranslations } from "next-intl";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Box, IconButton, Button, Stack } from "@mui/material";
+import {
+	KeyboardDoubleArrowRightOutlined,
+	Clear,
+	Save,
+} from "@mui/icons-material";
+
+// Custom components
+import { OutlinedIconButton } from "@evenicanpm/admin-integrate/components/button";
+
+// Types
+import { Edited } from "./edited";
+
+interface Props {
+	handleClose: () => void;
+	handleSave: () => void;
+	edited: Edited;
+	readOnly?: boolean;
+}
+
+export default function ScheduleDrawerButtons(props: Props) {
+	const t = useTranslations("Integrate.Scheduler");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const isEdited = Object.values(props.edited).some((value) => value);
+
+	return (
+		<Box sx={styles.buttons} display="flex" justifyContent="space-between">
+			<IconButton onClick={props.handleClose}>
+				<KeyboardDoubleArrowRightOutlined />
+			</IconButton>
+			<Stack spacing={1} direction="row">
+				{!props.readOnly && (
+					<Button
+						variant="contained"
+						color="info"
+						startIcon={<Save />}
+						onClick={props.handleSave}
+						disabled={!isEdited}
+					>
+						{t("save")}
+					</Button>
+				)}
+				<OutlinedIconButton onClick={props.handleClose} sx={styles.closeButton}>
+					<Clear />
+				</OutlinedIconButton>
+			</Stack>
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		buttons: {
+			padding: theme.spacing(2),
+			backgroundColor: "grey.100",
+		},
+		closeButton: {
+			backgroundColor: "error.main",
+			"&:hover": {
+				backgroundColor: "error.500",
+			},
+			color: "white",
+		},
+	};
+};

package/src/pages/scheduler/schedule-drawer/schedule-drawer-group.tsx

@@ -0,0 +1,103 @@
+import { useEffect } from "react";
+
+// Api
+import {
+	GetProcessScheduleGroupDetailsQuery,
+	ProcessScheduleGroupDetailsUpdate,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { getProcessScheduleGroupDetails } from "@evenicanpm/admin-integrate/api/scheduler/queries";
+
+// Mui
+import { Divider } from "@mui/material";
+
+// Local components
+import ScheduleDrawerButtons from "./schedule-drawer-buttons";
+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";
+
+interface Props {
+	drawerOpen: DrawerOpen;
+	details: ProcessScheduleGroupDetailsUpdate | null;
+	setDetails: (newDetails: ProcessScheduleGroupDetailsUpdate | null) => void;
+	edited: Edited;
+	setEdited: (newEdited: Edited) => void;
+	handleClose: () => void;
+}
+
+export default function ScheduleDrawerGroup(props: Props) {
+	const styles = getStyles();
+
+	const { data } = getProcessScheduleGroupDetails.useData({
+		id: props.drawerOpen.id,
+	});
+
+	useEffect(() => {
+		if (data) {
+			const typedData = data as GetProcessScheduleGroupDetailsQuery;
+			if (typedData.processScheduleGroupDetails) {
+				const fetchedDetails = typedData.processScheduleGroupDetails;
+				const processes = fetchedDetails.processSchedule?.processes || [];
+				const newDetails = {
+					...fetchedDetails,
+					processes:
+						processes.map((pr) => ({
+							id: pr?.id || "",
+							sort: pr?.sort || 0,
+						})) || [],
+				};
+				delete newDetails.processSchedule;
+
+				props.setDetails(newDetails as ProcessScheduleGroupDetailsUpdate);
+			} else {
+				props.setDetails(null);
+			}
+		}
+	}, [data]);
+
+	const handleSave = () => {};
+
+	return (
+		<>
+			<ScheduleDrawerButtons
+				handleClose={props.handleClose}
+				handleSave={handleSave}
+				edited={props.edited}
+			/>
+			<Divider sx={styles.divider} />
+			{props.details ? (
+				<>
+					<ScheduleDetails
+						id={props.drawerOpen.id}
+						details={props.details}
+						setDetails={props.setDetails}
+						edited={props.edited}
+						setEdited={props.setEdited}
+					/>
+					<Divider sx={styles.divider} />
+					<ScheduleDetailsIntegrations
+						data={data as GetProcessScheduleGroupDetailsQuery}
+						details={props.details}
+						setDetails={props.setDetails}
+						edited={props.edited}
+						setEdited={props.setEdited}
+					/>
+				</>
+			) : (
+				<ScheduleDetailsSkeleton />
+			)}
+		</>
+	);
+}
+
+const getStyles = () => {
+	return {
+		divider: {
+			borderColor: "grey.400",
+		},
+	};
+};