META-INF.resources.js.components.ViewObjectDefinitions.ModalEditObjectFolder.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) 2023 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, {ClayModalProvider, useModal} from '@clayui/modal';
import {
	API,
	FormError,
	Input,
	constantsUtils,
	invalidateLocalizableLabelRequired,
	openToast,
	stringUtils,
	useForm,
} from '@liferay/object-js-components-web';
import {InputLocalized} from 'frontend-js-components-web';
import {sub} from 'frontend-js-web';
import React, {useState} from 'react';

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

interface ModalEditObjectFolderProps {
	externalReferenceCode: string;
	handleOnClose: () => void;
	id: number;
	initialLabel?: LocalizedValue;
	name?: string;
	onAfterSubmit: (value: ObjectFolder) => void;
}

type TInitialValues = {
	externalReferenceCode: string;
	label?: LocalizedValue;
	name?: string;
};

export function ModalEditObjectFolder({
	externalReferenceCode,
	handleOnClose,
	id,
	initialLabel,
	name,
	onAfterSubmit,
}: ModalEditObjectFolderProps) {
	const [error, setError] = useState('');

	const [selectedLocale, setSelectedLocale] =
		useState(defaultLanguageId);

	const {observer, onClose} = useModal({
		onClose: () => handleOnClose(),
	});

	const initialValues: TInitialValues = {
		externalReferenceCode,
		label: initialLabel,
		name,
	};

	const onSubmit = async (values: TInitialValues) => {
		const objectFolder: Partial = values;

		try {
			const editedObjectFolder = await API.save({
				item: objectFolder,
				method: 'PATCH',
				returnValue: true,
				url: `/o/object-admin/v1.0/object-folders/${id}`,
			});

			openToast({
				message: sub(
					Liferay.Language.get('x-was-saved-successfully'),
					`${Liferay.Util.escapeHTML(
						stringUtils.getLocalizableLabel({
							fallbackLabel: objectFolder.name,
							labels: objectFolder.label,
						})
					)}`
				),
				type: 'success',
			});

			onClose();

			onAfterSubmit(editedObjectFolder as ObjectFolder);
		}
		catch (error) {
			setError((error as Error).message);
		}
	};

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

		if (invalidateLocalizableLabelRequired(values.label)) {
			errors.label = constantsUtils.REQUIRED_MSG;
		}

		if (!values.externalReferenceCode) {
			errors.externalReferenceCode = constantsUtils.REQUIRED_MSG;
		}

		return errors;
	};

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

	return (
		
			
				
					
						{Liferay.Language.get('edit-label-and-erc')}
					

					
						{error && (
							{error}
						)}

						 setValues({label})}
							onSelectedLocaleChange={setSelectedLocale}
							required
							selectedLocale={selectedLocale}
							translations={
								values.label as LocalizedValue
							}
						/>

						

						
					

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

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