META-INF.resources.js.components.ViewObjectDefinitions.ModalMoveObjectDefinition.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 ClayEmptyState from '@clayui/empty-state';
import ClayIcon from '@clayui/icon';
import ClayList from '@clayui/list';
import ClayModal, {ClayModalProvider, useModal} from '@clayui/modal';
import {
	API,
	ManagementToolbarSearch,
	arrayUtils,
	stringUtils,
} from '@liferay/object-js-components-web';
import {ManagementToolbar, openToast} from 'frontend-js-components-web';
import {sub} from 'frontend-js-web';
import React, {useEffect, useMemo, useState} from 'react';

import './ModalMoveObjectDefinition.scss';

interface ModalMoveObjectDefinitionProps {
	handleOnClose: () => void;
	objectDefinitionId: number;
	objectFolders: ObjectFolder[];
	onAfterMoveObjectDefinition: () => void;
	setMoveObjectDefinition: (value: ObjectDefinition | null) => void;
}

export function ModalMoveObjectDefinition({
	handleOnClose,
	objectDefinitionId,
	objectFolders,
	onAfterMoveObjectDefinition,
	setMoveObjectDefinition,
}: ModalMoveObjectDefinitionProps) {
	const [objectDefinition, setObjectDefinition] =
		useState();
	const [query, setQuery] = useState('');
	const [
		selectedObjectFolderExternalReferenceCode,
		setSelectedObjectFolderExternalReferenceCode,
	] = useState('');
	const [selectedObjectFolder, setSelectedObjectFolder] =
		useState();
	const [error, setError] = useState('');

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

	const filteredObjectFolders = objectFolders.filter(
		(item) =>
			item.externalReferenceCode !==
			selectedObjectFolder?.externalReferenceCode
	);

	const modalObjectFolderItems = useMemo(() => {
		const filteredItems = arrayUtils.filterArrayByQuery({
			array: filteredObjectFolders,
			query,
			str: 'label',
		});

		return query ? filteredItems : filteredObjectFolders;
	}, [query, filteredObjectFolders]);

	const handleMoveObject = async () => {
		const movedObjectDefinition: ObjectDefinition = {
			...(objectDefinition as ObjectDefinition),
			objectFolderExternalReferenceCode:
				selectedObjectFolderExternalReferenceCode,
		};

		try {
			await API.save({
				item: movedObjectDefinition,
				method: 'PATCH',
				url: `/o/object-admin/v1.0/object-definitions/${objectDefinitionId}`,
			});

			onClose();

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

			onAfterMoveObjectDefinition();
		}
		catch (error) {
			setError((error as Error).message);
		}
	};

	useEffect(() => {
		const makeFetch = async () => {
			if (objectDefinitionId) {
				const objectDefinitionResponse =
					await API.getObjectDefinitionById(objectDefinitionId);

				const objectFolderResponse =
					await API.getObjectFolderByExternalReferenceCode(
						objectDefinitionResponse.objectFolderExternalReferenceCode
					);

				setSelectedObjectFolder(objectFolderResponse);
				setObjectDefinition(objectDefinitionResponse);
			}
		};

		makeFetch();
	}, [objectDefinitionId]);

	return (
		
			
				
					{`${Liferay.Language.get(
						'move'
					)} "${stringUtils.getLocalizableLabel({
						labels: objectDefinition?.label,
					})}"`}
				

				
					{error && (
						{error}
					)}

					{!filteredObjectFolders.length ? (
						
							{Liferay.Language.get(
								'it-is-not-possible-to-move-this-object-definition-because-there-are-no-object-folders-available'
							)}
						
					) : (
						<>
							
								
									
								
							

							{!modalObjectFolderItems.length && query ? (
								
									
								
							) : (
								
									{modalObjectFolderItems.map(
										({
											externalReferenceCode,
											label,
											name,
										}) => (
											 {
													setSelectedObjectFolderExternalReferenceCode(
														externalReferenceCode
													);
												}}
											>
												
													

													
														{stringUtils.getLocalizableLabel(
															{
																fallbackLabel:
																	name,
																labels: label,
															}
														)}
													
												
											
										)
									)}
								
							)}
						
					)}
				

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

								 handleMoveObject()}
									type="submit"
								>
									{Liferay.Language.get('move')}
								
							
						)
					}
				/>
			
		
	);
}