@evenicanpm/admin-integrate 1.8.1 → 2.0.0

package/src/components/templatesV2/inputs/primitives/TextWithQueryInput.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import type { SxProps, Theme } from "@mui/material";
+import { Box } from "@mui/material";
+import * as React from "react";
+import { validateFieldOnCheck } from "../../../../api/templates/queries/validate-field-on-check.server";
+import { InputType } from "../input-type";
+import { renderReadOnlyText } from "../utils/renderReadOnlyText";
+import { CheckboxInput } from "./CheckboxInput";
+import { NumberInput } from "./NumberInput";
+import type { SelectorOption } from "./SelectorInput";
+import { SelectorInput } from "./SelectorInput";
+import { TextInput } from "./TextInput";
+
+export type TextWithQueryInputType =
+	| InputType.TEXT
+	| InputType.NUMBER
+	| InputType.SELECTOR
+	| InputType.CHECKBOX;
+
+export type TextWithQueryValue = string | number | boolean;
+
+function valueToString(value: TextWithQueryValue): string {
+	if (value === "" || value == null) return "";
+	if (typeof value === "boolean") return value ? "true" : "false";
+	return String(value).trim();
+}
+
+function getEffectiveValidation(
+	submitValidationResult:
+		| { isValid: boolean; message: string }
+		| null
+		| undefined,
+	validation: { isValid: boolean; message: string } | null,
+): { isValid: boolean; message: string } | null {
+	if (submitValidationResult != null) {
+		return {
+			isValid: submitValidationResult.isValid,
+			message: submitValidationResult.message,
+		};
+	}
+	return validation;
+}
+
+function getDisplayError(
+	validating: boolean,
+	isError: boolean,
+	helperMessage: string,
+): string | undefined {
+	if (validating) return undefined;
+	if (isError) return helperMessage;
+	return undefined;
+}
+
+function formatReadOnlyValue(
+	value: TextWithQueryValue,
+): string | number | boolean {
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	return value;
+}
+
+interface DisplayStateInput {
+	error?: string | null;
+	validation: { isValid: boolean; message: string } | null;
+	submitValidationResult?: { isValid: boolean; message: string } | null;
+	helpText?: string | null;
+	validating: boolean;
+	readOnly?: boolean;
+}
+
+function getInputDisplayState({
+	error,
+	validation,
+	submitValidationResult,
+	helpText,
+	validating,
+	readOnly,
+}: DisplayStateInput): {
+	displayError: string | undefined;
+	displayHelpText: string;
+	formHelperTextSx: SxProps<Theme>;
+	isDisabled: boolean;
+} {
+	const showError = Boolean(error);
+	const effectiveValidation = getEffectiveValidation(
+		submitValidationResult,
+		validation,
+	);
+	const helperMessage =
+		showError && error
+			? error
+			: (effectiveValidation?.message ?? helpText ?? "");
+	const isSuccess = effectiveValidation?.isValid === true && !showError;
+	const isError = showError || effectiveValidation?.isValid === false;
+	const displayError = getDisplayError(validating, isError, helperMessage);
+	const displayHelpText = validating ? "Checking…" : helperMessage;
+	const isDisabled = Boolean(readOnly || validating);
+	const formHelperTextSx: SxProps<Theme> = {
+		...(validating && { color: "text.secondary" }),
+		...(isSuccess && !validating && { color: "success.main" }),
+		...(isError && !validating && { color: "error.main" }),
+	};
+	return {
+		displayError,
+		displayHelpText,
+		formHelperTextSx,
+		isDisabled,
+	};
+}
+
+export type SubmitValidationResult = { isValid: boolean; message: string };
+
+export interface TextWithQueryInputProps {
+	inputType: TextWithQueryInputType;
+	label: string;
+	value: TextWithQueryValue;
+	setValue: (v: TextWithQueryValue) => void;
+	error?: string | null;
+	helpText?: string | null;
+	readOnly?: boolean;
+	onBlur?: () => void;
+	fieldName: string;
+	validationQuery: string;
+	fieldId: string;
+	validateFormikBeforeApi?: () => Promise<boolean>;
+	setFieldValidationInProgress?: (inProgress: boolean) => void;
+	placeholder?: string | null;
+	options?: SelectorOption[];
+	/** Result from validateFieldOnSubmit (on Next click); shown below field. */
+	submitValidationResult?: SubmitValidationResult | null;
+}
+
+export function TextWithQueryInput({
+	inputType,
+	label,
+	value,
+	setValue,
+	error,
+	helpText,
+	readOnly,
+	onBlur,
+	fieldName,
+	validationQuery,
+	fieldId,
+	validateFormikBeforeApi,
+	setFieldValidationInProgress,
+	placeholder,
+	options = [],
+	submitValidationResult,
+}: Readonly<TextWithQueryInputProps>) {
+	const [validation, setValidation] = React.useState<{
+		isValid: boolean;
+		message: string;
+	} | null>(null);
+	const [validating, setValidating] = React.useState(false);
+
+	const handleBlur = React.useCallback(async () => {
+		onBlur?.();
+		const strValue = valueToString(value);
+		if (!strValue && inputType !== InputType.CHECKBOX) {
+			setValidation(null);
+			return;
+		}
+		const formikValid = await (validateFormikBeforeApi?.() ??
+			Promise.resolve(true));
+		if (!formikValid) return;
+		setValidating(true);
+		setValidation(null);
+		setFieldValidationInProgress?.(true);
+		try {
+			const result = await validateFieldOnCheck({
+				input: {
+					fieldName,
+					fieldId,
+					value: strValue,
+				},
+			});
+			if (result) {
+				setValidation({
+					isValid: result.isValid ?? false,
+					message: result.message ?? "",
+				});
+			}
+		} catch {
+			setValidation({ isValid: false, message: "Validation failed" });
+		} finally {
+			setValidating(false);
+			setFieldValidationInProgress?.(false);
+		}
+	}, [
+		value,
+		inputType,
+		fieldName,
+		validationQuery,
+		onBlur,
+		validateFormikBeforeApi,
+		setFieldValidationInProgress,
+	]);
+
+	if (readOnly) {
+		const formattedValue = formatReadOnlyValue(value);
+		const readOnlyValue =
+			typeof formattedValue === "string" ||
+			typeof formattedValue === "number" ||
+			(Array.isArray(formattedValue) &&
+				formattedValue.every((v) => typeof v === "string"))
+				? formattedValue
+				: "";
+		return renderReadOnlyText(label, readOnlyValue);
+	}
+
+	const display = getInputDisplayState({
+		error,
+		validation,
+		submitValidationResult,
+		helpText,
+		validating,
+		readOnly,
+	});
+
+	const clearValidationAndSet = (v: TextWithQueryValue) => {
+		setValidation(null);
+		setValue(v);
+	};
+
+	if (inputType === InputType.TEXT) {
+		return (
+			<TextInput
+				label={label}
+				placeholder={placeholder}
+				value={(value as string) ?? ""}
+				setValue={clearValidationAndSet}
+				error={display.displayError}
+				helpText={display.displayHelpText}
+				readOnly={readOnly}
+				disabled={display.isDisabled}
+				onBlur={handleBlur}
+				formHelperTextSx={display.formHelperTextSx}
+			/>
+		);
+	}
+	if (inputType === InputType.NUMBER) {
+		return (
+			<NumberInput
+				label={label}
+				placeholder={placeholder}
+				value={value === "" || value == null ? "" : (value as number)}
+				setValue={clearValidationAndSet}
+				error={display.displayError}
+				helpText={display.displayHelpText}
+				readOnly={readOnly}
+				disabled={display.isDisabled}
+				onBlur={handleBlur}
+				formHelperTextSx={display.formHelperTextSx}
+			/>
+		);
+	}
+	if (inputType === InputType.SELECTOR) {
+		return (
+			<SelectorInput
+				fieldName={fieldName}
+				label={label}
+				value={(value as string) ?? ""}
+				setValue={clearValidationAndSet}
+				helpText={display.displayHelpText}
+				error={display.displayError}
+				options={options}
+				readOnly={readOnly}
+				disabled={display.isDisabled}
+				onBlur={handleBlur}
+				formHelperTextSx={display.formHelperTextSx}
+			/>
+		);
+	}
+	if (inputType === InputType.CHECKBOX) {
+		return (
+			<Box onBlur={handleBlur}>
+				<CheckboxInput
+					label={label}
+					checked={Boolean(value)}
+					setChecked={clearValidationAndSet}
+					helpText={display.displayHelpText}
+					readOnly={readOnly}
+					disabled={display.isDisabled}
+					formHelperTextSx={display.formHelperTextSx}
+				/>
+			</Box>
+		);
+	}
+
+	return null;
+}

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

@@ -0,0 +1,10 @@
+export { CheckboxInput } from "./CheckboxInput";
+export { NumberInput } from "./NumberInput";
+export { SelectorInput } from "./SelectorInput";
+export { TextInput } from "./TextInput";
+export {
+	TextWithQueryInput,
+	type TextWithQueryInputProps,
+	type TextWithQueryInputType,
+	type TextWithQueryValue,
+} from "./TextWithQueryInput";

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

@@ -0,0 +1,2 @@
+export { renderFormControl } from "./renderFormControl";
+export { renderSearchInput } from "./renderSearchInput";

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

@@ -0,0 +1,376 @@
+"use client";
+
+import { Box, FormHelperText, Typography } from "@mui/material";
+import { Field } 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, unknown>> {
+	const rows: Array<Record<string, unknown>> = Array.isArray(value)
+		? (value as Array<Record<string, unknown>>)
+		: [];
+	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)
+				}
+				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) => void | 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 }: any) => (
+					<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 }: any) => (
+					<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 }: any) => (
+					<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 }: any) => (
+					<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 }: any) => (
+				<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>
+	);
+}