@evenicanpm/admin-integrate 1.8.1 → 2.0.0

package/src/components/templatesV2/pageForm.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { Formik } from "formik";
+import React, { useEffect } from "react";
+import { FormikPageBody } from "./inputs";
+import type { FlatPage, FormState } from "./types";
+import { buildZodSchemaForPage } from "./validation/buildZodSchema";
+import { zodFormikValidate } from "./validation/zodFormikValidate";
+
+export default function PageForm({
+	templateId,
+	page,
+	initialValues,
+	onPageSubmit,
+	setSubmitRef,
+	setPageValidity,
+	clearTemplateFields,
+	readOnly,
+	isEditMode,
+	isCreateMode,
+	disabledFields,
+	setFieldsDisabled,
+	templateConfig,
+	setFieldValidationInProgress,
+	submitValidationResults,
+}: Readonly<{
+	templateId: string;
+	page: FlatPage;
+	initialValues: FormState;
+	onPageSubmit: (values: FormState) => void;
+	setSubmitRef?: (fn: (() => Promise<boolean>) | undefined) => void;
+	setPageValidity?: (valid: boolean) => void;
+	clearTemplateFields: (templateId: string) => void;
+	readOnly?: boolean;
+	isEditMode?: boolean;
+	isCreateMode?: boolean;
+	disabledFields?: Set<string>;
+	setFieldsDisabled?: (
+		templateId: string,
+		fieldNames: string[],
+		disabled: boolean,
+	) => void;
+	templateConfig?: string;
+	setFieldValidationInProgress?: (inProgress: boolean) => void;
+	submitValidationResults?: Record<
+		string,
+		{ isValid: boolean; message: string }
+	>;
+}>) {
+	const zSchema = buildZodSchemaForPage(page, templateId);
+	const pageKeys = React.useMemo(
+		() =>
+			(page.inputs ?? []).map(
+				(inp) => templateId + "::" + (inp?.fieldName ?? ""),
+			),
+		[page.inputs, templateId],
+	);
+	const initialTouched = React.useMemo(() => ({}), []);
+
+	const stepKey = `${templateId}:${page._flatIndex ?? ""}`;
+
+	const formikRef = React.useRef<any>(null);
+
+	const submit = React.useCallback(async () => {
+		const formikHelpers = formikRef.current;
+		if (!formikHelpers) return false;
+		const errors = await formikHelpers.validateForm();
+		const errorKeys = Object.keys(errors || {});
+		const hasErrors = pageKeys.some(
+			(k) =>
+				Boolean(errors[k]) ||
+				errorKeys.some((ek) => ek === k || ek.startsWith(k + ".")),
+		);
+		if (hasErrors) {
+			const touched: Record<string, boolean> = {};
+			pageKeys.forEach((k) => (touched[k] = true));
+			formikHelpers.setTouched(touched);
+			return false;
+		}
+		await formikHelpers.submitForm();
+		return true;
+	}, [pageKeys]);
+
+	return (
+		<Formik
+			key={stepKey}
+			initialValues={initialValues}
+			initialTouched={initialTouched}
+			enableReinitialize
+			validateOnMount={false}
+			validateOnBlur={true}
+			validateOnChange={false}
+			validate={zodFormikValidate(zSchema)}
+			onSubmit={(values) => {
+				// Only pass the keys for this page back to the parent.
+				const pageKeys = (page.inputs ?? []).map(
+					(inp) => templateId + "::" + (inp?.fieldName ?? ""),
+				);
+				const filtered: FormState = {};
+				for (const k of pageKeys) {
+					if (
+						typeof values === "object" &&
+						values !== null &&
+						Object.hasOwn(values as object, k)
+					) {
+						filtered[k] = (values as Record<string, any>)[k];
+					}
+				}
+				onPageSubmit(filtered);
+			}}
+		>
+			{(formik) => {
+				formikRef.current = formik;
+				useEffect(() => {
+					if (setSubmitRef) setSubmitRef(submit);
+					return () => {
+						if (setSubmitRef) setSubmitRef(undefined);
+					};
+				}, [submit, setSubmitRef]);
+
+				useEffect(() => {
+					if (setPageValidity) setPageValidity(true);
+				}, [stepKey, setPageValidity]);
+
+				// Keep Next button enabled so user can always click it. Validation runs on Next click (submit).
+				// We do not disable Next based on errors; errors show after they click Next or touch a field.
+				useEffect(() => {
+					if (setPageValidity) setPageValidity(true);
+				}, [setPageValidity]);
+
+				return (
+					<form onSubmit={formik.handleSubmit}>
+						<FormikPageBody
+							templateId={templateId}
+							page={page}
+							clearTemplateFields={() => clearTemplateFields(templateId)}
+							readOnly={readOnly}
+							isEditMode={isEditMode}
+							isCreateMode={isCreateMode}
+							disabledFields={disabledFields}
+							setFieldsDisabled={setFieldsDisabled}
+							templateConfig={templateConfig}
+							setFieldValidationInProgress={setFieldValidationInProgress}
+							submitValidationResults={submitValidationResults}
+						/>
+					</form>
+				);
+			}}
+		</Formik>
+	);
+}

