• Home
• com.liferay
• com.liferay.frontend.data.set.admin.web
• 1.0.20
• source code
• Pagination.tsx

×

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.data_set.pagination.Pagination.tsx 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 ClayForm, {ClayInput} from '@clayui/form';
import ClayLayout from '@clayui/layout';
import classnames from 'classnames';
import {fetch, navigate} from 'frontend-js-web';
import React, {useRef, useState} from 'react';

import RequiredMark from '../../components/RequiredMark';
import {API_URL, DEFAULT_FETCH_HEADERS} from '../../utils/constants';
import openDefaultFailureToast from '../../utils/openDefaultFailureToast';
import openDefaultSuccessToast from '../../utils/openDefaultSuccessToast';
import {IDataSetSectionProps} from '../DataSet';

function Pagination({
	backURL,
	dataSet,
	namespace,
	onDataSetUpdate,
}: IDataSetSectionProps) {
	const [listOfItemsPerPage, setListOfItemsPerPage] = useState(
		dataSet.listOfItemsPerPage
	);
	const [defaultItemsPerPage, setDefaultItemsPerPage] = useState(
		dataSet.defaultItemsPerPage.toString()
	);
	const [
		incompatibleDefaultItemsPerPageValidationError,
		setIncompatibleDefaultItemsPerPageValidationError,
	] = useState(false);
	const [
		invalidNumberInListOfItemsPerPageValidationError,
		setInvalidNumberInListOfItemsPerPageValidationError,
	] = useState(false);
	const [
		requiredDefaultItemsPerPageValidationError,
		setRequiredDefaultItemsPerPageValidationError,
	] = useState(false);
	const [
		requiredListOfItemsPerPageValidationError,
		setRequiredListOfItemsPerPageValidationError,
	] = useState(false);
	const [
		invalidListOfItemsPerPageLengthValidationError,
		setInvalidListOfItemsPerPageLengthValidationError,
	] = useState(false);

	const listOfItemsPerPageRef = useRef(null);
	const defaultItemsPerPageRef = useRef(null);

	const getItemsPerPageArray = (): string[] => {
		return listOfItemsPerPage.split(',').map((size: string) => size.trim());
	};

	const listOfItemsPerPageFieldValidation = (itemsPerPageArray: string[]) => {
		if (itemsPerPageArray.length > 25) {
			setInvalidListOfItemsPerPageLengthValidationError(true);
		}
		else {
			setInvalidListOfItemsPerPageLengthValidationError(false);
		}

		const invalidNumber = itemsPerPageArray.some((element) => {
			const isPositiveInteger = /^\d+$/.test(element);
			const item: number = parseInt(element, 10);

			return !isPositiveInteger || item < 1 || item > 1000;
		});

		setInvalidNumberInListOfItemsPerPageValidationError(invalidNumber);
	};

	const compatibilityValidation = (itemsPerPageArray: string[]) => {
		if (!itemsPerPageArray.includes(defaultItemsPerPage)) {
			setIncompatibleDefaultItemsPerPageValidationError(true);
		}
		else {
			setIncompatibleDefaultItemsPerPageValidationError(false);
		}
	};

	const handleSaveClick = async () => {
		const getItemsPerPageString = () => {
			const uniqueItemsPerPageArray = [
				...new Set(getItemsPerPageArray()),
			];

			const sortedItemsPerPageArray = uniqueItemsPerPageArray
				.map((element) => parseInt(element, 10))
				.sort((a, b) => a - b);

			return sortedItemsPerPageArray.join(', ');
		};

		const itemsPerPage = getItemsPerPageString();

		const body = {
			defaultItemsPerPage,
			label: dataSet.label,
			listOfItemsPerPage: itemsPerPage,
		};

		const response = await fetch(
			`${API_URL.DATA_SETS}/by-external-reference-code/${dataSet.externalReferenceCode}`,
			{
				body: JSON.stringify(body),
				headers: DEFAULT_FETCH_HEADERS,
				method: 'PATCH',
			}
		);

		if (!response.ok) {
			openDefaultFailureToast();

			return;
		}

		const responseJSON = await response.json();

		if (responseJSON?.id) {
			openDefaultSuccessToast();

			onDataSetUpdate(responseJSON);
		}
		else {
			openDefaultFailureToast();
		}
	};

	const listOfItemsPerPageValidationError =
		requiredListOfItemsPerPageValidationError ||
		invalidNumberInListOfItemsPerPageValidationError ||
		invalidListOfItemsPerPageLengthValidationError;

	const defaultItemsPerPageValidationError =
		incompatibleDefaultItemsPerPageValidationError ||
		requiredDefaultItemsPerPageValidationError;

	return (
		
			
				
					

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

					

						{Liferay.Language.get(
							'data-set-view-pagination-description'
						)}
					
				

				
					
						
							{Liferay.Language.get('list-of-items-per-page')}

							
						

						 {
								const itemsPerPageArray =
									getItemsPerPageArray();

								listOfItemsPerPageFieldValidation(
									itemsPerPageArray
								);

								compatibilityValidation(itemsPerPageArray);

								setRequiredListOfItemsPerPageValidationError(
									!listOfItemsPerPageRef.current?.value
								);
							}}
							onChange={(event) =>
								setListOfItemsPerPage(event.target.value)
							}
							ref={listOfItemsPerPageRef}
							required
							type="text"
							value={listOfItemsPerPage}
						/>

						{listOfItemsPerPageValidationError && (
							
								
									

									{requiredListOfItemsPerPageValidationError
										? Liferay.Language.get(
												'this-field-is-required'
											)
										: invalidNumberInListOfItemsPerPageValidationError
											? Liferay.Language.get(
													'this-field-contains-an-invalid-number'
												)
											: Liferay.Language.get(
													'this-field-contains-more-than-25-elements'
												)}
								
							
						)}

						
							{Liferay.Language.get(
								'list-of-items-per-page-help'
							)}
						
					

					
						
							{Liferay.Language.get('default-items-per-page')}

							
						

						 {
								compatibilityValidation(getItemsPerPageArray());

								setRequiredDefaultItemsPerPageValidationError(
									!defaultItemsPerPageRef.current?.value
								);
							}}
							onChange={(event) =>
								setDefaultItemsPerPage(event.target.value)
							}
							ref={defaultItemsPerPageRef}
							type="number"
							value={defaultItemsPerPage}
						/>

						{defaultItemsPerPageValidationError && (
							
								
									

									{requiredDefaultItemsPerPageValidationError
										? Liferay.Language.get(
												'this-field-is-required'
											)
										: Liferay.Language.get(
												'the-default-value-must-exist-in-the-list-of-items-per-page'
											)}
								
							
						)}

						
							{Liferay.Language.get(
								'default-items-per-page-help'
							)}
						
					
				

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

						 navigate(backURL)}
						>
							{Liferay.Language.get('cancel')}
						
					
				
			
		
	);
}

export default Pagination;