@evenicanpm/admin-integrate 1.8.1 → 2.0.0

package/src/components/templates/wizard.tsx

@@ -1,737 +0,0 @@
-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>
-		)
-	);
-}