@evenicanpm/admin-integrate 1.1.0 → 1.2.2

package/src/components/button/outlined-icon-button.tsx

@@ -1,47 +1,35 @@
 import React from "react";
-import { IconButton, SxProps } from "@mui/material";
+import { IconButton, IconButtonProps } from "@mui/material";
 
-interface Props {
-  color?:
-    | "inherit"
-    | "default"
-    | "primary"
-    | "secondary"
-    | "error"
-    | "info"
-    | "success"
-    | "warning";
-  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  children: React.ReactNode;
-  sx?: SxProps;
+interface Props extends IconButtonProps {
+	children: React.ReactNode;
 }
 
-const OutlinedIconButton: React.FC<Props> = (props: Props) => {
-  const sx = {
-    // Default style
-    borderWidth: "2px",
-    borderStyle: "solid",
-    borderColor: `${props.color}.light`,
-    "&:hover": {
-      backgroundColor: "action.hover",
-      borderColor: `${props.color}.main`,
-    },
-    borderRadius: "8px",
+const OutlinedIconButton: React.FC<Props> = ({
+	children,
+	sx,
+	...props
+}: Props) => {
+	const defaultSx = {
+		// Default style
+		borderWidth: "2px",
+		borderStyle: "solid",
+		borderColor: props.disabled ? "grey.500" : `${props.color}.light`,
+		"&:hover": {
+			backgroundColor: "action.hover",
+			borderColor: `${props.color}.main`,
+		},
+		borderRadius: "8px",
 
-    // Override style
-    ...props.sx,
-  };
+		// Override style
+		...sx,
+	};
 
-  return (
-    <IconButton
-      centerRipple={false}
-      color={props.color || "inherit"}
-      sx={sx}
-      onClick={props.onClick}
-    >
-      {props.children}
-    </IconButton>
-  );
+	return (
+		<IconButton sx={defaultSx} {...props}>
+			{children}
+		</IconButton>
+	);
 };
 
 export default OutlinedIconButton;

package/src/components/core/date-time-popover.tsx

@@ -0,0 +1,32 @@
+import { Theme, useTheme } from "@mui/material";
+import { Popover, Box, Typography, PopoverProps } from "@mui/material";
+
+interface Props extends PopoverProps {
+	dateIsoString: string;
+}
+
+export default function DateTimePopover({
+	dateIsoString,
+	...popoverProps
+}: Props) {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const date = new Date(dateIsoString);
+
+	return (
+		<Popover {...popoverProps}>
+			<Box sx={styles.popover}>
+				<Typography>{date.toString()}</Typography>
+			</Box>
+		</Popover>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		popover: {
+			padding: theme.spacing(1),
+		},
+	};
+};

package/src/components/core/edited-typography.tsx

@@ -0,0 +1,20 @@
+import { useTranslations } from "next-intl";
+import { Typography } from "@mui/material";
+
+interface Props {
+	edited: boolean;
+}
+
+export default function EditedTypography(props: Props) {
+	const t = useTranslations("Integrate.Scheduler");
+
+	return (
+		<Typography
+			variant="caption"
+			color="grey"
+			visibility={props.edited ? "visible" : "hidden"}
+		>
+			{t("edited")}
+		</Typography>
+	);
+}

package/src/components/core/index.ts

@@ -1 +1,4 @@
 export { default as Loading } from "./loading";
+export { default as DateTimePopover } from "./date-time-popover";
+export { default as TitleEdit } from "./title-edit";
+export { default as EditedTypography } from "./edited-typography";

package/src/components/core/loading.tsx

@@ -3,13 +3,13 @@ import FlexRowCenter from "@evenicanpm/admin-core/components/flex-box/flex-row-c
 import { useTheme } from "@mui/material";
 
 const Loading = () => {
-  const theme = useTheme();
+	const theme = useTheme();
 
-  return (
-    <FlexRowCenter sx={{ margin: theme.spacing(1) }}>
-      <CircularProgress color="info" />
-    </FlexRowCenter>
-  );
+	return (
+		<FlexRowCenter sx={{ margin: theme.spacing(1) }}>
+			<CircularProgress color="info" />
+		</FlexRowCenter>
+	);
 };
 
 export default Loading;

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

@@ -0,0 +1,122 @@
+import { useState } from "react";
+
+import { Theme, useTheme } from "@mui/material";
+import {
+	Box,
+	Stack,
+	Typography,
+	TextField,
+	IconButton,
+	TypographyOwnProps,
+} from "@mui/material";
+import { EditOutlined, Clear, Check } from "@mui/icons-material";
+
+import { OutlinedIconButton } from "@evenicanpm/admin-integrate/components/button";
+
+interface Props {
+	title: string;
+	onConfirm: (input: string) => void; // update source of props.title
+	readOnly?: boolean;
+	fullWidth?: boolean;
+	variant?: TypographyOwnProps["variant"];
+}
+
+export default function TitleEdit(props: Props) {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [editMode, setEditMode] = useState(false);
+	const [input, setInput] = useState(props.title);
+
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setInput(event.target.value);
+	};
+
+	const handleClickEdit = () => {
+		setEditMode(true);
+	};
+
+	const handleClose = () => {
+		setInput(props.title);
+		setEditMode(false);
+	};
+
+	const handleConfirm = () => {
+		props.onConfirm(input);
+		setEditMode(false);
+	};
+
+	const handleKeyDown = (event: React.KeyboardEvent) => {
+		if (event.key === "Enter" && input !== "") {
+			handleConfirm();
+		}
+	};
+
+	return (
+		<>
+			<Box
+				sx={{
+					width: props.fullWidth ? "100%" : "fit-content",
+					overflowX: "auto",
+				}}
+				display="flex"
+				justifyContent="flex-start"
+				alignItems="center"
+			>
+				{!editMode ? (
+					<Typography sx={styles.name} variant={props.variant || "h6"}>
+						{props.title}
+					</Typography>
+				) : (
+					<TextField
+						sx={styles.input}
+						fullWidth={props.fullWidth}
+						autoFocus
+						color="info"
+						value={input}
+						onChange={handleChange}
+						onKeyDown={handleKeyDown}
+					/>
+				)}
+			</Box>
+			{!props.readOnly && (
+				<Box display="flex" justifyContent="flex-end" alignItems="center">
+					{!editMode ? (
+						<IconButton onClick={handleClickEdit}>
+							<EditOutlined />
+						</IconButton>
+					) : (
+						<Stack direction="row" spacing={1}>
+							<OutlinedIconButton color="error" onClick={handleClose}>
+								<Clear />
+							</OutlinedIconButton>
+							<OutlinedIconButton
+								color="success"
+								onClick={handleConfirm}
+								disabled={input === ""}
+							>
+								<Check />
+							</OutlinedIconButton>
+						</Stack>
+					)}
+				</Box>
+			)}
+		</>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		name: {
+			overflowX: "auto",
+			whiteSpace: "nowrap",
+			fontWeight: "medium",
+		},
+		input: {
+			minWidth: theme.spacing(30),
+			"& .MuiInputBase-input": {
+				padding: theme.spacing(1, 1),
+			},
+		},
+	};
+};

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

@@ -8,9 +8,9 @@ import { RemoveRedEye } from "@mui/icons-material";
 
 // Custom components
 import {
-  StyledTableCell,
-  StyledTableRow,
-  StyledIconButton,
+	StyledTableCell,
+	StyledTableRow,
+	StyledIconButton,
 } from "@evenicanpm/admin-integrate/components/data-table/table-row";
 import { ExecutionStatusIcon } from "@evenicanpm/admin-integrate/components/execution";
 
@@ -20,126 +20,125 @@ import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
 // Types
 import { Item } from "./dashboard-list";
 import { Head } from "../data-table/table-header";
-import { TableCellProps } from "@mui/material";
+import { TableCellProps, SxProps } from "@mui/material";
 
 interface Props {
-  item: Item;
-  heading: Head[]; // for alignment
-  enableBgColor?: boolean;
-  sx?: SxProps;
+	item: Item;
+	heading: Head[]; // for alignment
+	enableBgColor?: boolean;
+	sx?: SxProps;
 }
 
 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);
