@evenicanpm/admin-integrate 1.2.0 → 1.3.0

package/src/components/templates/template-filter.ts

@@ -0,0 +1,5 @@
+import type { Filters } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+
+export interface TemplateListFilters extends Filters {}
+
+export const templateListFilters: TemplateListFilters = {};

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

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

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

@@ -0,0 +1,55 @@
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+// Custom components
+import {
+	StyledIconButton,
+	StyledTableCell,
+	StyledTableRow,
+} from "@evenicanpm/admin-integrate/components/data-table/table-row";
+import { ChevronRightOutlined } from "@mui/icons-material";
+// MUI
+import {
+	Box,
+	Stack,
+	type SxProps,
+	type TableCellProps,
+	Typography,
+} from "@mui/material";
+// Types
+import type { Item } from "./templates-list";
+
+interface Props {
+	item: Item;
+	heading: Head[]; // for alignment
+	handleRedirect: (id: string) => void;
+	sx?: SxProps;
+}
+
+const TemplatesListRow: React.FC<Props> = (props: Props) => {
+	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">
+						{/* icon */}
+					</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}
+			>
+				<StyledIconButton onClick={() => props.handleRedirect(props.item.id)}>
+					<ChevronRightOutlined fontSize="large" />
+				</StyledIconButton>
+			</StyledTableCell>
+		</StyledTableRow>
+	);
+};
+
+export default TemplatesListRow;

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

@@ -0,0 +1,58 @@
+import type { FilterQueryInput } 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 { Item } from "./templates-list";
+import TemplatesListRow from "./templates-list-row";
+
+interface Props {
+	heading: Head[];
+	items: Item[];
+	input: FilterQueryInput;
+	setInput: (newInput: FilterQueryInput) => void;
+	handleRedirect: (id: string) => void;
+	rowSx?: SxProps;
+}
+
+export default function TemplatesListTable(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, index) => (
+						<TemplatesListRow
+							key={index}
+							item={item}
+							heading={props.heading}
+							sx={props.rowSx}
+							handleRedirect={props.handleRedirect}
+						/>
+					))}
+				</TableBody>
+			</Table>
+		</TableContainer>
+	);
+}

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

