@evenicanpm/admin-integrate 1.2.2 → 1.3.0

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

@@ -1,38 +1,43 @@
-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 type { ProcessScheduleGroupDetailsUpdate } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	DateTimePopover,
+	EditedTypography,
+} from "@evenicanpm/admin-integrate/components/core";
+import {
+	DaySelector,
+	type IsDay,
+} from "@evenicanpm/admin-integrate/components/scheduler";
+import { InfoOutlined } from "@mui/icons-material";
 import {
 	Box,
+	MenuItem,
+	Select,
+	type SelectChangeEvent,
 	Stack,
-	Typography,
 	Switch,
 	TextField,
-	Select,
-	MenuItem,
-	SelectChangeEvent,
+	type Theme,
+	Typography,
+	useTheme,
 } 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 { useTranslations } from "next-intl";
+import { useState } from "react";
 import {
-	DateTimePopover,
-	EditedTypography,
-} from "@evenicanpm/admin-integrate/components/core";
-
-// Types
-import { Edited } from "./edited";
-import { IsDay } from "@evenicanpm/admin-integrate/components/scheduler";
+	type DetailsAction,
+	DetailsActionType,
+	type EditDaysAction,
+	type EditRecurrenceAction,
+	type EditStartDateAction,
+	type ErrorsState,
+	type SetErrorsAction,
+} from "./details-reducer";
+import type { Edited } from "./edited";
 
 interface Props {
 	details: ProcessScheduleGroupDetailsUpdate;
-	setDetails: (newDetails: ProcessScheduleGroupDetailsUpdate) => void;
+	errors?: ErrorsState;
+	dispatchDetails?: (value: DetailsAction) => void;
 	edited: Edited;
 	setEdited: (newEdited: Edited) => void;
 	readOnly?: boolean;
@@ -44,13 +49,6 @@ export default function ScheduleDetailsMain(props: Props) {
 	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);
 
@@ -63,89 +61,128 @@ export default function ScheduleDetailsMain(props: Props) {
 	};
 
 	const handleEnabledChange = () => {
-		props.setDetails({
-			...props.details,
-			isDisabled: !props.details.isDisabled,
-		});
-		if (!props.edited.enabled) {
-			props.setEdited({
-				...props.edited,
-				enabled: true,
-			});
+		if (props.dispatchDetails) {
+			props.dispatchDetails({ type: DetailsActionType.TOGGLE_ENABLED });
+
+			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,
-			});
+		if (props.dispatchDetails) {
+			const action: EditDaysAction = {
+				type: DetailsActionType.EDIT_DAYS,
+				isDay: newDays,
+			};
+			props.dispatchDetails(action);
+
+			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,
-					});
+		if (props.dispatchDetails) {
+			const setErrorAction: SetErrorsAction = {
+				type: DetailsActionType.SET_ERRORS,
+				errors: { startDate: true },
+			};
+
+			if (newStartDate) {
+				try {
+					const date = new Date(newStartDate);
+					const dateAction: EditStartDateAction = {
+						type: DetailsActionType.EDIT_START_DATE,
+						startDate: date.toISOString(),
+					};
+					props.dispatchDetails(dateAction);
+
+					const clearErrorAction: SetErrorsAction = {
+						type: DetailsActionType.SET_ERRORS,
+						errors: { startDate: false },
+					};
+					props.dispatchDetails(clearErrorAction);
+
+					if (!props.edited.startDate) {
+						props.setEdited({
+							...props.edited,
+							startDate: true,
+						});
+					}
+				} catch {
+					props.dispatchDetails(setErrorAction);
 				}
-			} catch {
-				setDateError(t("invalidDate"));
+			} else {
+				props.dispatchDetails(setErrorAction);
 			}
-		} else {
-			setDateError(t("invalidDate"));
 		}
 	};
 
 	const handleStartDateError = (newError: string | null) => {
-		setDateError(newError ? t("invalidDate") : null);
+		if (newError && props.dispatchDetails) {
+			const action: SetErrorsAction = {
+				type: DetailsActionType.SET_ERRORS,
+				errors: { startDate: true },
+			};
+			props.dispatchDetails(action);
+		}
 	};
 
 	const handleIntervalChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-		setInterval(event.target.value);
