META-INF.resources.js.components.ObjectView.ViewBuilderScreen.ViewBuilderScreen.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 {useModal} from '@clayui/modal';
import {
	BuilderScreen,
	Card,
	stringUtils,
} from '@liferay/object-js-components-web';
import React, {useState} from 'react';

import {ModalEditViewColumn} from '../ModalEditViewColumn/ModalEditViewColumn';
import {TYPES, useViewContext} from '../objectViewContext';

const ViewBuilderScreen: React.FC<
	{children?: React.ReactNode | undefined} & {}
> = () => {
	const [visibleEditModal, setVisibleEditModal] = useState(false);
	const [editingObjectFieldName, setEditingObjectFieldName] = useState('');

	const {observer, onClose} = useModal({
		onClose: () => setVisibleEditModal(false),
	});

	const [
		{
			creationLanguageId,
			objectFields,
			objectView: {objectViewColumns},
		},
		dispatch,
	] = useViewContext();

	const selected = objectViewColumns.map((objectViewColumn) => {
		return objectFields.find(
			(objectField) =>
				objectViewColumn.objectFieldName === objectField.name
		);
	});

	const handleAddColumns = () => {
		const parentWindow = Liferay.Util.getOpener();

		parentWindow.Liferay.fire('openModalSelectObjectFields', {
			getName: ({label, name}: ObjectField) =>
				stringUtils.getLocalizableLabel({
					fallbackLabel: name,
					fallbackLanguageId: creationLanguageId,
					labels: label,
				}),
			header: Liferay.Language.get('add-columns'),
			items: objectFields.map((objectField) => {
				return {
					...objectField,
					disableCheckbox: false,
				};
			}),
			onSave: (selectedObjectFields: ObjectField[]) =>
				dispatch({
					payload: {
						creationLanguageId,
						selectedObjectFields,
					},
					type: TYPES.ADD_OBJECT_VIEW_COLUMN,
				}),
			selected,
			showModal: true,
			title: Liferay.Language.get('select-the-columns'),
		});
	};

	const handleChangeColumnOrder = (
		draggedIndex: number,
		targetIndex: number
	) => {
		dispatch({
			payload: {draggedIndex, targetIndex},
			type: TYPES.CHANGE_OBJECT_VIEW_COLUMN_ORDER,
		});
	};

	const handleDeleteColumn = (objectFieldName: string) => {
		dispatch({
			payload: {objectFieldName},
			type: TYPES.DELETE_OBJECT_VIEW_COLUMN,
		});

		dispatch({
			payload: {objectFieldName},
			type: TYPES.DELETE_OBJECT_VIEW_SORT_COLUMN,
		});
	};

	return (
		<>
			
				
			

			{visibleEditModal && (
				
			)}
		
	);
};

export default ViewBuilderScreen;