META-INF.resources.js.components.ModelBuilder.RightSidebar.RightSidebarObjectRelationshipDetails.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) 2023 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import {ClayButtonWithIcon} from '@clayui/button';
import ClayLoadingIndicator from '@clayui/loading-indicator';
import ClayPanel from '@clayui/panel';
import {API, stringUtils} from '@liferay/object-js-components-web';
import {openToast} from 'frontend-js-components-web';
import {createResourceURL, sub} from 'frontend-js-web';
import React, {useEffect, useState} from 'react';
import {isEdge, isNode} from 'react-flow-renderer';

import {EditObjectRelationshipContent} from '../../ObjectRelationship/EditObjectRelationshipContent';
import {ModalDeleteObjectRelationship} from '../../ObjectRelationship/ModalDeleteObjectRelationship';
import {useObjectRelationshipForm} from '../../ObjectRelationship/useObjectRelationshipForm';
import {getUpdatedModelBuilderStructurePayload} from '../../ViewObjectDefinitions/objectDefinitionUtil';
import {useObjectFolderContext} from '../ModelBuilderContext/objectFolderContext';
import {TYPES} from '../ModelBuilderContext/typesEnum';

import './RightSidebarObjectRelationshipDetails.scss';

import type {Edge, Elements, Node} from 'react-flow-renderer';

import type {ObjectRelationshipEdgeData} from '../types';

interface RightSidebarObjectRelationshipDetailsProps {
	objectRelationshipDeletionTypes: LabelValueObject[];
}

