@evenicanpm/admin-integrate 1.2.0 → 1.3.0

package/src/components/core/title-edit.tsx

@@ -1,17 +1,16 @@
-import { useState } from "react";
-
-import { Theme, useTheme } from "@mui/material";
+import { OutlinedIconButton } from "@evenicanpm/admin-integrate/components/button";
+import { Check, Clear, EditOutlined } from "@mui/icons-material";
 import {
 	Box,
+	IconButton,
 	Stack,
-	Typography,
 	TextField,
-	IconButton,
-	TypographyOwnProps,
+	type Theme,
+	Typography,
+	type TypographyOwnProps,
+	useTheme,
 } from "@mui/material";
-import { EditOutlined, Clear, Check } from "@mui/icons-material";
-
-import { OutlinedIconButton } from "@evenicanpm/admin-integrate/components/button";
+import { useEffect, useState } from "react";
 
 interface Props {
 	title: string;
@@ -42,7 +41,9 @@ export default function TitleEdit(props: Props) {
 	};
 
 	const handleConfirm = () => {
-		props.onConfirm(input);
+		const trimmed = input.trim().replace(/\s+/g, " ");
+		props.onConfirm(trimmed);
+		setInput(trimmed);
 		setEditMode(false);
 	};
 
@@ -52,6 +53,12 @@ export default function TitleEdit(props: Props) {
 		}
 	};
 
