META-INF.resources.js.article.AssetDisplayPagePreview.js Maven / Gradle / Ivy

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.journal.web
Liferay Journal Web
There is a newer version: 5.0.177
/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 */

import ClayButton from '@clayui/button';
import ClayDropDown from '@clayui/drop-down';
import ClayForm, {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import {
	createPortletURL,
	getPortletNamespace,
	openModal,
	openSelectionModal,
	openToast,
	sub,
} from 'frontend-js-web';
import React, {useMemo, useState} from 'react';

export default function AssetDisplayPagePreview({
	newArticle,
	portletNamespace: namespace,
	previewURL,
	saveAsDraftURL,
	selectAssetDisplayPageEventName,
	selectAssetDisplayPageURL,
	selectSiteEventName,
	siteItemSelectorURL,
	sites,
	sitesCount,
}) {
	const [selectedSite, setSelectedSite] = useState();
	const [active, setActive] = useState(false);
	const [assetDisplayPageSelected, setAssetDisplayPageSelected] = useState();

	const siteInputId = `${namespace}siteInput`;

	const items = useMemo(() => {
		return [
			{groupId: 0, name: `- ${Liferay.Language.get('not-selected')} -`},
			...sites,
		].map((site) => ({
			label: site.name,
			onClick: () => {
				setActive(false);
				setSelectedSite({groupId: site.groupId, name: site.name});
			},
		}));
	}, [sites]);

	return (
		<>
			
				{Liferay.Language.get('site')}
			
			
						
							{selectedSite?.name ||
								`- ${Liferay.Language.get('not-selected')} -`}
						
					
				}
			>
				{items.map((item) => (
					
						{item.label}
					
				))}

				{sitesCount > sites.length && (
					<>
						
							{sub(
								Liferay.Language.get('showing-x-of-x-items'),
								sites.length,
								sitesCount
							)}
						

						
							 {
									openSelectionModal({
										containerProps: {
											className: 'cadmin',
										},
										onSelect(selectedItem) {
											setSelectedSite({
												groupId: selectedItem.groupid,
												name:
													selectedItem.groupdescriptivename,
											});
										},
										selectEventName: selectSiteEventName,
										title: Liferay.Language.get(
											'select-site'
										),
										url: siteItemSelectorURL,
									});
								}}
								small
								type="button"
							>
								{Liferay.Language.get('more')}
							
						
					
				)}
			

			
		
	);
}

function AssetDisplayPageSelector({
	assetDisplayPageSelected,
	namespace,
	newArticle,
	previewURL,
	saveAsDraftURL,
	selectAssetDisplayPageEventName,
	selectAssetDisplayPageURL,
	selectedSite,
	setAssetDisplayPageSelected,
}) {
	const assetDisplayPageId = `${namespace}assetDisplayPageId`;

	const openAssetDisplayPageSelector = () => {
		const url = new URL(selectAssetDisplayPageURL);

		url.searchParams.set(
			`${getPortletNamespace(Liferay.PortletKeys.ITEM_SELECTOR)}groupId`,
			selectedSite.groupId
		);

		openSelectionModal({
			containerProps: {
				className: 'cadmin',
			},
			onSelect(selectedItem) {
				setAssetDisplayPageSelected({
					name: selectedItem.name,
					plid: selectedItem.plid,
				});
			},
			selectEventName: selectAssetDisplayPageEventName,
			title: sub(
				Liferay.Language.get('select-x'),
				Liferay.Language.get('display-page')
			),
			url,
		});
	};

	return (
		
			
				
					{Liferay.Language.get('display-page')}
				

				
					
						 openAssetDisplayPageSelector()}
							placeholder={sub(
								Liferay.Language.get('select-x'),
								Liferay.Language.get('display-page')
							)}
							readOnly
							sizing="sm"
							value={assetDisplayPageSelected?.name ?? ''}
						/>
					

					
						 openAssetDisplayPageSelector()}
							small
							title={sub(
								assetDisplayPageSelected
									? Liferay.Language.get('change-x')
									: Liferay.Language.get('select-x'),
								Liferay.Language.get('display-page')
							)}
						>
							
						
					
				
			

			 {
					updateJournalInput({
						name: 'formDate',
						namespace,
						value: Date.now().toString(),
					});

					const form = document.getElementById(`${namespace}fm1`);

					const formData = new FormData(form);

					const articleId = document.getElementById(
						`${namespace}articleId`
					);

					formData.append(
						`${namespace}cmd`,
						newArticle && !articleId.value ? 'add' : 'update'
					);

					return Liferay.Util.fetch(saveAsDraftURL, {
						body: formData,
						method: form.method,
					})
						.then((response) => response.json())
						.then(({articleId, classPK, error, version}) => {
							if (error) {
								openToast({
									message: Liferay.Language.get(
										'web-content-could-not-be-previewed-due-to-an-unexpected-error-while-generating-the-draft'
									),
									title: Liferay.Language.get('error'),
									type: 'danger',
								});
							}
							else {
								updateJournalInput({
									name: 'formDate',
									namespace,
									value: Date.now().toString(),
								});

								updateJournalInput({
									name: 'articleId',
									namespace,
									value: articleId,
								});

								openModal({
									title: Liferay.Language.get('preview'),
									url: createPortletURL(previewURL, {
										classPK,

										selPlid: assetDisplayPageSelected?.plid,
										version,
									}).toString(),
								});
							}
						})
						.catch(() => {
							openToast({
								message: Liferay.Language.get(
									'web-content-could-not-be-previewed-due-to-an-unexpected-error-while-generating-the-draft'
								),
								title: Liferay.Language.get('error'),
								type: 'danger',
							});
						});
				}}
				title={Liferay.Language.get(
					'a-draft-will-be-saved-before-displaying-the-preview'
				)}
			>
				{Liferay.Language.get('preview')}
			
		
	);
}

function updateJournalInput({name, namespace, value}) {
	const input = document.getElementById(`${namespace}${name}`);

	input.value = value;
}