-		const newInterval = Number(event.target.value);
+		if (props.dispatchDetails) {
+			const newInterval = Number(event.target.value);
 
-		if (!isNaN(newInterval)) {
-			props.setDetails({
-				...props.details,
-				interval: newInterval,
-			});
+			if (!Number.isNaN(newInterval) && newInterval > 0) {
+				const intervalAction: EditRecurrenceAction = {
+					type: DetailsActionType.EDIT_RECURRENCE,
+					interval: newInterval,
+				};
+				props.dispatchDetails(intervalAction);
+
+				const clearErrorAction: SetErrorsAction = {
+					type: DetailsActionType.SET_ERRORS,
+					errors: { interval: false },
+				};
+				props.dispatchDetails(clearErrorAction);
+
+				if (!props.edited.recurrence) {
+					props.setEdited({
+						...props.edited,
+						recurrence: true,
+					});
+				}
+			} else {
+				const setErrorAction: SetErrorsAction = {
+					type: DetailsActionType.SET_ERRORS,
+					errors: { interval: true },
+				};
+				props.dispatchDetails(setErrorAction);
+			}
+		}
+	};
+
+	const handleIntervalUnitChange = (event: SelectChangeEvent) => {
+		if (props.dispatchDetails) {
+			const action: EditRecurrenceAction = {
+				type: DetailsActionType.EDIT_RECURRENCE,
+				intervalUnitId: event.target.value,
+			};
+			props.dispatchDetails(action);
 			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,
-			});
 		}
 	};
 
