@evenicanpm/admin-integrate 1.1.0 → 1.2.2

package/src/pages/integrations/integrations.tsx

@@ -1,39 +1,94 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslations } from "next-intl";
 
 // MUI
-import { Theme, useTheme } from "@mui/material";
 import { Box } from "@mui/material";
 
+// API
+import { getProcesses } from "@evenicanpm/admin-integrate/api/Integrations/queries";
+import { ProcessInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
 // Custom components
 import {
-  IntegrateBreadcrumbs,
-  Crumb,
+	IntegrateBreadcrumbs,
+	Crumb,
 } from "@evenicanpm/admin-integrate/components/breadcrumbs";
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import IntegrationList from "./integration-list";
 
 export default function Integrations() {
-  const t = useTranslations("Integrate");
-
-  const theme = useTheme();
-  const styles = getStyles(theme);
-
-  const breadcrumbs: Crumb[] = [
-    {
-      name: t("Header.dashboard"),
-      url: "/e4integrate",
-    },
-    {
-      name: t("Header.integrations"),
-    },
-  ];
-
-  return (
-    <Box>
-      <IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
-    </Box>
-  );
-}
+	const t = useTranslations("Integrate");
+	const l = useTranslations("Integrate.IntegrationList.ListHeader");
+
+	const breadcrumbs: Crumb[] = [
+		{
+			name: t("Header.dashboard"),
+			url: "/e4integrate",
+		},
+		{
+			name: t("Header.integrations"),
+		},
+	];
+
+	const heading: Head[] = [
+		{
+			id: "name",
+			label: l("integrationName"),
+			align: "left",
+			width: "30%",
+			sortable: true,
+		},
+		{
+			id: "id",
+			label: l("id"),
+			align: "left",
+			width: "15%",
+		},
+		{
+			id: "isScheduled",
+			label: l("status"),
+			align: "center",
+			width: "30%",
+		},
+		{
+			id: "modified",
+			label: l("lastModified"),
+			align: "center",
+			width: "15%",
+			sortable: true,
+		},
+		{
+			id: "view",
+			label: l("actions"),
+			align: "center",
+			width: "5%",
+		},
+	];
 
-const getStyles = (theme: Theme) => {
-  return {};
-};
+	// TODO: initialize input based on url query params
+	const [input, setInput] = useState<ProcessInput>({
+		skip: 0,
+		sort: "modified",
+		sortDesc: true,
+		top: 10,
+		integrationTags: null,
+		search: null,
+	});
+
+	const { data, isLoading } = getProcesses.useData({
+		input: input,
+	});
+
+	return (
+		<Box>
+			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+			<IntegrationList
+				heading={heading}
+				data={data}
+				loading={isLoading}
+				input={input}
+				setInput={setInput}
+			/>
+		</Box>
+	);
+}

package/src/pages/scheduler/schedule-drawer/edited/edited-types.ts

@@ -0,0 +1,17 @@
+export type Edited = {
+	name: boolean;
+	enabled: boolean;
+	days: boolean;
+	startDate: boolean;
+	recurrence: boolean;
+	integrations: boolean;
+};
+
+export const initialEdited: Edited = {
+	name: false,
+	enabled: false,
+	days: false,
+	startDate: false,
+	recurrence: false,
+	integrations: false,
+};

package/src/pages/scheduler/schedule-drawer/edited/index.ts

@@ -0,0 +1 @@
+export * from "./edited-types";

package/src/pages/scheduler/schedule-drawer/index.ts

@@ -0,0 +1 @@
+export { default } from "./schedule-drawer";

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

