@evenicanpm/admin-integrate 1.2.0 → 1.3.0

package/src/components/templates/wizard.tsx

@@ -0,0 +1,689 @@
+import type { GetProcessTemplateQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { getProcessTemplate } from "@evenicanpm/admin-integrate/api/templates/queries";
+import { Loading } from "@evenicanpm/admin-integrate/components/core";
+import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
+import ArrowRightIcon from "@mui/icons-material/ArrowRight";
+import {
+	Box,
+	Button,
+	Card,
+	CardContent,
+	Divider,
+	LinearProgress,
+	Stack,
+	Step,
+	StepLabel,
+	Stepper,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+// import { useTranslations } from "next-intl"; //Need to figure out how to use this if if templates are data driven
+import React, { useEffect, useState } from "react";
+import PageBody, { applyTemplateConfig } from "./inputs";
+import {
+	type ErrorState,
+	type FieldValue,
+	type FlatPage,
+	type FormState,
+	type Metadata,
+	type ProcessConfigMerge,
+	type ProcessTemplate,
+	type ProcessTemplateInput,
+	type ProcessTemplateInputSchema,
+	type ProcessTemplatePage,
+	type SearchOption,
+	sortBy,
+	templateFieldKey,
+	toRegex,
+} from "./types";
+
+function isEmptyValue(value: unknown): boolean {
+	if (value == null) return true;
+	if (Array.isArray(value)) return value.length === 0;
+	if (typeof value === "number") return Number.isNaN(value);
+	if (typeof value === "string") return value.trim().length === 0;
+	return false;
+}
+
+function rowHasUserInput(
+	row: Record<string, unknown>,
+	schemas: ProcessTemplateInput["schemas"],
+): boolean {
+	if (!schemas) return false;
+	return schemas.some((schema) => {
+		if (!schema) return false;
+		if (schema.inputType === "checkbox") return false;
+		const colKey = schema.fieldKey ?? schema.label ?? "";
+		const cell = row[colKey as string];
+		return !isEmptyValue(cell);
+	});
+}
+
+function buildProcessConfigMerge(
+	templates: ProcessTemplate[],
+	values: FormState,
+	metadata: Metadata,
+): ProcessConfigMerge {
+	const config = templates.map((t) => {
+		const obj: Record<string, FieldValue> = {};
+
+		// For every page get input and map value
+		t.pages?.forEach((page) => {
+			page?.inputs?.forEach((input) => {
+				const key = templateFieldKey(t.id, input?.fieldName ?? ""); // e.g. "1::dataDescription"
+				if (!Object.hasOwn(values, key)) return;
+
+				// metadata override (no hardcoding)
+				if (input?.fieldName && input.fieldName in metadata) {
+					obj[input.fieldName] = metadata[
+						input.fieldName as keyof Metadata
+					] as FieldValue;
+					return;
+				}
+
+				const v = values[key];
+				if (
+					input &&
+					input.inputType === "input-table" &&
+					Array.isArray(v) &&
+					input.schemas?.length
+				) {
+					const isStr = (x: unknown): x is string => typeof x === "string";
+					const valueCol =
+						input.schemas.find((s) => s?.fieldKey === "{0}")?.fieldKey ?? null;
+					if (!isStr(valueCol) && input.fieldName) {
+						obj[input.fieldName] = v;
+						return;
+					}
+					const keyCol = "{Variable}";
+
+					if (!isStr(keyCol)) {
+						// fallback: first non-placeholder key or literal "Variable"
+						const nonPlaceholder = input.schemas.find(
+							(s) =>
+								s?.fieldKey &&
+								isStr(s.fieldKey) &&
+								!/^\{.*\}$/.test(s.fieldKey),
+						)?.fieldKey;
+						const keyColFinal = isStr(nonPlaceholder)
+							? nonPlaceholder
+							: "{Variable}";
+
+						const collapsed = (v as Array<Record<string, FieldValue>>).reduce(
+							(acc, row) => {
+								const rawKey = (row as any)[keyColFinal];
+								const k =
+									typeof rawKey === "string"
+										? rawKey.trim()
+										: rawKey != null
+											? String(rawKey)
+											: "";
+								if (!k) return acc;
+
+								const val = (row as any)[valueCol ?? ""];
+								if (val !== undefined) acc[k] = val as FieldValue;
+								return acc;
+							},
+							{} as Record<string, FieldValue>,
+						);
+
+						if (input.fieldName) {
+							obj[input.fieldName] = collapsed as unknown as FieldValue; // or widen FieldValue to allow objects
+						}
+						return;
+					}
+
+					const collapsed = (v as Array<Record<string, FieldValue>>).reduce(
+						(acc, row) => {
+							const rawKey = (row as any)[keyCol]; // e.g., row["{Variable}"] === "ASD"
+							const k =
+								typeof rawKey === "string"
+									? rawKey.trim()
+									: rawKey != null
+										? String(rawKey)
+										: "";
+							if (!k) return acc;
+
+							const val = (row as any)[valueCol ?? ""]; // e.g., row["{0}"] === "1"
+							if (val !== undefined) acc[k] = val as FieldValue;
+							return acc;
+						},
+						{} as Record<string, FieldValue>,
+					);
+
+					if (input.fieldName) {
+						obj[input.fieldName] = collapsed as FieldValue;
+					}
+					return;
+				}
+
+				if (input?.fieldName) {
+					obj[input.fieldName] = v;
+				}
+
+				console.log(
+					"fieldName:",
+					input?.fieldName,
+					"Mapping key:",
+					key,
+					"with value:",
+					values[key],
+				);
+
+				//obj[input.fieldName] = values[key]; // map to pure fieldName
+
+				// obj[input.fieldName] =
+				// input.fieldName in metadata
+				//   ? (metadata as any)[input.fieldName]
+				//   : values[key];
+			});
+		});
+
+		return obj;
+	});
+
+	return { input: { config } };
+}
+
+export function removeTemplateConfig(input: any): any {
+	if (Array.isArray(input)) {
+		return input.map(removeTemplateConfig);
+	}
+
+	if (input !== null && typeof input === "object") {
+		const newObj: any = {};
+
+		for (const key in input) {
+			if (key !== "templateConfig") {
+				newObj[key] = removeTemplateConfig(input[key]);
+			}
+		}
+
+		return newObj;
+	}
+
+	return input;
+}
+
+function Header({ title, subtitle }: { title: string; subtitle?: string }) {
+	return (
+		<Box sx={{ mb: 2 }}>
+			<Typography variant="h6" sx={{ mb: 0.5 }}>
+				{title}
+			</Typography>
+			{subtitle ? <Typography variant="body2">{subtitle}</Typography> : null}
+		</Box>
+	);
+}
+
+function TemplateNav({
+	templates,
+	activeIndex,
+	stylings,
+}: {
+	templates: ProcessTemplate[];
+	activeIndex: number;
+	stylings?: object;
+}) {
+	return (
+		<Stepper activeStep={activeIndex} sx={stylings}>
+			{templates.map((t) => (
+				<Step key={t.id}>
+					<StepLabel>{t.name ?? ""}</StepLabel>
+				</Step>
+			))}
+		</Stepper>
+	);
+}
+
+function PageNav({
+	pages,
+	activeIndex,
+	stylings,
+	isEditMode,
+}: {
+	pages: ProcessTemplatePage[];
+	activeIndex: number;
+	stylings?: object;
+	isEditMode?: boolean;
+}) {
+	return (
+		<Stepper nonLinear={isEditMode} activeStep={activeIndex} sx={stylings}>
+			{pages.map((p) => (
+				<Step key={p.id} sx={{ color: "green" }}>
+					<StepLabel>{p.title}</StepLabel>
+				</Step>
+			))}
+		</Stepper>
+	);
+}
+
+interface Props {
+	metadata: Metadata;
+	processTemplateGroupId?: string;
+	processTemplateId?: string;
+	handleBack?: (event?: React.MouseEventHandler) => void;
+	handleFinish?: (event?: React.MouseEventHandler) => void;
+	setProcessConfigMerge: React.Dispatch<
+		React.SetStateAction<ProcessConfigMerge | null>
+	>;
+	templateConfig?: string | null;
+	disableBackToTemplates?: boolean;
+	isEditMode?: boolean;
+	readOnly?: boolean;
+	sharedCount?: (count: number) => void;
+}
+
+export default function Wizard({ metadata, sharedCount, ...props }: Props) {
+	const theme = useTheme();
+
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+
+	const [templates, setTemplates] = useState<ProcessTemplate[]>([]);
+	const [templatesSorted, setTemplatesSorted] = useState<ProcessTemplate[]>([]);
+
+	const [configTemplateId, setConfigTemplateId] = useState<string | null>(null);
+	const { data, isLoading } = getProcessTemplate.useData({
+		input: {
+			processTemplateGroupId: props.processTemplateGroupId || null,
+			processTemplateId: configTemplateId || props.processTemplateId || null,
+		},
+	});
+
+	useEffect(() => {
+		const typedData = data as GetProcessTemplateQuery;
+		if (typedData?.processTemplate) {
+			const templates = typedData.processTemplate as ProcessTemplate[];
+			setTemplates(templates);
+			setTemplatesSorted(
+				templates.map((t) => ({
+					...t,
+					pages: sortBy(t.pages as ProcessTemplatePage[]),
+				})),
+			);
+		}
+	}, [data]);
+
+	const [flatPages, setFlatPages] = useState<FlatPage[]>([]);
+	useEffect(() => {
+		let counter = 0;
+		const newFlatPages = templatesSorted.flatMap((tpl, ti) => {
+			if (tpl.pages) {
+				return (tpl.pages as ProcessTemplatePage[]).map((p, pi) => ({
+					...p,
+					_templateIndex: ti,
+					_templateId: tpl.id,
+					_templateName: tpl.name ?? "",
+					_pageIndexWithinTemplate: pi,
+					_flatIndex: counter++,
+				}));
+			} else {
+				return [];
+			}
+		});
+		setFlatPages(newFlatPages);
+	}, [templatesSorted]);
+
+	const [globalStep, setGlobalStep] = React.useState(0);
+	const totalSteps = flatPages.length;
+
+	const [currentFlat, setCurrentFlat] = useState<FlatPage | null>(null);
+	const [currentTemplate, setCurrentTemplate] =
+		useState<ProcessTemplate | null>(null);
+	useEffect(() => {
+		if (flatPages.length > 0) {
+			const thisFlat = flatPages[globalStep];
+			setCurrentFlat(thisFlat);
+			setCurrentTemplate(templatesSorted[thisFlat._templateIndex]);
+		}
+	}, [flatPages, globalStep]);
+
+	useEffect(() => {
+		if (currentTemplate) {
+			const currentParams = new URLSearchParams(searchParams.toString());
+			currentParams.set("template", currentTemplate.id);
+			router.replace(`${pathname}?${currentParams.toString()}`);
+		}
+	}, [currentTemplate]);
+
+	const [values, setValues] = React.useState<FormState>({});
+	const [errors, setErrors] = React.useState<ErrorState>({});
+	const [disabledFields, setDisabledFields] = React.useState<Set<string>>(
+		new Set(),
+	);
+
+	const isFirst = globalStep === 0;
+	const isLast = globalStep === totalSteps - 1;
+
+	const handleFieldChange = React.useCallback(
+		(templateId: string, fieldName: string, value: FieldValue) => {
+			const key = templateFieldKey(templateId, fieldName);
+			setValues((prev) => ({ ...prev, [key]: value }));
+			setErrors((prev) => ({ ...prev, [key]: null }));
+		},
+		[setValues, setErrors],
+	);
+
+	const setFieldsDisabled = React.useCallback(
+		(templateId: string, fieldNames: string[], disabled: boolean) => {
+			setDisabledFields((prev) => {
+				const newSet = new Set(prev);
+				fieldNames.forEach((fieldName) => {
+					const key = templateFieldKey(templateId, fieldName);
+					if (disabled) {
+						newSet.add(key);
+					} else {
+						newSet.delete(key);
+					}
+				});
+				return newSet;
+			});
+		},
+		[],
+	);
+
+	useEffect(() => {
+		if (props.templateConfig) {
+			const config = JSON.parse(props.templateConfig as string);
+			applyTemplateConfig(
+				{
+					name: config.dataDescription as string,
+					templateConfig: props.templateConfig as string,
+				} as SearchOption,
+				handleFieldChange,
+			);
+			setConfigTemplateId(config.processTemplateId ?? null);
+		}
+	}, [props.templateConfig]);
+
+	const clearTemplateFields = (templateId: string) => {
+		const newValues = Object.keys(values)
+			.filter((key) => key.split("::")[0] !== templateId)
+			.reduce((acc, key) => {
+				acc[key] = values[key];
+				return acc;
+			}, {} as FormState);
+		const newErrors = Object.keys(errors)
+			.filter((key) => key.split("::")[0] !== templateId)
+			.reduce((acc, key) => {
+				acc[key] = errors[key];
+				return acc;
+			}, {} as ErrorState);
+		setValues(newValues);
+		setErrors(newErrors);
+	};
+
+	function validatePage(
+		page: ProcessTemplatePage,
+		templateId: string,
+	): boolean {
+		const pageErrs: ErrorState = {};
+
+		const validateInput = (
+			input: ProcessTemplateInput,
+			value: unknown,
+		): string | null => {
+			if (input.isRequired && isEmptyValue(value)) return "Required";
+
+			if (
+				input.validationRegex &&
+				(typeof value === "string" || typeof value === "number")
+			) {
+				const re = toRegex(input.validationRegex);
+				const valStr = String(value ?? "");
+				if (re && !re.test(valStr)) return "Invalid format";
+			}
+			return null;
+		};
+
+		const validateTable = (
+			schema: ProcessTemplateInputSchema,
+			cell: unknown,
+		): string | null => {
+			if (schema.inputType === "checkbox") return null;
+
+			if (schema.isRequired && isEmptyValue(cell)) {
+				return `"${schema.label}" is required`;
+			}
+
+			if (
+				schema.validationRegex &&
+				(typeof cell === "string" || typeof cell === "number")
+			) {
+				const re = toRegex(schema.validationRegex);
+				const valStr = String(cell ?? "");
+				if (re && !re.test(valStr))
+					return `"${schema.label}" has invalid format`;
+			}
+			return null;
+		};
+
+		const formatRowErrors = (
+			items: Array<{ rowIndex: number; errs: string[] }>,
+		) =>
+			items
+				.map(({ rowIndex, errs }) =>
+					[`• Row ${rowIndex + 1}:`, ...errs.map((e) => `  - ${e}`)].join("\n"),
+				)
+				.join("\n");
+
+		if (page.inputs) {
+			for (const input of page.inputs) {
+				if (!input) continue;
+				if (input.inputType?.startsWith("hidden")) continue;
+
+				const key = templateFieldKey(templateId, input.fieldName ?? "");
+				const value = values[key];
+
+				if (input.inputType === "input-table") {
+					const rows = (Array.isArray(value) ? value : []) as Array<
+						Record<string, unknown>
+					>;
+					const schemas = input.schemas ?? [];
+
+					const hasStarted = rows.some((row) => rowHasUserInput(row, schemas));
+					if (input.isRequired && !hasStarted) {
+						pageErrs[key] = "• At least one row is required.";
+						continue;
+					}
+
+					const rowErrorItems: Array<{ rowIndex: number; errs: string[] }> = [];
+					rows.forEach((row, rowIndex) => {
+						if (!rowHasUserInput(row, schemas)) return;
+						const errs: string[] = [];
+
+						for (const s of schemas) {
+							if (s) {
+								const colKey = s.fieldKey ?? s.label ?? "";
+								const cell = row[colKey as string];
+								const err = validateTable(s, cell);
+								if (err) errs.push(err);
+							}
+						}
+
+						if (errs.length) rowErrorItems.push({ rowIndex, errs });
+					});
+
+					if (rowErrorItems.length) {
+						pageErrs[key] = formatRowErrors(rowErrorItems);
+					}
+					continue;
+				}
+
+				const fieldErr = validateInput(input, value);
+				if (fieldErr) pageErrs[key] = fieldErr;
+			}
+		}
+
+		setErrors((prev) => ({ ...prev, ...pageErrs }));
+		return Object.values(pageErrs).every((e) => !e);
+	}
+
+	const next = () => {
+		if (currentFlat && !validatePage(currentFlat, currentFlat._templateId))
+			return;
+		setGlobalStep((s) => Math.min(s + 1, totalSteps - 1));
+	};
+
+	const back = () => {
+		const newStep = globalStep - 1;
+		setGlobalStep(Math.max(newStep, 0));
+		if (newStep < 0 && props.handleBack) {
+			props.handleBack();
+		}
+	};
+
+	const finish = () => {
+		if (currentFlat && !validatePage(currentFlat, currentFlat._templateId))
+			return;
+
+		const payload = buildProcessConfigMerge(templatesSorted, values, metadata);
+		console.log("processConfigMerge payload:", payload);
+
+		props.setProcessConfigMerge(payload);
+		if (props.handleFinish) {
+			props.handleFinish();
+		}
+	};
+
+	const progress =
+		totalSteps > 0 ? Math.round(((globalStep + 1) / totalSteps) * 100) : 0;
+
+	if (
+		isLoading &&
+		!currentFlat &&
+		!currentTemplate &&
+		(!props.processTemplateGroupId ||
+			!props.processTemplateId ||
+			!configTemplateId)
+	) {
+		return (
+			<Box sx={{ padding: theme.spacing(10, 3) }}>
+				<Loading />
+			</Box>
+		);
+	}
+
+	if (!isLoading && !templates.length)
+		return <Typography>No templates found.</Typography>;
+
+	return (
+		currentFlat &&
+		currentTemplate && (
+			<Card
+				sx={
+					props.isEditMode
+						? { border: 0, boxShadow: 0, borderRadius: 0 }
+						: {
+								border: `1px solid ${theme.palette.grey[300]}`,
+								borderRadius: 0,
+							}
+				}
+			>
+				<CardContent>
+					{!props.isEditMode && (
+						<Typography variant="h5" gutterBottom>
+							{currentTemplate.name}
+						</Typography>
+					)}
+
+					{templates.length > 1 ? (
+						<>
+							<TemplateNav
+								templates={templates}
+								activeIndex={currentFlat._templateIndex}
+							/>
+							<Divider sx={{ my: 2 }} />
+						</>
+					) : null}
+
+					<PageNav
+						pages={currentTemplate.pages as ProcessTemplatePage[]}
+						activeIndex={currentFlat._pageIndexWithinTemplate}
+						isEditMode={props.isEditMode}
+					/>
+
+					<Divider sx={{ my: 2 }} />
+
+					{/* Page header */}
+					<Header
+						title={currentFlat.title ?? ""}
+						subtitle={props.isEditMode ? "" : (currentFlat.description ?? "")}
+					/>
+
+					{/* Inputs */}
+					<Box>
+						<PageBody
+							templateId={currentFlat._templateId}
+							page={currentFlat}
+							values={values}
+							errors={errors}
+							handleFieldChange={handleFieldChange}
+							clearTemplateFields={clearTemplateFields}
+							readOnly={props.readOnly}
+							sharedCount={(count) => sharedCount?.(count)}
+							isEditMode={props.isEditMode}
+							disabledFields={disabledFields}
+							setFieldsDisabled={setFieldsDisabled}
+						/>
+					</Box>
+
+					<Divider sx={{ my: 2 }} />
+
+					<Box sx={{ mt: 1, mb: 2 }}>
+						<LinearProgress
+							variant="determinate"
+							value={isFirst ? 0 : progress}
+						/>
+					</Box>
+
+					<Stack
+						direction="row"
+						justifyContent="right"
+						sx={{ mt: 3 }}
+						spacing={3}
+					>
+						{isFirst && !props.disableBackToTemplates && (
+							<Button
+								variant="contained"
+								onClick={back}
+								color="info"
+								startIcon={<ArrowLeftIcon />}
+							>
+								Back to templates
+							</Button>
+						)}
+						{!isFirst && (
+							<Button
+								variant="contained"
+								onClick={back}
+								color="info"
+								startIcon={<ArrowLeftIcon />}
+							>
+								Back
+							</Button>
+						)}
+						{!isLast && (
+							<Button variant="contained" onClick={next} color="info">
+								Next
+							</Button>
+						)}
+						{isLast && !props.readOnly && (
+							<Button
+								variant="contained"
+								onClick={finish}
+								color="success"
+								endIcon={<ArrowRightIcon />}
+							>
+								Finish
+							</Button>
+						)}
+					</Stack>
+				</CardContent>
+			</Card>
+		)
+	);
+}

package/src/hooks/use-breadcrumbs.ts

@@ -1,4 +1,4 @@
-import { Crumb } from "../components/breadcrumbs";
+import type { Crumb } from "../components/breadcrumbs";
 
 const baseUrl = "/e4integrate";
 

package/src/hooks/use-recurrence.tsx

@@ -7,7 +7,6 @@ export default function useRecurrence(
 	}
 
 	const unitString = intervalUnitId === "1" ? "Minute" : "Hour";
-	let result: string =
-		"Every " + interval + " " + unitString + (interval === 1 ? "" : "s");
+	const result: string = `Every ${interval} ${unitString}${interval === 1 ? "" : "s"}`;
 	return result;
 }