@evenicanpm/admin-integrate 1.8.1 → 2.0.1

package/src/components/templatesV2/wizard.tsx

@@ -0,0 +1,746 @@
+import type { GetProcessTemplateQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { getProcessTemplate } from "@evenicanpm/admin-integrate/api/templates/queries";
+import { validateFieldOnSubmit } from "@evenicanpm/admin-integrate/api/templates/queries/validate-field-on-submit.server";
+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 React, { useEffect, useRef, useState } from "react";
+import { applyTemplateConfig, InputType } from "./inputs";
+import PageForm from "./pageForm";
+import {
+	type FieldValue,
+	type FlatPage,
+	type FormState,
+	type Metadata,
+	type ProcessConfigMerge,
+	type ProcessTemplate,
+	type ProcessTemplateInputSchema,
+	type ProcessTemplatePage,
+	type SearchOption,
+	sortBy,
+	templateFieldKey,
+} from "./types";
+
+const isString = (x: unknown): x is string => typeof x === "string";
+
+function isStringTypeRow(row: Record<string, unknown>): boolean {
+	return row?.DataType === "String" || row?.FieldType === "String";
+}
+
+function normalizeTableRowsStringLength(
+	rows: Array<Record<string, unknown>>,
+): Array<Record<string, unknown>> {
+	return rows.map((row: Record<string, unknown>) =>
+		isStringTypeRow(row) ? { ...row, Length: 4000 } : row,
+	);
+}
+
+function rowKeyToString(rawKey: unknown): string {
+	if (typeof rawKey === "string") return rawKey.trim();
+	if (
+		rawKey == null ||
+		typeof rawKey === "object" ||
+		typeof rawKey === "function"
+	)
+		return "";
+	if (
+		typeof rawKey === "number" ||
+		typeof rawKey === "boolean" ||
+		typeof rawKey === "bigint"
+	)
+		return String(rawKey);
+	return "";
+}
+
+function collapseTableRowsToObject(
+	rows: Array<Record<string, FieldValue>>,
+	keyCol: string,
+	valueCol: string,
+): Record<string, FieldValue> {
+	return rows.reduce(
+		(acc, row) => {
+			const rawKey = (row as Record<string, unknown>)[keyCol];
+			const k = rowKeyToString(rawKey);
+			if (!k) return acc;
+			const val = (row as Record<string, unknown>)[valueCol];
+			if (val !== undefined) acc[k] = val as FieldValue;
+			return acc;
+		},
+		{} as Record<string, FieldValue>,
+	);
+}
+
+function getKeyColumnForTable(
+	schemas: ProcessTemplateInputSchema[] | undefined,
+): string {
+	const nonPlaceholder = schemas?.find(
+		(s) => s?.fieldKey && isString(s.fieldKey) && !/^\{.*\}$/.test(s.fieldKey),
+	)?.fieldKey;
+	return isString(nonPlaceholder) ? nonPlaceholder : "{Variable}";
+}
+
+function getInputTableConfigValue(
+	input: {
+		fieldName?: string | null;
+		schemas?: readonly (ProcessTemplateInputSchema | null)[] | null;
+	},
+	v: Array<Record<string, FieldValue>>,
+): FieldValue | null {
+	if (!input?.fieldName) return null;
+	const schemas = (input.schemas ?? []).filter(
+		(s): s is ProcessTemplateInputSchema => s != null,
+	);
+	const valueCol = schemas.find((s) => s?.fieldKey === "{0}")?.fieldKey ?? null;
+	// When no "{0}" value column, use raw array
+	if (!isString(valueCol)) return v as unknown as FieldValue;
+
+	const keyCol = getKeyColumnForTable(schemas);
+	const collapsed = collapseTableRowsToObject(v, keyCol, valueCol);
+	return collapsed as unknown as FieldValue;
+}
+
+function formatFieldValueForValidation(v: FieldValue | undefined): string {
+	if (v === "" || v == null) return "";
+	if (typeof v === "boolean") return v ? "true" : "false";
+	// Avoid Object's default stringification ([object Object]); use JSON for objects
+	if (typeof v === "object" || typeof v === "function")
+		return JSON.stringify(v);
+	return String(v).trim();
+}
+
+function getInitialValuesFromTemplates(
+	templates: ProcessTemplate[],
+): FormState {
+	const newInitialValues: FormState = {};
+	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 &&
+					!newInitialValues[key]
+				) {
+					newInitialValues[key] = input.defaultValue as FieldValue;
+				}
+			});
+		});
+	});
+	return newInitialValues;
+}
+
+function buildProcessConfigMerge(
+	templates: ProcessTemplate[],
+	values: FormState,
+	metadata: Metadata,
+): ProcessConfigMerge {
+	const config = templates.map((t) => {
+		const templateId = typeof t.id === "string" ? Number(t.id) : t.id;
+		const obj: Record<string, FieldValue> = {
+			processTemplateId: Number.isFinite(templateId) ? templateId : t.id,
+		};
+
+		t.pages?.forEach((page) => {
+			page?.inputs?.forEach((input) => {
+				const key = templateFieldKey(t.id, input?.fieldName ?? "");
+
+				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;
+
+				const v = values[key];
+
+				const isInputTable =
+					input?.inputType === InputType.INPUT_TABLE &&
+					Array.isArray(v) &&
+					(input.schemas?.length ?? 0) > 0;
+
+				if (isInputTable && input?.schemas) {
+					const normalized = normalizeTableRowsStringLength(
+						v as Array<Record<string, unknown>>,
+					) as Array<Record<string, FieldValue>>;
+					const tableValue = getInputTableConfigValue(input, normalized);
+					if (tableValue !== null && input.fieldName) {
+						obj[input.fieldName] = tableValue;
+					}
+					return;
+				}
+
+				if (input?.fieldName) {
+					obj[input.fieldName] = v;
+				}
+			});
+		});
+
+		obj.processTemplateId = Number.isFinite(templateId) ? templateId : t.id;
+		return obj;
+	});
+
+	return { input: { config } };
+}
+
+export function removeTemplateConfig(input: unknown): unknown {
+	if (Array.isArray(input)) {
+		return input.map(removeTemplateConfig);
+	}
+	if (input == null || typeof input !== "object") {
+		return input;
+	}
+	const newObj: Record<string, unknown> = {};
+	for (const key in input) {
+		if (key !== "templateConfig") {
+			newObj[key] = removeTemplateConfig(
+				(input as Record<string, unknown>)[key],
+			);
+		}
+	}
+	return newObj;
+}
+
+function Header({
+	title,
+	subtitle,
+}: {
+	readonly title: string;
+	readonly 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[];
+	readonly activeIndex: number;
+	readonly 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[];
+	readonly activeIndex: number;
+	readonly stylings?: object;
+	readonly 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 {
+	readonly metadata: Metadata;
+	readonly processTemplateGroupId?: string;
+	readonly processTemplateId?: string;
+	readonly handleBack?: (event?: React.MouseEventHandler) => void;
+	readonly handleFinish?: (event?: React.MouseEventHandler) => void;
+	readonly setProcessConfigMerge: React.Dispatch<
+		React.SetStateAction<ProcessConfigMerge | null>
+	>;
+	readonly templateConfig?: string | null;
+	readonly disableBackToTemplates?: boolean;
+	readonly isEditMode?: boolean;
+	readonly isCreateMode?: boolean;
+	readonly readOnly?: boolean;
+	readonly 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 { data, isLoading } = getProcessTemplate.useData({
+		input: {
+			processTemplateGroupId: props.processTemplateGroupId || null,
+			processTemplateId: props.processTemplateId || null,
+		},
+	});
+
+	const [initialValues, setInitialValues] = React.useState<FormState>({});
+	// aggregated form values across pages
+	const [aggregatedValues, setAggregatedValues] =
+		useState<FormState>(initialValues);
+	// keep aggregated values in sync when initial defaults change
+	useEffect(() => {
+		setAggregatedValues((prev) => ({ ...prev, ...initialValues }));
+	}, [initialValues]);
+
+	// submit orchestration for current page
+	const currentPageSubmitRef = useRef<(() => Promise<boolean>) | null>(
+		null,
+	) as React.MutableRefObject<(() => Promise<boolean>) | null>;
+	const setCurrentPageSubmitRef = (fn: () => Promise<boolean>) => {
+		currentPageSubmitRef.current = fn;
+	};
+	// Latest merged form values (set in handlePageSubmit) so we can build payload in finish() without stale state
+	const lastMergedValuesRef = useRef<FormState | null>(null);
+	// Last submitted page values (set in handlePageSubmit) for validateFieldOnSubmit on Next
+	const lastSubmittedPageValuesRef = useRef<FormState>({});
+	// Results from validateFieldOnSubmit (keyed by templateFieldKey); block Next if any invalid
+	const [submitValidationResults, setSubmitValidationResults] =
+		React.useState<Record<
+			string,
+			{ isValid: boolean; message: string }
+		> | null>(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[]),
+				})),
+			);
+			setInitialValues(getInitialValuesFromTemplates(templates));
+		}
+	}, [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 [disabledFields, setDisabledFields] = React.useState<Set<string>>(
+		new Set(),
+	);
+
+	// track whether the current page is valid (reported by PageForm)
+	const [currentPageValid, setCurrentPageValid] = React.useState<boolean>(true);
+	const [isFieldValidationInProgress, setIsFieldValidationInProgress] =
+		React.useState(false);
+
+	const isFirst = globalStep === 0;
+	const isLast = globalStep === totalSteps - 1;
+
+	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);
+			applyTemplateConfig(
+				{
+					name: config.taskName as string,
+					templateConfig: props.templateConfig,
+				} as SearchOption,
+				(templateId: string, fieldName: string, value: FieldValue) => {
+					const key = templateFieldKey(templateId, fieldName);
+					setInitialValues((prev) => ({ ...prev, [key]: value }));
+				},
+			);
+		}
+	}, [props.templateConfig]);
+
+	const clearTemplateFields = (templateId: string) => {
+		setAggregatedValues((prev) => {
+			const copy = { ...prev };
+			for (const key of Object.keys(copy)) {
+				if (key.startsWith(`${templateId}::`)) {
+					delete copy[key];
+				}
+			}
+			return copy;
+		});
+	};
+
+	// On Next: only merge form state. Do not build or send full config (that happens only on Finish).
+	const handlePageSubmit = (pageValues: FormState) => {
+		lastSubmittedPageValuesRef.current = pageValues;
+		setAggregatedValues((prev) => {
+			const merged = { ...prev, ...pageValues };
+			lastMergedValuesRef.current = merged;
+			return merged;
+		});
+	};
+
+	const runPageSubmitValidation = async (
+		templateId: string,
+		submitValidationInputs: Array<{
+			fieldName?: string;
+			id: string;
+		}>,
+		values: FormState,
+	): Promise<boolean> => {
+		const input = submitValidationInputs
+			.filter(
+				(inp): inp is { fieldName: string; id: string } =>
+					typeof inp.fieldName === "string" && typeof inp.id === "string",
+			)
+			.map((inp) => {
+				const k = templateFieldKey(templateId, inp.fieldName);
+				const v = values[k];
+				return {
+					fieldName: inp.fieldName,
+					validationQuery: inp.id,
+					value: formatFieldValueForValidation(v),
+				};
+			});
+		try {
+			const results = await validateFieldOnSubmit(input);
+			const byKey: Record<string, { isValid: boolean; message: string }> = {};
+			let anyInvalid = false;
+			for (const r of results) {
+				const key = templateFieldKey(templateId, r.fieldName ?? "");
+				byKey[key] = {
+					isValid: r.isValid ?? false,
+					message: r.message ?? "",
+				};
+				if (!r.isValid) anyInvalid = true;
+			}
+			setSubmitValidationResults(byKey);
+			return !anyInvalid;
+		} catch {
+			const fallbackKey = templateFieldKey(
+				templateId,
+				submitValidationInputs[0]?.fieldName ?? "",
+			);
+			setSubmitValidationResults({
+				[fallbackKey]: {
+					isValid: false,
+					message: "Validation request failed",
+				},
+			});
+			return false;
+		}
+	};
+
+	const next = async () => {
+		const submitFn = currentPageSubmitRef.current;
+		if (!submitFn) return;
+		const ok = await submitFn();
+		if (!ok) return;
+
+		if (props.readOnly) {
+			setSubmitValidationResults(null);
+			setGlobalStep((s) => Math.min(s + 1, totalSteps - 1));
+			return;
+		}
+
+		const page = currentFlat;
+		const templateId = page?._templateId ?? "";
+		const submitValidationInputs = (page?.inputs ?? [])
+			.filter(
+				(inp): inp is NonNullable<typeof inp> & { id: string } =>
+					inp != null &&
+					!!inp.fieldName &&
+					!!(inp as { validationQueryOnSubmit?: string })
+						.validationQueryOnSubmit &&
+					!!(inp as { id?: string }).id,
+			)
+			.map((inp) => ({
+				fieldName: inp.fieldName ?? undefined,
+				id: (inp as { id: string }).id,
+			}));
+
+		const values = {
+			...aggregatedValues,
+			...lastSubmittedPageValuesRef.current,
+		};
+
+		const shouldRunSubmitValidation =
+			submitValidationInputs.length > 0 &&
+			(!props.isEditMode ||
+				submitValidationInputs.some((inp) => {
+					const fieldName = inp.fieldName;
+					if (fieldName !== "uniqueIdentifier" && fieldName !== "subscriptions")
+						return false;
+					const key = templateFieldKey(templateId, fieldName ?? "");
+					const current = formatFieldValueForValidation(values[key]);
+					const initial = formatFieldValueForValidation(initialValues[key]);
+					return current !== initial;
+				}));
+
+		if (shouldRunSubmitValidation) {
+			const validationOk = await runPageSubmitValidation(
+				templateId,
+				submitValidationInputs,
+				values,
+			);
+			if (!validationOk) return;
+		}
+
+		setSubmitValidationResults(null);
+		setGlobalStep((s) => Math.min(s + 1, totalSteps - 1));
+	};
+
+	const back = () => {
+		setSubmitValidationResults(null);
+		const newStep = globalStep - 1;
+		setGlobalStep(Math.max(newStep, 0));
+		if (newStep < 0 && props.handleBack) {
+			props.handleBack();
+		}
+	};
+
+	const finish = async () => {
+		const submitFn = currentPageSubmitRef.current;
+		if (!submitFn) return;
+		const ok = await submitFn();
+		if (!ok) return;
+
+		const merged = lastMergedValuesRef.current ?? aggregatedValues;
+		const payload = buildProcessConfigMerge(templatesSorted, merged, metadata);
+		props.setProcessConfigMerge(payload);
+		props.handleFinish?.();
+	};
+
+	const progress =
+		totalSteps > 0 ? Math.round(((globalStep + 1) / totalSteps) * 100) : 0;
+
+	const showLoading =
+		isLoading &&
+		!currentFlat &&
+		!currentTemplate &&
+		!props.templateConfig &&
+		(!props.processTemplateGroupId || !props.processTemplateId);
+	if (showLoading) {
+		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 ?? "")}
+					/>
+
+					{/* Per-page form */}
+					<Box>
+						<PageForm
+							templateId={currentFlat._templateId}
+							page={currentFlat}
+							initialValues={aggregatedValues}
+							onPageSubmit={handlePageSubmit}
+							setSubmitRef={(fn) =>
+								setCurrentPageSubmitRef(fn ?? (() => Promise.resolve(false)))
+							}
+							setPageValidity={(v) => setCurrentPageValid(v)}
+							clearTemplateFields={(templateId) =>
+								clearTemplateFields(templateId)
+							}
+							readOnly={props.readOnly}
+							isEditMode={props.isEditMode}
+							isCreateMode={props.isCreateMode}
+							disabledFields={disabledFields}
+							setFieldsDisabled={setFieldsDisabled}
+							templateConfig={props.templateConfig || ""}
+							setFieldValidationInProgress={setIsFieldValidationInProgress}
+							submitValidationResults={submitValidationResults ?? undefined}
+						/>
+					</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"
+								disabled={isFieldValidationInProgress || !currentPageValid}
+							>
+								Next
+							</Button>
+						)}
+						{isLast && !props.readOnly && (
+							<Button
+								variant="contained"
+								onClick={() => finish()}
+								color="success"
+								endIcon={<ArrowRightIcon />}
+								disabled={isFieldValidationInProgress}
+							>
+								Finish
+							</Button>
+						)}
+					</Stack>
+				</CardContent>
+			</Card>
+		)
+	);
+}