META-INF.resources.page_editor.app.components.SaveFragmentCompositionModal.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.layout.content.page.editor.web
Liferay Layout Content Page Editor 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 ClayButton from '@clayui/button';
import ClayCard from '@clayui/card';
import ClayForm, {ClayCheckbox, ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayLayout from '@clayui/layout';
import ClayModal, {useModal} from '@clayui/modal';
import ClaySticker from '@clayui/sticker';
import {useIsMounted} from '@liferay/frontend-js-react-web';
import PropTypes from 'prop-types';
import React, {useState} from 'react';

import Button from '../../common/components/Button';
import InvisibleFieldset from '../../common/components/InvisibleFieldset';
import {openImageSelector} from '../../common/openImageSelector';
import {config} from '../config/index';
import {useActiveItemIds} from '../contexts/ControlsContext';
import {useDispatch, useSelector} from '../contexts/StoreContext';
import addFragmentComposition from '../thunks/addFragmentComposition';

const SaveFragmentCompositionModal = ({itemId, onCloseModal}) => {
	const dispatch = useDispatch();

	const activeItemIds = useActiveItemIds();

	const [activeItemId] = activeItemIds;

	const isMounted = useIsMounted();

	const collections = useSelector((state) => state.collections || []);

	const [name, setName] = useState(undefined);
	const [description, setDescription] = useState('');
	const [fragmentCollectionId, setFragmentCollectionId] = useState(
		collections.length ? collections[0].fragmentCollectionId : -1
	);

	const [saveInlineContent, setSaveInlineContent] = useState(false);
	const [saveMappingConfiguration, setSaveMappingConfiguration] =
		useState(false);

	const {observer, onClose} = useModal({
		onClose: () => {
			if (isMounted()) {
				onCloseModal();
			}
		},
	});

	const [loading, setLoading] = useState(false);
	const [thumbnail, setThumbnail] = useState({});

	const handleSubmit = (event) => {
		event.preventDefault();

		if (!name) {
			setName('');
		}
		else {
			setLoading(true);

			dispatch(
				addFragmentComposition({
					description,
					fileEntryId: thumbnail.fileEntryId,
					fragmentCollectionId,
					itemId: itemId || activeItemId,
					name,
					saveInlineContent,
					saveMappingConfiguration,
				})
			)
				.then(() => {
					onClose();
				})
				.catch(() => {
					setLoading(false);
				});
		}
	};

	const handleThumbnailSelected = (image) => {
		setThumbnail(image);
	};

	const nameInputId = `${config.portletNamespace}fragmentCompositionName`;
	const descriptionInputId = `${config.portletNamespace}fragmentCompositionDescription`;

	return (
		
			
				{Liferay.Language.get('save-as-fragment')}
			

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

								
							

							
									setName(event.target.value)
								}
								onClick={(event) => {
									if (Liferay.Browser.isFirefox()) {
										event.target.focus();
									}
								}}
								placeholder={Liferay.Language.get('name')}
								required
								type="text"
								value={name || ''}
							/>

							{name === '' && (
								
									
										

										{Liferay.Language.get(
											'this-field-is-required'
										)}
									
								
							)}
						

						
							
								
									
											openImageSelector(
												handleThumbnailSelected
											)
										}
										size="sm"
										value={Liferay.Language.get(
											'upload-thumbnail'
										)}
									>
										

										{Liferay.Language.get(
											'upload-thumbnail'
										)}
									
								

								
									
										{thumbnail.title}
									
								
							
						

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

							
									setDescription(event.target.value)
								}
								placeholder={Liferay.Language.get(
									'description'
								)}
								type="text"
								value={description}
							/>
						

						
							
								
									
											setSaveInlineContent(
												event.target.checked
											)
										}
									/>
								

								
									
											setSaveMappingConfiguration(
												event.target.checked
											)
										}
									/>
								
							
						

						
							{collections.length ? (
								<>
									
										{Liferay.Language.get(
											'select-fragment-set'
										)}
									

									
										{collections.map((collection) => (
											
												
														setFragmentCollectionId(
															collection.fragmentCollectionId
														)
													}
												>
													
														
															
																
																	
																
															

															
																
																	
																		{
																			collection.name
																		}
																	
																
															
														
													
												
											
										))}
									
								
							) : (
								
									

									{Liferay.Language.get(
										'this-fragment-will-be-saved-in-a-new-fragment-set-called-saved-fragments'
									)}
								
							)}
						
					
				
			

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

						
					
				}
			>
		
	);
};

SaveFragmentCompositionModal.propTypes = {
	itemId: PropTypes.string,
	onCloseModal: PropTypes.func.isRequired,
};

export default SaveFragmentCompositionModal;