• Home
• com.liferay
• com.liferay.product.navigation.product.menu.web
• 6.0.111
• source code
• LayoutFinder.js

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

META-INF.resources.js.LayoutFinder.js Maven / Gradle / Ivy

/**
 * 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 ClayIcon from '@clayui/icon';
import ClayLoadingIndicator from '@clayui/loading-indicator';
import {
	fetch,
	objectToFormData,
	openToast,
	setSessionValue,
	sub,
} from 'frontend-js-web';
import PropTypes from 'prop-types';
import React, {useCallback, useState} from 'react';

import {useDebounceCallback} from './useDebounceCallback';

const MAX_ITEMS_TO_SHOW = 10;

function LayoutFinder({
	administrationPortletNamespace,
	administrationPortletURL,
	findLayoutsURL,
	keywords,
	namespace,
	productMenuPortletURL,
	setKeywords,
}) {
	const [layouts, setLayouts] = useState([]);
	const [loading, setLoading] = useState(false);
	const [totalCount, setTotalCount] = useState(0);

	const handleFormSubmit = useCallback((event) => {
		event.preventDefault();
		event.stopPropagation();
	}, []);

	const [updatePageResults, cancelUpdatePageResults] = useDebounceCallback(
		(newKeywords) => {
			fetch(findLayoutsURL, {
				body: objectToFormData({
					[`${namespace}keywords`]: newKeywords,
				}),
				method: 'post',
			})
				.then((response) => {
					return response.ok
						? response.json()
						: {
								layouts: [],
								totalCount: 0,
							};
				})
				.then((response) => {
					setLoading(false);
					setLayouts(response.layouts);
					setTotalCount(response.totalCount);
				});
		},
		1000
	);

	const handleOnChange = useCallback(
		(event) => {
			const newKeywords = event.target.value;

			setKeywords(newKeywords);

			if (!newKeywords.length) {
				setLoading(false);
				setLayouts([]);
				setTotalCount(0);

				cancelUpdatePageResults();
			}
			else {
				setLoading(true);
				updatePageResults(newKeywords);
			}
		},
		[cancelUpdatePageResults, setKeywords, updatePageResults]
	);

	const handleOnClick = useCallback(() => {
		Liferay.Portlet.destroy(`#p_p_id${namespace}`, true);

		setSessionValue(
			'com.liferay.product.navigation.product.menu.web_pagesTreeState',
			'closed'
		).then(() => {
			fetch(productMenuPortletURL)
				.then((response) => {
					if (!response.ok) {
						throw new Error();
					}

					return response.text();
				})
				.then((productMenuContent) => {
					const sidebar = document.querySelector(
						'.lfr-product-menu-sidebar .sidebar-body'
					);

					sidebar.innerHTML = '';

					const range = document.createRange();
					range.selectNode(sidebar);

					sidebar.appendChild(
						range.createContextualFragment(productMenuContent)
					);
				})
				.catch(() => {
					openToast({
						message: Liferay.Language.get(
							'an-unexpected-error-occurred'
						),
						title: Liferay.Language.get('error'),
						type: 'danger',
					});
				});
		});
	}, [namespace, productMenuPortletURL]);

	return (
		

			
				

				{`${Liferay.Language.get('back-to-menu')} `}
			

			

				
					{`${Liferay.Language.get('page-name')}: `}
				

				
			

			{totalCount > 0 && (
				<>
					

					{totalCount > MAX_ITEMS_TO_SHOW && (
						

							

								{sub(
									Liferay.Language.get(
										'there-are-x-more-results-narrow-your-searc-to-get-more-precise-results'
									),
									totalCount - MAX_ITEMS_TO_SHOW
								)}
							

							

								
									{Liferay.Language.get(
										'view-in-page-administration'
									)}
								
							
						
					)}
				
			)}

			{loading && (
				
			)}

			{totalCount === 0 && !loading && keywords.length > 1 && (
				

					{Liferay.Language.get('page-not-found')}
				
			)}
		
	);
}

LayoutFinder.propTypes = {
	administrationPortletNamespace: PropTypes.string,
	administrationPortletURL: PropTypes.string,
	findLayoutsURL: PropTypes.string,
	namespace: PropTypes.string,
	productMenuPortletURL: PropTypes.string,
	viewInPageAdministrationURL: PropTypes.string,
};

export default LayoutFinder;