@evenicanpm/admin-integrate 1.8.1 → 2.0.1

package/src/components/templatesV2/inputs/table/InputTable.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
+import {
+	Box,
+	Button,
+	Card,
+	CardContent,
+	Checkbox,
+	FormHelperText,
+	IconButton,
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableRow,
+	TextField,
+	Typography,
+} from "@mui/material";
+import * as React from "react";
+import type { ProcessTemplateInputSchema } from "../../types";
+import { sortBy } from "../../types";
+import { InputType } from "../input-type";
+import { SelectorInput } from "../primitives/SelectorInput";
+import { renderReadOnlyText } from "../utils/renderReadOnlyText";
+
+/** Reserved key for React list key; not a schema column. */
+const ROW_ID_KEY = "__rowId" as const;
+
+type RowRecord = Record<string, string | number | boolean | null | undefined>;
+
+function getRowId(row: RowRecord, index: number): string {
+	const id = row[ROW_ID_KEY];
+	if (typeof id === "string" && id.length > 0) return id;
+	return `row-${index}`;
+}
+
+function ensureRowIds(
+	rows: RowRecord[],
+	setRows: (rows: RowRecord[]) => void,
+): void {
+	const needsId = rows.some(
+		(r) => r[ROW_ID_KEY] == null || r[ROW_ID_KEY] === "",
+	);
+	if (!needsId) return;
+	setRows(
+		rows.map((r) =>
+			r[ROW_ID_KEY] != null && r[ROW_ID_KEY] !== ""
+				? r
+				: { ...r, [ROW_ID_KEY]: crypto.randomUUID() },
+		),
+	);
+}
+
+export function InputTable({
+	rows,
+	setRows,
+	schemas,
+	tableError,
+	rowErrors,
+	readOnly,
+	onCellBlur,
+}: Readonly<{
+	rows: RowRecord[];
+	setRows: (rows: RowRecord[]) => void;
+	schemas: ProcessTemplateInputSchema[];
+	tableError: string | null;
+	rowErrors?: Array<Record<string, string>>;
+	readOnly?: boolean;
+	/** Called when user focuses out of a cell so errors show on blur */
+	onCellBlur?: () => void;
+}>) {
+	React.useEffect(() => {
+		if (!rows?.length) return;
+		ensureRowIds(rows, setRows);
+	}, [rows, setRows]);
+
+	const ordered = React.useMemo(
+		() => sortBy<ProcessTemplateInputSchema>(schemas),
+		[schemas],
+	);
+
+	const hasRowWithMissingRequired = React.useMemo(() => {
+		const rowList = rows ?? [];
+		if (rowList.length === 0) return false;
+		return rowList.some((row) => {
+			return ordered.some((col, colIndex) => {
+				if (!col.isRequired) return false;
+				const key = col.fieldKey ?? col.label ?? `col_${colIndex}`;
+				const cell = row[key];
+				if (col.inputType === InputType.CHECKBOX) return !cell;
+				const strVal = cell == null ? "" : String(cell).trim();
+				return strVal.length === 0;
+			});
+		});
+	}, [rows, ordered]);
+
+	const addRow = () => {
+		const empty: RowRecord = {
+			[ROW_ID_KEY]: crypto.randomUUID(),
+		};
+		ordered.forEach((s, colIndex) => {
+			const key = s.fieldKey ?? s.label ?? `col_${colIndex}`;
+			empty[key] =
+				s.inputType === InputType.CHECKBOX ? false : (s.defaultValue ?? "");
+		});
+		setRows([...(rows ?? []), empty]);
+	};
+
+	const delRow = (idx: number) => {
+		const copy = [...rows];
+		copy.splice(idx, 1);
+		setRows(copy);
+	};
+
+	const updateCell = (
+		idx: number,
+		columnKey: string,
+		value: string | number | boolean | null | undefined,
+	) => {
+		const copy = [...rows];
+		copy[idx] = { ...copy[idx], [columnKey]: value };
+		setRows(copy);
+	};
+
+	return (
+		<>
+			{readOnly && rows.length === 0 && (
+				<Box>
+					<Typography>No values</Typography>
+				</Box>
+			)}
+			{(!readOnly || (readOnly && rows.length > 0)) && (
+				<Card
+					variant="outlined"
+					sx={{ mb: 1, borderColor: tableError ? "error.main" : "grey.400" }}
+				>
+					<CardContent>
+						<Table size="small">
+							<TableHead>
+								<TableRow>
+									{ordered.map((s: ProcessTemplateInputSchema) => (
+										<TableCell key={s.id}>{s.label}</TableCell>
+									))}
+									<TableCell width={1} />
+								</TableRow>
+							</TableHead>
+							<TableBody>
+								{(rows ?? []).map((r: RowRecord, i: number) => (
+									<TableRow key={getRowId(r, i)}>
+										{ordered.map(
+											(s: ProcessTemplateInputSchema, colIndex: number) => {
+												const columnKey =
+													s.fieldKey ?? s.label ?? `col_${colIndex}`;
+												const cell = r[columnKey];
+												const cellError = rowErrors?.[i]?.[columnKey] ?? null;
+												if (s.inputType === InputType.CHECKBOX) {
+													return (
+														<TableCell key={s.id}>
+															<Checkbox
+																checked={Boolean(cell)}
+																onChange={(e) =>
+																	updateCell(i, columnKey, e.target.checked)
+																}
+																onBlur={onCellBlur}
+																disabled={readOnly}
+															/>
+															<FormHelperText
+																error
+																sx={{ mt: 0, minWidth: "80px" }}
+															>
+																{cellError || " "}
+															</FormHelperText>
+														</TableCell>
+													);
+												}
+												if (s.inputType === InputType.SELECTOR) {
+													const opts = (s.options ?? [])
+														.filter(
+															(option): option is NonNullable<typeof option> =>
+																option != null,
+														)
+														.map((option) => ({
+															label: option.label ?? "",
+															value: option.optionValue ?? option.label ?? "",
+														}))
+														.filter((o) => o.value !== "" || o.label !== "");
+
+													return (
+														<TableCell key={s.id}>
+															<SelectorInput
+																insideTable={true}
+																minWidth={120}
+																fieldName={columnKey}
+																label={s.label ?? ""}
+																value={cell == null ? "" : String(cell)}
+																options={opts}
+																setValue={(v) => updateCell(i, columnKey, v)}
+																error={cellError}
+																readOnly={readOnly}
+																onBlur={onCellBlur}
+															/>
+														</TableCell>
+													);
+												}
+												return (
+													<TableCell key={s.id}>
+														{readOnly ? (
+															renderReadOnlyText(
+																undefined,
+																typeof cell === "boolean" ? String(cell) : cell,
+															)
+														) : (
+															<TextField
+																size="small"
+																value={cell == null ? "" : String(cell)}
+																onChange={(e) =>
+																	updateCell(i, columnKey, e.target.value)
+																}
+																onBlur={onCellBlur}
+																fullWidth
+																disabled={readOnly}
+																error={Boolean(cellError)}
+																helperText={cellError ?? " "}
+															/>
+														)}
+													</TableCell>
+												);
+											},
+										)}
+										<TableCell>
+											{!readOnly && (
+												<IconButton
+													onClick={() => delRow(i)}
+													size="small"
+													disabled={readOnly}
+													sx={{ marginTop: "-1rem" }}
+												>
+													<DeleteIcon fontSize="small" />
+												</IconButton>
+											)}
+										</TableCell>
+									</TableRow>
+								))}
+								{!readOnly && (
+									<TableRow>
+										<TableCell colSpan={ordered.length + 1}>
+											<Button
+												onClick={addRow}
+												startIcon={<AddIcon />}
+												variant="outlined"
+												size="small"
+												disabled={readOnly || hasRowWithMissingRequired}
+											>
+												Add row
+											</Button>
+										</TableCell>
+									</TableRow>
+								)}
+							</TableBody>
+						</Table>
+					</CardContent>
+				</Card>
+			)}
+		</>
+	);
+}

