@evenicanpm/admin-integrate 1.1.0 → 1.2.2

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;

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

@@ -0,0 +1,74 @@
+import React from "react";
+
+// Types
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { Item } from "./schedules-list";
+
+// API
+import { ScheduledProcessInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { TableContainer, Table, TableBody } from "@mui/material";
+import { SxProps } from "@mui/material";
+
+// Custom components
+import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
+
+// Local components
+import SchedulesListRow from "./schedules-list-row";
+
+// Types
+import { DrawerOpen } from "../scheduler";
+
+interface Props {
+	heading: Head[];
+	items: Item[];
+	input: ScheduledProcessInput;
+	setInput: (newInput: ScheduledProcessInput) => void;
+	rowSx?: SxProps;
+	setDrawerOpen: React.Dispatch<React.SetStateAction<DrawerOpen | null>>;
+}
+
+export default function SchedulesListTable(props: Props) {
+	const handleRequestSort = (property: string) => {
+		const current = props.input.sort;
+		if (property === current) {
+			props.setInput({
+				...props.input,
+				sortDesc: !props.input.sortDesc,
+			});
+		} else {
+			props.setInput({
+				...props.input,
+				sort: property,
+				sortDesc: false,
+			});
+		}
+	};
+
+	return (
+		<>
+			<TableContainer>
+				<Table>
+					<TableHeader
+						heading={props.heading}
+						orderBy={props.input.sort || ""}
+						order={props.input.sortDesc ? "desc" : "asc"}
+						onRequestSort={handleRequestSort}
+					/>
+					<TableBody>
+						{props.items.map((item, index) => (
+							<SchedulesListRow
+								key={index}
+								item={item}
+								heading={props.heading}
+								sx={props.rowSx}
+								setDrawerOpen={props.setDrawerOpen}
+							/>
+						))}
+					</TableBody>
+				</Table>
+			</TableContainer>
+		</>
+	);
+}