@@ -0,0 +1,227 @@
+import React, { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+
+// Dnd
+import {
+	DndContext,
+	closestCenter,
+	KeyboardSensor,
+	PointerSensor,
+	useSensor,
+	useSensors,
+	DragEndEvent,
+} from "@dnd-kit/core";
+import {
+	arrayMove,
+	SortableContext,
+	sortableKeyboardCoordinates,
+	verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { restrictToFirstScrollableAncestor } from "@dnd-kit/modifiers";
+
+// Api
+import {
+	GetProcessScheduleGroupDetailsQuery,
+	ProcessScheduleGroupDetailsUpdate,
+	GetProcessScheduleByIdQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import {
+	Box,
+	Typography,
+	Stack,
+	TableContainer,
+	Table,
+	TableBody,
+	Button,
+} from "@mui/material";
+import { Add } from "@mui/icons-material";
+
+// Custom components
+import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
+import { EditedTypography } from "@evenicanpm/admin-integrate/components/core";
+
+// Local components
+import SortableIntegrationRow from "./sortable-integration-row";
+
+// Types
+import { Edited } from "./edited";
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+
+export type Process = {
+	id: string;
+	sort: number;
+	name: string;
+	processIcon: string;
+};
+
+interface Props {
+	data: GetProcessScheduleGroupDetailsQuery | GetProcessScheduleByIdQuery;
+	details: ProcessScheduleGroupDetailsUpdate;
+	setDetails: (newDetails: ProcessScheduleGroupDetailsUpdate) => void;
+	edited: Edited;
+	setEdited: (newEdited: Edited) => void;
+	readOnly?: boolean;
+}
+
+export default function ScheduleDetailsIntegrations(props: Props) {
+	const t = useTranslations("Integrate.Scheduler");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [items, setItems] = useState<Process[]>([]);
+
+	const sensors = useSensors(
+		useSensor(PointerSensor),
+		useSensor(KeyboardSensor, {
+			coordinateGetter: sortableKeyboardCoordinates,
+		}),
+	);
+
+	useEffect(() => {
+		if (props.data) {
+			if ("processScheduleGroupDetails" in props.data) {
+				setItems(
+					(props.data.processScheduleGroupDetails?.processSchedule
+						?.processes as Process[]) || [],
+				);
+			} else if ("processScheduleById" in props.data) {
+				setItems([props.data.processScheduleById?.process as Process]);
+			}
+		}
+	}, [props.data]);
+
+	function handleDragEnd(event: DragEndEvent) {
+		const { active, over } = event;
+
+		if (over && active.id !== over.id) {
+			setItems((items) => {
+				const oldIndex = items.findIndex((process) => process.id === active.id);
+				const newIndex = items.findIndex((process) => process.id === over.id);
+
+				return arrayMove(items, oldIndex, newIndex);
+			});
+
+			props.setDetails({
+				...props.details,
+				processes: items,
+			});
+			if (!props.edited.integrations) {
+				props.setEdited({
+					...props.edited,
+					integrations: true,
+				});
+			}
+		}
+	}
+
+	// @ts-ignore
+	const handleDeleteIntegration = (item: Process) => {
+		// TODO: delete integration
+	};
+
+	let heading: Head[] = [
+		{
+			id: "drag",
+			label: "",
+			align: "right",
+			width: "1%",
+		},
+		{
+			id: "name",
+			label: t("integration"),
+			align: "left",
+			width: "92%",
+		},
+		{
+			id: "actions",
+			label: t("ListHeader.actions"),
+			align: "right",
+			width: "7%",
+		},
+	];
+
+	return (
+		<Box sx={styles.main}>
+			{items.length > 0 ? (
+				<>
+					<Box display="flex" justifyContent="space-between">
+						<Stack direction="row" spacing={1} alignItems="center">
+							<Typography variant="body1">
+								{t("scheduledIntegrations")}
+							</Typography>
+							<EditedTypography edited={props.edited.integrations} />
+						</Stack>
+						{!props.readOnly && (
+							<Button
+								color="info"
+								variant="contained"
+								sx={{ fontSize: theme.typography.caption.fontSize }}
+								startIcon={<Add />}
+							>
+								Add
+							</Button>
+						)}
+					</Box>
+					<Box sx={styles.list}>
+						<DndContext
+							sensors={sensors}
+							collisionDetection={closestCenter}
+							onDragEnd={handleDragEnd}
+							modifiers={[restrictToFirstScrollableAncestor]}
+						>
+							<SortableContext
+								items={items}
+								strategy={verticalListSortingStrategy}
+							>
+								<TableContainer>
+									<Table>
+										<TableHeader
+											heading={heading}
+											orderBy={"sort"}
+											order={"asc"}
+										/>
+										<TableBody>
+											{items.map((item) => (
+												<SortableIntegrationRow
+													key={item.id}
+													item={item}
+													heading={heading}
+													handleDeleteIntegration={handleDeleteIntegration}
+													readOnly={props.readOnly}
+												/>
+											))}
+										</TableBody>
+									</Table>
+								</TableContainer>
+							</SortableContext>
+						</DndContext>
+					</Box>
+				</>
+			) : (
+				<></>
+			)}
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			padding: theme.spacing(2, 3),
+
+			maxHeight: "50vh",
+			overflow: "auto",
+		},
+		list: {
+			margin: theme.spacing(1, 0),
+			borderColor: theme.palette.grey[200],
+			borderWidth: theme.spacing(0.25),
+			borderStyle: "solid",
+			borderRadius: "1%",
+		},
+	};
+};

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