@evenicanpm/admin-integrate 1.2.2 → 1.4.0

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

@@ -1,227 +0,0 @@
-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-name.tsx

@@ -1,77 +0,0 @@
-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-drawer-buttons.tsx

@@ -1,72 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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.tsx

@@ -1,101 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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",
-		},
-	};
-};