@evenicanpm/admin-integrate 1.2.2 → 1.4.0

package/src/components/templates/wizard.tsx

@@ -0,0 +1,737 @@
+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";
+// useTranslations - 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"
+
+				// metadata override (no hardcoding)
+				// allow any metafields to be mapped
+				if (input?.fieldName && input.fieldName in metadata) {
+					obj[input.fieldName] = metadata[
+						input.fieldName as keyof Metadata
+					] as FieldValue;
+					return;
+				}
+
+				if (!Object.hasOwn(values, key)) return;
+
+				let v = values[key];
+
+				if (
+					input?.inputType === "input-table" &&
+					Array.isArray(v) &&
+					input.schemas?.length
+				) {
+					v = v.map((row: any) =>
+						(row?.DataType || row?.FieldType) === "String"
+							? {
+									...row,
+									Length: 4000,
+								}
+							: row,
+					);
+
+					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];
+
+								let k = "";
+								if (typeof rawKey === "string") {
+									k = rawKey.trim();
+								} else if (rawKey != null) {
+									k = 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"
+
+							let k = "";
+							if (typeof rawKey === "string") {
+								k = rawKey.trim();
+							} else if (rawKey !== null && rawKey !== undefined) {
+								k = String(rawKey);
+							}
+
+							if (!k) return acc;
+
+							const val =
+								valueCol !== null && valueCol !== undefined
+									? (row as any)[valueCol]
+									: undefined; // 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;
+				}
+			});
+		});
+
+		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,
+}: Readonly<{ 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,
+}: Readonly<{
+	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,
+}: Readonly<{
+	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;
+	isCreateMode?: boolean;
+	readOnly?: boolean;
+	sharedCount?: (count: number) => void;
+}
+
+export default function Wizard({
+	metadata,
+	sharedCount,
+	...props
+}: Readonly<Props>) {
+	const theme = useTheme();
+
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+
+	const [templates, setTemplates] = useState<ProcessTemplate[]>([]);
+	const [templatesSorted, setTemplatesSorted] = useState<ProcessTemplate[]>([]);
+
+	const { data, isLoading } = getProcessTemplate.useData({
+		input: {
+			processTemplateGroupId: props.processTemplateGroupId || null,
+			processTemplateId:
+				/*configTemplateId ||*/ props.processTemplateId || null,
+		},
+	});
+
+	const [values, setValues] = React.useState<FormState>({});
+
+	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[]),
+				})),
+			);
+
+			templates.forEach((tpl) => {
+				tpl.pages?.forEach((page) => {
+					page?.inputs?.forEach((input) => {
+						const key = templateFieldKey(tpl.id, input?.fieldName ?? "");
+						if (
+							input?.defaultValue !== undefined &&
+							input?.defaultValue !== null &&
+							!values[key]
+						) {
+							setValues((prev) => ({
+								...prev,
+								[key]: input.defaultValue as FieldValue,
+							}));
+						}
+					});
+				});
+			});
+		}
+	}, [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 [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) => {
+			if (!templateId || !fieldName || value == null) return;
+			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.taskName as string,
+					templateConfig: props.templateConfig as string,
+				} as SearchOption,
+				handleFieldChange,
+			);
+		}
+	}, [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;
+				}
+
+				if (
+					input.fieldName === "uniqueIdentifier" &&
+					typeof value === "string"
+				) {
+					const notUnique = Object.entries(values).find(
+						([k, v]) => k.endsWith(`${templateId}::isUnique`) && v === false,
+					);
+					if (notUnique) {
+						pageErrs[key] = "This identifier is not unique.";
+						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;
+
+		let payload = buildProcessConfigMerge(templatesSorted, values, metadata);
+
+		props.setProcessConfigMerge(payload);
+		if (props.handleFinish) {
+			props.handleFinish();
+		}
+	};
+
+	const progress =
+		totalSteps > 0 ? Math.round(((globalStep + 1) / totalSteps) * 100) : 0;
+
+	if (
+		isLoading &&
+		!currentFlat &&
+		!currentTemplate &&
+		!props.templateConfig &&
+		(!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}
+							isCreateMode={props.isCreateMode}
+							disabledFields={disabledFields}
+							setFieldsDisabled={setFieldsDisabled}
+							templateConfig={props.templateConfig || ""}
+						/>
+					</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>
+		)
+	);
+}