META-INF.resources.js.components.Layout.LayoutScreen.ModalAddObjectLayoutTab.tsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.object.web
Liferay Object 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 {Option} from '@clayui/core';
import ClayForm from '@clayui/form';
import ClayLabel from '@clayui/label';
import ClayModal from '@clayui/modal';
import {Observer} from '@clayui/modal/lib/types';
import {ClayTooltipProvider} from '@clayui/tooltip';
import {
	FormError,
	Input,
	SingleSelect,
	constantsUtils,
	stringUtils,
	useForm,
} from '@liferay/object-js-components-web';
import classNames from 'classnames';
import React, {useMemo, useState} from 'react';

import {defaultLanguageId} from '../../../utils/constants';
import {TYPES as EVENT_TYPES, useLayoutContext} from '../objectLayoutContext';
import {TObjectLayoutTab, TObjectRelationship} from '../types';

import './ModalAddObjectLayoutTab.scss';

type TTabTypes = {
	[key: string]: {
		active: boolean;
		description: string;
		label: string;
	};
};

type TLabelInfo = {
	displayType: 'info' | 'secondary' | 'success';
	labelContent: string;
};

const TYPES = {
	FIELDS: 'fields',
	RELATIONSHIPS: 'relationships',
};

const types: TTabTypes = {
	[TYPES.FIELDS]: {
		active: true,
		description: Liferay.Language.get(
			'display-fields-and-one-to-one-relationships'
		),
		label: Liferay.Language.get('fields'),
	},
	[TYPES.RELATIONSHIPS]: {
		active: false,
		description: Liferay.Language.get('display-multiple-relationships'),
		label: Liferay.Language.get('relationships'),
	},
};

interface ModalAddObjectLayoutTabProps
	extends React.HTMLAttributes {
	observer: Observer;
	onClose: () => void;
}

interface TabTypeProps extends React.HTMLAttributes {
	description: string;
	disabled?: boolean;
	disabledMessage?: string;
	label: string;
	onChangeType: (type: string) => void;
	selected: string;
	type: string;
}

interface ObjectRelationshipItem extends LabelValueObject {
	reverse: boolean;
}

function TabType({
	description,
	disabled = false,
	label,
	onChangeType,
	selected,
	type,
}: TabTypeProps) {
	const tabProps = {
		'data-tooltip-align': 'top',
		'onClick': () => {},
		'title': Liferay.Language.get(
			'the-first-tab-in-the-layout-cannot-be-a-relationship-tab'
		),
	};

	return (
		
			 onChangeType(type)}
				{...(disabled && tabProps)}
			>
				{label}

				
					{description}
				
			
		
	);
}

function getRelationshipInfo(reverse: boolean): TLabelInfo {
	return {
		displayType: reverse ? 'info' : 'success',
		labelContent: reverse
			? Liferay.Language.get('child')
			: Liferay.Language.get('parent'),
	};
}

export function ModalAddObjectLayoutTab({
	observer,
	onClose,
}: ModalAddObjectLayoutTabProps) {
	const [
		{
			creationLanguageId,
			objectLayout: {objectLayoutTabs},
			objectRelationships,
		},
		dispatch,
	] = useLayoutContext();
	const [selectedType, setSelectedType] = useState(TYPES.FIELDS);
	const [selectedRelationship, setSelectedRelationship] =
		useState();

	const objectRelationshipItems = useMemo(() => {
		const availableObjectRelationships: ObjectRelationshipItem[] = [];

		objectRelationships.forEach(({id, inLayout, label, name, reverse}) => {
			if (!inLayout) {
				availableObjectRelationships.push({
					label: stringUtils.getLocalizableLabel({
						fallbackLabel: name,
						fallbackLanguageId: creationLanguageId,
						labels: label,
					}),
					reverse,
					value: id.toString(),
				});
			}
		});

		return availableObjectRelationships;
	}, [creationLanguageId, objectRelationships]);

	const onSubmit = (values: TObjectLayoutTab) => {
		dispatch({
			payload: {
				name: {
					[defaultLanguageId]: values.name[defaultLanguageId],
				},
				objectRelationshipId: values.objectRelationshipId,
			},
			type: EVENT_TYPES.ADD_OBJECT_LAYOUT_TAB,
		});

		onClose();
	};

	const onValidate = (values: Partial) => {
		const errors: FormError = {};

		if (
			!stringUtils.getLocalizableLabel({
				fallbackLanguageId: creationLanguageId,
				labels: values.name,
			})
		) {
			errors.name = constantsUtils.REQUIRED_MSG;
		}

		if (
			!values.objectRelationshipId &&
			selectedType === TYPES.RELATIONSHIPS
		) {
			errors.objectRelationshipId = constantsUtils.REQUIRED_MSG;
		}

		return errors;
	};

	const {errors, handleSubmit, setValues, values} = useForm(
		{
			initialValues: {},
			onSubmit,
			validate: onValidate,
		}
	);

	return (
		
			
				
					{Liferay.Language.get('add-tab')}
				

				
					 {
							setValues({
								name: {
									[defaultLanguageId]: value,
								},
							});
						}}
						required
						value={stringUtils.getLocalizableLabel({
							fallbackLanguageId: creationLanguageId,
							labels: values.name,
						})}
					/>

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

						{Object.keys(types).map((key) => {
							const {description, label} = types[key];

							return (
								
							);
						})}
					

					{selectedType === TYPES.RELATIONSHIPS && (
						 {
								const selectedObjectRelationship =
									objectRelationships.find(
										({id}) => id.toString() === value
									);

								setSelectedRelationship(
									selectedObjectRelationship
								);
								setValues({
									objectRelationshipId:
										selectedObjectRelationship?.id,
								});
							}}
							required
							selectedKey={selectedRelationship?.id.toString()}
						>
							{({label, reverse, value}) => {
								const relationshipInfo =
									getRelationshipInfo(reverse);

								return (
									
								);
							}}
						
					)}
				

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

							
								{Liferay.Language.get('save')}
							
						
					}
				/>
			
		
	);
}