@evenicanpm/admin-integrate 1.2.0 → 1.3.0

package/src/pages/integration-details/task-drawer/task-reducer.ts

@@ -0,0 +1,73 @@
+export enum TaskActionType {
+	CLOSE = "CLOSE",
+	OPEN_ADD = "OPEN_ADD",
+	OPEN_EDIT = "OPEN_EDIT",
+	INCREMENT_STEP = "INCREMENT_STEP",
+	DECREMENT_STEP = "DECREMENT_STEP",
+}
+
+export enum TaskMode {
+	NONE = "NONE",
+	ADD = "ADD",
+	EDIT = "EDIT",
+}
+
+export interface TaskAction {
+	type: TaskActionType;
+}
+
+export interface EditAction extends TaskAction {
+	processTaskId: string;
+}
+
+export interface TaskState {
+	open: boolean;
+	mode: TaskMode;
+	step: number | null;
+	processTaskId?: string | null;
+}
+
+export function taskReducer(state: TaskState, action: TaskAction): TaskState {
+	switch (action.type) {
+		case TaskActionType.CLOSE: {
+			return {
+				open: false,
+				mode: TaskMode.NONE,
+				step: null,
+				processTaskId: null,
+			};
+		}
+		case TaskActionType.OPEN_ADD: {
+			return {
+				open: true,
+				mode: TaskMode.ADD,
+				step: 0,
+				processTaskId: null,
+			};
+		}
+		case TaskActionType.OPEN_EDIT: {
+			return {
+				open: true,
+				mode: TaskMode.EDIT,
+				step: 0,
+				processTaskId: (action as EditAction).processTaskId,
+			};
+		}
+		case TaskActionType.INCREMENT_STEP: {
+			return {
+				...state,
+				step: state.step !== null ? state.step + 1 : null,
+			};
+		}
+		case TaskActionType.DECREMENT_STEP: {
+			return {
+				...state,
+				step: state.step !== null ? Math.max(state.step - 1, 0) : null,
+			};
+		}
+		default: {
+			console.error(`${action.type} is not a valid action for detailsReducer`);
+			return state;
+		}
+	}
+}

package/src/pages/integrations/integrations.tsx

@@ -1,17 +1,21 @@
-import React from "react";
-import { useTranslations } from "next-intl";
-
-// MUI
-import { Box } from "@mui/material";
-
-// Custom components
+import type {
+	GetProcessesQuery,
+	ProcessInput,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { getProcesses } from "@evenicanpm/admin-integrate/api/Integrations/queries";
 import {
+	type Crumb,
 	IntegrateBreadcrumbs,
-	Crumb,
 } from "@evenicanpm/admin-integrate/components/breadcrumbs";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { IntegrationList } from "@evenicanpm/admin-integrate/components/integration-list";
+import { Box } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
 
 export default function Integrations() {
 	const t = useTranslations("Integrate");
+	const l = useTranslations("Integrate.IntegrationList.ListHeader");
 
 	const breadcrumbs: Crumb[] = [
 		{
@@ -23,9 +27,65 @@ export default function Integrations() {
 		},
 	];
 
+	const heading: Head[] = [
+		{
+			id: "name",
+			label: l("integrationName"),
+			align: "left",
+			width: "30%",
+			sortable: true,
+		},
+		{
+			id: "id",
+			label: l("id"),
+			align: "left",
+			width: "15%",
+		},
+		{
+			id: "isScheduled",
+			label: l("status"),
+			align: "center",
+			width: "30%",
+		},
+		{
+			id: "modified",
+			label: l("lastModified"),
+			align: "center",
+			width: "15%",
+			sortable: true,
+		},
+		{
+			id: "view",
+			label: l("actions"),
+			align: "center",
+			width: "5%",
+		},
+	];
+
+	// TODO: initialize input based on url query params
+	const [input, setInput] = useState<ProcessInput>({
+		skip: 0,
+		sort: "modified",
+		sortDesc: true,
+		top: 10,
+		integrationTags: null,
+		search: null,
+	});
+
+	const { data, isLoading } = getProcesses.useData({
+		input: input,
+	});
+
 	return (
 		<Box>
 			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+			<IntegrationList
+				heading={heading}
+				data={data as GetProcessesQuery}
+				loading={isLoading}
+				input={input}
+				setInput={setInput}
+			/>
 		</Box>
 	);
 }

package/src/pages/scheduler/scheduler.tsx

@@ -1,31 +1,19 @@
-import React, { useState } from "react";
-import { useTranslations } from "next-intl";
-
-// API
-import { getScheduledProcesses } from "@evenicanpm/admin-integrate/api/scheduler/queries";
-import {
-	ScheduledProcessInput,
+import type {
 	GetScheduledProcessesQuery,
+	ScheduledProcessInput,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
+import { getScheduledProcesses } from "@evenicanpm/admin-integrate/api/scheduler/queries";
+import {
+	type Crumb,
+	IntegrateBreadcrumbs,
+} from "@evenicanpm/admin-integrate/components/breadcrumbs";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import ScheduleDrawer from "@evenicanpm/admin-integrate/components/scheduler/schedule-drawer";
+import type { DrawerOpen } from "@evenicanpm/admin-integrate/components/scheduler/schedule-drawer/schedule-drawer";
 import { Box } from "@mui/material";
-
-// Custom components
-import { IntegrateBreadcrumbs } from "@evenicanpm/admin-integrate/components/breadcrumbs";
-
-// Local components
+import { useTranslations } from "next-intl";
+import { useState } from "react";
 import SchedulesList from "./schedules-list";
-import ScheduleDrawer from "./schedule-drawer";
-
-// Types
-import { Crumb } from "@evenicanpm/admin-integrate/components/breadcrumbs";
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-
-export type DrawerOpen = {
-	id: string;
-	group?: boolean;
-};
 
 export default function Scheduler() {
 	const t = useTranslations("Integrate");

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[];
@@ -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;
-}