@evenicanpm/admin-integrate 1.1.0 → 1.2.2

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",
+		},
+	};
+};

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

@@ -0,0 +1,94 @@
+import { useEffect } from "react";
+
+// Api
+import { getProcessScheduleById } from "@evenicanpm/admin-integrate/api/scheduler/queries";
+import { GetProcessScheduleByIdQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// 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";
+import { ProcessScheduleById } from "./schedule-drawer";
+
+interface Props {
+	drawerOpen: DrawerOpen;
+	details: ProcessScheduleById | null;
+	setDetails: (newDetails: ProcessScheduleById | null) => void;
+	edited: Edited;
+	setEdited: (newEdited: Edited) => void;
+	handleClose: () => void;
+}
+
+export default function ScheduleDrawerLegacy(props: Props) {
+	const styles = getStyles();
+
+	const { data } = getProcessScheduleById.useData({
+		id: props.drawerOpen.id,
+	});
+
+	useEffect(() => {
+		if (data) {
+			const typedData = data as GetProcessScheduleByIdQuery;
+			if (typedData.processScheduleById) {
+				const fetchedDetails = typedData.processScheduleById;
+
+				props.setDetails(fetchedDetails as ProcessScheduleById);
+			} else {
+				props.setDetails(null);
+			}
+		}
+	}, [data]);
+
+	const handleSave = () => {};
+
+	return (
+		<>
+			<ScheduleDrawerButtons
+				handleClose={props.handleClose}
+				handleSave={handleSave}
+				edited={props.edited}
+				readOnly
+			/>
+			<Divider sx={styles.divider} />
+			{props.details ? (
+				<>
+					<ScheduleDetails
+						id={props.drawerOpen.id}
+						details={props.details}
+						setDetails={props.setDetails}
+						edited={props.edited}
+						setEdited={props.setEdited}
+						readOnly
+					/>
+					<Divider sx={styles.divider} />
+					<ScheduleDetailsIntegrations
+						data={data as GetProcessScheduleByIdQuery}
+						details={props.details}
+						setDetails={props.setDetails}
+						edited={props.edited}
+						setEdited={props.setEdited}
+						readOnly
+					/>
+				</>
+			) : (
+				<ScheduleDetailsSkeleton />
+			)}
+		</>
+	);
+}
+
+const getStyles = () => {
+	return {
+		divider: {
+			borderColor: "grey.400",
+		},
+	};
+};

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

@@ -0,0 +1,101 @@
+import { useTranslations } from "next-intl";
+import React, { useState } from "react";
+
+// API
+import {
+	ProcessScheduleGroupDetailsUpdate,
+	GetProcessScheduleByIdQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Drawer, Box } from "@mui/material";
+
+// Local components
+import ScheduleDrawerGroup from "./schedule-drawer-group";
+import ScheduleDrawerLegacy from "./schedule-drawer-legacy";
+
+// Types
+import { Edited, initialEdited } from "./edited";
+import { DrawerOpen } from "../scheduler";
+
+export type ProcessScheduleById =
+	GetProcessScheduleByIdQuery["processScheduleById"];
+
+interface Props {
+	drawerOpen: DrawerOpen | null;
+	setDrawerOpen: (drawerOpen: DrawerOpen | null) => void;
+}
+
+export default function ScheduleDrawer(props: Props) {
+	const t = useTranslations("Integrate.Scheduler");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [edited, setEdited] = useState<Edited>(initialEdited);
+
+	const [detailsGroup, setDetailsGroup] =
+		useState<ProcessScheduleGroupDetailsUpdate | null>(null);
+	const [detailsLegacy, setDetailsLegacy] =
+		useState<ProcessScheduleById | null>(null);
+
+	const handleClose = () => {
+		const isEdited = Object.values(edited).some((value) => value);
+		if (isEdited) {
+			const confirmClose = confirm(t("unsavedChanges"));
+			if (!confirmClose) return;
+		}
+		setDetailsGroup(null);
+		setDetailsLegacy(null);
+		setEdited(initialEdited);
+		props.setDrawerOpen(null);
+	};
+
+	return (
+		<Drawer
+			open={props.drawerOpen !== null}
+			onClose={handleClose}
+			anchor="right"
+		>
+			<Box sx={styles.main}>
+				{props.drawerOpen && props.drawerOpen.group && (
+					<ScheduleDrawerGroup
+						drawerOpen={props.drawerOpen}
+						details={detailsGroup}
+						setDetails={setDetailsGroup}
+						edited={edited}
+						setEdited={setEdited}
+						handleClose={handleClose}
+					/>
+				)}
+				{props.drawerOpen && !props.drawerOpen.group && (
+					<ScheduleDrawerLegacy
+						drawerOpen={props.drawerOpen}
+						details={detailsLegacy}
+						setDetails={setDetailsLegacy}
+						edited={edited}
+						setEdited={setEdited}
+						handleClose={handleClose}
+					/>
+				)}
+			</Box>
+		</Drawer>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			[theme.breakpoints.down("sm")]: {
+				width: theme.spacing(35),
+			},
+			[theme.breakpoints.up("sm")]: {
+				width: theme.spacing(55),
+			},
+			[theme.breakpoints.up("xl")]: {
+				width: theme.spacing(75),
+			},
+		},
+	};
+};

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

@@ -0,0 +1,93 @@
+import React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+// Mui
+import { Box, Stack, IconButton, Typography } from "@mui/material";
+import { DragIndicator, DeleteOutline } from "@mui/icons-material";
+
+// Custom components
+import {
+	StyledTableCell,
+	StyledTableRow,
+	StyledIconButton,
+} from "@evenicanpm/admin-integrate/components/data-table/table-row";
+
+// Types
+import { Process } from "./schedule-details-integrations";
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { TableCellProps } from "@mui/material";
+
+interface Props {
+	item: Process;
+	heading: Head[];
+	handleDeleteIntegration: (item: Process) => void;
+	readOnly?: boolean;
+}
+
+export default function SortableIntegrationRow(props: 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 listenersProps = props.readOnly ? {} : listeners;
+
+	return (
+		<StyledTableRow
+			ref={setNodeRef}
+			sx={{ ...transformStyles, ...styles.row }}
+			{...attributes}
+		>
+			<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[1].align as TableCellProps["align"]}
+				width={props.heading[1].width}
+			>
+				<Stack spacing={1} direction="row">
+					<Box display="flex" justifyContent="flex-end" alignItems="center">
+						{/* process icon */}
+					</Box>
+					<Box display="flex" justifyContent="flex-end" alignItems="center">
+						<Typography variant="caption">{props.item.name}</Typography>
+					</Box>
+				</Stack>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[2].align as TableCellProps["align"]}
+				width={props.heading[2].width}
+			>
+				<StyledIconButton onClick={handleClickDelete} disabled={props.readOnly}>
+					<DeleteOutline color={props.readOnly ? "disabled" : "error"} />
+				</StyledIconButton>
+			</StyledTableCell>
+		</StyledTableRow>
+	);
+}
+
+const getStyles = () => {
+	return {
+		row: {
+			backgroundColor: "white",
+		},
+	};
+};