+	useEffect(() => {
+		if (props.readOnly) {
+			handleClose();
+		}
+	}, [props.readOnly]);
+
 	return (
 		<>
 			<Box
@@ -93,7 +100,7 @@ export default function TitleEdit(props: Props) {
 							<OutlinedIconButton
 								color="success"
 								onClick={handleConfirm}
-								disabled={input === ""}
+								disabled={!/(.|\s)*\S(.|\s)*/.test(input)}
 							>
 								<Check />
 							</OutlinedIconButton>

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

@@ -1,26 +1,26 @@
-import React, { useState } from "react";
-import { redirect, RedirectType } from "next/navigation";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Box, Stack, Typography, Popover } from "@mui/material";
-import { RemoveRedEye } from "@mui/icons-material";
-
-// Custom components
+import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
 import {
+	StyledIconButton,
 	StyledTableCell,
 	StyledTableRow,
-	StyledIconButton,
 } from "@evenicanpm/admin-integrate/components/data-table/table-row";
 import { ExecutionStatusIcon } from "@evenicanpm/admin-integrate/components/execution";
-
-// Hooks
-import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
-
-// Types
-import { Item } from "./dashboard-list";
-import { Head } from "../data-table/table-header";
-import { TableCellProps, SxProps } from "@mui/material";
+import { toDistanceDate } from "@evenicanpm/admin-integrate/utils/date-functions";
+import { 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 { Head } from "../data-table/table-header";
+import type { Item } from "./dashboard-list";
 
 interface Props {
 	item: Item;
@@ -33,10 +33,6 @@ const DashboardListRow: React.FC<Props> = (props: Props) => {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
-	// e.g. "xx days ago"
-	const time = useTimestamp(props.item.startDate);
-	const localTime = new Date(props.item.startDate).toString();
-
 	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 	const open = Boolean(anchorEl);
 
@@ -96,9 +92,10 @@ const DashboardListRow: React.FC<Props> = (props: Props) => {
 					onMouseEnter={handlePopoverOpen}
 					onMouseLeave={handlePopoverClose}
 				>
-					{time}
+					{toDistanceDate(props.item.startDate)}
 				</Typography>
-				<Popover
+				<DateTimePopover
+					dateIsoString={props.item.startDate}
 					sx={{ pointerEvents: "none" }}
 					open={open}
 					anchorEl={anchorEl}
@@ -112,11 +109,7 @@ const DashboardListRow: React.FC<Props> = (props: Props) => {
 					}}
 					onClose={handlePopoverClose}
 					disableRestoreFocus
-				>
-					<Box sx={styles.popover}>
-						<Typography>{localTime}</Typography>
-					</Box>
-				</Popover>
+				/>
 			</StyledTableCell>
 			<StyledTableCell
 				align={props.heading[2].align as TableCellProps["align"]}

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

@@ -1,23 +1,27 @@
-import React, { useState, useEffect } from "react";
-import { useTranslations } from "next-intl";
-
 // API
-import { GetProcessExecutionsQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { Card, Table, TableContainer, TableBody, Box } from "@mui/material";
-import { Theme, useTheme } from "@mui/material";
-
+import type { GetProcessExecutionsQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 // Custom components
 import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
-
+// MUI
+import {
+	Box,
+	Card,
+	Stack,
+	Table,
+	TableBody,
+	TableContainer,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useState } from "react";
 import { TableHeader, TableSkeleton } from "../data-table";
-import DashboardListRow from "./dashboard-list-row";
-import { DashboardListHeader } from "../header/";
-
 // Types
-import { Head } from "../data-table/table-header";
-import { Typography, Stack } from "@mui/material";
+import type { Head } from "../data-table/table-header";
+import { DashboardListHeader } from "../header/";
+import DashboardListRow from "./dashboard-list-row";
 
 // Returned from processExecutions query
 export interface Item {

package/src/components/data-table/table-header.tsx

@@ -1,12 +1,10 @@
-import TableRow from "@mui/material/TableRow";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import { type SxProps, type Theme, useTheme } from "@mui/material";
+import styled from "@mui/material/styles/styled";
+import TableCell, { type TableCellProps } from "@mui/material/TableCell";
 import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
 import TableSortLabel from "@mui/material/TableSortLabel";
-import TableCell, { TableCellProps } from "@mui/material/TableCell";
-import styled from "@mui/material/styles/styled";
-
-import { SxProps } from "@mui/material";
-import { Theme, useTheme } from "@mui/material";
-import { ExpandLess, ExpandMore } from "@mui/icons-material";
 
 // STYLED COMPONENTS
 const StyledTableCell = styled(TableCell)(({ theme }) => ({

package/src/components/data-table/table-pagination.tsx

@@ -1,4 +1,4 @@
-import Pagination, { PaginationProps } from "@mui/material/Pagination";
+import Pagination, { type PaginationProps } from "@mui/material/Pagination";
 import styled from "@mui/material/styles/styled";
 
 // STYLED COMPONENT

package/src/components/data-table/table-row.tsx

@@ -1,5 +1,5 @@
+import { IconButton, TableCell, TableRow } from "@mui/material";
 import styled from "@mui/material/styles/styled";
-import { TableRow, TableCell, IconButton } from "@mui/material";
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
 	fontSize: 14,

package/src/components/data-table/table-skeleton.tsx

@@ -1,8 +1,13 @@
-import { TableContainer, Table, TableBody, Skeleton } from "@mui/material";
-import { SxProps } from "@mui/material";
+import {
+	Skeleton,
+	type SxProps,
+	Table,
+	TableBody,
+	TableContainer,
+} from "@mui/material";
 
-import TableHeader, { Head } from "./table-header";
-import { StyledTableRow, StyledTableCell } from "./table-row";
+import TableHeader, { type Head } from "./table-header";
+import { StyledTableCell, StyledTableRow } from "./table-row";
 
 interface Props {
 	heading: Head[];

package/src/components/execution/execution-filter.ts

@@ -1,4 +1,4 @@
-import {
+import type {
 	DateRangeFilter,
 	Filters,
 	MultiSelectFilter,

package/src/components/execution/execution-status-icon.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-
-import { SxProps } from "@mui/material";
 import {
-	Loop,
 	CheckCircleOutline,
-	WarningAmber,
-	ErrorOutline,
 	Clear,
+	ErrorOutline,
+	Loop,
+	WarningAmber,
 } from "@mui/icons-material";
 
+import type { SxProps } from "@mui/material";
+import type React from "react";
+
 interface Props {
 	executionStatusId: string;
 	sx?: SxProps;
 }
 
 const ExecutionStatusIcon: React.FC<Props> = (props: Props) => {
-	const statusIconMap: { [key: string]: any } = {
+	const statusIconMap: { [key: string]: React.ReactNode } = {
 		"300": <Loop color="info" />,
 		"400": <CheckCircleOutline color="success" />,
 		"450": <WarningAmber color="warning" />,

package/src/components/execution/execution-tag.tsx

@@ -1,22 +1,7 @@
-import React from "react";
+import { StatusTag } from "@evenicanpm/admin-integrate/components/core";
+import type { SxProps } from "@mui/material";
 import { useTranslations } from "next-intl";
 
-import { styled } from "@mui/material/styles";
-import { Box, Typography, SxProps } from "@mui/material";
-
-// Styled components
-const StyledTagBox = styled(Box)(({ theme }) => ({
-	padding: theme.spacing(0, 1.5),
-	border: "solid 1px",
-	borderRadius: 4,
-	alignContent: "center",
-	maxWidth: "fit-content",
-	maxHeight: "fit-content",
-}));
-const StyledTag = styled(Typography)(() => ({
-	fontWeight: "bold",
-}));
-
 interface Props {
 	executionStatusId: string;
 	sx?: SxProps;
@@ -25,73 +10,23 @@ interface Props {
 const ExecutionTag: React.FC<Props> = (props: Props) => {
 	const t = useTranslations("Integrate");
 
-	const statusTagMap: { [key: string]: any } = {
+	const statusTagMap: { [key: string]: React.ReactNode } = {
 		300: (
-			<StyledTagBox
-				sx={{
-					backgroundColor: "info.100",
-					borderColor: "info.main",
-					...props.sx,
-				}}
-			>
-				<StyledTag color="info" variant="caption">
-					{t("Executions.inProgress")}
-				</StyledTag>
-			</StyledTagBox>
+			<StatusTag type="info" text={t("Executions.inProgress")} sx={props.sx} />
 		),
 		400: (
-			<StyledTagBox
-				sx={{
-					backgroundColor: "success.100",
-					borderColor: "success.main",
-					...props.sx,
-				}}
-			>
-				<StyledTag color="success" variant="caption">
-					{t("Executions.complete")}
-				</StyledTag>
-			</StyledTagBox>
+			<StatusTag type="success" text={t("Executions.complete")} sx={props.sx} />
 		),
 		450: (
-			<StyledTagBox
-				sx={{
-					backgroundColor: "warning.100",
-					borderColor: "orange.700",
-					color: "orange.700",
-					...props.sx,
-				}}
-			>
-				<StyledTag color="inherit" variant="caption">
-					{t("Executions.warning")}
-				</StyledTag>
-			</StyledTagBox>
-		),
-		500: (
-			<StyledTagBox
-				sx={{
-					backgroundColor: "error.100",
-					borderColor: "error.main",
-					...props.sx,
-				}}
-			>
-				<StyledTag color="error" variant="caption">
-					{t("Executions.failed")}
-				</StyledTag>
-			</StyledTagBox>
+			<StatusTag type="warning" text={t("Executions.warning")} sx={props.sx} />
 		),
+		500: <StatusTag type="error" text={t("Executions.failed")} sx={props.sx} />,
 		999: (
-			<StyledTagBox
-				sx={{
-					backgroundColor: "grey.300",
-					borderColor: "grey.600",
-					color: "grey.600",
-					...props.sx,
-				}}
-			>
-				<StyledTag color="inherit" variant="caption">
-					{t("Executions.unavailable")}
-				</StyledTag>
-			</StyledTagBox>
+			<StatusTag
+				type="unavailable"
+				text={t("Executions.unavailable")}
+				sx={props.sx}
+			/>
 		),
 	};
 

package/src/components/execution/index.ts

@@ -1,2 +1,2 @@
-export { default as ExecutionTag } from "./execution-tag";
 export { default as ExecutionStatusIcon } from "./execution-status-icon";
+export { default as ExecutionTag } from "./execution-tag";

package/src/components/execution-history-drawer/execution-history-drawer.tsx

@@ -0,0 +1,203 @@
+"use client";
+import type {
+	GetProcessExecutionsByProcessQuery,
+	ProcessExecutionInput,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
+import { TablePagination } from "@evenicanpm/admin-integrate/components/data-table";
+import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
+import {
+	Box,
+	Card,
+	Grid2 as Grid,
+	Stack,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useState } from "react";
+import ExecutionsCard from "./executions-card";
+
+// Returned from processExecutionsByProcess query
+export interface Item {
+	id: string;
+	name: string;
+	startDate: string;
+	executionStatus: {
+		id: string;
+	};
+}
+
+interface Props {
+	data: GetProcessExecutionsByProcessQuery;
+	loading: boolean;
+	input: ProcessExecutionInput;
+	setInput: (newInput: ProcessExecutionInput) => void;
+	drawerOpen?: boolean;
+	setDrawerOpen?: (open: boolean) => void;
+}
+
+const ExecutionHistoryDrawer: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate.Executions");
+
+	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
+
+	useEffect(() => {
+		if (props.data?.processExecutionsByProcess?.nodes) {
+			setItems(props.data.processExecutionsByProcess.nodes as Item[]);
+			setFetched(true);
+		}
+	}, [props.data]);
+
+	const handleChangePage = (
+		event: React.ChangeEvent<unknown>,
+		value: number,
+	) => {
+		const page = (props.input.skip || 0) / (props.input.top || 10) + 1;
+		if (page !== value && event) {
+			props.setInput({
+				...props.input,
+				skip: (props.input.top || 10) * (value - 1),
+			});
+			setFetched(false);
+		}
+	};
+	// Toggle drawer open/close
+	const toggleDrawer = () => {
+		if (props.setDrawerOpen) props.setDrawerOpen(!props.drawerOpen);
+	};
+
+	return (
+		<Box
+			sx={{
+				width: props.drawerOpen ? 345 : 43,
+				//transition: "width 0.3s ease",
+				backgroundColor: theme.palette.background.default,
+				borderRight: `1px solid ${theme.palette.grey[400]}`,
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "flex-start",
+				position: "relative",
+				overflow: "auto",
+			}}
+		>
+			<Box
+				sx={{
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					width: "100%",
+					p: 1,
+					borderBottom: `1px solid ${theme.palette.divider}`,
+				}}
+			>
+				{props.drawerOpen && (
+					<Typography
+						variant="subtitle1"
+						align="center"
+						sx={{
+							fontWeight: 600,
+							flex: 1,
+							padding: theme.spacing(0, 0, 0, 2),
+						}}
+					>
+						{t("ExecutionsDetail.history")}
+					</Typography>
+				)}
+				<IconButton
+					onClick={toggleDrawer}
+					size="small"
+					sx={{
+						transition: "transform 0.3s ease",
+						transform: props.drawerOpen ? "rotate(180deg)" : "rotate(0deg)",
+					}}
+				>
+					<KeyboardDoubleArrowRightIcon />
+				</IconButton>
+			</Box>
+			{props.drawerOpen &&
+				props?.data?.processExecutionsByProcess?.nodes &&
+				props.data.processExecutionsByProcess.nodes.map((item) => (
+					<ExecutionsCard key={item?.id as string} item={item as Item} />
+				))}
+
+			{!props.loading && props.drawerOpen && fetched && items.length === 0 ? (
+				<Card
+					sx={{
+						background: "transparent",
+						textAlign: "center",
+						padding: theme.spacing(0, 2),
+						boxShadow: "none",
+					}}
+				>
+					<FlexBox
+						justifyContent="center"
+						alignItems="center"
+						sx={{
+							minHeight: "335px",
+							marginBottom: theme.spacing(2),
+							background: "transparent",
+						}}
+					>
+						<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?.processExecutionsByProcess &&
+			fetched &&
+			props.drawerOpen &&
+			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={(props.input.skip || 0) / (props.input.top || 10) + 1}
+								onChange={handleChangePage}
+								count={Math.ceil(
+									(props.data.processExecutionsByProcess.recordCount || 10) /
+										(props.input.top || 10),
+								)}
+							/>
+						</FlexBox>
+					</Grid>
+				</Grid>
+			) : null}
+		</Box>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		iconButton: {
+			borderRadius: 1,
+		},
+		pagination: {
+			marginTop: "auto",
+			width: "100%",
+		},
+		paginationBox: {
+			paddingLeft: theme.spacing(0),
+			width: "100%",
+		},
+	};
+};
+
+export default ExecutionHistoryDrawer;

package/src/components/execution-history-drawer/executions-card.tsx

@@ -0,0 +1,85 @@
+import {
+	ExecutionStatusIcon,
+	ExecutionTag,
+} from "@evenicanpm/admin-integrate/components/execution";
+import { toShortDate } from "@evenicanpm/admin-integrate/utils/date-functions";
+import { Box, Card, Typography, useTheme } from "@mui/material";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import type React from "react";
+import type { Item } from "./execution-history-drawer";
+
+interface Props {
+	item: Item;
+}
+
+const ExecutionsCard: React.FC<Props> = (props: Props) => {
+	const { item } = props;
+	const theme = useTheme();
+	const router = useRouter();
+	const params = useParams();
+	const searchParams = useSearchParams();
+
+	const processId = params?.processId as string;
+	const selectedExecutionId = searchParams.get("ExecutionId");
+
+	const isSelected = item.id.toString() === selectedExecutionId;
+
+	const handleChangeExecutionId = (newId: string) => {
+		router.push(`/e4integrate/executions/${processId}?ExecutionId=${newId}`);
+	};
+
+	return (
+		<Box
+			sx={{
+				padding: theme.spacing(0.5, 2),
+				width: "100%",
+			}}
+		>
+			<Card
+				onClick={() => handleChangeExecutionId(item.id.toString())}
+				sx={{
+					backgroundColor: isSelected ? "#DBF0FE" /* primary[100] */ : "white",
+					border: `1px solid ${isSelected ? "#4E97FD" /*primary[500]*/ : theme.palette.grey[400]}`,
+					boxShadow: "none",
+					borderRadius: 2.5,
+					width: "100%",
+					p: 1,
+					cursor: "pointer",
+					transition: "all 0.2s ease-in-out",
+					"&:hover": { boxShadow: 4 },
+				}}
+			>
+				{/* Top Row: Icon, Name, and Status */}
+				<Box display="flex" alignItems="center" justifyContent="space-between">
+					<Box display="flex" alignItems="center" gap={1}>
+						<ExecutionStatusIcon executionStatusId={item.executionStatus.id} />
+						<Typography
+							variant="subtitle1"
+							title={item.name}
+							fontWeight={600}
+							sx={{
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								maxWidth: 100,
+							}}
+						>
+							{item.name}
+						</Typography>
+					</Box>
+
+					<ExecutionTag executionStatusId={item.executionStatus.id} />
+				</Box>
+
+				<Typography
+					variant="body2"
+					sx={{ color: theme.palette.grey[500], mt: 1, ml: 0 }}
+				>
+					{toShortDate(item.startDate)}
+				</Typography>
+			</Card>
+		</Box>
+	);
+};
+
+export default ExecutionsCard;

package/src/components/execution-history-drawer/index.ts

@@ -0,0 +1 @@
+export { default as ExecutionHistoryDrawer } from "./execution-history-drawer";