META-INF.resources.js.components.Layout.LayoutScreen.ObjectLayoutTabs.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 ClayIcon from '@clayui/icon';
import ClayLabel from '@clayui/label';
import {useModal} from '@clayui/modal';
import {
	Panel,
	PanelBody,
	PanelHeader,
	stringUtils,
} from '@liferay/object-js-components-web';
import React, {useState} from 'react';

import {defaultLanguageId} from '../../../utils/constants';
import {TYPES, useLayoutContext} from '../objectLayoutContext';
import {HeaderDropdown} from './HeaderDropdown';
import {ModalAddObjectLayoutBox} from './ModalAddObjectLayoutBox';
import {ObjectLayoutBox} from './ObjectLayoutBox';
import {ObjectLayoutRelationship} from './ObjectLayoutRelationship';

const ObjectLayoutTabs: React.FC> = () => {
	const [{creationLanguageId, isViewOnly, objectLayout}, dispatch] =
		useLayoutContext();
	const [visibleModal, setVisibleModal] = useState(false);
	const [selectedTabIndex, setSelectedTabIndex] = useState(0);
	const {observer, onClose} = useModal({
		onClose: () => setVisibleModal(false),
	});

	return (
		<>
			{objectLayout?.objectLayoutTabs?.map(
				({name, objectLayoutBoxes, objectRelationshipId}, tabIndex) => {
					const isRelationshipType =
						objectRelationshipId !== 0 && objectRelationshipId;
					const labelDisplayType = isRelationshipType
						? 'warning'
						: 'info';

					return (
						
							
										{isRelationshipType
											? Liferay.Language.get(
													'relationships'
												)
											: Liferay.Language.get('fields')}
									
								}
								contentRight={
									<>
										{!isRelationshipType && (
											 {
													setVisibleModal(true);
													setSelectedTabIndex(
														tabIndex
													);
												}}
												small
											>
												

												
													{Liferay.Language.get(
														'add-block'
													)}
												
											
										)}

										 {
												dispatch({
													payload: {
														name: {
															[defaultLanguageId]:
																Liferay.Language.get(
																	'categorization'
																),
														},
														tabIndex,
														type: 'categorization',
													},
													type: TYPES.ADD_OBJECT_LAYOUT_BOX,
												});
											}}
											deleteElement={() => {
												dispatch({
													payload: {
														tabIndex,
													},
													type: TYPES.DELETE_OBJECT_LAYOUT_TAB,
												});
											}}
										/>
									
								}
								title={stringUtils.getLocalizableLabel({
									fallbackLanguageId: creationLanguageId,
									labels: name,
								})}
								type="regular"
							/>

							{!!objectLayoutBoxes?.length &&
								!isRelationshipType && (
									
										{objectLayoutBoxes.map(
											(
												{
													collapsable,
													name,
													objectLayoutRows,
													type,
												},
												boxIndex
											) => (
												
											)
										)}
									
								)}

							{isRelationshipType && (
								
									
								
							)}
						
					);
				}
			)}

			{visibleModal && (
				
			)}
		
	);
};

export default ObjectLayoutTabs;