package/src/components/templatesV2/inputs/table/index.ts

@@ -0,0 +1 @@
+export { InputTable } from "./InputTable";

package/src/components/templatesV2/inputs/utils/applyTemplateConfig.ts

@@ -0,0 +1,28 @@
+import type { FieldValue, ProcessConfigMerge, SearchOption } from "../../types";
+import { ReservedFieldName } from "../field-names";
+
+export function applyTemplateConfig(
+	selectedOption: SearchOption,
+	handleFieldChange: (
+		templateId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => void,
+): void {
+	const merge: ProcessConfigMerge = { input: { config: [] } };
+	try {
+		merge.input = { config: [JSON.parse(selectedOption.templateConfig)] };
+
+		if (merge.input.config.length > 0) {
+			const config = merge.input.config[0];
+			const processTemplateId = config[ReservedFieldName.ProcessTemplateId];
+			for (const key of Object.keys(config)) {
+				handleFieldChange(processTemplateId as string, key, config[key]);
+			}
+		}
+	} catch {
+		console.error(
+			`Failed to apply template config for ${selectedOption.name}. Skipping...`,
+		);
+	}
+}

package/src/components/templatesV2/inputs/utils/arrangeInputs.ts

@@ -0,0 +1,52 @@
+import type { ProcessTemplateInput } from "../../types";
+import { sortBy } from "../../types";
+import { InputType, isHiddenInputType } from "../input-type";
+
+export type InputRow =
+	| { type: "pair"; items: [ProcessTemplateInput, ProcessTemplateInput] }
+	| { type: "full"; item: ProcessTemplateInput };
+
+export function arrangeInputs(inputs: ProcessTemplateInput[]): InputRow[] {
+	const ordered = sortBy(inputs);
+
+	const isTableOrHidden = (inp: ProcessTemplateInput) =>
+		inp.inputType === InputType.INPUT_TABLE || isHiddenInputType(inp.inputType);
+
+	const isPairable = (
+		inp: ProcessTemplateInput | undefined,
+	): inp is ProcessTemplateInput => !!inp && !isTableOrHidden(inp);
+
+	const areConsecutiveSorts = (
+		a?: ProcessTemplateInput,
+		b?: ProcessTemplateInput,
+	) =>
+		!!a &&
+		!!b &&
+		typeof a.sort === "number" &&
+		typeof b.sort === "number" &&
+		b.sort === a.sort + 1;
+
+	const canPairAtAll = ordered.filter(isPairable).length >= 2;
+
+	const rows: InputRow[] = [];
+	for (let i = 0; i < ordered.length; ) {
+		const curr = ordered[i];
+
+		if (!isPairable(curr) || !canPairAtAll) {
+			rows.push({ type: "full", item: curr });
+			i += 1;
+			continue;
+		}
+
+		const next = ordered[i + 1];
+		if (isPairable(next) && areConsecutiveSorts(curr, next)) {
+			rows.push({ type: "pair", items: [curr, next] });
+			i += 2;
+		} else {
+			rows.push({ type: "full", item: curr });
+			i += 1;
+		}
+	}
+
+	return rows;
+}

package/src/components/templatesV2/inputs/utils/index.ts

@@ -0,0 +1,6 @@
+export { applyTemplateConfig } from "./applyTemplateConfig";
+export { arrangeInputs, type InputRow } from "./arrangeInputs";
+export { parseQueryName } from "./parseQueryName";
+export { renderReadOnlyText } from "./renderReadOnlyText";
+export { getSelectorOptionsFromInput, getTableRowErrors } from "./selectors";
+export { toStringArray } from "./toStringArray";

package/src/components/templatesV2/inputs/utils/parseQueryName.ts

@@ -0,0 +1,20 @@
+import {
+	isTemplateInputSearchQueryKey,
+	type TemplateInputSearchQueryKey,
+} from "@evenicanpm/admin-integrate/api/templates/queries/types";
+import { TEMPLATE_QUERY_NAME_TO_KEY } from "../search/search-query-key";
+
+export function parseQueryName(queryName: string): TemplateInputSearchQueryKey {
+	const indexOf = queryName.indexOf("(");
+	const qn = queryName.substring(0, indexOf < 0 ? undefined : indexOf).trim();
+
+	if (isTemplateInputSearchQueryKey(qn)) {
+		return qn as TemplateInputSearchQueryKey;
+	}
+	const mapped = qn ? TEMPLATE_QUERY_NAME_TO_KEY[qn] : undefined;
+	if (mapped !== undefined) {
+		return mapped as TemplateInputSearchQueryKey;
+	}
+
+	throw new Error(`queryName ${queryName} invalid`);
+}

package/src/components/templatesV2/inputs/utils/renderReadOnlyText.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Box, Typography } from "@mui/material";
+import type * as React from "react";
+
+export function renderReadOnlyText(
+	label?: string,
+	value?: string | string[] | number | null,
+): React.ReactElement {
+	return (
+		<>
+			{value != null && value !== "" && (
+				<Box>
+					{label != null && label !== "" && (
+						<Typography color="grey" variant="caption">
+							{label}
+						</Typography>
+					)}
+					<Typography color="inherit" variant="body1">
+						{Array.isArray(value) ? value.join(", ") : String(value)}
+					</Typography>
+				</Box>
+			)}
+		</>
+	);
+}

