@evenicanpm/admin-integrate 1.1.0 → 1.2.0

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

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

@@ -0,0 +1,280 @@
+import React, { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+
+// API
+import {
+	ScheduledProcessInput,
+	GetScheduledProcessesQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Card, Box, Stack, Typography, Grid2 as Grid } from "@mui/material";
+
+// Custom components
+import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
+import {
+	TablePagination,
+	TableSkeleton,
+} from "@evenicanpm/admin-integrate/components/data-table";
+import { ListFilter } from "@evenicanpm/admin-integrate/components/list-filter";
+
+// Local components
+import SchedulesListTable from "./schedules-list-table";
+
+// Types
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { ListFilterOutput } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+import {
+	SchedulesListFilters,
+	schedulesListFilters,
+} from "@evenicanpm/admin-integrate/components/scheduler/schedule-filter";
+import { DrawerOpen } from "../scheduler";
+
+export type Item = {
+	id: string;
+	name: string;
+	processScheduleGroup?: {
+		id: string;
+	};
+	startDate: string;
+	interval: number;
+	intervalUnitId: string;
+	isMonday: boolean;
+	isTuesday: boolean;
+	isWednesday: boolean;
+	isThursday: boolean;
+	isFriday: boolean;
+	isSaturday: boolean;
+	isSunday: boolean;
+	isDisabled: boolean;
+	modified: string;
+	scheduledIntegrations: number;
+};
+
+// Row height in terms of multiples of theme.spacing(1) (e.g. theme.spacing(7.5 & rows per page))
+const rowHeight = 7.5;
+
+interface Props {
+	heading: Head[];
+	data: GetScheduledProcessesQuery;
+	loading: boolean;
+	input: ScheduledProcessInput;
+	setInput: (newInput: ScheduledProcessInput) => void;
+	setDrawerOpen: React.Dispatch<React.SetStateAction<DrawerOpen | null>>;
+}
+
+const SchedulesList: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate.Scheduler");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [items, setItems] = useState<Item[]>([]);
+	const [fetched, setFetched] = useState<boolean>(false); // prevents "empty list" msg from showing for split second
+	// in practice skip and top are never undefined. this is to satisfy linting.
+	const [page, setPage] = useState(
+		(props.input.skip || 0) / (props.input.top || 10) + 1,
+	);
+	const [perPage, setPerPage] = useState<number>(props.input.top || 10);
+
+	const handleChangePage = (
+		event: React.ChangeEvent<unknown>,
+		value: number,
+	) => {
+		if (page !== value && event) {
+			setPage(value);
+			props.setInput({
+				...props.input,
+				skip: (props.input.top || 10) * (value - 1),
+			});
+			setFetched(false);
+		}
+	};
+
+	const handleSetFilters = (
+		filterUpdate: ListFilterOutput<SchedulesListFilters>,
+	) => {
+		const { itemsPerPage, search, filters } = filterUpdate;
+		props.setInput({
+			...props.input,
+			top: itemsPerPage,
+			skip: 0,
+			search: search,
+			daysOfTheWeek: filters.multiSelectFilter?.map((obj) => obj.id as string),
+		});
+		setFetched(false);
+		setPerPage(itemsPerPage as number);
+		setPage(1);
+	};
+
+	const handleClearFilters = () => {
+		props.setInput({
+			...props.input,
+			skip: 0,
+			daysOfTheWeek: null,
+		});
+		setFetched(false);
+	};
+
+	useEffect(() => {
+		if (props.data?.scheduledProcesses?.nodes) {
+			setItems(props.data.scheduledProcesses.nodes as Item[]);
+			setFetched(true);
+		}
+	}, [props.data]);
+
+	return (
+		<>
+			<Box sx={styles.list}>
+				<ListFilter<SchedulesListFilters>
+					setFilters={handleSetFilters}
+					clearFilters={handleClearFilters}
+					filters={schedulesListFilters}
+					config={{
+						pagination: {
+							pageDefault: 10,
+							pageOptions: [10, 20, 50],
+						},
+					}}
+				/>
+			</Box>
+
+			{props.loading && !props.data && (
+				<Card>
+					<TableSkeleton
+						heading={props.heading}
+						perPage={perPage}
+						rowSx={styles.rowSx}
+					/>
+				</Card>
+			)}
+
+			{!props.loading &&
+			props.data.scheduledProcesses &&
+			fetched &&
+			items.length > 0 ? (
+				<Box
+					sx={{
+						minHeight:
+							props.data.scheduledProcesses.pageInfo?.resultsReturned &&
+							props.data.scheduledProcesses.pageInfo.resultsReturned <
+								perPage &&
+							page === 1
+								? theme.spacing(
+										rowHeight *
+											(props.data.scheduledProcesses.pageInfo.resultsReturned +
+												1),
+									)
+								: theme.spacing(rowHeight * (perPage + 1)),
+					}}
+				>
+					<Card>
+						<SchedulesListTable
+							heading={props.heading}
+							items={items}
+							input={props.input}
+							setInput={props.setInput}
+							rowSx={styles.rowSx}
+							setDrawerOpen={props.setDrawerOpen}
+						/>
+					</Card>
+				</Box>
+			) : null}
+
+			{!props.loading && fetched && items.length === 0 ? (
+				<Card>
+					<FlexBox
+						justifyContent="center"
+						alignItems="center"
+						sx={{
+							minHeight: "335px",
+							marginBottom: theme.spacing(2),
+						}}
+					>
+						<Stack spacing={1} justifyContent="center" alignItems="center">
+							<Typography variant="h6" color="info">
+								{t("ListEmpty.title")}
+							</Typography>
+							<Typography variant="body1">{t("ListEmpty.body")}</Typography>
+						</Stack>
+					</FlexBox>
+				</Card>
+			) : null}
+
+			{!props.loading &&
+			props.data?.scheduledProcesses &&
+			fetched &&
+			items.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(
+									(props.data.scheduledProcesses.recordCount || 10) /
+										(props.input.top || 10),
+								)}
+							/>
+						</FlexBox>
+					</Grid>
+					<Grid size={{ xs: 1.5 }}>
+						<FlexBox
+							justifyContent="flex-end"
+							alignItems="center"
+							sx={{ height: "100%" }}
+						>
+							<Typography color="grey">
+								{`${
+									props.data.scheduledProcesses.pageInfo?.resultsReturned || 0
+								}  ${t("Pagination.of")} ${
+									props.data.scheduledProcesses.recordCount || 0
+								} ${t("Pagination.items")}`}
+							</Typography>
+						</FlexBox>
+					</Grid>
+				</Grid>
+			) : null}
+		</>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		title: {
+			display: "flex",
+			alignItems: "center",
+			height: "100%",
+		},
+		typography: {
+			fontWeight: "medium",
+		},
+		button: {
+			borderWidth: 2,
+			borderRadius: 1,
+			marginRight: theme.spacing(1),
+		},
+		iconButton: {
+			borderRadius: 1,
+		},
+		pagination: {
+			marginTop: theme.spacing(2),
+		},
+		list: {
+			margin: theme.spacing(2, 0),
+		},
+		paginationBox: {
+			paddingLeft: theme.spacing(15),
+		},
+		rowSx: {
+			height: theme.spacing(rowHeight),
+		},
+	};
+};
+
+export default SchedulesList;

