@evenicanpm/admin-integrate 1.8.1 → 2.0.1

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

@@ -0,0 +1,384 @@
+"use client";
+
+import { Box, FormHelperText, Typography } from "@mui/material";
+import { Field, type FieldProps } from "formik";
+import type * as React from "react";
+import type {
+	ErrorState,
+	FieldValue,
+	FormState,
+	ProcessTemplateInput,
+	ProcessTemplateInputSchema,
+} from "../../types";
+import { templateFieldKey } from "../../types";
+import { InputType } from "../input-type";
+import { CheckboxInput } from "../primitives/CheckboxInput";
+import { NumberInput } from "../primitives/NumberInput";
+import { SelectorInput } from "../primitives/SelectorInput";
+import { TextInput } from "../primitives/TextInput";
+import type { TextWithQueryInputType } from "../primitives/TextWithQueryInput";
+import { TextWithQueryInput } from "../primitives/TextWithQueryInput";
+import { InputTable } from "../table/InputTable";
+import {
+	getSelectorOptionsFromInput,
+	getTableRowErrors,
+} from "../utils/selectors";
+import { renderSearchInput } from "./renderSearchInput";
+
+const QUERY_NAME_INPUT_TYPES = [
+	InputType.TEXT,
+	InputType.TEXT_UNIQUE_IDENTIFIER,
+	InputType.NUMBER,
+	InputType.SELECTOR,
+	InputType.CHECKBOX,
+] as const;
+
+function isHiddenInput(input: ProcessTemplateInput): boolean {
+	return (
+		input.inputType === InputType.HIDDEN ||
+		input.inputType === InputType.HIDDEN_NUMBER ||
+		input.inputType === InputType.HIDDEN_NUMBER_OR_NULL
+	);
+}
+
+function isFieldTouched(
+	touched: Record<string, boolean> | undefined,
+	fieldKey: string,
+): boolean {
+	return (
+		typeof touched === "object" &&
+		touched !== null &&
+		touched[fieldKey] === true
+	);
+}
+
+function getValidationQueryOnCheckIfSupported(
+	input: ProcessTemplateInput,
+): string | null {
+	const validationQueryOnCheck = (input as { validationQueryOnCheck?: string })
+		.validationQueryOnCheck;
+	if (!validationQueryOnCheck) return null;
+	const hasSupportedType = QUERY_NAME_INPUT_TYPES.includes(
+		input.inputType as (typeof QUERY_NAME_INPUT_TYPES)[number],
+	);
+	return hasSupportedType ? validationQueryOnCheck : null;
+}
+
+function queryInputType(
+	inputType: string | null | undefined,
+): TextWithQueryInputType {
+	if (inputType === InputType.NUMBER) return InputType.NUMBER;
+	if (inputType === InputType.SELECTOR) return InputType.SELECTOR;
+	if (inputType === InputType.CHECKBOX) return InputType.CHECKBOX;
+	return InputType.TEXT;
+}
+
+function normalizeInputTableRows(
+	value: unknown,
+	input: ProcessTemplateInput,
+): Array<Record<string, string | number | boolean | null | undefined>> {
+	const rows: Array<
+		Record<string, string | number | boolean | null | undefined>
+	> = Array.isArray(value)
+		? (value as Array<
+				Record<string, string | number | boolean | null | undefined>
+			>)
+		: [];
+	if (!value || rows.length > 0 || (input.schemas?.length ?? 0) !== 2) {
+		return rows;
+	}
+	const valueRecord = value as Record<string, string>;
+	for (const schemaKey of Object.keys(valueRecord)) {
+		const schema0 = input.schemas?.[0];
+		const schema1 = input.schemas?.[1];
+		if (schema0?.fieldKey && schema1?.fieldKey) {
+			rows.push({
+				[schema0.fieldKey]: schemaKey,
+				[schema1.fieldKey]: valueRecord[schemaKey],
+			});
+		}
+	}
+	return rows;
+}
+
+function renderInputTable({
+	input,
+	k,
+	values,
+	errors,
+	showError,
+	err,
+	templateId,
+	handleFieldChange,
+	finalReadOnly,
+	readOnly,
+	setFieldTouched,
+	validateForm,
+}: {
+	input: ProcessTemplateInput;
+	k: string;
+	values: FormState;
+	errors: ErrorState;
+	showError: boolean;
+	err: string | null;
+	templateId: string;
+	handleFieldChange: (
+		templateId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => void;
+	finalReadOnly: boolean;
+	readOnly?: boolean;
+	setFieldTouched?: (field: string, value: boolean) => void;
+	validateForm?: () => Promise<Record<string, unknown>>;
+}): React.ReactNode {
+	const value = values[k];
+	const rows = normalizeInputTableRows(value, input);
+	const tableRowErrors = getTableRowErrors(errors, k);
+	const hasRowErrors = tableRowErrors.length > 0;
+	const tableErrorToShow = showError ? err : undefined;
+	const rowErrorsToShow =
+		showError && hasRowErrors ? tableRowErrors : undefined;
+	const hasError = Boolean(tableErrorToShow ?? rowErrorsToShow?.length);
+	const showHelpText = Boolean(
+		!readOnly && input.helpText && !tableErrorToShow,
+	);
+
+	return (
+		<Box>
+			<Typography
+				variant="subtitle2"
+				sx={{ mb: 1, color: hasError ? "error.main" : "main.900" }}
+			>
+				{input.label}
+			</Typography>
+			<InputTable
+				rows={rows}
+				setRows={(newRows) =>
+					handleFieldChange(
+						templateId,
+						input.fieldName ?? "",
+						newRows as Array<Record<string, string>>,
+					)
+				}
+				schemas={(input.schemas as ProcessTemplateInputSchema[]) ?? []}
+				tableError={tableErrorToShow ?? null}
+				rowErrors={rowErrorsToShow}
+				readOnly={finalReadOnly}
+				onCellBlur={() => {
+					setFieldTouched?.(k, true);
+					validateForm?.();
+				}}
+			/>
+			{showHelpText ? (
+				<FormHelperText sx={{ my: 1, ml: 2 }}>
+					{input.helpText ?? ""}
+				</FormHelperText>
+			) : null}
+			{tableErrorToShow ? (
+				<FormHelperText
+					error
+					sx={{ my: 1, ml: 2, whiteSpace: "pre-wrap", fontFamily: "inherit" }}
+				>
+					{String(tableErrorToShow)}
+				</FormHelperText>
+			) : null}
+		</Box>
+	);
+}
+
+export function renderFormControl({
+	input,
+	templateId,
+	values,
+	errors,
+	touched,
+	handleFieldChange,
+	setFieldTouched,
+	validateForm,
+	readOnly,
+	disabledFields,
+	setFieldValidationInProgress,
+	submitValidationResults,
+}: {
+	input: ProcessTemplateInput;
+	templateId: string;
+	values: FormState;
+	errors: ErrorState;
+	touched?: Record<string, boolean>;
+	handleFieldChange: (
+		templateId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => void;
+	setFieldTouched?: (field: string, value: boolean) => void;
+	validateField?: (field: string) => undefined | Promise<unknown>;
+	validateForm?: () => Promise<Record<string, unknown>>;
+	readOnly?: boolean;
+	disabledFields?: Set<string>;
+	setFieldValidationInProgress?: (inProgress: boolean) => void;
+	submitValidationResults?: Record<
+		string,
+		{ isValid: boolean; message: string }
+	>;
+}) {
+	const k = templateFieldKey(templateId, input.fieldName ?? "");
+	const err = errors[k] ?? null;
+	const showError = isFieldTouched(touched, k);
+	const isFieldDisabled = disabledFields?.has(k) ?? false;
+	const finalReadOnly = readOnly || isFieldDisabled;
+
+	if (isHiddenInput(input)) {
+		return null;
+	}
+
+	const validationQueryOnCheck = getValidationQueryOnCheckIfSupported(input);
+	if (validationQueryOnCheck) {
+		const queryInputTypeVal = queryInputType(input.inputType);
+		const submitValidationResult = submitValidationResults?.[k] ?? null;
+		return (
+			<Field name={k}>
+				{({ field, form, meta }: FieldProps) => (
+					<TextWithQueryInput
+						inputType={queryInputTypeVal}
+						label={input.label ?? ""}
+						value={
+							field.value ??
+							(queryInputTypeVal === InputType.CHECKBOX ? false : "")
+						}
+						setValue={(v) => form.setFieldValue(k, v)}
+						placeholder={input.placeholder ?? ""}
+						helpText={input.helpText ?? ""}
+						error={showError ? (meta.error ?? err) : undefined}
+						readOnly={finalReadOnly}
+						onBlur={() => form.setFieldTouched(k, true)}
+						fieldName={input.fieldName ?? ""}
+						validationQuery={validationQueryOnCheck}
+						fieldId={input.id ?? ""}
+						validateFormikBeforeApi={() =>
+							form
+								.validateForm()
+								.then((errors: Record<string, unknown>) => !errors[k])
+						}
+						setFieldValidationInProgress={setFieldValidationInProgress}
+						options={getSelectorOptionsFromInput(input)}
+						submitValidationResult={submitValidationResult}
+					/>
+				)}
+			</Field>
+		);
+	}
+
+	if (input.inputType === InputType.CHECKBOX) {
+		return (
+			<Field name={k}>
+				{({ field, form }: FieldProps) => (
+					<CheckboxInput
+						label={input.label ?? ""}
+						checked={Boolean(field.value ?? false)}
+						setChecked={(v) => form.setFieldValue(k, v)}
+						helpText={input.helpText ?? ""}
+						readOnly={finalReadOnly}
+					/>
+				)}
+			</Field>
+		);
+	}
+
+	if (input.inputType === InputType.NUMBER) {
+		return (
+			<Field name={k}>
+				{({ field, form, meta }: FieldProps) => (
+					<NumberInput
+						label={input.label ?? ""}
+						value={(field.value as number) ?? ""}
+						setValue={(v) => form.setFieldValue(k, v)}
+						placeholder={input.placeholder ?? ""}
+						helpText={input.helpText ?? ""}
+						error={showError ? (meta.error ?? err) : undefined}
+						readOnly={finalReadOnly}
+						onBlur={() => form.setFieldTouched(k, true)}
+					/>
+				)}
+			</Field>
+		);
+	}
+
+	if (input.inputType === InputType.SELECTOR) {
+		return (
+			<Field name={k}>
+				{({ field, form, meta }: FieldProps) => (
+					<SelectorInput
+						fieldName={input.fieldName ?? ""}
+						label={input.label ?? ""}
+						value={(field.value as string) ?? ""}
+						setValue={(v) => form.setFieldValue(k, v)}
+						helpText={input.helpText ?? ""}
+						error={showError ? (meta.error ?? err) : undefined}
+						options={getSelectorOptionsFromInput(input)}
+						readOnly={finalReadOnly}
+						onBlur={() => form.setFieldTouched(k, true)}
+					/>
+				)}
+			</Field>
+		);
+	}
+
+	if (input.inputType === InputType.MULTI_TEXT_SEARCH) {
+		return renderSearchInput({
+			input,
+			k,
+			templateId,
+			err,
+			showError,
+			handleFieldChange,
+			onBlur: () => setFieldTouched?.(k, true),
+		});
+	}
+
+	if (input.inputType === InputType.TEXT_SEARCH) {
+		return renderSearchInput({
+			input,
+			k,
+			templateId,
+			err,
+			showError,
+			handleFieldChange,
+			onBlur: () => setFieldTouched?.(k, true),
+		});
+	}
+
+	if (input.inputType === InputType.INPUT_TABLE) {
+		return renderInputTable({
+			input,
+			k,
+			values,
+			errors,
+			showError,
+			err,
+			templateId,
+			handleFieldChange,
+			finalReadOnly,
+			readOnly,
+			setFieldTouched,
+			validateForm,
+		});
+	}
+
+	return (
+		<Field name={k}>
+			{({ field, form, meta }: FieldProps) => (
+				<TextInput
+					label={input.label ?? ""}
+					value={(field.value as string) ?? ""}
+					setValue={(v) => form.setFieldValue(k, v)}
+					placeholder={input.placeholder ?? ""}
+					helpText={input.helpText ?? ""}
+					error={showError ? (meta.error ?? err) : undefined}
+					readOnly={finalReadOnly}
+					onBlur={() => form.setFieldTouched(k, true)}
+				/>
+			)}
+		</Field>
+	);
+}

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

@@ -0,0 +1,128 @@
+"use client";
+
+import { Field, type FieldProps } from "formik";
+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 }: FieldProps) => (
+					<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 }: FieldProps) => (
+					<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: FieldValue, 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}
+				/>
+			)}
+		</>
+	);
+}