@evenicanpm/admin-integrate 1.1.0 → 1.2.0

package/src/pages/executions/executions.tsx

@@ -3,16 +3,18 @@ import { useTranslations } from "next-intl";
 
 // API
 import { getProcessExecutions } from "@evenicanpm/admin-integrate/api/dashboard/queries";
-import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	ProcessExecutionInput,
+	GetProcessExecutionsQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 
 // MUI
-import { Theme, useTheme } from "@mui/material";
 import { Box } from "@mui/material";
 
 // Custom components
 import {
-  IntegrateBreadcrumbs,
-  Crumb,
+	IntegrateBreadcrumbs,
+	Crumb,
 } from "@evenicanpm/admin-integrate/components/breadcrumbs";
 
 // Local components
@@ -22,77 +24,70 @@ import ExecutionsList from "./executions-list";
 import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 
 export default function Executions() {
-  const t = useTranslations("Integrate");
-  const l = useTranslations("Integrate.Executions.ListHeader");
-
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const t = useTranslations("Integrate");
+	const l = useTranslations("Integrate.Executions.ListHeader");
 
-  const breadcrumbs: Crumb[] = [
-    {
-      name: t("Header.dashboard"),
-      url: "/e4integrate",
-    },
-    {
-      name: t("Header.executions"),
-    },
-  ];
+	const breadcrumbs: Crumb[] = [
+		{
+			name: t("Header.dashboard"),
+			url: "/e4integrate",
+		},
+		{
+			name: t("Header.executions"),
+		},
+	];
 
-  const heading: Head[] = [
-    {
-      id: "name",
-      label: l("executionName"),
-      align: "left",
-      width: "30%",
-      sortable: true,
-    },
-    {
-      id: "executionStatus",
-      label: l("status"),
-      align: "center",
-      width: "50%",
-    },
-    {
-      id: "startDate",
-      label: l("time"),
-      align: "center",
-      width: "15%",
-      sortable: true,
-    },
-    {
-      id: "view",
-      label: l("actions"),
-      align: "center",
-      width: "5%",
-    },
-  ];
+	const heading: Head[] = [
+		{
+			id: "name",
+			label: l("executionName"),
+			align: "left",
+			width: "30%",
+			sortable: true,
+		},
+		{
+			id: "executionStatus",
+			label: l("status"),
+			align: "center",
+			width: "50%",
+		},
+		{
+			id: "startDate",
+			label: l("time"),
+			align: "center",
+			width: "15%",
+			sortable: true,
+		},
+		{
+			id: "view",
+			label: l("actions"),
+			align: "right",
+			width: "5%",
+		},
+	];
 
-  // TODO: initialize input based on url query params
-  const [input, setInput] = useState<ProcessExecutionInput>({
-    sort: "startDate",
-    sortDesc: true,
-    top: 10,
-    skip: 0,
-  });
+	// TODO: initialize input based on url query params
+	const [input, setInput] = useState<ProcessExecutionInput>({
+		sort: "startDate",
+		sortDesc: true,
+		top: 10,
+		skip: 0,
+	});
 
-  const { data, isLoading } = getProcessExecutions.useData({
-    input: input,
-  });
+	const { data, isLoading } = getProcessExecutions.useData({
+		input: input,
+	});
 
-  return (
-    <Box>
-      <IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
-      <ExecutionsList
-        heading={heading}
-        data={data}
-        loading={isLoading}
-        input={input}
-        setInput={setInput}
-      />
-    </Box>
-  );
+	return (
+		<Box>
+			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+			<ExecutionsList
+				heading={heading}
+				data={data as GetProcessExecutionsQuery}
+				loading={isLoading}
+				input={input}
+				setInput={setInput}
+			/>
+		</Box>
+	);
 }
-
-const getStyles = (theme: Theme) => {
-  return {};
-};

package/src/pages/integrations/integrations.tsx

@@ -2,38 +2,30 @@ import React from "react";
 import { useTranslations } from "next-intl";
 
 // MUI
-import { Theme, useTheme } from "@mui/material";
 import { Box } from "@mui/material";
 
 // Custom components
 import {
-  IntegrateBreadcrumbs,
-  Crumb,
+	IntegrateBreadcrumbs,
+	Crumb,
 } from "@evenicanpm/admin-integrate/components/breadcrumbs";
 
 export default function Integrations() {
-  const t = useTranslations("Integrate");
+	const t = useTranslations("Integrate");
 
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const breadcrumbs: Crumb[] = [
+		{
+			name: t("Header.dashboard"),
+			url: "/e4integrate",
+		},
+		{
+			name: t("Header.integrations"),
+		},
+	];
 
-  const breadcrumbs: Crumb[] = [
-    {
-      name: t("Header.dashboard"),
-      url: "/e4integrate",
-    },
-    {
-      name: t("Header.integrations"),
-    },
-  ];
-
-  return (
-    <Box>
-      <IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
-    </Box>
-  );
+	return (
+		<Box>
+			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+		</Box>
+	);
 }
-
-const getStyles = (theme: Theme) => {
-  return {};
-};

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