@evenicanpm/admin-integrate 1.8.1 → 2.0.0

package/src/components/templatesV2/inputs/search/useFieldValuesOptions.ts

@@ -0,0 +1,58 @@
+"use client";
+
+import type { GetFieldValuesQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { queryFn } from "@evenicanpm/admin-integrate/api/templates/queries/get-field-values.server";
+import { debounce } from "lodash";
+import * as React from "react";
+
+export type FieldValueOption = { name: string; value: string };
+
+function dataToOptions(
+	data: GetFieldValuesQuery | undefined,
+): FieldValueOption[] {
+	const values = data?.getFieldValues?.values ?? [];
+	return values
+		.filter(
+			(v): v is NonNullable<typeof v> => v?.name != null && v?.value != null,
+		)
+		.map((v) => ({ name: String(v.name), value: String(v.value) }));
+}
+
+export function useFieldValuesOptions(
+	fieldName: string | undefined,
+	validationQuery: string | undefined,
+	searchText: string,
+) {
+	const [options, setOptions] = React.useState<FieldValueOption[]>([]);
+	const [loading, setLoading] = React.useState(false);
+
+	const fetchOptions = React.useMemo(
+		() =>
+			debounce((field: string, query: string, value: string) => {
+				queryFn({ input: { fieldName: field, validationQuery: query, value } })
+					.then((data) => setOptions(dataToOptions(data)))
+					.catch(() => setOptions([]))
+					.finally(() => setLoading(false));
+			}, 400),
+		[],
+	);
+
+	React.useEffect(() => {
+		if (!fieldName || !validationQuery) {
+			setOptions([]);
+			return;
+		}
+		const trimmed = searchText.trim();
+		if (!trimmed) {
+			setOptions([]);
+			setLoading(false);
+			fetchOptions.cancel();
+			return;
+		}
+		setLoading(true);
+		fetchOptions(fieldName, validationQuery, trimmed);
+		return () => fetchOptions.cancel();
+	}, [fieldName, validationQuery, searchText, fetchOptions]);
+
+	return { options, loading };
+}

package/src/components/templatesV2/inputs/search/useSearchInput.ts

@@ -0,0 +1,74 @@
+import type {
+	CheckUniqueIdentifierQuery,
+	GetSourceEndpointsQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { templateInputSearch } from "@evenicanpm/admin-integrate/api/templates/queries";
+import type { TemplateInputSearchQueryKey } from "@evenicanpm/admin-integrate/api/templates/queries/types";
+import { useSearchParams } from "next/navigation";
+import React from "react";
+import type { SearchOption } from "../../types";
+import { ReservedFieldName } from "../field-names";
+import { InputType } from "../input-type";
+import { TemplateSearchQueryKey } from "./search-query-key";
+
+type UseSearchInputProps = {
+	inputType: InputType;
+	queryName: TemplateInputSearchQueryKey;
+	setValue?: (v: any, fieldName?: string) => void;
+};
+
+export function useSearchInput({
+	inputType,
+	queryName,
+	setValue,
+}: UseSearchInputProps) {
+	const searchParams = useSearchParams();
+
+	const [searchText, setSearchText] = React.useState("");
+	const [options, setOptions] = React.useState<SearchOption[]>([]);
+	const [isUnique, setIsUnique] = React.useState<boolean | null>(null);
+
+	const { data } = templateInputSearch.useData(
+		inputType === InputType.TEXT_UNIQUE_IDENTIFIER
+			? { uniqueIdentifier: searchText }
+			: {
+					input: {
+						processTemplateId: searchParams.get("template")?.toString() ?? null,
+						searchText,
+					},
+				},
+		queryName,
+	);
+
+	React.useEffect(() => {
+		if (!data) return;
+
+		switch (queryName) {
+			case TemplateSearchQueryKey.GetSourceEndpoints: {
+				const typed = data as GetSourceEndpointsQuery;
+				setOptions(
+					typed.getSourceEndpoints?.map((e) => ({
+						name: e?.name ?? "",
+						templateConfig: e?.templateConfig ?? "",
+					})) ?? [],
+				);
+				break;
+			}
+
+			case TemplateSearchQueryKey.CheckUniqueIdentifier: {
+				const typed = data as CheckUniqueIdentifierQuery;
+				const unique = typed.checkUniqueIdentifier?.isUnique ?? null;
+				setIsUnique(unique);
+				setValue?.(unique, ReservedFieldName.IsUnique);
+				break;
+			}
+		}
+	}, [data]);
+
+	return {
+		searchText,
+		setSearchText,
+		options,
+		isUnique,
+	};
+}

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

@@ -0,0 +1,259 @@
+"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;
+
+function getRowId(row: Record<string, any>, index: number): string {
+	const id = row[ROW_ID_KEY];
+	if (typeof id === "string" && id.length > 0) return id;
+	return `row-${index}`;
+}
+
+function ensureRowIds(
+	rows: Array<Record<string, any>>,
+	setRows: (rows: Array<Record<string, any>>) => 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: Array<Record<string, any>>;
+	setRows: (rows: Array<Record<string, any>>) => 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: Record<string, any> = {
+			[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: any) => {
+		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: Record<string, any>, 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}
+																options={opts}
+																setValue={(v) => updateCell(i, columnKey, v)}
+																error={cellError}
+																readOnly={readOnly}
+																onBlur={onCellBlur}
+															/>
+														</TableCell>
+													);
+												}
+												return (
+													<TableCell key={s.id}>
+														{readOnly ? (
+															renderReadOnlyText(undefined, cell)
+														) : (
+															<TextField
+																size="small"
+																value={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,51 @@
+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) =>
+		!!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 [];
+}