META-INF.resources.js.components.ObjectField.EditObjectFieldContent.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 ClayTabs from '@clayui/tabs';
import {API, SidebarCategory} from '@liferay/object-js-components-web';
import classNames from 'classnames';
import {createResourceURL, fetch} from 'frontend-js-web';
import React, {ElementType, useEffect, useState} from 'react';

import {EditObjectFieldProps} from './EditObjectField';
import {ObjectFieldErrors} from './ObjectFieldFormBase';
import {AdvancedTab} from './Tabs/Advanced/AdvancedTab';
import {BasicInfoTab} from './Tabs/BasicInfo/BasicInfoTab';

import './EditObjectFieldContent.scss';

interface EditObjectFieldContentProps
	extends Omit<
		EditObjectFieldProps,
		| 'forbiddenChars'
		| 'forbiddenLastChars'
		| 'forbiddenNames'
		| 'objectDefinitionExternalReferenceCode'
		| 'objectFieldId'
	> {
	containerWrapper: ElementType;
	errors: ObjectFieldErrors;
	handleChange: React.ChangeEventHandler;
	modelBuilder?: boolean;
	objectDefinitionExternalReferenceCode: string;
	objectFieldId: number;
	onSubmit?: (editedObjectField?: Partial) => void;
	setValues: (values: Partial) => void;
	values: Partial;
}

const TABS = [Liferay.Language.get('basic-info')];

export function EditObjectFieldContent({
	baseResourceURL,
	containerWrapper,
	creationLanguageId,
	errors,
	filterOperators,
	handleChange,
	isDefaultStorageType,
	isRootDescendantNode,
	learnResources,
	modelBuilder = false,
	objectDefinitionExternalReferenceCode,
	objectFieldId,
	onSubmit,
	readOnly,
	setValues,
	values,
	workflowStatuses,
}: EditObjectFieldContentProps) {
	const [activeIndex, setActiveIndex] = useState(0);

	const [dbObjectFieldRequired, setDbObjectFieldRequired] =
		useState();
	const [objectDefinition, setObjectDefinition] =
		useState();
	const [objectFieldBusinessTypes, setObjectFieldBusinessTypes] = useState<
		ObjectFieldBusinessType[]
	>([]);
	const [objectRelationshipId, setObjectRelationshipId] = useState(0);
	const [readOnlySidebarElements, setReadOnlySidebarElements] = useState<
		SidebarCategory[]
	>([]);
	const [sidebarElements, setSidebarElements] = useState(
		[]
	);

	if (
		(isDefaultStorageType || values.businessType === 'Picklist') &&
		TABS.length < 2
	) {
		TABS.push(Liferay.Language.get('advanced'));
	}

	useEffect(() => {
		const makeFetch = async () => {
			const objectFieldResponse = await API.getObjectField(objectFieldId);

			setDbObjectFieldRequired(objectFieldResponse.required);
			setValues(objectFieldResponse);

			if (objectDefinitionExternalReferenceCode) {
				const objectDefinitionResponse =
					await API.getObjectDefinitionByExternalReferenceCode(
						objectDefinitionExternalReferenceCode
					);

				setObjectDefinition(objectDefinitionResponse);
			}
		};

		makeFetch();

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	useEffect(() => {
		const makeFetch = async () => {
			if (values.id !== 0) {
				const url = createResourceURL(baseResourceURL, {
					objectFieldId: values?.id,
					p_p_resource_id:
						'/object_definitions/get_object_field_info',
				}).href;

				const objectFieldInfoResponse = await fetch(url, {
					method: 'GET',
				});

				const objectFieldInfoJSON =
					(await objectFieldInfoResponse.json()) as {
						objectFieldBusinessTypes: ObjectFieldBusinessType[];
						objectRelationshipId: number;
						readOnlySidebarElements: SidebarCategory[];
						sidebarElements: SidebarCategory[];
					};

				if (values.businessType === 'Relationship') {
					setObjectRelationshipId(
						objectFieldInfoJSON.objectRelationshipId
					);
				}

				setObjectFieldBusinessTypes(
					objectFieldInfoJSON.objectFieldBusinessTypes
				);
				setReadOnlySidebarElements(
					objectFieldInfoJSON.readOnlySidebarElements
				);
				setSidebarElements(objectFieldInfoJSON.sidebarElements);
			}
		};

		makeFetch();

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [baseResourceURL, values.id]);

	return (
		<>
			{isDefaultStorageType || values.businessType === 'Picklist' ? (
				<>
					
						{TABS.map((label, index) => (
							 setActiveIndex(index)}
							>
								{label}
							
						))}
					

					
						
							
						

						
							
						
					
				
			) : (
				
			)}
		
	);
}