@evenicanpm/admin-integrate 1.2.0 → 1.3.0

package/src/components/footer/footer.tsx

@@ -1,11 +1,15 @@
-import React from "react";
-import { useTranslations } from "next-intl";
-
+import { Copyright } from "@mui/icons-material";
 // MUI
-import { Theme, useTheme } from "@mui/material";
+import {
+	Box,
+	Grid2 as Grid,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
 import styled from "@mui/material/styles/styled";
-import { Typography, Box, Grid2 as Grid } from "@mui/material";
-import { Copyright } from "@mui/icons-material";
+import { useTranslations } from "next-intl";
+import type React from "react";
 
 // Styled components
 const Footer = styled("footer")(() => ({

package/src/components/header/dashboard-list-header.tsx

@@ -1,11 +1,16 @@
-import React from "react";
-import { redirect, RedirectType } from "next/navigation";
-import { useTranslations } from "next-intl";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Grid2 as Grid, Box, Typography, Button } from "@mui/material";
 import { Refresh, VisibilityOutlined } from "@mui/icons-material";
+// MUI
+import {
+	Box,
+	Button,
+	Grid2 as Grid,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { RedirectType, redirect } from "next/navigation";
+import { useTranslations } from "next-intl";
+import type React from "react";
 
 // Custom components
 import { OutlinedIconButton } from "../button";

package/src/components/header/execution-details-header.tsx

@@ -1,17 +1,24 @@
-import React, { useState } from "react";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Grid2 as Grid, Typography, Stack } from "@mui/material";
-
-// Custom components
-import { ExecutionTag } from "@evenicanpm/admin-integrate/components/execution";
 import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
+import { ExecutionTag } from "@evenicanpm/admin-integrate/components/execution";
+import {
+	toDurationDate,
+	toShortDate,
+} from "@evenicanpm/admin-integrate/utils/date-functions";
+import {
+	Grid2 as Grid,
+	Stack,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useState } from "react";
 
-interface Execution {
+export interface Execution {
 	name: string;
 	startDate: string;
-	endDate: string;
+	endDate?: string;
 	executionStatus: {
 		id: string;
 	};
@@ -23,13 +30,14 @@ interface Props {
 }
 
 const ExecutionDetailsHeader: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate");
+
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
-	const startDate = new Date(props.execution.startDate);
-	const endDate = new Date(props.execution.endDate);
-	const localTime = startDate.toLocaleString();
-	const duration = (endDate.getTime() - startDate.getTime()) / 1000;
+	const duration = props.execution.endDate
+		? toDurationDate(props.execution.startDate, props.execution.endDate)
+		: "";
 
 	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 	const open = Boolean(anchorEl);
@@ -41,7 +49,6 @@ const ExecutionDetailsHeader: React.FC<Props> = (props: Props) => {
 	const handlePopoverClose = () => {
 		setAnchorEl(null);
 	};
-
 	return (
 		<Grid container columnSpacing={1}>
 			<Grid size={8}>
@@ -66,18 +73,20 @@ const ExecutionDetailsHeader: React.FC<Props> = (props: Props) => {
 				</Stack>
 			</Grid>
 			<Grid size={12}>
-				<Stack
-					spacing={1}
-					direction="row"
-					onMouseEnter={handlePopoverOpen}
-					onMouseLeave={handlePopoverClose}
-				>
-					<Typography color="grey" variant="caption">
-						{localTime}
-					</Typography>
-					<Typography color="grey" variant="caption">
-						Duration: {duration}s
+				<Stack spacing={1} direction="row">
+					<Typography
+						color="grey"
+						variant="caption"
+						onMouseEnter={handlePopoverOpen}
+						onMouseLeave={handlePopoverClose}
+					>
+						{toShortDate(props.execution.startDate)}
 					</Typography>
+					{duration && (
+						<Typography color="grey" variant="caption">
+							{t("Executions.duration")}: {duration}
+						</Typography>
+					)}
 				</Stack>
 			</Grid>
 			<DateTimePopover

package/src/components/header/header.tsx

@@ -1,6 +1,13 @@
-import React from "react";
-import { Box, Typography, AppBar, Toolbar, Stack } from "@mui/material";
-import { Theme, useTheme } from "@mui/material";
+import {
+	AppBar,
+	Box,
+	Stack,
+	type Theme,
+	Toolbar,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import type React from "react";
 
 interface Props {
 	title: string; // e.g. Executions

package/src/components/header/index.ts

@@ -1,4 +1,4 @@
-export { default as IntegrateHeader } from "./header";
 export { default as DashboardListHeader } from "./dashboard-list-header";
 export { default as ExecutionDetailsHeader } from "./execution-details-header";
+export { default as IntegrateHeader } from "./header";
 export { default as IntegrationDetailsHeader } from "./integration-details-header";

package/src/components/header/integration-details-header.tsx

@@ -1,29 +1,36 @@
-import React from "react";
-import { useTranslations } from "next-intl";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Grid2 as Grid, Stack, Divider, Button, Box } from "@mui/material";
 import {
-	InfoOutlined,
+	StatusTag,
+	TitleEdit,
+} from "@evenicanpm/admin-integrate/components/core";
+import { IntegrationStatusIcon } from "@evenicanpm/admin-integrate/components/integration-list";
+import {
+	AccessTime,
 	Code,
 	FileUploadOutlined,
 	PlayArrowOutlined,
 } from "@mui/icons-material";
-
-// Custom components
-import { TitleEdit } from "@evenicanpm/admin-integrate/components/core";
-
-// TODO: when applying on page, change to use type of API query result
-type DetailsTemp = {
-	name: string;
-	processIcon: string;
-};
+import {
+	Box,
+	Button,
+	Divider,
+	Grid2 as Grid,
+	Stack,
+	type SxProps,
+	type Theme,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
 
 interface Props {
-	details: DetailsTemp;
-	setDetails: (newDetails: DetailsTemp) => void;
+	name: string;
+	setName: React.Dispatch<React.SetStateAction<string>>;
+	onImportClick?: React.MouseEventHandler<HTMLButtonElement>;
+	onScheduleClick?: React.MouseEventHandler<HTMLButtonElement>;
+	icon?: string;
 	children?: React.ReactNode; // buttons to go in header, e.g. save, cancel etc.
+	toolbar?: "enabled" | "disabled" | "hidden";
+	draft?: boolean;
+	untitled?: boolean;
 }
 
 const IntegrationDetailsHeader: React.FC<Props> = (props: Props) => {
@@ -33,24 +40,39 @@ const IntegrationDetailsHeader: React.FC<Props> = (props: Props) => {
 	const styles = getStyles(theme);
 
 	const onConfirm = (input: string) => {
-		props.setDetails({ ...props.details, name: input });
+		props.setName(input);
 	};
 
+	const toolbarStyles: SxProps =
+		props.toolbar === "disabled"
+			? {
+					...styles.controlsButton,
+					color: theme.palette.grey[100],
+					borderColor: theme.palette.grey[300],
+				}
+			: styles.controlsButton;
+
 	return (
-		<Grid container rowSpacing={1} columnSpacing={0}>
-			<Grid size={{ xs: 12, sm: 8 }}>
+		<Grid container rowSpacing={1} columnSpacing={0} sx={styles.root}>
+			<Grid
+				size={{ xs: 12, sm: 8 }}
+				pl={2}
+				pt={1}
+				display="flex"
+				alignItems="center"
+			>
 				<Stack spacing={1} direction="row" alignItems="center">
-					{/* TODO: Apply Process icon component once that is merged. Using temp icon for now */}
-					<InfoOutlined color="info" />
+					<IntegrationStatusIcon processIcon={props.icon || "noIcon"} />
 
-					<TitleEdit
-						title={props.details.name}
-						onConfirm={onConfirm}
-						variant="h5"
-					/>
+					<TitleEdit title={props.name} onConfirm={onConfirm} variant="h5" />
+
+					{props.untitled && <StatusTag type="warning" text={t("untitled")} />}
+					{props.draft && !props.untitled && (
+						<StatusTag type="info" text={t("draft")} />
+					)}
 				</Stack>
 			</Grid>
-			<Grid size={{ xs: 12, sm: 4 }}>
+			<Grid size={{ xs: 12, sm: 4 }} pt={1} pr={2}>
 				<Stack
 					spacing={1}
 					direction="row"
@@ -61,28 +83,65 @@ const IntegrationDetailsHeader: React.FC<Props> = (props: Props) => {
 					{props.children}
 				</Stack>
 			</Grid>
-			<Grid size={12}>
-				<Divider sx={styles.divider} />
-			</Grid>
-			<Grid size={12}>
-				<Stack direction="row">
-					<Box sx={styles.controlsButton}>
-						<Button startIcon={<Code />}>{t("codeView")}</Button>
-					</Box>
-					<Box sx={styles.controlsButton}>
-						<Button startIcon={<FileUploadOutlined />}>{t("import")}</Button>
-					</Box>
-					<Box sx={{ ...styles.controlsButton, border: "none" }}>
-						<Button startIcon={<PlayArrowOutlined />}>{t("executions")}</Button>
-					</Box>
-				</Stack>
-			</Grid>
+
+			{(!props.toolbar || props.toolbar !== "hidden") && (
+				<>
+					<Grid size={12}>
+						<Divider sx={styles.divider} />
+					</Grid>
+					<Grid size={12} pb={1} pl={1} pr={1}>
+						<Stack direction="row">
+							<Box sx={toolbarStyles}>
+								<Button
+									startIcon={<Code />}
+									disabled={props.toolbar === "disabled"}
+								>
+									{t("codeView")}
+								</Button>
+							</Box>
+							<Box sx={toolbarStyles}>
+								<Button
+									startIcon={<FileUploadOutlined />}
+									disabled={props.toolbar === "disabled"}
+									onClick={(e) => {
+										if (props.onImportClick) props.onImportClick(e);
+									}}
+								>
+									{t("import")}
+								</Button>
+							</Box>
+							<Box sx={{ ...toolbarStyles }}>
+								<Button
+									startIcon={<AccessTime />}
+									disabled={props.toolbar === "disabled"}
+									onClick={(e) => {
+										if (props.onScheduleClick) props.onScheduleClick(e);
+									}}
+								>
+									{t("schedule")}
+								</Button>
+							</Box>
+							<Box sx={{ ...toolbarStyles, border: "none" }}>
+								<Button
+									startIcon={<PlayArrowOutlined />}
+									disabled={props.toolbar === "disabled"}
+								>
+									{t("executions")}
+								</Button>
+							</Box>
+						</Stack>
+					</Grid>
+				</>
+			)}
 		</Grid>
 	);
 };
 
 const getStyles = (theme: Theme) => {
 	return {
+		root: {
+			backgroundColor: theme.palette.background.paper,
+		},
 		divider: {
 			border: `1px solid ${theme.palette.grey[500]}`,
 		},

package/src/components/integration-list/index.ts

@@ -0,0 +1,3 @@
+export { default as IntegrationStatusIcon } from "./integration-status-icon";
+export { default as IntegrationTag } from "./integration-tag";
+export { default as IntegrationList } from "./list";

package/src/components/integration-list/integration-filter.ts

@@ -0,0 +1,21 @@
+import type {
+	Filters,
+	MultiSelectFilter,
+} from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+
+export interface IntegrationListFilters extends Filters {
+	multiSelectFilter: MultiSelectFilter;
+}
+
+export const integrationListFilters: IntegrationListFilters = {
+	multiSelectFilter: {
+		type: "multiSelect",
+		label: "IntegrationList.tags",
+		value: null,
+		options: [
+			{ id: "Schedule Pending", value: "IntegrationList.scheduledPending" },
+			{ id: "Scheduled", value: "IntegrationList.scheduled" },
+			{ id: "Triggered", value: "IntegrationList.triggered" },
+		],
+	},
+};

package/src/components/integration-list/integration-status-icon.tsx

@@ -0,0 +1,32 @@
+import CodeIcon from "@mui/icons-material/Code";
+import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
+import EmailIcon from "@mui/icons-material/Email";
+import IosShareIcon from "@mui/icons-material/IosShare";
+import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+import StorageIcon from "@mui/icons-material/Storage";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import type { SxProps } from "@mui/material";
+import { purple } from "@mui/material/colors";
+import type React from "react";
+
+interface Props {
+	processIcon: string;
+	sx?: SxProps;
+}
+
+const IntegrationStatusIcon: React.FC<Props> = (props: Props) => {
+	const color = purple[500];
+	const statusIconMap: { [key: string]: React.ReactNode } = {
+		DB: <StorageIcon color="success" />,
+		Webhook: <ElectricBoltIcon color="error" />,
+		Restful: <CodeIcon color="info" />,
+		Table: <TableChartIcon sx={{ color: color }} />,
+		Email: <EmailIcon color="warning" />,
+		Export: <IosShareIcon color="primary" />,
+		noIcon: <QuestionMarkIcon color="info" />,
+	};
+
+	return statusIconMap[props.processIcon] || statusIconMap.noIcon;
+};
+
+export default IntegrationStatusIcon;

package/src/components/integration-list/integration-tag.tsx

@@ -0,0 +1,33 @@
+import { StatusTag } from "@evenicanpm/admin-integrate/components/core";
+import { Box, type SxProps } from "@mui/material";
+import { useTranslations } from "next-intl";
+
+interface Props {
+	process: {
+		isScheduled: number;
+		isTriggered: number;
+	};
+	sx?: SxProps;
+}
+
+const IntegrationTag: React.FC<Props> = ({ process, sx }) => {
+	const t = useTranslations("Integrate.IntegrationList");
+
+	return (
+		<Box display="flex" gap={1} justifyContent="center">
+			{process.isTriggered === 1 && (
+				<StatusTag type="info" text={t("triggered")} sx={sx} />
+			)}
+
+			{process.isScheduled === 1 && (
+				<StatusTag type="success" text={t("scheduled")} sx={sx} />
+			)}
+
+			{process.isScheduled === 0 && (
+				<StatusTag type="warning" text={t("scheduledPending")} sx={sx} />
+			)}
+		</Box>
+	);
+};
+
+export default IntegrationTag;

package/src/components/integration-list/list/index.ts

@@ -0,0 +1 @@
+export { default } from "./integration-list";

package/src/components/integration-list/list/integration-list-row.tsx

@@ -0,0 +1,161 @@
+import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import {
+	StyledIconButton,
+	StyledTableCell,
+	StyledTableRow,
+} from "@evenicanpm/admin-integrate/components/data-table/table-row";
+import {
+	IntegrationStatusIcon,
+	IntegrationTag,
+} from "@evenicanpm/admin-integrate/components/integration-list";
+import { toDistanceDate } from "@evenicanpm/admin-integrate/utils/date-functions";
+import { ContentCopyOutlined, RemoveRedEye } from "@mui/icons-material";
+import {
+	Box,
+	Stack,
+	type SxProps,
+	type TableCellProps,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { RedirectType, redirect } from "next/navigation";
+import type React from "react";
+import { useState } from "react";
+import type { integrationItem } from "./integration-list";
+
+interface Props {
+	item: integrationItem;
+	heading: Head[]; // for alignment
+	sx?: SxProps;
+	handleRedirect?: (id: string) => void;
+	isImportMode?: boolean;
+	readOnly?: boolean;
+}
+
+const IntegrationListRow: React.FC<Props> = (props: Props) => {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	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 handleRedirect = () => {
+		if (props.handleRedirect) {
+			props.handleRedirect(props.item.id);
+		} else {
+			redirect(`/e4integrate/integrations/${props.item.id}`, RedirectType.push);
+		}
+	};
+
+	const headings = {
+		name: props.heading.find((h) => h.id === "name"),
+		id: props.heading.find((h) => h.id === "id"),
+		isScheduled: props.heading.find((h) => h.id === "isScheduled"),
+		modified: props.heading.find((h) => h.id === "modified"),
+		view: props.heading.find((h) => h.id === "view"),
+	};
+
+	return (
+		<StyledTableRow sx={props.sx}>
+			{headings.name && (
+				<StyledTableCell
+					align={headings.name.align as TableCellProps["align"]}
+					width={headings.name.width}
+				>
+					<Stack spacing={1} direction="row">
+						<Box display="flex" justifyContent="flex-end" alignItems="center">
+							<IntegrationStatusIcon processIcon={props.item.processIcon} />
+						</Box>
+						<Box display="flex" justifyContent="flex-end" alignItems="center">
+							<Typography>{props.item.name}</Typography>
+						</Box>
+					</Stack>
+				</StyledTableCell>
+			)}
+			{headings.id && (
+				<StyledTableCell
+					align={headings.id.align as TableCellProps["align"]}
+					width={headings.id.width}
+				>
+					<Typography>{props.item.id}</Typography>
+				</StyledTableCell>
+			)}
+			{headings.isScheduled && (
+				<StyledTableCell
+					align={headings.isScheduled.align as TableCellProps["align"]}
+					width={headings.isScheduled.width}
+				>
+					<IntegrationTag
+						process={{
+							isScheduled: props.item.isScheduled,
+							isTriggered: props.item.isTriggered,
+						}}
+					/>
+				</StyledTableCell>
+			)}
+			{headings.modified && (
+				<StyledTableCell
+					align={headings.modified.align as TableCellProps["align"]}
+					width={headings.modified.width}
+					sx={styles.timeCell}
+				>
+					<Typography
+						onMouseEnter={handlePopoverOpen}
+						onMouseLeave={handlePopoverClose}
+					>
+						{toDistanceDate(props.item.modified)}
+					</Typography>
+					<DateTimePopover
+						dateIsoString={props.item.modified}
+						sx={{ pointerEvents: "none" }}
+						open={open}
+						anchorEl={anchorEl}
+						anchorOrigin={{
+							vertical: "bottom",
+							horizontal: "center",
+						}}
+						transformOrigin={{
+							vertical: "top",
+							horizontal: "center",
+						}}
+						onClose={handlePopoverClose}
+						disableRestoreFocus
+					/>
+				</StyledTableCell>
+			)}
+			{headings.view && (
+				<StyledTableCell
+					align={headings.view.align as TableCellProps["align"]}
+					width={headings.view.width}
+				>
+					<StyledIconButton onClick={handleRedirect} disabled={props.readOnly}>
+						{props.isImportMode ? <ContentCopyOutlined /> : <RemoveRedEye />}
+					</StyledIconButton>
+				</StyledTableCell>
+			)}
+		</StyledTableRow>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		timeCell: {
+			cursor: "default",
+		},
+		popover: {
+			padding: theme.spacing(1),
+		},
+	};
+};
+
+export default IntegrationListRow;

package/src/components/integration-list/list/integration-list-table.tsx

@@ -0,0 +1,62 @@
+import type { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { type SxProps, Table, TableBody, TableContainer } from "@mui/material";
+import type { integrationItem } from "./integration-list";
+import IntegrationListRow from "./integration-list-row";
+
+interface Props {
+	heading: Head[];
+	items: integrationItem[];
+	input: ProcessExecutionInput;
+	setInput: (newInput: ProcessExecutionInput) => void;
+	rowSx?: SxProps;
+	handleRedirect?: (id: string) => void;
+	isImportMode?: boolean;
+	readOnly?: boolean;
+}
+
+export default function IntegrationListTable(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}
+					rowSx={props.rowSx}
+				/>
+				<TableBody>
+					{props.items.map((item) => (
+						<IntegrationListRow
+							key={item.id}
+							item={item}
+							heading={props.heading}
+							sx={props.rowSx}
+							handleRedirect={props.handleRedirect}
+							isImportMode={props.isImportMode}
+							readOnly={props.readOnly}
+						/>
+					))}
+				</TableBody>
+			</Table>
+		</TableContainer>
+	);
+}