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

META-INF.resources.sxp_blueprint_admin.js.shared.EditERCModal.js Maven / Gradle / Ivy

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 ClayForm, {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayModal, {useModal} from '@clayui/modal';
import getCN from 'classnames';
import {fetch} from 'frontend-js-web';
import React, {useContext, useRef, useState} from 'react';

import {DEFAULT_HEADERS} from '../utils/fetch/fetch_data';
import sub from '../utils/language/sub';
import ThemeContext from './ThemeContext';

const externalReferenceCodeRegex = new RegExp('^([\\w\\d-_]+)$');

export function ERCModal({
	initialExternalReferenceCode = '',
	observer,
	onClose,
	onSubmit,
}) {
	const {sxpType} = useContext(ThemeContext);

	const [externalReferenceCode, setExternalReferenceCode] = useState(
		initialExternalReferenceCode
	);
	const [error, setError] = useState('');

	const externalReferenceCodeInputRef = useRef();

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

		const validateUrl =
			sxpType === 'sxpElement'
				? '/o/search-experiences-rest/v1.0/sxp-elements/validate'
				: '/o/search-experiences-rest/v1.0/sxp-blueprints/validate';

		if (!externalReferenceCode.trim()) {
			setError(Liferay.Language.get('this-field-is-required'));

			externalReferenceCodeInputRef.current.focus();

			return;
		}

		if (!externalReferenceCodeRegex.test(externalReferenceCode.trim())) {
			setError(
				Liferay.Language.get(
					'please-enter-only-alphanumeric-characters-dashes-or-underscores'
				)
			);

			externalReferenceCodeInputRef.current.focus();

			return;
		}

		if (externalReferenceCode.trim() === initialExternalReferenceCode) {
			onClose();

			return;
		}

		// Verify that the external reference code is unique if it has changed.

		fetch(validateUrl, {
			body: JSON.stringify({
				externalReferenceCode,
			}),
			headers: DEFAULT_HEADERS,
			method: 'POST',
		})
			.then((response) => {
				return response.json().then((data) => ({
					ok: response.ok,
					responseContent: data,
				}));
			})
			.then(({ok, responseContent}) => {
				if (!ok) {
					if (
						responseContent.type ===
							'DuplicateSXPBlueprintExternalReferenceCodeException' ||
						responseContent.type ===
							'DuplicateSXPElementExternalReferenceCodeException'
					) {
						setError(
							sub(
								Liferay.Language.get('the-x-is-already-in-use'),
								[
									Liferay.Language.get(
										'external-reference-code'
									),
								]
							)
						);

						externalReferenceCodeInputRef.current.focus();

						return;
					}
					else {
						throw Error();
					}
				}

				onSubmit(externalReferenceCode.trim());
				onClose();
			})
			.catch(() => {
				setError(Liferay.Language.get('an-unexpected-error-occurred'));
			});
	};

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

		setExternalReferenceCode(event.target.value);
	};

	return (
		
			
				
					{sub(Liferay.Language.get('edit-x'), [
						Liferay.Language.get('external-reference-code'),
					])}
				

				
					
						

						

						{error && (
							
{error}
)}
{Liferay.Language.get('cancel')} {Liferay.Language.get('done')} } />
); } export default function EditERCModal({ children, disabled = false, externalReferenceCode, onSubmit, }) { const [visible, setVisible] = useState(false); const {observer, onClose} = useModal({ onClose: () => setVisible(false), }); const _handleOpen = () => { setVisible(true); }; return ( <> {visible && ( )} {disabled ? ( children ) : ( {children} )} ); }




© 2015 - 2025 Weber Informatics LLC | Privacy Policy