@evenicanpm/admin-integrate 1.1.0 → 1.2.0

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

package/src/pages/scheduler/scheduler.tsx

@@ -1,39 +1,115 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslations } from "next-intl";
 
+// API
+import { getScheduledProcesses } from "@evenicanpm/admin-integrate/api/scheduler/queries";
+import {
+	ScheduledProcessInput,
+	GetScheduledProcessesQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
 // MUI
-import { Theme, useTheme } from "@mui/material";
 import { Box } from "@mui/material";
 
 // Custom components
-import {
-  IntegrateBreadcrumbs,
-  Crumb,
-} from "@evenicanpm/admin-integrate/components/breadcrumbs";
+import { IntegrateBreadcrumbs } from "@evenicanpm/admin-integrate/components/breadcrumbs";
 
-export default function Scheduler() {
-  const t = useTranslations("Integrate");
-
-  const theme = useTheme();
-  const styles = getStyles(theme);
-
-  const breadcrumbs: Crumb[] = [
-    {
-      name: t("Header.dashboard"),
-      url: "/e4integrate",
-    },
-    {
-      name: t("Header.scheduler"),
-    },
-  ];
-
-  return (
-    <Box>
-      <IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
-    </Box>
-  );
-}
+// Local components
+import SchedulesList from "./schedules-list";
+import ScheduleDrawer from "./schedule-drawer";
+
+// Types
+import { Crumb } from "@evenicanpm/admin-integrate/components/breadcrumbs";
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 
-const getStyles = (theme: Theme) => {
-  return {};
+export type DrawerOpen = {
+	id: string;
+	group?: boolean;
 };
+
+export default function Scheduler() {
+	const t = useTranslations("Integrate");
+	const l = useTranslations("Integrate.Scheduler.ListHeader");
+
+	const breadcrumbs: Crumb[] = [
+		{
+			name: t("Header.dashboard"),
+			url: "/e4integrate",
+		},
+		{
+			name: t("Header.scheduler"),
+		},
+	];
+
+	const heading: Head[] = [
+		{
+			id: "name",
+			label: l("schedule"),
+			align: "left",
+			width: "20%",
+			sortable: true,
+		},
+		{
+			id: "daysOfTheWeek",
+			label: l("daysOfTheWeek"),
+			align: "center",
+			width: "20%",
+		},
+		{
+			id: "interval",
+			label: l("recurrence"),
+			align: "center",
+			width: "20%",
+		},
+		{
+			id: "startDate",
+			label: l("start"),
+			align: "center",
+			width: "15%",
+			sortable: true,
+		},
+		{
+			id: "modified",
+			label: l("lastModified"),
+			align: "center",
+			width: "15%",
+			sortable: true,
+		},
+		{
+			id: "view",
+			label: l("actions"),
+			align: "right",
+			width: "5%",
+		},
+	];
+
+	// id of clicked schedule if open OR null if closed
+	const [drawerOpen, setDrawerOpen] = useState<DrawerOpen | null>(null);
+
+	// TODO: initialize input based on url query params
+	const [input, setInput] = useState<ScheduledProcessInput>({
+		sort: "modified",
+		sortDesc: true,
+		top: 10,
+		skip: 0,
+	});
+
+	const { data, isLoading } = getScheduledProcesses.useData({
+		input: input,
+	});
+
+	return (
+		<Box>
+			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+			<SchedulesList
+				heading={heading}
+				data={data as GetScheduledProcessesQuery}
+				loading={isLoading}
+				input={input}
+				setInput={setInput}
+				setDrawerOpen={setDrawerOpen}
+			/>
+			<ScheduleDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
+		</Box>
+	);
+}

package/src/pages/scheduler/schedules-list/index.ts

@@ -0,0 +1 @@
+export { default } from "./schedules-list";

package/src/pages/scheduler/schedules-list/schedules-list-row.tsx

@@ -0,0 +1,235 @@
+import React, { useState } from "react";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
+import { RemoveRedEye } from "@mui/icons-material";
+import { SxProps } from "@mui/material";
+
+// Custom components
+import {
+	StyledTableCell,
+	StyledTableRow,
+	StyledIconButton,
+} from "@evenicanpm/admin-integrate/components/data-table/table-row";
+import {
+	DayTag,
+	ScheduleIcon,
+} from "@evenicanpm/admin-integrate/components/scheduler";
+import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
+
+// Hooks
+import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
+import useRecurrence from "@evenicanpm/admin-integrate/hooks/use-recurrence";
+
+// Types
+import { Item } from "./schedules-list";
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { TableCellProps } from "@mui/material";
+import {
+	DayString,
+	dayKeys,
+	isDayMap,
+} from "@evenicanpm/admin-integrate/components/scheduler";
+import { DrawerOpen } from "../scheduler";
+
+interface Props {
+	item: Item;
+	heading: Head[]; // for alignment
+	sx?: SxProps;
+	setDrawerOpen: React.Dispatch<React.SetStateAction<DrawerOpen | null>>;
+}
+
+const SchedulesListRow: React.FC<Props> = (props: Props) => {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	// e.g. "xx days ago"
+	const modified = useTimestamp(props.item.modified);
+	const modifiedFull = new Date(props.item.modified).toString();
+
+	const recurrence = useRecurrence(
+		props.item.interval,
+		props.item.intervalUnitId,
+	);
+
+	const start = new Date(props.item.startDate);
+	const startDateLocale = start.toLocaleString().split(",")[0];
+	const startTimeLocale = start.toLocaleTimeString().slice(0, 5);
+	const startDateFull = start.toString();
+
+	const [modifiedAnchorEl, setModifiedAnchorEl] = useState<HTMLElement | null>(
+		null,
+	);
+	const modifiedOpen = Boolean(modifiedAnchorEl);
+	const [startDateAnchorEl, setStartDateAnchorlEl] =
+		useState<HTMLElement | null>(null);
+	const startDateOpen = Boolean(startDateAnchorEl);
+
+	const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+		const classList = event.currentTarget.classList;
+		if (classList.contains("scheduled-process-modified")) {
+			setModifiedAnchorEl(event.currentTarget);
+		} else if (classList.contains("scheduled-process-start-date")) {
+			setStartDateAnchorlEl(event.currentTarget);
+		}
+	};
+
+	const handlePopoverClose = () => {
+		setModifiedAnchorEl(null);
+		setStartDateAnchorlEl(null);
+	};
+
+	const handleMenuOpen = () => {
+		const newDrawerOpen: DrawerOpen = {
+			id: props.item.id,
+		};
+		if (props.item.processScheduleGroup) {
+			newDrawerOpen.group = true;
+		}
+		props.setDrawerOpen(newDrawerOpen);
+	};
+
+	const daysOfTheWeek = parseDaysOfTheWeek(props.item);
+
+	return (
+		<StyledTableRow sx={props.sx}>
+			<StyledTableCell
+				align={props.heading[0].align as TableCellProps["align"]}
+				width={props.heading[0].width}
+			>
+				<Stack spacing={1} direction="row">
+					<Box display="flex" justifyContent="flex-end" alignItems="center">
+						<ScheduleIcon
+							isDisabled={props.item.isDisabled}
+							isLegacy={!props.item.processScheduleGroup}
+							enablePopover
+						/>
+					</Box>
+					<Box display="flex" justifyContent="flex-end" alignItems="center">
+						<Typography>{props.item.name}</Typography>
+					</Box>
+				</Stack>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[1].align as TableCellProps["align"]}
+				width={props.heading[1].width}
+			>
+				<Box
+					display="flex"
+					flexWrap="wrap"
+					justifyContent={props.heading[1].align as TableCellProps["align"]}
+					minWidth={theme.spacing(25)}
+				>
+					{daysOfTheWeek.map((day) => (
+						<DayTag
+							key={`${props.item.id}_${day}`}
+							day={day}
+							sx={styles.dayTag}
+						/>
+					))}
+				</Box>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[2].align as TableCellProps["align"]}
+				width={props.heading[2].width}
+			>
+				<Typography>{recurrence}</Typography>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[3].align as TableCellProps["align"]}
+				width={props.heading[3].width}
+				sx={styles.timeCell}
+			>
+				<Typography
+					className="scheduled-process-start-date"
+					onMouseEnter={handlePopoverOpen}
+					onMouseLeave={handlePopoverClose}
+				>
+					{`${startDateLocale} ${startTimeLocale}`}
+				</Typography>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[4].align as TableCellProps["align"]}
+				width={props.heading[4].width}
+				sx={styles.timeCell}
+			>
+				<Typography
+					className="scheduled-process-modified"
+					onMouseEnter={handlePopoverOpen}
+					onMouseLeave={handlePopoverClose}
+				>
+					{modified}
+				</Typography>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[5].align as TableCellProps["align"]}
+				width={props.heading[5].width}
+			>
+				<StyledIconButton onClick={handleMenuOpen}>
+					<RemoveRedEye />
+				</StyledIconButton>
+			</StyledTableCell>
+
+			<DateTimePopover
+				dateIsoString={modifiedFull}
+				sx={{ pointerEvents: "none" }}
+				open={modifiedOpen}
+				anchorEl={modifiedAnchorEl}
+				anchorOrigin={{
+					vertical: "bottom",
+					horizontal: "center",
+				}}
+				transformOrigin={{
+					vertical: "top",
+					horizontal: "center",
+				}}
+				onClose={handlePopoverClose}
+				disableRestoreFocus
+			/>
+			<DateTimePopover
+				dateIsoString={startDateFull}
+				sx={{ pointerEvents: "none" }}
+				open={startDateOpen}
+				anchorEl={startDateAnchorEl}
+				anchorOrigin={{
+					vertical: "bottom",
+					horizontal: "center",
+				}}
+				transformOrigin={{
+					vertical: "top",
+					horizontal: "center",
+				}}
+				onClose={handlePopoverClose}
+				disableRestoreFocus
+			/>
+		</StyledTableRow>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		timeCell: {
+			cursor: "default",
+		},
+		popover: {
+			padding: theme.spacing(1),
+		},
+		dayTag: {
+			margin: theme.spacing(0.5),
+		},
+	};
+};
+
+const parseDaysOfTheWeek = (item: Item): DayString[] => {
+	type Day = keyof typeof isDayMap;
+
+	const selectedDays = dayKeys.filter((day): day is Day => {
+		const key = isDayMap[day as Day];
+		return item[key];
+	});
+
+	return selectedDays.length === 7 ? ["everyday"] : selectedDays;
+};
+
+export default SchedulesListRow;