package/tsconfig.json

@@ -1,28 +1,31 @@
 {
-  "compilerOptions": {
-    "target": "ES6",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "declaration": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "outDir": "./dist",
-    "jsx": "preserve",
-    "baseUrl": "./",
-    "paths": {
-      "@/lib/*": ["src/lib/*"],
-      "@/auth/*": ["src/auth/*"],
-      "@/api/*": ["src/api/*"],
-      "@/components/*": ["src/components/*"],
-      "@evenicanpm/admin-core/*": [
-        "./node_modules/@evenicanpm/admin-core/src/*"
-      ],
-      "@evenicanpm/admin-integrate/*": [
-        "./node_modules/@evenicanpm/admin-integrate/src/*"
-      ]
-    }
-  }
+	"compilerOptions": {
+		"target": "ES6",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"sourceMap": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"declaration": true,
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"outDir": "./dist",
+		"jsx": "preserve",
+		"baseUrl": "./",
+		"typeRoots": ["../../../../admin/node_modules/@types"],
+		"paths": {
+			"*": ["../../../../admin/node_modules/*"],
+			"@/lib/*": ["src/lib/*"],
+			"@/auth/*": ["src/auth/*"],
+			"@/api/*": ["src/api/*"],
+			"@/components/*": ["src/components/*"],
+			"@evenicanpm/admin-core/*": [
+				"../../../../admin/node_modules/@evenicanpm/admin-core/src/*"
+			],
+			"@evenicanpm/admin-integrate/*": [
+				"../../../../admin/node_modules/@evenicanpm/admin-integrate/src/*"
+			]
+		}
+	},
+	"include": ["src"]
 }

package/src/components/integration-view/temp-data/initialElements.ts

