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

META-INF.resources.js.components.modals.EditAPIPropertyModalContent.tsx Maven / Gradle / Ivy

Go to download

Liferay Headless Builder Web

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 from '@clayui/modal';
import classNames from 'classnames';
import {openToast} from 'frontend-js-web';
import React, {Dispatch, SetStateAction, useEffect, useState} from 'react';

import {Select} from '../fieldComponents/Select';

type DataError = {
	dataType: boolean;
	mappedProperty: boolean;
	name: boolean;
};

interface PropertyUIData {
	dataType: ObjectFieldBusinessType;
	description: string;
	mappedProperty: string;
	name: string;
}

interface EditAPIPropertyModalContentProps extends Partial {
	closeModal: voidReturn;
	setSchemaUIData: Dispatch>;
}

export default function EditAPIPropertyModalContent({
	businessType,
	closeModal,
	description,
	name,
	objectFieldId,
	objectFieldName,
	setSchemaUIData,
}: EditAPIPropertyModalContentProps) {
	const [localUIData, setLocalUIData] = useState>({
		dataType: businessType,
		description,
		mappedProperty: objectFieldName,
		name,
	});

	const [displayError, setDisplayError] = useState({
		dataType: false,
		mappedProperty: false,
		name: false,
	});

	useEffect(() => {
		for (const key in localUIData) {
			if (localUIData[key as keyof PropertyUIData] !== '') {
				setDisplayError((previousErrors) => ({
					...previousErrors,
					[key]: false,
				}));
			}
		}
	}, [localUIData]);

	function validateData() {
		let isDataValid = true;
		const mandatoryFields = ['dataType', 'mappedProperty', 'name'];

		if (!Object.keys(localUIData).length) {
			const errors = mandatoryFields.reduce(
				(errors, field) => ({...errors, [field]: true}),
				{}
			);
			setDisplayError(errors as DataError);

			isDataValid = false;
		}
		else {
			mandatoryFields.forEach((field) => {
				if (localUIData[field as keyof PropertyUIData]) {
					setDisplayError((previousErrors) => ({
						...previousErrors,
						[field]: false,
					}));
				}
				else {
					setDisplayError((previousErrors) => ({
						...previousErrors,
						[field]: true,
					}));
					isDataValid = false;
				}
			});
		}

		return isDataValid;
	}

	const handleUpdate = () => {
		const isDataValid = validateData();

		if (isDataValid) {
			setSchemaUIData((previous) =>
				previous.schemaProperties
					? {
							...previous,
							schemaProperties: previous.schemaProperties.map(
								(property) =>
									property.objectFieldId !== objectFieldId
										? property
										: {
												...property,
												...localUIData,
											}
							),
						}
					: previous
			);
			closeModal();
			openToast({
				message: Liferay.Language.get('schema-property-was-updated'),
				type: 'success',
			});
		}
		else {
			return;
		}
	};

	return (
		<>
			
				{Liferay.Language.get('edit-property')}
			

			

				
					
						

						
								setLocalUIData((previous) => ({
									...previous,
									name: value,
								}))
							}
							onKeyPress={(event) =>
								event.key === 'Enter' && event.preventDefault()
							}
							placeholder={Liferay.Language.get('enter-name')}
							value={localUIData.name}
						/>

						

							
								{displayError.name && (
									
										

										
											{Liferay.Language.get(
												'please-enter-a-property-name'
											)}
										
									
								)}