package/src/components/templatesV2/inputs/utils/selectors.ts

@@ -0,0 +1,69 @@
+import type {
+	ErrorState,
+	ProcessTemplateInput,
+	ProcessTemplateInputSchema,
+} from "../../types";
+import { InputType } from "../input-type";
+import type { SelectorOption } from "../primitives/SelectorInput";
+import { toStringArray } from "./toStringArray";
+
+/**
+ * Returns selector options from the input's schema. Supports both legacy string[]
+ * and API-backed options { label, optionValue }[].
+ */
+export function getSelectorOptionsFromInput(
+	input: ProcessTemplateInput,
+): SelectorOption[] {
+	const schemaWithOptions =
+		input?.schemas?.find(
+			(s: ProcessTemplateInputSchema | null) =>
+				s?.inputType === InputType.SELECTOR,
+		) ?? input?.schemas?.[0];
+
+	const raw = schemaWithOptions?.options;
+	if (raw == null) return [];
+	if (!Array.isArray(raw)) return toStringArray(raw) as string[];
+
+	const result: SelectorOption[] = [];
+	for (const item of raw) {
+		if (item == null) continue;
+		if (typeof item === "string") {
+			result.push(item);
+			continue;
+		}
+		const label = (item as { label?: string | null }).label ?? "";
+		const value =
+			(item as { optionValue?: string | null }).optionValue ??
+			(item as { label?: string | null }).label ??
+			"";
+		if (value !== "" || label !== "") {
+			result.push({ label, value });
+		}
+	}
+	return result;
+}
+
+/**
+ * Parse Formik errors for an input-table field into per-row, per-column errors.
+ */
+export function getTableRowErrors(
+	errors: ErrorState,
+	tableKey: string,
+): Array<Record<string, string>> {
+	const rowErrors: Array<Record<string, string>> = [];
+	const prefix = `${tableKey}.`;
+	for (const key of Object.keys(errors)) {
+		const msg = errors[key];
+		if (msg == null || typeof msg !== "string" || !key.startsWith(prefix))
+			continue;
+		const rest = key.slice(prefix.length);
+		const match = /^(\d+)\.(.+)$/.exec(rest);
+		if (match) {
+			const rowIndex = Number.parseInt(match[1], 10);
+			const colKey = match[2];
+			if (!rowErrors[rowIndex]) rowErrors[rowIndex] = {};
+			rowErrors[rowIndex][colKey] = msg;
+		}
+	}
+	return rowErrors;
+}

package/src/components/templatesV2/inputs/utils/toStringArray.ts

@@ -0,0 +1,23 @@
+/**
+ * Coerce unknown value to string[] for selector/options use.
+ */
+export function toStringArray(value: unknown): string[] {
+	if (value == null) return [];
+
+	if (Array.isArray(value)) return value.map(String);
+
+	if (typeof value === "string") {
+		try {
+			const parsed = JSON.parse(value);
+			return Array.isArray(parsed) ? parsed.map(String) : [value];
+		} catch {
+			return [value];
+		}
+	}
+
+	if (typeof value === "object") {
+		return Object.values(value as Record<string, unknown>).map(String);
+	}
+
+	return [];
+}

package/src/components/templatesV2/pageForm.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { Formik, type FormikProps } 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<FormikProps<FormState> | null>(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 FormState)[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}