META-INF.resources.js.components.ViewObjectDefinitions.ModalAddObjectFolder.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,
	objectDefinitionUtils,
	openToast,
	useForm,
} from '@liferay/object-js-components-web';
import {sub} from 'frontend-js-web';
import React, {useState} from 'react';

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

interface ModalAddObjectFolderProps {
	handleOnClose: () => void;
	setObjectFoldersRequestInfo: React.Dispatch<
		React.SetStateAction
	>;
	setSelectedObjectFolder: (values: Partial) => void;
}

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

export function ModalAddObjectFolder({
	handleOnClose,
	setObjectFoldersRequestInfo,
	setSelectedObjectFolder,
}: ModalAddObjectFolderProps) {
	const [error, setError] = useState('');

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

	const initialValues: TInitialValues = {
		label: '',
		name: undefined,
	};

	const onSubmit = async ({label, name}: TInitialValues) => {
		const objectFolder: Partial = {
			label: {
				[defaultLanguageId]: label,
			},
			name: name || objectDefinitionUtils.normalizeName(label),
		};

		try {
			const newObjectFolder = (await API.save({
				item: objectFolder,
				method: 'POST',
				returnValue: true,
				url: '/o/object-admin/v1.0/object-folders',
			})) as ObjectFolder;

			onClose();

			openToast({
				message: sub(
					Liferay.Language.get('x-was-created-successfully'),
					`${Liferay.Util.escapeHTML(label)}`
				),
				type: 'success',
			});

			setObjectFoldersRequestInfo(
				(prevValues: ObjectFoldersRequestInfo) => {
					return {
						actions: prevValues.actions,
						items: [...prevValues.items, newObjectFolder],
					};
				}
			);

			setSelectedObjectFolder(newObjectFolder);

			const currentURL = new URL(window.location.href);

			currentURL.searchParams.set(
				'objectFolderName',
				newObjectFolder.name
			);

			window.history.replaceState(null, '', currentURL.href);
		}
		catch (error) {
			setError((error as Error).message);
		}
	};

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

		if (!values.label) {
			errors.label = constantsUtils.REQUIRED_MSG;
		}
		if (!(values.name ?? values.label)) {
			errors.name = constantsUtils.REQUIRED_MSG;
		}

		return errors;
	};

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

	return (
		
			
				
					
						{Liferay.Language.get('new-object-folder')}
					

					
						{error && (
							{error}
						)}

						

						
					

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

								
									{Liferay.Language.get('create-folder')}
								
							
						}
					/>
				
			
		
	);
}