@@ -1,238 +0,0 @@
-import { ElkExtendedEdge } from "elkjs";
-import { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "../elk-//types";
-
-const position = { x: 0, y: 0 };
-
-export const initialNodes: ElkNodeWithFlow[] = [
-  {
-    id: "1",
-    type: "task-node",
-    data: { label: "input" },
-    position,
-    layoutOptions: {
-      "org.eclipse.elk.priority": "1",
-    },
-  },
-
-  {
-    id: "2",
-    data: { label: "node 2" },
-    position,
-    //type: "custom-group",
-    children: [
-      {
-        id: "2gs",
-        data: { label: "Group 1" },
-        position,
-        width: 150,
-        height: 50,
-        //extent: "parent",
-      },
-
-      {
-        id: "2g1",
-        data: { label: "2g1" },
-        position,
-        width: 150,
-        height: 70,
-        extent: "parent",
-      },
-      {
-        id: "2g3",
-        data: { label: "2g3" },
-        position,
-        width: 150,
-        height: 20,
-        extent: "parent",
-      },
-      {
-        id: "2g4",
-        data: { label: "2g4" },
-        position,
-        width: 150,
-        height: 60,
-        extent: "parent",
-      },
-      {
-        id: "2g2",
-        data: { label: "2g2" },
-        position,
-        width: 150,
-        height: 80,
-        extent: "parent",
-      },
-    ],
-    layoutOptions: {
-      "org.eclipse.elk.priority": "2",
-    },
-  },
-
-  {
-    id: "3",
-    data: { label: "node 2" },
-    position,
-    //height: 400,
-    //width: 400,
-    //type: "custom-group",
-    children: [
-      {
-        id: "3gs",
-        data: { label: "Group 1" },
-        position,
-        width: 150,
-        height: 50,
-        extent: "parent",
-      },
-      {
-        id: "3g1",
-        data: { label: "2g1" },
-        position,
-        width: 150,
-        height: 50,
-        extent: "parent",
-      },
-      {
-        id: "3g1-b",
-        data: { label: "2g1" },
-        position,
-        width: 150,
-        height: 50,
-        extent: "parent",
-      },
-      {
-        id: "3gconnect",
-        data: { label: "2g1" },
-        position,
-        //type: "connection-node",
-        width: 1,
-        height: 1,
-        extent: "parent",
-      },
-      {
-        id: "3g2",
-        data: { label: "2g2" },
-        position,
-        width: 150,
-        height: 50,
-        extent: "parent",
-      },
-      {
-        id: "3g3",
-        data: { label: "2g3" },
-        position,
-        width: 150,
-        height: 50,
-        extent: "parent",
-      },
-      {
-        id: "3g4",
-        data: { label: "2g4" },
-        position,
-        width: 150,
-        height: 50,
-        extent: "parent",
-      },
-    ],
-    layoutOptions: {
-      "org.eclipse.elk.priority": "2",
-    },
-  },
-  {
-    id: "4",
-    data: { label: "node 2" },
-    position,
-    //height: 400,
-    //width: 400,
-    //type: "custom-group",
-    children: [
-      {
-        id: "4gs",
-        data: { label: "Group 1" },
-        position,
-        width: 150,
-        height: 50,
-        extent: "parent",
-      },
-      {
-        id: "4g1",
-        data: { label: "2g1" },
-        position,
-        width: 150,
-        height: 50,
-        extent: "parent",
-      },
-      {
-        id: "4g2",
-        data: { label: "2g2" },
-        position,
-        width: 150,
-        height: 50,
-        extent: "parent",
-      },
-      {
-        id: "4g3",
-        data: { label: "2g3" },
-        position,
-        width: 150,
-        height: 50,
-        extent: "parent",
-      },
-      {
-        id: "4g4",
-        data: { label: "2g4" },
-        position,
-        width: 150,
-        height: 50,
-        extent: "parent",
-      },
-    ],
-    layoutOptions: {
-      "org.eclipse.elk.priority": "2",
-    },
-  },
-];
-
-export const initialEdges: ElkExtendedEdgeWithFlow[] = [
-  { id: "e1-2", sources: ["1"], targets: ["2"], type: "default-edge" },
-  { id: "2gs-2g1", sources: ["2gs"], targets: ["2g1"], type: "default-edge" },
-  { id: "2gs-2g2", sources: ["2gs"], targets: ["2g2"], type: "default-edge" },
-  { id: "2gs-2g3", sources: ["2gs"], targets: ["2g3"], type: "default-edge" },
-  { id: "2g1-2g4", sources: ["2g1"], targets: ["2g4"], type: "default-edge" },
-  { id: "2g2-2g4", sources: ["2g2"], targets: ["2g4"], type: "default-edge" },
-  { id: "2g3-2g4", sources: ["2g3"], targets: ["2g4"], type: "default-edge" },
-  //{ id: "e1-3", sources: ["1"], targets: ["3"], type: "default-edge" },
-  { id: "3gs-3g1", sources: ["3gs"], targets: ["3g1"], type: "default-edge" },
-  { id: "3gs-3gb", sources: ["3gs"], targets: ["3g1-b"], type: "default-edge" },
-  {
-    id: "3g1-3gconnect",
-    sources: ["3g1"],
-    targets: ["3gconnect"],
-    type: "default-edge",
-  },
-  {
-    id: "3g1-b-3gconnect",
-    sources: ["3g1-b"],
-    targets: ["3gconnect"],
-    type: "default-edge",
-  },
-  {
-    id: "3g1-3g2",
-    sources: ["3gconnect"],
-    targets: ["3g2"],
-    type: "default-edge",
-  },
-  {
-    id: "3g1-3g3",
-    sources: ["3gconnect"],
-    targets: ["3g3"],
-    type: "default-edge",
-  },
-  {
-    id: "3g1-3g4",
-    sources: ["3gconnect"],
-    targets: ["3g4"],
-    type: "default-edge",
-  },
-  { id: "e1-3", sources: ["1"], targets: ["3"], type: "default-edge" },
-  { id: "e1-4", sources: ["1"], targets: ["4"], type: "default-edge" },
-];