All Downloads are FREE. Search and download functionalities are using the official Maven repository.

META-INF.resources.sxp_blueprint_options.js.configuration.SelectSXPBlueprintModal.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 ClayButton from '@clayui/button';
import {useResource} from '@clayui/data-provider';
import ClayEmptyState from '@clayui/empty-state';
import ClayLoadingIndicator from '@clayui/loading-indicator';
import ClayModal from '@clayui/modal';
import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';
import ClayTable from '@clayui/table';
import moment from 'moment';
import React, {useEffect, useState} from 'react';

import ManagementToolbar from './ManagementToolbar';

const DELTAS = [10, 20, 30, 50];
const TRUNCATE_LENGTH = 200;

function formatDate(value) {
	return moment(moment(value, 'YYYYMMDDHHmmss'))
		.locale(Liferay.ThemeDisplay.getBCP47LanguageId() || 'en-US')
		.format('lll');
}

function truncateString(value) {
	return value.length > TRUNCATE_LENGTH
		? value.substring(0, TRUNCATE_LENGTH).concat('...')
		: value;
}

const SelectSXPBlueprintModal = ({
	observer,
	onClose,
	onSubmit,
	selectedExternalReferenceCode = '',
}) => {
	const [activePage, setActivePage] = useState(1);
	const [delta, setDelta] = useState(20);
	const [search, setSearch] = useState('');
	const [sort, setSort] = useState('modifiedDate');
	const [sortOrder, setSortOrder] = useState('desc');

	const [networkState, setNetworkState] = useState(() => ({
		error: false,
		loading: false,
		networkStatus: 4,
	}));

	/**
	 * Immediately show loading spinner whenever a new search is performed.
	 * This is needed otherwise there is a delay before the spinner is shown.
	 */
	useEffect(() => {
		setNetworkState({
			error: false,
			loading: true,
			networkStatus: 4,
		});
	}, [activePage, delta, search, sort, sortOrder]);

	const {resource} = useResource({
		fetchOptions: {
			credentials: 'include',
			headers: new Headers({
				'Accept-Language': Liferay.ThemeDisplay.getBCP47LanguageId(),
				'x-csrf-token': Liferay.authToken,
			}),
			method: 'GET',
		},
		fetchRetry: {
			attempts: 0,
		},
		link: `${window.location.origin}${Liferay.ThemeDisplay.getPathContext()}
		/o/search-experiences-rest/v1.0/sxp-blueprints`,
		onNetworkStatusChange: (status) => {
			setNetworkState({
				error: status === 5,
				loading: status < 4,
				networkStatus: status,
			});
		},
		variables: {
			page: activePage,
			pageSize: delta,
			search,
			sort: `${sort}:${sortOrder}`,
		},
	});

	const _handleChangeSortOrder = () => {
		setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
	};

	const _handleSearch = (value) => {
		setSearch(value);
	};

	const _handleSubmit = (externalReferenceCode, title) => {
		onSubmit(externalReferenceCode, title);

		onClose();
	};

	/**
	 * Handles what is displayed depending on loading/error/results/no results.
	 * @return The JSX to be rendered.
	 */
	const _renderModalBody = () => {

		// Loading

		if (networkState.loading) {
			return ;
		}

		// Error

		if (
			networkState.error ||
			resource?.status === 500 ||
			resource?.status === 400
		) {
			return (
				
			);
		}

		// Has Results

		if (resource?.totalCount > 0 && resource?.items.length) {
			return (
				<>
					
						
							
								
									{Liferay.Language.get('title')}
								

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

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

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

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

						
							{resource?.items?.map((item) => (
								
									
										{item.title}
									

									
										{truncateString(item.description)}
									

									
										{item.userName}
									

									
										{formatDate(item.createDate)}
									

									
										{formatDate(item.modifiedDate)}
									

									
										
												_handleSubmit(
													item.externalReferenceCode,
													item.title
												)
											}
										>
											{item.externalReferenceCode ===
											selectedExternalReferenceCode
												? Liferay.Language.get(
														'selected'
													)
												: Liferay.Language.get(
														'select'
													)}
										
									
								
							))}
						
					

					 ({
							label: delta,
						}))}
						ellipsisBuffer={3}
						onDeltaChange={setDelta}
						onPageChange={setActivePage}
						totalItems={resource?.totalCount || 0}
					/>
				
			);
		}

		// No Results

		return (
			
		);
	};

	return (
		
			
				{Liferay.Language.get('select-blueprint')}
			

			 setSort('modifiedDate'),
							},
							{
								active: sort === 'createDate',
								label: Liferay.Language.get('created'),
								onClick: () => setSort('createDate'),
							},
						],
						label: Liferay.Language.get('order-by'),
						name: 'order-by',
						type: 'group',
					},
				]}
				loading={networkState.loading}
				onChangeSortOrder={_handleChangeSortOrder}
				onSearch={_handleSearch}
				searchValue={search}
				sortOrder={sortOrder}
				totalCount={resource?.totalCount}
			/>

			{_renderModalBody()}
		
	);
};

export default SelectSXPBlueprintModal;




© 2015 - 2025 Weber Informatics LLC | Privacy Policy