export function RightSidebarObjectRelationshipDetails({
	objectRelationshipDeletionTypes,
}: RightSidebarObjectRelationshipDetailsProps) {
	const [
		{
			baseResourceURL,
			elements,
			learnResourceContext,
			selectedObjectFolder,
			selectedObjectRelationship,
		},
		dispatch,
	] = useObjectFolderContext();
	const [loading, setLoading] = useState(false);
	const [
		objectRelationshipParameterRequired,
		setObjectRelationshipParameterRequired,
	] = useState(false);
	const [
		objectRelationshipRestContextPath,
		setObjectRelationshipRestContextPath,
	] = useState('');
	const [readOnly, setReadOnly] = useState(true);

	const [showModal, setShowModal] = useState>({
		deleteObjectRelationship: false,
	});

	const {errors, handleChange, handleValidate, setValues, values} =
		useObjectRelationshipForm({
			initialValues: {
				id: 0,
				label: {},
				name: '',
			},
			onSubmit: () => {},
			parameterRequired: false,
		});

	useEffect(() => {
		const makeFetch = async () => {
			if (selectedObjectRelationship) {
				setLoading(true);
				const selectedObjectRelationshipResponse =
					(await API.getObjectRelationship(
						selectedObjectRelationship.id
					)) as ObjectRelationship;

				setValues(selectedObjectRelationshipResponse);

				const url = createResourceURL(baseResourceURL, {
					objectDefinitionId:
						selectedObjectRelationshipResponse.objectDefinitionId1,
					p_p_resource_id:
						'/object_definitions/get_object_relationship_info',
				}).href;

				const {parameterRequired, restContextPath} =
					await API.fetchJSON<{
						parameterRequired: boolean;
						restContextPath: string;
					}>(url);

				setObjectRelationshipParameterRequired(parameterRequired);
				setObjectRelationshipRestContextPath(restContextPath ?? '');

				const nodeObjectDefinition1 = elements.find(
					(element) =>
						isNode(element) &&
						element.id ===
							selectedObjectRelationshipResponse.objectDefinitionId1.toString()
				);

				if (nodeObjectDefinition1) {
					const readOnly =
						!(
							nodeObjectDefinition1 as Node
						).data?.hasObjectDefinitionUpdateResourcePermission ||
						selectedObjectRelationshipResponse.reverse;

					setReadOnly(readOnly);
				}
				setLoading(false);
			}
		};

		makeFetch();

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

	const onSubmit = async (
		objectRelationship: Partial = values
	) => {
		const validationErrors = handleValidate();

		if (!Object.keys(validationErrors).length) {
			try {
				await API.putObjectRelationship(objectRelationship);

				dispatch({
					payload: {
						updatedShowChangesSaved: true,
					},
					type: TYPES.SET_SHOW_CHANGES_SAVED,
				});

				openToast({
					message: Liferay.Language.get(
						'the-object-relationship-was-updated-successfully'
					),
				});
			}
			catch (error: unknown) {
				const {message} = error as Error;

				openToast({autoClose: 15000, message, type: 'danger'});
			}

			if (!objectRelationship || !objectRelationship?.id) {
				return;
			}

			const updatedElements = elements.map((currentElement) => {
				if (isEdge(currentElement)) {
					return {
						...currentElement,
						data: (
							currentElement as Edge
						).data?.map((objectRelationshipEdgeData) => {
							if (
								objectRelationshipEdgeData.id ===
								objectRelationship?.id
							) {
								return {
									...objectRelationshipEdgeData,
									label: stringUtils.getLocalizableLabel({
										fallbackLabel: objectRelationship.name,
										labels: objectRelationship.label,
									}),
								};
							}

							return objectRelationshipEdgeData;
						}),
					};
				}

				return currentElement;
			}) as Elements<
				ObjectDefinitionNodeData | ObjectRelationshipEdgeData[]
			>;

			dispatch({
				payload: {
					newElements: updatedElements,
				},
				type: TYPES.SET_ELEMENTS,
			});
		}
	};

	const updateModelBuilderStructure = async () => {
		const payload = await getUpdatedModelBuilderStructurePayload(
			baseResourceURL,
			selectedObjectFolder.name
		);

		dispatch({
			payload: {...payload, dispatch, rightSidebarType: 'empty'},
			type: TYPES.UPDATE_MODEL_BUILDER_STRUCTURE,
		});
	};

	const updateModelBuilderRootStructure = async () => {
		const payload = await getUpdatedModelBuilderStructurePayload(
			baseResourceURL,
			selectedObjectFolder.name
		);

		dispatch({
			payload: {
				...payload,
				dispatch,
				rightSidebarType: 'objectRelationshipDetails',
				selectedObjectRelationshipId: selectedObjectRelationship?.id,
			},
			type: TYPES.UPDATE_MODEL_BUILDER_STRUCTURE,
		});

		dispatch({
			payload: {
				selectedObjectRelationshipId:
					selectedObjectRelationship?.id as number,
			},
			type: TYPES.SET_SELECTED_OBJECT_RELATIONSHIP_EDGE,
		});
	};

	const handleInheritanceCheckboxChange = async ({
		target,
	}: React.ChangeEvent) => {
		if (target.checked) {
			setValues({
				...values,
				edge: true,
			});

			await onSubmit({...values, edge: true});

			await updateModelBuilderRootStructure();
		}
		else {
			const parentWindow = Liferay.Util.getOpener();

			parentWindow.Liferay.fire('openModalDisableInheritance', {
				handleDisable: async () => {
					setValues({
						...values,
						edge: false,
					});

					await onSubmit({...values, edge: false});

					await updateModelBuilderRootStructure();
				},
			});
		}
	};

	return (
		<>
			
				
					
						{sub(
							Liferay.Language.get('x-details'),
							Liferay.Language.get('relationship')
						)}
					
				

				
					
							setShowModal({
								deleteObjectRelationship: true,
							})
						}
						symbol="trash"
						title={Liferay.Language.get('delete-relationship')}
					/>
				
			

			
				{!loading && values.objectDefinitionExternalReferenceCode1 ? (
					
				) : (
					
				)}
			

			{showModal.deleteObjectRelationship && (
				
						setShowModal({
							deleteObjectRelationship: false,
						})
					}
					objectRelationship={values as ObjectRelationship}
					onAfterSubmit={() => updateModelBuilderStructure()}
					reload={false}
				/>
			)}
		
	);
}