@@ -156,13 +193,13 @@ export default function ScheduleDetailsMain(props: Props) {
 				<Box>
 					<Stack direction="row" spacing={1} alignItems="flex-end">
 						<Typography variant="body1">
-							{props.details.isDisabled ? t("disabled") : t("enabled")}
+							{props.details?.isDisabled ? t("disabled") : t("enabled")}
 						</Typography>
 						<EditedTypography edited={props.edited.enabled} />
 					</Stack>
 					<Switch
 						color="info"
-						checked={!props.details.isDisabled}
+						checked={!props.details?.isDisabled}
 						onChange={handleEnabledChange}
 						disabled={props.readOnly}
 					/>
@@ -201,19 +238,19 @@ export default function ScheduleDetailsMain(props: Props) {
 					</Stack>
 					<DateTimePicker
 						sx={styles.startDatePicker}
-						value={props.details.startDate}
+						value={props.details?.startDate}
 						onChange={handleStartDateChange}
 						onError={handleStartDateError}
 						views={["year", "month", "day", "hours", "minutes", "seconds"]}
 						slotProps={{
 							textField: {
-								helperText: dateError || "",
+								helperText: props.errors?.startDate ? t("invalidDate") : "",
 							},
 						}}
 						disabled={props.readOnly}
 					/>
 					<DateTimePopover
-						dateIsoString={props.details.startDate}
+						dateIsoString={props.details?.startDate}
 						sx={{ pointerEvents: "none" }}
 						open={open}
 						anchorEl={anchorEl}
@@ -238,10 +275,10 @@ export default function ScheduleDetailsMain(props: Props) {
 					</Stack>
 					<Stack direction="row" spacing={1} alignItems="flex-start">
 						<TextField
-							value={interval}
+							value={props.details?.interval as number}
 							onChange={handleIntervalChange}
-							error={intervalError !== null}
-							helperText={intervalError || ""}
+							error={props.errors?.interval}
+							helperText={props.errors?.interval ? t("invalidInterval") : ""}
 							slotProps={{
 								htmlInput: {
 									sx: {
@@ -253,7 +290,7 @@ export default function ScheduleDetailsMain(props: Props) {
 							disabled={props.readOnly}
 						/>
 						<Select
-							value={props.details.intervalUnitId || "1"}
+							value={props.details?.intervalUnitId as string}
 							onChange={handleIntervalUnitChange}
 							sx={styles.recurrenceUnit}
 							disabled={props.readOnly}

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

@@ -0,0 +1,94 @@
+import type { ProcessScheduleGroupDetailsUpdate } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	EditedTypography,
+	TitleEdit,
+} from "@evenicanpm/admin-integrate/components/core";
+import { ScheduleIcon } from "@evenicanpm/admin-integrate/components/scheduler";
+import { Box, Stack, type Theme, Typography, useTheme } from "@mui/material";
+import { useTranslations } from "next-intl";
+import {
+	type DetailsAction,
+	DetailsActionType,
+	type EditNameAction,
+	type ErrorsState,
+	type SetErrorsAction,
+} from "./details-reducer";
+import type { Edited } from "./edited";
+
+interface Props {
+	details: ProcessScheduleGroupDetailsUpdate;
+	errors?: ErrorsState;
+	dispatchDetails?: (value: DetailsAction) => void;
+	edited: Edited;
+	setEdited: (newEdited: Edited) => void;
+	readOnly?: boolean;
+}
+
+export default function ScheduleDetailsName(props: Props) {
+	const t = useTranslations("Integrate.Scheduler");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const onConfirm = (input: string) => {
+		if (props.dispatchDetails && input !== props.details?.name) {
+			const nameAction: EditNameAction = {
+				type: DetailsActionType.EDIT_NAME,
+				name: input,
+			};
+			props.dispatchDetails(nameAction);
+
+			const clearErrorAction: SetErrorsAction = {
+				type: DetailsActionType.SET_ERRORS,
+				errors: { name: false },
+			};
+			props.dispatchDetails(clearErrorAction);
+
+			if (!props.edited.name) {
+				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 || t("untitled")}
+					onConfirm={onConfirm}
+					readOnly={props.readOnly}
+					fullWidth
+				/>
+			</Stack>
+			<Typography
+				variant="caption"
+				color="error"
+				display={props.errors?.name ? "block" : "none"}
+			>
+				{t("emptyName")}
+			</Typography>
+			<EditedTypography edited={props.edited.name} />
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			marginBottom: theme.spacing(2),
+		},
+		stack: {
+			minHeight: theme.spacing(7),
+		},
+	};
+};

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

@@ -1,6 +1,5 @@
 // MUI
-import { Theme, useTheme } from "@mui/material";
-import { Skeleton, Stack, Box } from "@mui/material";
+import { Box, Skeleton, Stack, type Theme, useTheme } from "@mui/material";
 
 export default function ScheduleDetailsSkeleton() {
 	const theme = useTheme();

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

@@ -1,24 +1,20 @@
-// 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 type { ProcessScheduleGroupDetailsUpdate } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { Box, type Theme, useTheme } from "@mui/material";
+import type { DetailsAction, ErrorsState } from "./details-reducer";
+import type { Edited } from "./edited";
 import ScheduleDetailsMain from "./schedule-details-main";
-
-// Types
-import { Edited } from "./edited";
+import ScheduleDetailsName from "./schedule-details-name";
+import type { DrawerOpen } from "./schedule-drawer";
 
 interface Props {
 	id: string;
 	details: ProcessScheduleGroupDetailsUpdate;
-	setDetails: (newDetails: ProcessScheduleGroupDetailsUpdate) => void;
+	errors?: ErrorsState;
+	dispatchDetails?: (value: DetailsAction) => void;
 	edited: Edited;
 	setEdited: (newEdited: Edited) => void;
 	readOnly?: boolean;
+	drawerOpen?: DrawerOpen;
 }
 
 export default function ScheduleDetails(props: Props) {

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

@@ -0,0 +1,218 @@
+import type {
+	GetProcessScheduleGroupDetailsQuery,
+	ProcessScheduleGroupDetailsCreate,
+	ProcessScheduleGroupDetailsUpdate,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	createProcessScheduleGroupDetails,
+	updateProcessScheduleGroupDetails,
+} from "@evenicanpm/admin-integrate/api/scheduler/mutation";
+import { getProcessScheduleGroupDetails } from "@evenicanpm/admin-integrate/api/scheduler/queries";
+import { DrawerButtons } from "@evenicanpm/admin-integrate/components/core";
+import { Add, Save } from "@mui/icons-material";
+import { Button, Divider, type Theme, useTheme } from "@mui/material";
+import { useEffect } from "react";
+import {
+	type DetailsAction,
+	DetailsActionType,
+	type DetailsState,
+	type InitAction,
+} from "./details-reducer";
+import type { Edited } from "./edited";
+import ScheduleDetails from "./schedule-details";
+import ScheduleDetailsIntegrations from "./schedule-details-integrations";
+import ScheduleDetailsSkeleton from "./schedule-details-skeleton";
+import type { DrawerOpen } from "./schedule-drawer";
+
+interface Props {
+	drawerOpen: DrawerOpen;
+	detailsState: DetailsState;
+	dispatchDetails: (value: DetailsAction) => void;
+	edited: Edited;
+	setEdited: (newEdited: Edited) => void;
+	handleClose: (isUpdate?: boolean) => void;
+	handleSave?: (loading: boolean) => void;
+}
+
+export default function ScheduleDrawerGroup(props: Props) {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const { data, refetch, isRefetching } =
+		getProcessScheduleGroupDetails.useData({
+			id: props.drawerOpen.id,
+		});
+
+	useEffect(() => {
+		if (data && !props.drawerOpen.addMode) {
+			const typedData = data as GetProcessScheduleGroupDetailsQuery;
+			if (typedData.processScheduleGroupDetails) {
+				const fetchedDetails = typedData.processScheduleGroupDetails;
+				const processes = fetchedDetails.processSchedule?.processes || [];
+				const newDetails = {
+					...fetchedDetails,
+					processes,
+				};
+				delete newDetails.processSchedule;
+
+				const action: InitAction = {
+					type: DetailsActionType.INIT,
+					details: newDetails as ProcessScheduleGroupDetailsUpdate,
+				};
+				props.dispatchDetails(action);
+			}
+		}
+	}, [data]);
+
+	useEffect(() => {
+		refetch();
+	}, [props.drawerOpen]);
+
+	useEffect(() => {
+		if (
+			props.drawerOpen.addMode &&
+			props.detailsState &&
+			props.detailsState.details === null
+		) {
+			props.dispatchDetails({ type: DetailsActionType.INIT_BLANK });
+		}
+	}, []);
+
+	const updateMutation = updateProcessScheduleGroupDetails();
+	const createMutation = createProcessScheduleGroupDetails();
+
+	const handleSave = () => {
+		if (props.detailsState?.details?.processes) {
+			// Look into moving sort updates into reducer action. State update using dispatch and api call for update should be sync calls
+			const input = {
+				...props.detailsState.details,
+				processes: props.detailsState.details.processes.map(
+					({ id }, index) => ({
+						id,
+						sort: index + 1,
+					}),
+				),
+			};
+
+			if (props.handleSave) {
+				props.handleSave(true);
+			}
+
+			updateMutation.mutate(
+				{
+					input: input as ProcessScheduleGroupDetailsUpdate,
+				},
+				{
+					onSuccess: async () => {
+						props.handleClose(false);
+						if (props.handleSave) {
+							props.handleSave(false);
+						}
+					},
+					onError: (error) => {
+						console.error("Update failed:", error);
+						if (props.handleSave) {
+							props.handleSave(false);
+						}
+					},
+				},
+			);
+		}
+	};
+
+	const handleAdd = () => {
+		if (props.detailsState?.details?.processes) {
+			// Look into moving sort updates into reducer action. State update using dispatch and api call for update should be sync calls
+			const input = {
+				...props.detailsState.details,
+				processes: props.detailsState.details.processes.map(
+					({ id }, index) => ({
+						id,
+						sort: index + 1,
+					}),
+				),
+			};
+
+			createMutation.mutate(
+				{
+					input: input as ProcessScheduleGroupDetailsCreate,
+				},
+				{
+					onSuccess: async () => {
+						props.handleClose(false);
+					},
+					onError: (error) => {
+						console.error("Create failed:", error);
+					},
+				},
+			);
+		}
+	};
+
+	const isEdited = Object.values(props.edited).some((value) => value);
+	const isError = props.detailsState?.errors
+		? Object.values(props.detailsState.errors).some((value) => value)
+		: false;
+
+	return (
+		<>
+			<DrawerButtons handleClose={() => props.handleClose(true)}>
+				{!props.drawerOpen?.addMode && (
+					<Button
+						variant="contained"
+						color="info"
+						onClick={handleSave}
+						disabled={!isEdited || isError}
+						sx={{ padding: theme.spacing(0.6, 1.3) }}
+					>
+						<Save />
+					</Button>
+				)}
+				{props.drawerOpen?.addMode && (
+					<Button
+						variant="contained"
+						color="info"
+						onClick={handleAdd}
+						disabled={isError}
+						sx={{ padding: theme.spacing(0.6, 1.3) }}
+					>
+						<Add />
+					</Button>
+				)}
+			</DrawerButtons>
+			{props.detailsState?.details && !isRefetching ? (
+				<>
+					<ScheduleDetails
+						id={props.drawerOpen.id}
+						details={props.detailsState.details}
+						errors={props.detailsState.errors}
+						dispatchDetails={props.dispatchDetails}
+						edited={props.edited}
+						setEdited={props.setEdited}
+						drawerOpen={props.drawerOpen}
+					/>
+					<Divider sx={styles.divider} />
+					<ScheduleDetailsIntegrations
+						data={data as GetProcessScheduleGroupDetailsQuery}
+						details={props.detailsState.details}
+						errors={props.detailsState.errors}
+						dispatchDetails={props.dispatchDetails}
+						edited={props.edited}
+						setEdited={props.setEdited}
+						defaultScheduledProcess={props.detailsState.defaultScheduledProcess}
+					/>
+				</>
+			) : (
+				<ScheduleDetailsSkeleton />
+			)}
+		</>
+	);
+}
+
+const getStyles = (_theme: Theme) => {
+	return {
+		divider: {
+			borderColor: "grey.400",
+		},
+	};
+};