-
-  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handlePopoverClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleRedirect = () => {
-    //Temporarily commented out until executions detail page is implemented
-    // redirect(
-    //   `/e4integrate/executions/${props.item.process.id}?ExecutionId=${props.item.id}`,
-    //   RedirectType.push,
-    // );
-  };
-
-  // only relevant for execution status 450 & 500 (i.e. Notifications list)
-  let bgColor = "";
-  if (props.enableBgColor) {
-    switch (props.item.executionStatus.id) {
-      case "450":
-        bgColor = "warning.100";
-        break;
-      case "500":
-        bgColor = "error.100";
-        break;
-    }
-  }
-
-  const sx = props.sx || {};
-
-  return (
-    <StyledTableRow sx={{ ...sx, backgroundColor: bgColor }}>
-      <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">
-            <ExecutionStatusIcon
-              executionStatusId={props.item.executionStatus.id}
-            />
-          </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}
-        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[2].align as TableCellProps["align"]}
-        width={props.heading[2].width}
-      >
-        <StyledIconButton onClick={handleRedirect}>
-          <RemoveRedEye />
-        </StyledIconButton>
-      </StyledTableCell>
-    </StyledTableRow>
-  );
+	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);
+
+	const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+
+	const handleRedirect = () => {
+		redirect(
+			`/e4integrate/executions/${props.item.process.id}?ExecutionId=${props.item.id}`,
+			RedirectType.push,
+		);
+	};
+
+	// only relevant for execution status 450 & 500 (i.e. Notifications list)
+	let bgColor = "";
+	if (props.enableBgColor) {
+		switch (props.item.executionStatus.id) {
+			case "450":
+				bgColor = "warning.100";
+				break;
+			case "500":
+				bgColor = "error.100";
+				break;
+		}
+	}
+
+	const sx = props.sx || {};
+
+	return (
+		<StyledTableRow sx={{ ...sx, backgroundColor: bgColor }}>
+			<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">
+						<ExecutionStatusIcon
+							executionStatusId={props.item.executionStatus.id}
+						/>
+					</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}
+				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[2].align as TableCellProps["align"]}
+				width={props.heading[2].width}
+			>
+				<StyledIconButton onClick={handleRedirect}>
+					<RemoveRedEye />
+				</StyledIconButton>
+			</StyledTableCell>
+		</StyledTableRow>
+	);
 };
 
 const getStyles = (theme: Theme) => {
-  return {
-    timeCell: {
-      cursor: "default",
-    },
-    popover: {
-      padding: theme.spacing(1),
-    },
-  };
+	return {
+		timeCell: {
+			cursor: "default",
+		},
+		popover: {
+			padding: theme.spacing(1),
+		},
+	};
 };
 
 export default DashboardListRow;