@@ -0,0 +1,253 @@
+import type {
+	FilterQueryInput,
+	GetProcessTemplateGroupsQuery,
+	GetProcessTemplatesQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+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";
+import type { ListFilterOutput } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+import {
+	type TemplateListFilters,
+	templateListFilters,
+} from "@evenicanpm/admin-integrate/components/templates/template-filter";
+import {
+	Box,
+	Card,
+	Grid2 as Grid,
+	Stack,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import TemplatesListTable from "./templates-list-table";
+
+export interface Item {
+	id: string;
+	name: string;
+	isActive: boolean;
+}
+
+// Row height in terms of multiples of theme.spacing(1) (e.g. theme.spacing(7.5 & rows per page))
+const rowHeight = 7.5;
+
+interface Props {
+	heading: Head[];
+	data: GetProcessTemplateGroupsQuery | GetProcessTemplatesQuery;
+	loading: boolean;
+	input: FilterQueryInput;
+	setInput: (newInput: FilterQueryInput) => void;
+	handleRedirect: (id: string) => void;
+	isTemplateGroupsList?: boolean;
+}
+
+export default function TemplatesList(props: Props) {
+	const t = useTranslations("Integrate.Templates");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [items, setItems] = useState<Item[]>([]);
+	const [page, setPage] = useState(
+		(props.input.skip || 0) / (props.input.top || 10) + 1,
+	);
+	const [perPage, setPerPage] = useState<number>(props.input.top || 10);
+
+	const handleChangePage = (
+		event: React.ChangeEvent<unknown>,
+		value: number,
+	) => {
+		if (page !== value && event) {
+			setPage(value);
+			props.setInput({
+				...props.input,
+				skip: (props.input.top || 10) * (value - 1),
+			});
+		}
+	};
+
+	const handleSetFilters = (
+		filterUpdate: ListFilterOutput<TemplateListFilters>,
+	) => {
+		const { itemsPerPage, search } = filterUpdate;
+		props.setInput({
+			...props.input,
+			top: itemsPerPage,
+			skip: 0,
+			search: search,
+		});
+		setPerPage(itemsPerPage as number);
+		setPage(1);
+	};
+
+	const handleClearFilters = () => {
+		props.setInput({
+			...props.input,
+			skip: 0,
+		});
+	};
+
+	useEffect(() => {
+		if (props.isTemplateGroupsList) {
+			const typedData = props.data as GetProcessTemplateGroupsQuery;
+			if (typedData?.processTemplateGroups?.nodes) {
+				setItems(typedData.processTemplateGroups.nodes as Item[]);
+			}
+		} else {
+			const typedData = props.data as GetProcessTemplatesQuery;
+			if (typedData?.processTemplates?.nodes) {
+				setItems(typedData.processTemplates.nodes as Item[]);
+			}
+		}
+	}, [props.data]);
+
+	const resultsReturned = props.isTemplateGroupsList
+		? (props.data as GetProcessTemplateGroupsQuery)?.processTemplateGroups
+				?.pageInfo.resultsReturned
+		: (props.data as GetProcessTemplatesQuery)?.processTemplates?.pageInfo
+				.resultsReturned;
+
+	const recordCount = props.isTemplateGroupsList
+		? (props.data as GetProcessTemplateGroupsQuery)?.processTemplateGroups
+				?.recordCount
+		: (props.data as GetProcessTemplatesQuery)?.processTemplates?.recordCount;
+
+	return (
+		<>
+			<Box sx={styles.list}>
+				<ListFilter<TemplateListFilters>
+					setFilters={handleSetFilters}
+					clearFilters={handleClearFilters}
+					filters={templateListFilters}
+					config={{
+						pagination: {
+							pageDefault: 10,
+							pageOptions: [10, 20, 50],
+						},
+					}}
+				/>
+			</Box>
+
+			{props.loading && !props.data && (
+				<Card>
+					<TableSkeleton
+						heading={props.heading}
+						perPage={perPage}
+						rowSx={styles.rowSx}
+					/>
+				</Card>
+			)}
+
+			{!props.loading &&
+			((props.data as GetProcessTemplateGroupsQuery)?.processTemplateGroups ||
+				(props.data as GetProcessTemplatesQuery)?.processTemplates) &&
+			items.length > 0 ? (
+				<Box
+					sx={{
+						minHeight:
+							resultsReturned && resultsReturned < perPage && page === 1
+								? theme.spacing(rowHeight * resultsReturned + 1)
+								: theme.spacing(rowHeight * (perPage + 1)),
+					}}
+				>
+					<Card>
+						<TemplatesListTable
+							heading={props.heading}
+							items={items}
+							input={props.input}
+							setInput={props.setInput}
+							handleRedirect={props.handleRedirect}
+						/>
+					</Card>
+				</Box>
+			) : null}
+
+			{!props.loading && items.length === 0 ? (
+				<Card>
+					<FlexBox
+						justifyContent="center"
+						alignItems="center"
+						sx={{
+							minHeight: "335px",
+							marginBottom: theme.spacing(2),
+						}}
+					>
+						<Stack spacing={1} justifyContent="center" alignItems="center">
+							<Typography variant="h6" color="info">
+								{t("ListEmpty.title")}
+							</Typography>
+						</Stack>
+					</FlexBox>
+				</Card>
+			) : null}
+
+			{!props.loading && recordCount && resultsReturned && 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={page}
+								onChange={handleChangePage}
+								count={Math.ceil(recordCount / (props.input.top as number))}
+							/>
+						</FlexBox>
+					</Grid>
+					<Grid size={{ xs: 1.5 }}>
+						<FlexBox
+							justifyContent="flex-end"
+							alignItems="center"
+							sx={{ height: "100%" }}
+						>
+							<Typography color="grey">
+								{`${resultsReturned}  ${t("Pagination.of")} ${recordCount} ${t("Pagination.items")}`}
+							</Typography>
+						</FlexBox>
+					</Grid>
+				</Grid>
+			) : null}
+		</>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		title: {
+			display: "flex",
+			alignItems: "center",
+			height: "100%",
+		},
+		typography: {
+			fontWeight: "medium",
+		},
+		button: {
+			borderWidth: 2,
+			borderRadius: 1,
+			marginRight: theme.spacing(1),
+		},
+		iconButton: {
+			borderRadius: 1,
+		},
+		pagination: {
+			marginTop: theme.spacing(2),
+		},
+		list: {
+			margin: theme.spacing(2, 0),
+		},
+		paginationBox: {
+			paddingLeft: theme.spacing(15),
+		},
+		rowSx: {
+			height: theme.spacing(rowHeight),
+		},
+	};
+};

package/src/components/templates/types.tsx

@@ -0,0 +1,75 @@
+import type { GetProcessTemplateQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+export type ProcessTemplateInputSchema = NonNullable<
+	NonNullable<NonNullable<ProcessTemplateInput>["schemas"]>[number]
+>;
+
+export type ProcessTemplateInput = NonNullable<
+	NonNullable<NonNullable<ProcessTemplatePage>["inputs"]>[number]
+>;
+
+export type ProcessTemplatePage = NonNullable<
+	NonNullable<NonNullable<ProcessTemplate>["pages"]>[number]
+>;
+
+export type ProcessTemplate = NonNullable<
+	NonNullable<GetProcessTemplateQuery["processTemplate"]>[number]
+>;
+
+export type Data = { processTemplate: ProcessTemplate[] };
+
+export type ProcessTemplateFilter = {
+	processTemplateGroupId?: string | null;
+	processTemplateId?: string | null;
+};
+
+export type FieldValue =
+	| string
+	| number
+	| boolean
+	| string[]
+	| Array<Record<string, string>>
+	| Record<string, string>
+	| null;
+
+export type FormState = Record<string, FieldValue>;
+export type ErrorState = Record<string, string | null>;
+
+//This needs to be shared, maybe a way to also have this componentized so theres a proper schema for it?
+export type ProcessConfigMerge = {
+	input: {
+		config: Array<Record<string, FieldValue>>; //TODO: Actually map this out properly
+	};
+};
+
+export type SearchOption = { name: string; templateConfig: string };
+
+export type Metadata = {
+	name: string;
+	code: string;
+	parallelProcessingGroup: number;
+	sort: number;
+};
+
+export type FlatPage = ProcessTemplatePage & {
+	_templateIndex: number;
+	_templateId: string;
+	_templateName: string;
+	_pageIndexWithinTemplate: number;
+	_flatIndex: number;
+};
+
+export const templateFieldKey = (templateId: string, fieldName: string) =>
+	`${templateId}::${fieldName}`;
+
+export const toRegex = (pattern: string | null) => {
+	if (!pattern) return null;
+	try {
+		return new RegExp(pattern);
+	} catch {
+		return null;
+	}
+};
+
+export const sortBy = <T extends { sort?: number | null }>(arr: T[]) =>
+	[...arr].sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));