@evenicanpm/admin-integrate 1.8.1 → 2.0.1

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,
+};

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,79 @@
+import type {
+	CheckUniqueIdentifierQuery,
+	GetSourceEndpointsQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { templateInputSearch } from "@evenicanpm/admin-integrate/api/templates/queries";
+import { useSearchParams } from "next/navigation";
+import React from "react";
+import type { SearchOption } from "../../types";
+import { ReservedFieldName } from "../field-names";
+import type {
+	SearchInputExtendedSetValue,
+	SearchInputWrapperProps,
+} from "../form-type";
+import { InputType } from "../input-type";
+import { TemplateSearchQueryKey } from "./search-query-key";
+
+type UseSearchInputProps = Pick<
+	SearchInputWrapperProps,
+	"inputType" | "queryName" | "setValue"
+>;
+
+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 as SearchInputExtendedSetValue | undefined)?.(
+					unique,
+					ReservedFieldName.IsUnique,
+				);
+				break;
+			}
+		}
+	}, [data]);
+
+	return {
+		searchText,
+		setSearchText,
+		options,
+		isUnique,
+	};
+}