@evenicanpm/admin-integrate 1.2.2 → 1.3.0

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

@@ -0,0 +1,503 @@
+// Dnd
+import {
+	closestCenter,
+	DndContext,
+	type DragEndEvent,
+	KeyboardSensor,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from "@dnd-kit/core";
+import { restrictToFirstScrollableAncestor } from "@dnd-kit/modifiers";
+import {
+	arrayMove,
+	SortableContext,
+	sortableKeyboardCoordinates,
+	verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import type {
+	GetNonScheduledProcessesQuery,
+	GetProcessScheduleByIdQuery,
+	GetProcessScheduleGroupDetailsQuery,
+	ProcessScheduleGroupDetailsUpdate,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
+import { getNonScheduledProcesses } from "@evenicanpm/admin-integrate/api/scheduler/queries";
+import { EditedTypography } from "@evenicanpm/admin-integrate/components/core";
+import {
+	TableHeader,
+	TablePagination,
+	TableSkeleton,
+} from "@evenicanpm/admin-integrate/components/data-table";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { Search } from "@mui/icons-material";
+import {
+	Box,
+	Card,
+	Grid2 as Grid,
+	InputAdornment,
+	Stack,
+	Table,
+	TableBody,
+	TableContainer,
+	TextField,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { debounce } from "lodash";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useState } from "react";
+
+// Types
+
+import {
+	type DefaultScheduledProcess,
+	type DetailsAction,
+	DetailsActionType,
+	type EditIntegrationsAction,
+	type ErrorsState,
+	type SetErrorsAction,
+} from "./details-reducer";
+
+import type { Edited } from "./edited";
+import SortableIntegrationRow from "./sortable-integration-row";
+
+export type Process = {
+	id: string;
+	sort: number;
+	name: string;
+	processIcon: string;
+};
+
+interface Props {
+	data: GetProcessScheduleGroupDetailsQuery | GetProcessScheduleByIdQuery;
+	details: ProcessScheduleGroupDetailsUpdate;
+	errors?: ErrorsState;
+	dispatchDetails?: (value: DetailsAction) => void;
+	edited: Edited;
+	setEdited: (newEdited: Edited) => void;
+	readOnly?: boolean;
+	defaultScheduledProcess?: DefaultScheduledProcess;
+}
+
+export default function ScheduleDetailsIntegrations(props: Props) {
+	const t = useTranslations("Integrate.Scheduler");
+	const l = useTranslations("Integrate.Filter");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+	const { label: searchLabel = l("defaultSearchLabel") } = {};
+
+	// items state holds result of nonScheduledProcess nodes
+	const [items, setItems] = useState<Process[]>([]);
+	const [searchTerm, setSearchTerm] = useState("");
+	const [nonScheduledMode, setNonScheduledMode] = useState<boolean>(false);
+	const [nonScheduledProcessesResult, setNonScheduledProcessesResult] =
+		useState<GetNonScheduledProcessesQuery | null>(null);
+	const [input, setInput] = useState({
+		sortDesc: true,
+		top: 5,
+		skip: 0,
+	});
+	const [page, setPage] = useState((input.skip || 0) / (input.top || 5) + 1);
+
+	const sensors = useSensors(
+		useSensor(PointerSensor),
+		useSensor(KeyboardSensor, {
+			coordinateGetter: sortableKeyboardCoordinates,
+		}),
+	);
+
+	// Drag and drop
+	function handleDragEnd(event: DragEndEvent) {
+		if (props.dispatchDetails && props.details.processes) {
+			const { active, over } = event;
+
+			if (over && active.id !== over.id) {
+				const items = props.details.processes as Process[];
+
+				const oldIndex = items.findIndex((process) => process.id === active.id);
+				const newIndex = items.findIndex((process) => process.id === over.id);
+				const reordered: Process[] = arrayMove(items, oldIndex, newIndex);
+
+				const action: EditIntegrationsAction = {
+					type: DetailsActionType.EDIT_INTEGRATIONS,
+					processes: reordered,
+				};
+				props.dispatchDetails(action);
+
+				if (!props.edited.integrations) {
+					props.setEdited({
+						...props.edited,
+						integrations: true,
+					});
+				}
+			}
+		}
+	}
+
+	// fetch non-scheduled processes
+	const { data, refetch, isFetching } = getNonScheduledProcesses.useData({
+		input: { search: searchTerm || null, ...input },
+	});
+
+	// Pagination
+	const handleChangePage = async (
+		_event: React.ChangeEvent<unknown>,
+		value: number,
+	) => {
+		if (page !== value) {
+			const newSkip = (input.top || 5) * (value - 1);
+
+			const newInput = { ...input, skip: newSkip };
+
+			setPage(value);
+			setInput(newInput);
+		}
+	};
+
+	useEffect(() => {
+		const typedData = data as GetNonScheduledProcessesQuery;
+		if (typedData?.nonScheduledProcesses?.nodes && nonScheduledMode) {
+			setNonScheduledProcessesResult(typedData);
+			setItems(typedData.nonScheduledProcesses.nodes as Process[]);
+		}
+	}, [data]);
+
+	// Search
+	const fetchNonScheduledProcesses = async (_search: string) => {
+		const result = await refetch();
+		const typedData = result.data as GetNonScheduledProcessesQuery;
+		if (typedData?.nonScheduledProcesses?.nodes) {
+			setNonScheduledMode(true);
+			setNonScheduledProcessesResult(typedData);
+			setItems(typedData.nonScheduledProcesses.nodes as Process[]);
+		}
+	};
+
+	const debounceFetch = debounce(fetchNonScheduledProcesses, 400);
+	useEffect(() => {
+		if (searchTerm !== "") {
+			debounceFetch(searchTerm);
+		} else {
+			setItems([]);
+			setNonScheduledProcessesResult(null);
+			setNonScheduledMode(false);
+		}
+		return debounceFetch.cancel;
+	}, [searchTerm]);
+
+	// Add integration
+	const handleClickAddIntegration = (item: Process) => {
+		if (props.dispatchDetails && props.details) {
+			const updatedItem = {
+				...item,
+				sort:
+					(props.details.processes ? props.details.processes.length : 0) + 1,
+			};
+
+			if (!props.edited.integrations) {
+				props.setEdited({
+					...props.edited,
+					integrations: true,
+				});
+			}
+
+			const newProcesses = [...(props.details.processes || []), updatedItem];
+			const action: EditIntegrationsAction = {
+				type: DetailsActionType.EDIT_INTEGRATIONS,
+				processes: newProcesses,
+			};
+			props.dispatchDetails(action);
+
+			const clearErrorAction: SetErrorsAction = {
+				type: DetailsActionType.SET_ERRORS,
+				errors: { processes: false },
+			};
+			props.dispatchDetails(clearErrorAction);
+
+			setNonScheduledMode(false);
+			setSearchTerm("");
+		}
+	};
+
+	const handleDeleteIntegration = (item: Process) => {
+		if (props.dispatchDetails && props.details.processes) {
+			if (!props.edited.integrations) {
+				props.setEdited({
+					...props.edited,
+					integrations: true,
+				});
+			}
+
+			const newProcesses = props.details.processes.filter(
+				(process) => process.id !== item.id,
+			);
+			const action: EditIntegrationsAction = {
+				type: DetailsActionType.EDIT_INTEGRATIONS,
+				processes: newProcesses,
+			};
+			props.dispatchDetails(action);
+
+			if (newProcesses.length === 0) {
+				const clearErrorAction: SetErrorsAction = {
+					type: DetailsActionType.SET_ERRORS,
+					errors: { processes: true },
+				};
+				props.dispatchDetails(clearErrorAction);
+			}
+		}
+	};
+
+	useEffect(() => {
+		if (
+			props.dispatchDetails &&
+			props.defaultScheduledProcess &&
+			props.details.processes &&
+			props.details.processes.length === 0
+		) {
+			handleClickAddIntegration({
+				...props.defaultScheduledProcess,
+				sort: 1,
+			});
+		}
+	}, [props.defaultScheduledProcess]);
+
+	// Table heading
+	let heading: Head[] = [
+		{
+			id: "name",
+			label: nonScheduledMode ? t("availableIntegrations") : t("integration"),
+			align: "left",
+			width: "92%",
+		},
+		{
+			id: "actions",
+			label: t("ListHeader.actions"),
+			align: "right",
+			width: "7%",
+		},
+	];
+
+	heading = [
+		!nonScheduledMode && {
+			id: "drag",
+			label: "",
+			align: "right",
+			width: "1%",
+		},
+		...heading,
+	].filter(Boolean) as Head[];
+
+	const readOnly = props.readOnly || !!props.defaultScheduledProcess;
+
+	return (
+		<Box sx={styles.main}>
+			<Box>
+				<Stack
+					direction="row"
+					spacing={1}
+					alignItems="center"
+					sx={props.errors?.processes ? {} : { marginBottom: theme.spacing(2) }}
+				>
+					<Typography variant="body1">{t("scheduledIntegrations")}</Typography>
+					<EditedTypography edited={props.edited.integrations} />
+				</Stack>
+				<Typography
+					variant="caption"
+					color="error"
+					display={props.errors?.processes ? "block" : "none"}
+					sx={{ marginBottom: theme.spacing(2) }}
+				>
+					{t("emptyProcesses")}
+				</Typography>
+				{!readOnly && (
+					<TextField
+						sx={styles.search}
+						variant="outlined"
+						label={searchLabel}
+						value={searchTerm}
+						onChange={(e) => setSearchTerm(e.target.value)}
+						slotProps={{
+							input: {
+								startAdornment: (
+									<InputAdornment position="start">
+										<Search />
+									</InputAdornment>
+								),
+							},
+						}}
+					/>
+				)}
+			</Box>
+			{isFetching && (
+				<Card sx={{ marginTop: theme.spacing(2) }}>
+					<TableSkeleton
+						heading={heading}
+						perPage={3}
+						rowSx={{ height: theme.spacing(7) }}
+					/>
+				</Card>
+			)}
+
+			{!isFetching &&
+			((nonScheduledMode && items.length > 0) ||
+				(!nonScheduledMode &&
+					props.details.processes &&
+					props.details.processes.length > 0)) ? (
+				<>
+					<Box sx={styles.list}>
+						<DndContext
+							sensors={sensors}
+							collisionDetection={closestCenter}
+							onDragEnd={handleDragEnd}
+							modifiers={[restrictToFirstScrollableAncestor]}
+						>
+							<SortableContext
+								items={
+									nonScheduledMode
+										? items
+										: (props.details.processes as Process[])
+								}
+								strategy={verticalListSortingStrategy}
+							>
+								<TableContainer>
+									<Table>
+										<TableHeader
+											heading={heading}
+											orderBy={"sort"}
+											order={"asc"}
+										/>
+										<TableBody>
+											{
+												// Processes found in details state (using props.details.processes)
+												!nonScheduledMode &&
+													props.details.processes &&
+													props.details.processes.map((item) => (
+														<SortableIntegrationRow
+															key={item.id}
+															item={item as Process}
+															processes={props.details.processes as Process[]}
+															heading={heading}
+															handleDeleteIntegration={handleDeleteIntegration}
+															handleClickAddIntegration={
+																handleClickAddIntegration
+															}
+															readOnly={readOnly}
+															nonScheduledMode={nonScheduledMode}
+														/>
+													))
+											}
+											{
+												// Non Scheduled Processes - when search term is not empty (using items state)
+												nonScheduledMode &&
+													items.map((item) => (
+														<SortableIntegrationRow
+															key={item.id}
+															item={item}
+															processes={props.details.processes as Process[]}
+															heading={heading}
+															handleDeleteIntegration={handleDeleteIntegration}
+															handleClickAddIntegration={
+																handleClickAddIntegration
+															}
+															readOnly={readOnly}
+															nonScheduledMode={nonScheduledMode}
+														/>
+													))
+											}
+										</TableBody>
+									</Table>
+								</TableContainer>
+							</SortableContext>
+						</DndContext>
+					</Box>
+					{!isFetching &&
+					nonScheduledProcessesResult &&
+					((nonScheduledMode && items.length > 0) ||
+						(!nonScheduledMode &&
+							props.details.processes &&
+							props.details.processes.length > 0)) ? (
+						<Grid container spacing={1} sx={styles.pagination}>
+							<Grid size={{ xs: 10.5 }}>
+								<FlexBox
+									justifyContent="center"
+									alignItems="center"
+									sx={styles.paginationBox}
+								>
+									<TablePagination
+										page={page}
+										onChange={handleChangePage}
+										count={Math.ceil(
+											(nonScheduledProcessesResult.nonScheduledProcesses
+												?.recordCount || 5) / (input.top || 5),
+										)}
+									/>
+								</FlexBox>
+							</Grid>
+						</Grid>
+					) : null}
+				</>
+			) : null}
+			{!isFetching &&
+			((nonScheduledMode && items.length === 0) ||
+				(!nonScheduledMode && props.details.processes?.length === 0)) ? (
+				<Card>
+					<FlexBox
+						justifyContent="center"
+						alignItems="center"
+						sx={{
+							minHeight: "85px",
+							marginTop: theme.spacing(2),
+							background: theme.palette.grey[100],
+						}}
+					>
+						<Stack spacing={1} justifyContent="center" alignItems="center">
+							<Typography variant="inherit" color="textSecondary">
+								{nonScheduledMode
+									? t("ListEmpty.searchEmpty")
+									: t("ListEmpty.scheduled")}
+							</Typography>
+						</Stack>
+					</FlexBox>
+				</Card>
+			) : null}
+		</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%",
+		},
+		pagination: {
+			marginTop: theme.spacing(2),
+		},
+		paginationBox: {
+			paddingLeft: theme.spacing(15),
+		},
+		search: {
+			"& .MuiOutlinedInput-root": {
+				"& input": {
+					padding: theme.spacing(1.5),
+				},
+			},
+			backgroundColor: theme.palette.common.white,
+			width: "auto",
+			flexGrow: "1",
+		},
+	};
+};