META-INF.resources.js.components.ModalBasicWithFieldName.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.object.web

Liferay Object Web

The newest version!

/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import ClayAlert from '@clayui/alert';
import ClayButton from '@clayui/button';
import ClayForm from '@clayui/form';
import ClayModal from '@clayui/modal';
import {Observer} from '@clayui/modal/lib/types';
import {
	API,
	FormError,
	Input,
	constantsUtils,
	useForm,
} from '@liferay/object-js-components-web';
import React, {useState} from 'react';

import {defaultLanguageId} from '../utils/constants';

interface IProps extends React.HTMLAttributes {
	apiURL: string;
	inputId: string;
	label: string;
	observer: Observer;
	onClose: () => void;
}

type TInitialValues = {
	name: LocalizedValue;
};

export function ModalBasicWithFieldName({
	apiURL,
	inputId,
	label,
	observer,
	onClose,
}: IProps) {
	const initialValues: TInitialValues = {
		name: {[defaultLanguageId]: ''},
	};
	const [error, setError] = useState('');

	const onSubmit = async ({name}: TInitialValues) => {
		try {
			await API.save({
				item: {name: {[defaultLanguageId]: name}},
				method: 'POST',
				url: apiURL,
			});

			onClose();
			window.location.reload();
		}
		catch (error) {
			setError((error as Error).message);
		}
	};

	const validate = ({name}: TInitialValues) => {
		const errors: FormError = {};

		if (name[defaultLanguageId] === '') {
			errors.name = constantsUtils.REQUIRED_MSG;
		}

		return errors;
	};

	const {errors, handleChange, handleSubmit, values} = useForm({
		initialValues,
		onSubmit,
		validate,
	});

	return (
		<>
			
				
					{label}

					
						{error && (
							{error}
						)}

						
					

					
								
									{Liferay.Language.get('cancel')}
								

								
									{Liferay.Language.get('save')}
								
							
						}
					/>
				
			
		
	);
}

export default ModalBasicWithFieldName;