@evenicanpm/admin-integrate 1.2.2 → 1.4.0

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

@@ -1,37 +1,36 @@
-import React, { useState } from "react";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Box, Stack, Typography } from "@mui/material";
-import { RemoveRedEye } from "@mui/icons-material";
-import { SxProps } from "@mui/material";
-
-// Custom components
+import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 import {
+	StyledIconButton,
 	StyledTableCell,
 	StyledTableRow,
-	StyledIconButton,
 } from "@evenicanpm/admin-integrate/components/data-table/table-row";
 import {
+	type DayString,
 	DayTag,
+	dayKeys,
+	isDayMap,
 	ScheduleIcon,
 } from "@evenicanpm/admin-integrate/components/scheduler";
-import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
-
-// Hooks
-import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
+import type { DrawerOpen } from "@evenicanpm/admin-integrate/components/scheduler/schedule-drawer/schedule-drawer";
 import useRecurrence from "@evenicanpm/admin-integrate/hooks/use-recurrence";
-
-// Types
-import { Item } from "./schedules-list";
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { TableCellProps } from "@mui/material";
 import {
-	DayString,
-	dayKeys,
-	isDayMap,
-} from "@evenicanpm/admin-integrate/components/scheduler";
-import { DrawerOpen } from "../scheduler";
+	toDistanceDate,
+	toShortDate,
+} 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 type React from "react";
+import { useState } from "react";
+import type { Item } from "./schedules-list";
 
 interface Props {
 	item: Item;
@@ -44,20 +43,11 @@ const SchedulesListRow: React.FC<Props> = (props: Props) => {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
-	// e.g. "xx days ago"
-	const modified = useTimestamp(props.item.modified);
-	const modifiedFull = new Date(props.item.modified).toString();
-
 	const recurrence = useRecurrence(
 		props.item.interval,
 		props.item.intervalUnitId,
 	);
 
-	const start = new Date(props.item.startDate);
-	const startDateLocale = start.toLocaleString().split(",")[0];
-	const startTimeLocale = start.toLocaleTimeString().slice(0, 5);
-	const startDateFull = start.toString();
-
 	const [modifiedAnchorEl, setModifiedAnchorEl] = useState<HTMLElement | null>(
 		null,
 	);
@@ -146,7 +136,7 @@ const SchedulesListRow: React.FC<Props> = (props: Props) => {
 					onMouseEnter={handlePopoverOpen}
 					onMouseLeave={handlePopoverClose}
 				>
-					{`${startDateLocale} ${startTimeLocale}`}
+					{toShortDate(props.item.startDate)}
 				</Typography>
 			</StyledTableCell>
 			<StyledTableCell
@@ -159,7 +149,7 @@ const SchedulesListRow: React.FC<Props> = (props: Props) => {
 					onMouseEnter={handlePopoverOpen}
 					onMouseLeave={handlePopoverClose}
 				>
-					{modified}
+					{toDistanceDate(props.item.modified)}
 				</Typography>
 			</StyledTableCell>
 			<StyledTableCell
@@ -172,7 +162,7 @@ const SchedulesListRow: React.FC<Props> = (props: Props) => {
 			</StyledTableCell>
 
 			<DateTimePopover
-				dateIsoString={modifiedFull}
+				dateIsoString={props.item.modified}
 				sx={{ pointerEvents: "none" }}
 				open={modifiedOpen}
 				anchorEl={modifiedAnchorEl}
@@ -188,7 +178,7 @@ const SchedulesListRow: React.FC<Props> = (props: Props) => {
 				disableRestoreFocus
 			/>
 			<DateTimePopover
-				dateIsoString={startDateFull}
+				dateIsoString={props.item.startDate}
 				sx={{ pointerEvents: "none" }}
 				open={startDateOpen}
 				anchorEl={startDateAnchorEl}

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

@@ -1,25 +1,12 @@
-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 type { ScheduledProcessInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
-
-// Local components
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import type { DrawerOpen } from "@evenicanpm/admin-integrate/components/scheduler/schedule-drawer/schedule-drawer";
+import { type SxProps, Table, TableBody, TableContainer } from "@mui/material";
+import type React from "react";
+import type { Item } from "./schedules-list";
 import SchedulesListRow from "./schedules-list-row";
 
-// Types
-import { DrawerOpen } from "../scheduler";
-
 interface Props {
 	heading: Head[];
 	items: Item[];
@@ -29,7 +16,7 @@ interface Props {
 	setDrawerOpen: React.Dispatch<React.SetStateAction<DrawerOpen | null>>;
 }
 
-export default function SchedulesListTable(props: Props) {
+export default function SchedulesListTable(props: Readonly<Props>) {
 	const handleRequestSort = (property: string) => {
 		const current = props.input.sort;
 		if (property === current) {
@@ -47,28 +34,26 @@ export default function SchedulesListTable(props: Props) {
 	};
 
 	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>
-		</>
+		<TableContainer>
+			<Table>
+				<TableHeader
+					heading={props.heading}
+					orderBy={props.input.sort || ""}
+					order={props.input.sortDesc ? "desc" : "asc"}
+					onRequestSort={handleRequestSort}
+				/>
+				<TableBody>
+					{props.items.map((item) => (
+						<SchedulesListRow
+							key={item.id}
+							item={item}
+							heading={props.heading}
+							sx={props.rowSx}
+							setDrawerOpen={props.setDrawerOpen}
+						/>
+					))}
+				</TableBody>
+			</Table>
+		</TableContainer>
 	);
 }

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

@@ -1,35 +1,35 @@
-import React, { useState, useEffect } from "react";
-import { useTranslations } from "next-intl";
-
-// API
-import {
-	ScheduledProcessInput,
+import type {
 	GetScheduledProcessesQuery,
+	ScheduledProcessInput,
 } 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 type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 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 type { ListFilterOutput } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+import type { DrawerOpen } from "@evenicanpm/admin-integrate/components/scheduler/schedule-drawer/schedule-drawer";
 import {
-	SchedulesListFilters,
+	type SchedulesListFilters,
 	schedulesListFilters,
 } from "@evenicanpm/admin-integrate/components/scheduler/schedule-filter";
-import { DrawerOpen } from "../scheduler";
+import AddIcon from "@mui/icons-material/Add";
+import {
+	Box,
+	Card,
+	Grid2 as Grid,
+	Stack,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import Button from "@mui/material/Button";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useState } from "react";
+import SchedulesListTable from "./schedules-list-table";
 
 export type Item = {
 	id: string;
@@ -124,6 +124,15 @@ const SchedulesList: React.FC<Props> = (props: Props) => {
 		}
 	}, [props.data]);
 
+	const handleMenuOpen = () => {
+		const newDrawerOpen: DrawerOpen = {
+			id: "",
+			group: true,
+			addMode: true,
+		};
+		props.setDrawerOpen(newDrawerOpen);
+	};
+
 	return (
 		<>
 			<Box sx={styles.list}>
@@ -138,6 +147,20 @@ const SchedulesList: React.FC<Props> = (props: Props) => {
 						},
 					}}
 				/>
+				<Button
+					variant="contained"
+					color="info"
+					startIcon={<AddIcon />}
+					onClick={handleMenuOpen}
+					sx={{
+						padding: theme.spacing(1, 2),
+						fontSize: ".89rem",
+						textTransform: "none",
+						borderRadius: 1,
+					}}
+				>
+					{t("addNew")}
+				</Button>
 			</Box>
 
 			{props.loading && !props.data && (
@@ -267,6 +290,10 @@ const getStyles = (theme: Theme) => {
 		},
 		list: {
 			margin: theme.spacing(2, 0),
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			width: "100%",
 		},
 		paginationBox: {
 			paddingLeft: theme.spacing(15),

package/src/utils/date-functions.ts

@@ -0,0 +1,69 @@
+import {
+	type FormatDistanceOptions,
+	type FormatDurationOptions,
+	type FormatOptions,
+	format,
+	formatDistanceStrict,
+	formatDuration,
+} from "date-fns";
+
+export function toShortDate(
+	dateString: string,
+	pattern: string = "Ppp",
+	options?: FormatOptions,
+) {
+	try {
+		const date = new Date(dateString);
+		const formatted = format(date, pattern, options);
+		return formatted;
+	} catch (error) {
+		console.error(error);
+		return "N/A";
+	}
+}
+
+export function toLongDate(dateString: string) {
+	try {
+		const date = new Date(dateString);
+		const formatted = date.toString();
+		return formatted;
+	} catch (error) {
+		console.error(error);
+		return "N/A";
+	}
+}
+
+export function toDistanceDate(
+	dateString: string,
+	options?: FormatDistanceOptions,
+) {
+	try {
+		const date = new Date(dateString);
+		const now = new Date();
+		const formatted = formatDistanceStrict(now, date, options);
+		return formatted;
+	} catch (error) {
+		console.error(error);
+		return "N/A";
+	}
+}
+
+export function toDurationDate(
+	startDate: string,
+	endDate: string,
+	options?: FormatDurationOptions,
+) {
+	try {
+		const start = new Date(startDate);
+		const end = new Date(endDate);
+		const seconds = Math.floor((end.getTime() - start.getTime()) / 1000);
+		const formatted = formatDuration(
+			{ seconds: seconds },
+			{ format: ["seconds"], ...options },
+		);
+		return formatted;
+	} catch (error) {
+		console.error(error);
+		return "";
+	}
+}

package/src/utils/slugify.ts

@@ -0,0 +1,3 @@
+export function slugify(input: string) {
+	return input.toLowerCase().replaceAll(" ", "_");
+}

package/tsconfig.json

@@ -15,10 +15,18 @@
 		"typeRoots": ["../../../../admin/node_modules/@types"],
 		"paths": {
 			"*": ["../../../../admin/node_modules/*"],
-			"@/lib/*": ["src/lib/*"],
-			"@/auth/*": ["src/auth/*"],
-			"@/api/*": ["src/api/*"],
-			"@/components/*": ["src/components/*"],
+			"@/lib/*": [
+				"../../../../admin/node_modules/@evenicanpm/admin-integrate/src/lib/*"
+			],
+			"@/auth/*": [
+				"../../../../admin/node_modules/@evenicanpm/admin-integrate/src/auth/*"
+			],
+			"@/api/*": [
+				"../../../../admin/node_modules/@evenicanpm/admin-integrate/src/api/*"
+			],
+			"@/components/*": [
+				"../../../../admin/node_modules/@evenicanpm/admin-integrate/src/components/*"
+			],
 			"@evenicanpm/admin-core/*": [
 				"../../../../admin/node_modules/@evenicanpm/admin-core/src/*"
 			],

package/src/hooks/use-timestamp.tsx

@@ -1,25 +0,0 @@
-export default function useTimestamp(dateTime: string) {
-	const then = new Date(dateTime);
-	const diffTime = Date.now() - then.getTime();
-	const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
-
-	let result: string;
-	if (diffDays === 0) {
-		const diffMin = Math.floor(diffTime / (1000 * 60));
-		if (diffMin === 0) {
-			result = "Now";
-		} else if (diffMin >= 60) {
-			result = Math.floor(diffTime / (1000 * 60 * 60)) + "h ago";
-		} else {
-			result = diffMin + "m ago";
-		}
-	} else {
-		if (diffDays === 1) {
-			result = "Yesterday";
-		} else {
-			result = diffDays + " days ago";
-		}
-	}
-
-	return result;
-}

package/src/pages/integrations/integration-list/integration-list-row.tsx

@@ -1,147 +0,0 @@
-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";
-import { SxProps } from "@mui/material";
-
-// Custom components
-import {
-	StyledTableCell,
-	StyledTableRow,
-	StyledIconButton,
-} from "@evenicanpm/admin-integrate/components/data-table/table-row";
-import {
-	IntegrationTag,
-	IntegrationStatusIcon,
-} from "@evenicanpm/admin-integrate/components/integration-list";
-
-// Hooks
-import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
-
-// Types
-import { executionItem } from "./integration-list";
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { TableCellProps } from "@mui/material";
-
-interface Props {
-	item: executionItem;
-	heading: Head[]; // for alignment
-	sx?: SxProps;
-}
-
-const IntegrationListRow: React.FC<Props> = (props: Props) => {
-	const theme = useTheme();
-	const styles = getStyles(theme);
-
-	// e.g. "xx days ago"
-	const time = useTimestamp(props.item.modified);
-	const localTime = new Date(props.item.modified).toString();
-
-	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 = () => {
-		redirect(
-			`/e4integrate/integration/${props.item.id}?IntegrationId=${props.item.id}`,
-			RedirectType.push,
-		);
-	};
-
-	return (
-		<StyledTableRow sx={props.sx}>
-			<StyledTableCell
-				align={props.heading[0].align as TableCellProps["align"]}
-				width={props.heading[0].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>
-			<StyledTableCell
-				align={props.heading[1].align as TableCellProps["align"]}
-				width={props.heading[1].width}
-			>
-				<Typography>{props.item.id}</Typography>
-			</StyledTableCell>
-			<StyledTableCell
-				align={props.heading[1].align as TableCellProps["align"]}
-				width={props.heading[1].width}
-			>
-				<IntegrationTag
-					process={{
-						isScheduled: props.item.isScheduled,
-						isTriggered: props.item.isTriggered,
-					}}
-				/>
-			</StyledTableCell>
-			<StyledTableCell
-				align={props.heading[2].align as TableCellProps["align"]}
-				width={props.heading[2].width}
-				sx={styles.timeCell}
-			>
-				<Typography
-					onMouseEnter={handlePopoverOpen}
-					onMouseLeave={handlePopoverClose}
-				>
-					{time}
-				</Typography>
-				<Popover
-					sx={{ pointerEvents: "none" }}
-					open={open}
-					anchorEl={anchorEl}
-					anchorOrigin={{
-						vertical: "bottom",
-						horizontal: "center",
-					}}
-					transformOrigin={{
-						vertical: "top",
-						horizontal: "center",
-					}}
-					onClose={handlePopoverClose}
-					disableRestoreFocus
-				>
-					<Box sx={styles.popover}>
-						<Typography>{localTime}</Typography>
-					</Box>
-				</Popover>
-			</StyledTableCell>
-			<StyledTableCell
-				align={props.heading[3].align as TableCellProps["align"]}
-				width={props.heading[3].width}
-			>
-				<StyledIconButton onClick={handleRedirect}>
-					<RemoveRedEye />
-				</StyledIconButton>
-			</StyledTableCell>
-		</StyledTableRow>
-	);
-};
-
-const getStyles = (theme: Theme) => {
-	return {
-		timeCell: {
-			cursor: "default",
-		},
-		popover: {
-			padding: theme.spacing(1),
-		},
-	};
-};
-
-export default IntegrationListRow;

package/src/pages/integrations/integration-list/integration-list-table.tsx

@@ -1,78 +0,0 @@
-import React from "react";
-
-// Types
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { Item } from "./integration-list";
-
-// API
-import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-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 IntegrationListRow from "./integration-list-row";
-
-interface Props {
-	heading: Head[];
-	items: Item[];
-	input: ProcessExecutionInput;
-	setInput: (newInput: ProcessExecutionInput) => void;
-	rowSx?: SxProps;
-}
-
-export default function IntegrationListTable(props: Props) {
-	const theme = useTheme();
-	const styles = getStyles(theme);
-
-	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, index) => (
-							<IntegrationListRow
-								key={index}
-								item={item}
-								heading={props.heading}
-								sx={props.rowSx}
-							/>
-						))}
-					</TableBody>
-				</Table>
-			</TableContainer>
-		</>
-	);
-}
-
-const getStyles = (theme: Theme) => {
-	return {};
-};