META-INF.resources.js.components.Layout.LayoutScreen.ModalAddObjectLayoutField.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 {
	FormError,
	SingleSelect,
	constantsUtils,
	stringUtils,
	useForm,
} from '@liferay/object-js-components-web';
import classNames from 'classnames';
import React, {useMemo, useState} from 'react';

import {TYPES, useLayoutContext} from '../objectLayoutContext';

import './ModalAddObjectLayoutField.scss';

const objectFieldSizes = [1, 2, 3];

type TInitialValues = {
	objectFieldName: string;
	objectFieldSize: number;
};

interface IBoxBtnColumnsProps {
	setValues: (values: Partial) => void;
}

function BoxBtnColumns({setValues}: IBoxBtnColumnsProps) {
	const [activeIndex, setActiveIndex] = useState(0);

	return (
		
			{objectFieldSizes.map((objectFieldSize, objectFieldSizeIndex) => {
				const columns = [];

				for (let index = 0; index < objectFieldSize; index++) {
					columns.push(
						
					);
				}

				return (
					
				);
			})}
		
	);
}

interface IProps extends React.HTMLAttributes {
	boxIndex: number;
	observer: Observer;
	onClose: () => void;
	tabIndex: number;
}

interface ObjectFieldItem {
	businessType: ObjectFieldBusinessTypeName;
	label: string;
	readOnly: string;
	required: boolean;
	value: number;
}

export default function ModalAddObjectLayoutField({
	boxIndex,
	observer,
	onClose,
	tabIndex,
}: IProps) {
	const [{objectFields}, dispatch] = useLayoutContext();
	const [selectedObjectFieldId, setSelectedObjectFieldId] =
		useState();

	const objectFieldItems = useMemo(() => {
		const availableObjectFields: ObjectFieldItem[] = [];

		objectFields.map(
			({businessType, id, inLayout, label, name, readOnly, required}) => {
				if (!inLayout) {
					availableObjectFields.push({
						businessType,
						label: stringUtils.getLocalizableLabel({
							fallbackLabel: name,
							labels: label,
						}),
						readOnly,
						required,
						value: id,
					});
				}
			}
		);

		return availableObjectFields;
	}, [objectFields]);

	const onSubmit = (values: TInitialValues) => {
		dispatch({
			payload: {
				boxIndex,
				objectFieldName: values.objectFieldName,
				objectFieldSize: 12 / Number(values.objectFieldSize),
				tabIndex,
			},
			type: TYPES.ADD_OBJECT_LAYOUT_FIELD,
		});

		onClose();
	};

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

		if (!values.objectFieldName) {
			errors.objectFieldName = constantsUtils.REQUIRED_MSG;
		}

		return errors;
	};

	const initialValues: TInitialValues = {
		objectFieldName: '',
		objectFieldSize: 1,
	};

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

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

				
					 {
							const selectedObjectField = objectFields.find(
								({id}) => id.toString() === value
							);

							setSelectedObjectFieldId(
								selectedObjectField?.id.toString()
							);

							setValues({
								objectFieldName: selectedObjectField?.name,
							});
						}}
						required
						selectedKey={selectedObjectFieldId}
					>
						{({businessType, label, readOnly, required, value}) => (
							
						)}
					

					
				

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

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