package/src/components/{templates → templatesV2}/templates-list/templates-list-row.tsx

@@ -5,6 +5,7 @@ import {
 	StyledTableCell,
 	StyledTableRow,
 } from "@evenicanpm/admin-integrate/components/data-table/table-row";
+import { IntegrationStatusIcon } from "@evenicanpm/admin-integrate/components/integration-list";
 import { ChevronRightOutlined } from "@mui/icons-material";
 // MUI
 import {
@@ -33,7 +34,7 @@ const TemplatesListRow: React.FC<Props> = (props: Props) => {
 			>
 				<Stack spacing={1} direction="row">
 					<Box display="flex" justifyContent="flex-end" alignItems="center">
-						{/* icon */}
+						<IntegrationStatusIcon processIcon={"DB"} />
 					</Box>
 					<Box display="flex" justifyContent="flex-end" alignItems="center">
 						<Typography>{props.item.name}</Typography>

package/src/components/{templates → templatesV2}/templates-list/templates-list-table.tsx

@@ -42,9 +42,9 @@ export default function TemplatesListTable(props: Readonly<Props>) {
 					rowSx={props.rowSx}
 				/>
 				<TableBody>
-					{props.items.map((item, index) => (
+					{props.items.map((item) => (
 						<TemplatesListRow
-							key={`list-row-${index + 1}`}
+							key={item.id}
 							item={item}
 							heading={props.heading}
 							sx={props.rowSx}

package/src/components/{templates → templatesV2}/templates-list/templates-list.tsx

@@ -14,7 +14,7 @@ import type { ListFilterOutput } from "@evenicanpm/admin-integrate/components/li
 import {
 	type TemplateListFilters,
 	templateListFilters,
-} from "@evenicanpm/admin-integrate/components/templates/template-filter";
+} from "@evenicanpm/admin-integrate/components/templatesV2/template-filter";
 import {
 	Box,
 	Card,
@@ -25,9 +25,16 @@ import {
 	useTheme,
 } from "@mui/material";
 import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import TemplatesListTable from "./templates-list-table";
 
+/** Shared shape for processTemplateGroups / processTemplates used to avoid duplicated branches. */
+function getConnection(props: Readonly<Props>) {
+	return props.isTemplateGroupsList
+		? (props.data as GetProcessTemplateGroupsQuery)?.processTemplateGroups
+		: (props.data as GetProcessTemplatesQuery)?.processTemplates;
+}
+
 export interface Item {
 	id: string;
 	name: string;
@@ -94,29 +101,16 @@ export default function TemplatesList(props: Readonly<Props>) {
 	};
 
 	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 conn = getConnection(props);
+		if (conn?.nodes) setItems(conn.nodes as Item[]);
+	}, [props.data, props.isTemplateGroupsList]);
 
-	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;
+	const connection = useMemo(
+		() => getConnection(props),
+		[props.data, props.isTemplateGroupsList],
+	);
+	const resultsReturned = connection?.pageInfo?.resultsReturned;
+	const recordCount = connection?.recordCount;
 
 	return (
 		<>
@@ -144,10 +138,7 @@ export default function TemplatesList(props: Readonly<Props>) {
 				</Card>
 			)}
 
-			{!props.loading &&
-			((props.data as GetProcessTemplateGroupsQuery)?.processTemplateGroups ||
-				(props.data as GetProcessTemplatesQuery)?.processTemplates) &&
-			items.length > 0 ? (
+			{!props.loading && connection && items.length > 0 ? (
 				<Box
 					sx={{
 						minHeight:

package/src/components/{templates → templatesV2}/types.tsx

@@ -1,19 +1,19 @@
 import type { GetProcessTemplateQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 
-export type ProcessTemplateInputSchema = NonNullable<
-	NonNullable<NonNullable<ProcessTemplateInput>["schemas"]>[number]
->;
+/** Element type of an array (or nullable array); avoids repeating NonNullable<...>[number]. */
+type ArrayElement<T> = T extends readonly (infer U)[] ? NonNullable<U> : never;
 
-export type ProcessTemplateInput = NonNullable<
-	NonNullable<NonNullable<ProcessTemplatePage>["inputs"]>[number]
+export type ProcessTemplate = ArrayElement<
+	NonNullable<GetProcessTemplateQuery["processTemplate"]>
 >;
-
-export type ProcessTemplatePage = NonNullable<
-	NonNullable<NonNullable<ProcessTemplate>["pages"]>[number]
+export type ProcessTemplatePage = ArrayElement<
+	NonNullable<ProcessTemplate["pages"]>
 >;
-
-export type ProcessTemplate = NonNullable<
-	NonNullable<GetProcessTemplateQuery["processTemplate"]>[number]
+export type ProcessTemplateInput = ArrayElement<
+	NonNullable<ProcessTemplatePage["inputs"]>
+>;
+export type ProcessTemplateInputSchema = ArrayElement<
+	NonNullable<ProcessTemplateInput["schemas"]>
 >;
 
 export type Data = { processTemplate: ProcessTemplate[] };
@@ -38,7 +38,7 @@ 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
+		config: Array<Record<string, FieldValue>>;
 	};
 };
 

package/src/components/templatesV2/validation/buildZodSchema.ts

@@ -0,0 +1,216 @@
+import { z } from "zod";
+import { InputType } from "../inputs/input-type";
+import type { ProcessTemplateInputSchema, ProcessTemplatePage } from "../types";
+import { sortBy, templateFieldKey, toRegex } from "../types";
+
+type CellError = { colKey: string; message: string };
+
+/**
+ * Validate a single input-table row against column schemas.
+ * Returns per-cell errors so we can show them below each input.
+ */
+function validateTableRow(
+	row: Record<string, unknown>,
+	columnSchemas: ProcessTemplateInputSchema[],
+): CellError[] {
+	const errors: CellError[] = [];
+	const ordered = sortBy(columnSchemas);
+
+	ordered.forEach((col, colIndex) => {
+		const colKey = col.fieldKey ?? col.label ?? `col_${colIndex}`;
+		const cell = row[colKey];
+		let strVal: string;
+		if (cell == null || typeof cell === "object") {
+			strVal = "";
+		} else if (typeof cell === "string") {
+			strVal = cell.trim();
+		} else if (typeof cell === "number" || typeof cell === "boolean") {
+			strVal = String(cell).trim();
+		} else {
+			strVal = "";
+		}
+
+		if (col.inputType === InputType.CHECKBOX) {
+			if (col.isRequired && !cell) {
+				errors.push({ colKey, message: "required" });
+			}
+			return;
+		}
+
+		if (col.isRequired && strVal.length === 0) {
+			errors.push({ colKey, message: "required" });
+			return;
+		}
+
+		if (strVal.length === 0) return;
+
+		const regex = toRegex(col.validationRegex ?? null);
+		if (regex && !regex.test(strVal)) {
+			errors.push({ colKey, message: "invalid format" });
+		}
+	});
+
+	return errors;
+}
+
+/**
+ * Build zod schema for an input-table field, including nested row validation.
+ * Emits one issue per cell error with path [rowIndex, colKey] so Formik can show errors below each input.
+ */
+function buildInputTableSchema(
+	input: NonNullable<ProcessTemplatePage["inputs"]>[number],
+): z.ZodTypeAny {
+	const arraySchema = z.array(z.record(z.string(), z.any()));
+	const arrayWithMin = input?.isRequired
+		? arraySchema.min(1, "At least one row is required")
+		: arraySchema;
+
+	const base = z.preprocess((val) => val ?? [], arrayWithMin);
+
+	const schemas = (input?.schemas ?? []).filter(
+		(s): s is NonNullable<typeof s> => s != null,
+	);
+	if (schemas.length === 0) return base;
+
+	return base.superRefine((rows, ctx) => {
+		for (let i = 0; i < rows.length; i++) {
+			const row = rows[i] as Record<string, unknown>;
+			const cellErrors = validateTableRow(row, schemas);
+			for (const { colKey, message } of cellErrors) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					message,
+					path: [i, colKey],
+				});
+			}
+		}
+	});
+}
+
+/**
+ * Build schema for a single non-table field based on input type.
+ * Formik values can be string, number, boolean, or string[] depending on input type.
+ */
+function buildFieldSchema(
+	input: NonNullable<ProcessTemplatePage["inputs"]>[number],
+): z.ZodTypeAny {
+	if (input == null) return z.any();
+	const inputType = input.inputType;
+
+	let schema: z.ZodTypeAny;
+	switch (inputType) {
+		case InputType.NUMBER:
+			schema = z.union([z.number(), z.string(), z.undefined(), z.null()]);
+			break;
+		case InputType.CHECKBOX:
+			schema = z.union([z.boolean(), z.undefined(), z.null()]);
+			break;
+		case InputType.MULTI_TEXT_SEARCH:
+			schema = z.union([z.array(z.string()), z.undefined(), z.null()]);
+			break;
+		case InputType.TEXT:
+		case InputType.SELECTOR:
+		case InputType.TEXT_UNIQUE_IDENTIFIER:
+		case InputType.TEXT_SEARCH:
+		default:
+			schema = z.union([z.string(), z.undefined(), z.null()]);
+			break;
+	}
+
+	if (input?.isRequired) {
+		switch (inputType) {
+			case InputType.CHECKBOX:
+				schema = schema.refine((val: unknown) => val === true, "required");
+				break;
+			case InputType.MULTI_TEXT_SEARCH:
+				schema = schema.refine(
+					(val: unknown) => Array.isArray(val) && val.length > 0,
+					"required",
+				);
+				break;
+			case InputType.NUMBER:
+				schema = schema.refine((val: unknown) => {
+					if (val == null || val === "") return false;
+					if (typeof val === "number") return true;
+					if (typeof val === "object") return false;
+					if (typeof val === "string") return val.trim().length > 0;
+					if (typeof val === "boolean")
+						return (val ? "true" : "false").trim().length > 0;
+					return false;
+				}, "required");
+				break;
+			default:
+				schema = schema.refine((val: unknown) => {
+					if (val == null || typeof val === "object") return false;
+					if (typeof val === "string") return val.trim().length > 0;
+					if (typeof val === "number") return String(val).trim().length > 0;
+					if (typeof val === "boolean")
+						return (val ? "true" : "false").trim().length > 0;
+					return false;
+				}, "required");
+				break;
+		}
+	}
+
+	if (input?.validationRegex) {
+		const regex = toRegex(input.validationRegex);
+		if (regex) {
+			schema = schema.refine((val: unknown) => {
+				if (!val) return true;
+				if (typeof val === "object") return false;
+				if (typeof val === "string") return regex.test(val);
+				if (typeof val === "number") return regex.test(String(val));
+				if (typeof val === "boolean") return regex.test(val ? "true" : "false");
+				return false;
+			}, "Invalid format");
+		}
+	}
+
+	return schema;
+}
+
+/**
+ * Build schema for a single page (only keys present on that page).
+ */
+export function buildZodSchemaForPage(
+	page: ProcessTemplatePage,
+	templateId: string,
+) {
+	const shape: Record<string, z.ZodTypeAny> = {};
+	const requiredKeys: string[] = [];
+
+	page?.inputs?.forEach((input) => {
+		if (!input?.fieldName) return;
+		if (
+			input.inputType === InputType.HIDDEN ||
+			input.inputType === InputType.HIDDEN_NUMBER ||
+			input.inputType === InputType.HIDDEN_NUMBER_OR_NULL
+		) {
+			return;
+		}
+
+		const key = templateFieldKey(templateId, input.fieldName);
+		if (input.isRequired) requiredKeys.push(key);
+
+		if (input.inputType === InputType.INPUT_TABLE) {
+			shape[key] = buildInputTableSchema(input);
+		} else {
+			shape[key] = buildFieldSchema(input);
+		}
+	});
+
+	return z
+		.object(shape)
+		.passthrough()
+		.superRefine((obj, ctx) => {
+			for (const key of requiredKeys) {
+				if (!Object.hasOwn(obj, key)) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						path: [key],
+						message: "required",
+					});
+				}
+			}
+		});
+}

package/src/components/templatesV2/validation/zodFormikValidate.ts

@@ -0,0 +1,17 @@
+import type { z } from "zod";
+
+export function zodFormikValidate(schema: z.ZodTypeAny) {
+	return (values: unknown) => {
+		const result = schema.safeParse(values);
+
+		if (result.success) return {};
+
+		const errors: Record<string, string> = {};
+
+		result.error.issues.forEach((issue) => {
+			errors[issue.path.join(".")] = issue.message;
+		});
+
+		return errors;
+	};
+}