@evenicanpm/admin-integrate 1.8.1 → 2.0.0

package/src/components/templatesV2/inputs/renderers/renderSearchInput.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { Field, type FieldProps } from "formik";
+import * as React from "react";
+import {
+	type FieldValue,
+	type ProcessTemplateInput,
+	templateFieldKey,
+} from "../../types";
+import { ReservedFieldName } from "../field-names";
+import { InputType } from "../input-type";
+import { SearchInputWrapper } from "../search/SearchInputWrapper";
+import { parseQueryName } from "../utils/parseQueryName";
+
+export function renderSearchInput({
+	input,
+	k,
+	templateId,
+	err,
+	showError = true,
+	handleFieldChange,
+	onBlur,
+}: {
+	input: ProcessTemplateInput;
+	k: string;
+	templateId: string;
+	err: string | null;
+	showError?: boolean;
+	handleFieldChange?: (
+		templateId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => void;
+	onBlur?: () => void;
+}) {
+	const queryNameStr =
+		(input as { queryName?: string }).queryName ??
+		(input as { validationQueryOnCheck?: string }).validationQueryOnCheck ??
+		(input as { validationQueryOnSubmit?: string }).validationQueryOnSubmit ??
+		"";
+	if (!queryNameStr) {
+		return null;
+	}
+	const queryName = parseQueryName(queryNameStr);
+
+	if (input.inputType === InputType.MULTI_TEXT_SEARCH) {
+		return (
+			<Field name={k}>
+				{({ field, form, meta }: any) => (
+					<SearchInputWrapper
+						inputType={InputType.MULTI_TEXT_SEARCH}
+						queryName={queryName}
+						label={input.label ?? ""}
+						value={(field.value as string[]) ?? []}
+						setValue={(v: string[]) => form.setFieldValue(k, v)}
+						placeholder={input.placeholder}
+						helpText={input.helpText}
+						error={showError ? (meta.error ?? err) : undefined}
+						onBlur={onBlur}
+					/>
+				)}
+			</Field>
+		);
+	}
+
+	if (input.inputType === InputType.TEXT_SEARCH) {
+		return (
+			<Field name={k}>
+				{({ field, form, meta }: any) => (
+					<SearchInputWrapper
+						inputType={InputType.TEXT_SEARCH}
+						queryName={queryName}
+						validationQuery={queryNameStr || undefined}
+						label={input.label ?? ""}
+						value={(field.value as string) ?? ""}
+						setValue={(v: string) => form.setFieldValue(k, v)}
+						placeholder={input.placeholder}
+						helpText={input.helpText}
+						error={showError ? (meta.error ?? err) : undefined}
+						handleFieldChange={handleFieldChange}
+						fieldName={input.fieldName ?? undefined}
+						onBlur={onBlur}
+					/>
+				)}
+			</Field>
+		);
+	}
+
+	if (input.inputType === InputType.TEXT_UNIQUE_IDENTIFIER) {
+		return (
+			<>
+				<Field name={templateFieldKey(templateId, ReservedFieldName.IsUnique)}>
+					{({ field }: FieldProps) => (
+						<input type="hidden" {...field} value={field.value ?? false} />
+					)}
+				</Field>
+
+				<Field name={k}>
+					{({ field, form, meta }: FieldProps) => {
+						const setUniqueValue = (v: string, fieldName?: string) => {
+							const targetKey = fieldName
+								? templateFieldKey(templateId, fieldName)
+								: k;
+							form.setFieldValue(targetKey, v);
+						};
+
+						return (
+							<SearchInputWrapper
+								inputType={InputType.TEXT_UNIQUE_IDENTIFIER}
+								queryName={queryName}
+								label={input.label ?? ""}
+								value={(field.value as string) ?? ""}
+								setValue={setUniqueValue}
+								placeholder={input.placeholder}
+								helpText={input.helpText}
+								error={showError ? (meta.error ?? err) : undefined}
+								handleFieldChange={handleFieldChange}
+								fieldName={input.fieldName ?? undefined}
+								onBlur={onBlur}
+							/>
+						);
+					}}
+				</Field>
+			</>
+		);
+	}
+
+	return null;
+}

package/src/components/templatesV2/inputs/search/MultiTextSearchInput.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { Autocomplete, TextField } from "@mui/material";
+import { debounce } from "lodash";
+import * as React from "react";
+
+export function MultiTextSearchInput({
+	label,
+	value,
+	setValue,
+	options,
+	placeholder,
+	helpText,
+	error,
+	setSearchText,
+	readOnly,
+	onBlur,
+}: Readonly<{
+	label: string;
+	value: string[];
+	setValue: (v: string[]) => void;
+	options: { name: string; templateConfig: string }[];
+	placeholder?: string | null;
+	helpText?: string | null;
+	error?: string | null;
+	setSearchText: React.Dispatch<React.SetStateAction<string>>;
+	readOnly?: boolean;
+	onBlur?: () => void;
+}>) {
+	const [input, setInput] = React.useState<string>("");
+
+	const debouncedSetSearchText = React.useMemo(
+		() => debounce((s: string) => setSearchText(s), 500),
+		[],
+	);
+
+	React.useEffect(() => {
+		return () => {
+			debouncedSetSearchText.cancel();
+		};
+	}, [debouncedSetSearchText]);
+
+	const handleAutocompleteOnChange = (
+		_e: React.SyntheticEvent,
+		val: string[],
+	) => {
+		setValue(val);
+		debouncedSetSearchText("");
+	};
+
+	const handleInputChange = (
+		event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) => {
+		setInput(event.target.value);
+		debouncedSetSearchText(event.target.value);
+	};
+
+	return (
+		<Autocomplete
+			multiple
+			freeSolo
+			options={options.map((o) => o.name)}
+			value={value ?? []}
+			onChange={handleAutocompleteOnChange}
+			disabled={readOnly}
+			renderInput={(params) => (
+				<TextField
+					{...params}
+					value={input}
+					onChange={handleInputChange}
+					onBlur={onBlur}
+					label={label}
+					placeholder={placeholder ?? undefined}
+					error={Boolean(error)}
+					helperText={error ?? helpText ?? " "}
+					fullWidth
+					disabled={readOnly}
+					slotProps={{
+						formHelperText: {
+							sx: { marginLeft: 0 },
+						},
+					}}
+				/>
+			)}
+		/>
+	);
+}

package/src/components/templatesV2/inputs/search/SearchInputWrapper.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import * as React from "react";
+import { useFormMode } from "../context/FormModeContext";
+import type { SearchInputWrapperProps } from "../form-type";
+import { InputType } from "../input-type";
+import { renderReadOnlyText } from "../utils/renderReadOnlyText";
+import { MultiTextSearchInput } from "./MultiTextSearchInput";
+import { TextSearchInput } from "./TextSearchInput";
+import { useFieldValuesOptions } from "./useFieldValuesOptions";
+import { useSearchInput } from "./useSearchInput";
+
+export function SearchInputWrapper(props: Readonly<SearchInputWrapperProps>) {
+	const {
+		inputType,
+		label,
+		value,
+		setValue,
+		placeholder,
+		helpText,
+		error,
+		handleFieldChange,
+		fieldName,
+		onBlur,
+		validationQuery,
+	} = props;
+
+	const [fieldValuesSearchText, setFieldValuesSearchText] = React.useState("");
+	const { options: fieldValuesOptions, loading: fieldValuesLoading } =
+		useFieldValuesOptions(fieldName, validationQuery, fieldValuesSearchText);
+
+	const searchInputResult = useSearchInput(props);
+	const { setSearchText, options: searchInputOptions } = searchInputResult;
+	const { readOnly, isCreateMode } = useFormMode();
+
+	const useGetFieldValues =
+		inputType === InputType.TEXT_SEARCH && Boolean(validationQuery);
+	const textSearchOptions = useGetFieldValues
+		? fieldValuesOptions
+		: searchInputOptions;
+	const textSearchSetSearchText = useGetFieldValues
+		? setFieldValuesSearchText
+		: setSearchText;
+	const textSearchOptionsAsValue = useGetFieldValues;
+
+	const isUniqueReadOnly =
+		inputType === InputType.TEXT_UNIQUE_IDENTIFIER && isCreateMode === false;
+
+	if (readOnly) {
+		return renderReadOnlyText(label, value);
+	}
+
+	return (
+		<>
+			{inputType === InputType.MULTI_TEXT_SEARCH && (
+				<MultiTextSearchInput
+					label={label}
+					value={value as string[]}
+					setValue={setValue as (v: string[]) => void}
+					options={searchInputOptions}
+					placeholder={placeholder}
+					helpText={helpText}
+					error={error}
+					setSearchText={setSearchText}
+					onBlur={onBlur}
+				/>
+			)}
+
+			{inputType === InputType.TEXT_SEARCH && (
+				<TextSearchInput
+					fieldName={fieldName}
+					label={label}
+					value={value as string}
+					setValue={setValue as (v: string) => void}
+					options={textSearchOptions.map((o) =>
+						"value" in o && o.value != null
+							? { name: o.name, templateConfig: "", value: o.value }
+							: {
+									name: (o as { name: string }).name,
+									templateConfig:
+										(o as { templateConfig?: string }).templateConfig ?? "",
+								},
+					)}
+					optionsAsValueOptions={textSearchOptionsAsValue}
+					placeholder={placeholder}
+					helpText={helpText}
+					error={error}
+					setSearchText={textSearchSetSearchText}
+					handleFieldChange={handleFieldChange}
+					onBlur={onBlur}
+					loading={useGetFieldValues ? fieldValuesLoading : undefined}
+				/>
+			)}
+
+			{inputType === InputType.TEXT_UNIQUE_IDENTIFIER && (
+				<TextSearchInput
+					fieldName={fieldName}
+					label={label}
+					value={value as string}
+					setValue={setValue as (v: string) => void}
+					options={[]}
+					placeholder={placeholder}
+					helpText={helpText}
+					error={error}
+					setSearchText={setSearchText}
+					handleFieldChange={handleFieldChange}
+					readOnly={isUniqueReadOnly}
+					onBlur={onBlur}
+				/>
+			)}
+		</>
+	);
+}

package/src/components/templatesV2/inputs/search/TextSearchInput.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import type { AutocompleteChangeReason } from "@mui/material";
+import { Autocomplete, Box, TextField } from "@mui/material";
+import { debounce } from "lodash";
+import * as React from "react";
+import type { FieldValue } from "../../types";
+import { templateFieldKey } from "../../types";
+import { useFormMode } from "../context/FormModeContext";
+import { useTemplateContext } from "../context/TemplateContext";
+import { ReservedFieldName } from "../field-names";
+import { applyTemplateConfig } from "../utils/applyTemplateConfig";
+
+type SearchOption = { name: string; templateConfig: string; value?: string };
+
+function getConfigFieldNames(
+	config: Record<string, unknown>,
+	fieldName: string | undefined,
+): string[] {
+	return Object.keys(config).filter(
+		(key) =>
+			key !== ReservedFieldName.ProcessTemplateId && key !== (fieldName ?? ""),
+	);
+}
+
+function setFieldsFromOption(
+	option: SearchOption,
+	templateId: string,
+	fieldName: string | undefined,
+	setFieldsDisabled: (
+		templateId: string,
+		fieldNames: string[],
+		disabled: boolean,
+	) => void,
+	disabled: boolean,
+): void {
+	try {
+		const config = JSON.parse(option.templateConfig) as Record<string, unknown>;
+		const fieldNames = getConfigFieldNames(config, fieldName);
+		setFieldsDisabled(templateId, fieldNames, disabled);
+	} catch (err) {
+		console.error(
+			disabled
+				? "Failed to parse template config"
+				: "Failed to parse template config while enabling fields",
+			err,
+		);
+	}
+}
+
+function findOptionByName(
+	options: SearchOption[],
+	name: string,
+): SearchOption | undefined {
+	return options.find((o) => o?.name === name) ?? undefined;
+}
+
+function findOptionByValue(
+	options: SearchOption[],
+	val: string,
+): SearchOption | undefined {
+	return (
+		options.find(
+			(o) => (o as SearchOption & { value?: string }).value === val,
+		) ?? undefined
+	);
+}
+
+export function TextSearchInput({
+	fieldName,
+	label,
+	value,
+	setValue,
+	options,
+	optionsAsValueOptions = false,
+	placeholder,
+	helpText,
+	error,
+	setSearchText,
+	handleFieldChange,
+	readOnly,
+	onBlur,
+	loading,
+}: Readonly<{
+	fieldName?: string;
+	label: string;
+	value: string;
+	setValue: (v: string) => void;
+	options: SearchOption[];
+	/** When true, options have .value; form stores option.value and displays option.name */
+	optionsAsValueOptions?: boolean;
+	placeholder?: string | null;
+	helpText?: string | null;
+	error?: string | null;
+	setSearchText: React.Dispatch<React.SetStateAction<string>>;
+	handleFieldChange?: (
+		templateId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => void;
+	readOnly?: boolean;
+	onBlur?: () => void;
+	/** When true (e.g. API in progress), show "Checking..." and disable input; when it becomes false, open option tray */
+	loading?: boolean;
+}>) {
+	const getInitialSelected = () => {
+		if (optionsAsValueOptions && value) {
+			const byVal = findOptionByValue(options, value);
+			return byVal ? byVal.name : value;
+		}
+		return value ?? null;
+	};
+	const [selected, setSelected] = React.useState<string | null>(
+		getInitialSelected,
+	);
+
+	React.useEffect(() => {
+		if (optionsAsValueOptions && value && options.length > 0) {
+			const byVal = findOptionByValue(options, value);
+			setSelected(byVal ? byVal.name : value);
+		} else if (!value) {
+			setSelected(null);
+		}
+	}, [optionsAsValueOptions, value, options]);
+
+	const { templateId, disabledFields, setFieldsDisabled, templateConfig } =
+		useTemplateContext();
+
+	const { isEditMode } = useFormMode();
+
+	const appliedOptionRef = React.useRef<string | null>(null);
+
+	const selfKey =
+		templateId && fieldName ? templateFieldKey(templateId, fieldName) : null;
+	const isSelfDisabled = selfKey
+		? Boolean(disabledFields?.has(selfKey))
+		: false;
+	const disabled = Boolean(readOnly || isSelfDisabled || loading);
+
+	const [open, setOpen] = React.useState(false);
+	const prevLoadingRef = React.useRef(false);
+	React.useEffect(() => {
+		if (prevLoadingRef.current && !loading) {
+			setOpen(true);
+		}
+		prevLoadingRef.current = Boolean(loading);
+	}, [loading]);
+
+	const debouncedSetSearchText = React.useMemo(
+		() => debounce((s: string) => setSearchText(s), 500),
+		[],
+	);
+	React.useEffect(() => {
+		return () => {
+			debouncedSetSearchText.cancel();
+		};
+	}, [debouncedSetSearchText]);
+
+	React.useEffect(() => {
+		if (optionsAsValueOptions) return;
+		if (!selected || !templateId) return;
+		const option = findOptionByName(options, selected);
+		if (!option) return;
+		try {
+			const config = JSON.parse(option.templateConfig) as Record<
+				string,
+				unknown
+			>;
+			if (config && templateConfig) {
+				option.templateConfig = templateConfig;
+			}
+			applyTemplateConfig(option, handleFieldChange ?? (() => {}));
+			appliedOptionRef.current = option.name ?? null;
+			if (setFieldsDisabled && !isEditMode) {
+				const parsed = JSON.parse(option.templateConfig) as Record<
+					string,
+					unknown
+				>;
+				const fieldNamesToDisable = getConfigFieldNames(parsed, fieldName);
+				setFieldsDisabled(templateId, fieldNamesToDisable, true);
+			}
+		} catch (err) {
+			console.error("Failed to parse template config", err);
+		}
+	}, [
+		optionsAsValueOptions,
+		selected,
+		templateId,
+		options,
+		templateConfig,
+		fieldName,
+		setFieldsDisabled,
+		handleFieldChange,
+		isEditMode,
+	]);
+
+	const handleAutocompleteOnChange = (
+		event: React.SyntheticEvent,
+		newValue: string | null,
+		reason: AutocompleteChangeReason,
+	) => {
+		if (reason !== "clear" || event.type !== "click") {
+			setSelected(newValue);
+			if (optionsAsValueOptions && newValue) {
+				const option = findOptionByName(options, newValue);
+				setValue(
+					option && "value" in option && option.value != null
+						? option.value
+						: newValue,
+				);
+			} else {
+				setValue(newValue ?? "");
+			}
+			return;
+		}
+		setSelected(null);
+		setValue("");
+		const appliedName = appliedOptionRef.current;
+		if (
+			!optionsAsValueOptions &&
+			templateId &&
+			setFieldsDisabled &&
+			appliedName
+		) {
+			const option = findOptionByName(options, appliedName);
+			if (option) {
+				setFieldsFromOption(
+					option,
+					templateId,
+					fieldName,
+					setFieldsDisabled,
+					false,
+				);
+			}
+			appliedOptionRef.current = null;
+		}
+	};
+
+	const handleInputChange = (
+		event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) => {
+		const newVal = event.target.value;
+		setValue(newVal);
+		debouncedSetSearchText(newVal);
+
+		const appliedName = appliedOptionRef.current;
+		if (
+			!optionsAsValueOptions &&
+			templateId &&
+			setFieldsDisabled &&
+			appliedName
+		) {
+			const option = findOptionByName(options, appliedName);
+			if (option) {
+				setFieldsFromOption(
+					option,
+					templateId,
+					fieldName,
+					setFieldsDisabled,
+					false,
+				);
+			}
+			appliedOptionRef.current = null;
+		}
+	};
+
+	const shouldShowInfoMessage = !isEditMode && selected;
+	const helperTextFinal = (() => {
+		if (loading) return "Checking...";
+		if (shouldShowInfoMessage)
+			return "Existing data descriptions are not editable during creation.";
+		return helpText;
+	})();
+
+	return (
+		<Box sx={{ width: "50%" }}>
+			<Autocomplete
+				freeSolo={!selected}
+				options={options.map((o) => o.name)}
+				value={selected ?? ""}
+				onChange={handleAutocompleteOnChange}
+				disabled={disabled}
+				open={open}
+				onOpen={() => setOpen(true)}
+				onClose={() => setTimeout(() => setOpen(false), 0)}
+				noOptionsText="No option"
+				renderInput={(params) => (
+					<TextField
+						{...params}
+						label={label}
+						value={value ?? ""}
+						onChange={handleInputChange}
+						onBlur={onBlur}
+						placeholder={placeholder ?? undefined}
+						fullWidth
+						error={Boolean(error)}
+						helperText={error ?? helperTextFinal ?? " "}
+						disabled={disabled}
+						slotProps={{
+							formHelperText: {
+								sx: { marginLeft: 0 },
+							},
+						}}
+					/>
+				)}
+			/>
+		</Box>
+	);
+}

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

@@ -0,0 +1,4 @@
+export { MultiTextSearchInput } from "./MultiTextSearchInput";
+export { SearchInputWrapper } from "./SearchInputWrapper";
+export { TextSearchInput } from "./TextSearchInput";
+export { useSearchInput } from "./useSearchInput";

package/src/components/templatesV2/inputs/search/search-query-key.ts

@@ -0,0 +1,23 @@
+/**
+ * Search query keys for template input search (matches API TemplateInputSearchQueryKey).
+ * Use this enum instead of string literals in switches and comparisons.
+ */
+export enum TemplateSearchQueryKey {
+	GetSourceEndpoints = "getSourceEndpoints",
+	GetDataDescriptions = "getDataDescriptions",
+	CheckUniqueIdentifier = "checkUniqueIdentifier",
+}
+
+/**
+ * Map template/API query name variants (e.g. from process template input.queryName)
+ * to the canonical key used by the client. Add new variants here when the API
+ * returns prefixed or alternate names.
+ */
+export const TEMPLATE_QUERY_NAME_TO_KEY: Record<
+	string,
+	TemplateSearchQueryKey
+> = {
+	Templates_GetSourceEndpoints: TemplateSearchQueryKey.GetSourceEndpoints,
+	Templates_GetDataDescriptions: TemplateSearchQueryKey.GetDataDescriptions,
+	Templates_CheckUniqueIdentifier: TemplateSearchQueryKey.CheckUniqueIdentifier,
+};