META-INF.resources.js.components.ObjectAction.PredefinedValuesTable.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 {ClayCheckbox} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayLoadingIndicator from '@clayui/loading-indicator';
import {ClayTooltipProvider} from '@clayui/tooltip';
import {FrontendDataSet} from '@liferay/frontend-data-set-web';
import {
	Card,
	DatePicker,
	ExpressionBuilder,
	onActionDropdownItemClick,
	openToast,
	stringUtils,
} from '@liferay/object-js-components-web';
import React, {useEffect, useMemo, useState} from 'react';

import './PredefinedValuesTable.scss';

interface PredefinedValueTableProps {
	creationLanguageId: Liferay.Language.Locale;
	currentObjectDefinitionFields: ObjectField[];
	disableRequiredChecked?: boolean;
	errors: {[key: string]: string};
	objectFieldsMap: Map;
	predefinedValues?: PredefinedValue[];
	setValues: (params: Partial) => void;
	title?: string;
	validateExpressionURL: string;
	values: Partial;
}

interface PredefinedValueTableItem {
	inputAsValue: JSX.Element;
	label: JSX.Element;
	name: string;
	newValue: JSX.Element;
}

export default function PredefinedValuesTable({
	creationLanguageId,
	currentObjectDefinitionFields,
	disableRequiredChecked,
	errors,
	objectFieldsMap,
	setValues,
	title,
	validateExpressionURL,
	values,
}: PredefinedValueTableProps) {
	const [reloadFDS, setReloadFDS] = useState(false);
	const {predefinedValues = []} = values.parameters as ObjectActionParameters;

	const items = useMemo(() => {
		const updatePredefinedValues = (name: string, value: string) => {
			const updatedPredefinedValues = predefinedValues.map(
				(objectField) => {
					return objectField.name === name
						? {...objectField, value}
						: objectField;
				}
			);

			return updatedPredefinedValues;
		};

		const predefinedErrors = new Map();

		if (errors) {
			Object.entries(errors).forEach(([key, value]) => {
				predefinedErrors.set(key, value);
			});
		}

		return predefinedValues.map(
			({businessType, inputAsValue, label, name, value}) => {
				const isDateTime = businessType === 'DateTime';
				const renderDatePicker =
					(businessType === 'Date' && inputAsValue) || isDateTime;

				return {
					inputAsValue: (
						
							 {
									const newPredefinedValues =
										predefinedValues.map((objectField) => {
											return objectField.name === name
												? {
														...objectField,
														inputAsValue: checked,
													}
												: objectField;
										});
									setValues({
										parameters: {
											...values.parameters,
											predefinedValues:
												newPredefinedValues,
										},
									});
								}}
							/>

							
								
									
								
							
						
					),

					label: (
						
							{stringUtils.getLocalizableLabel({
								fallbackLabel: name,
								fallbackLanguageId: creationLanguageId,
								labels: label,
							})}

							{objectFieldsMap.get(name)?.required === true && (
								
									
								
							)}
						
					),

					name,

					newValue: (
						
							{renderDatePicker ? (
								 {
										setValues({
											parameters: {
												...values.parameters,
												predefinedValues:
													updatePredefinedValues(
														name,
														value
													),
											},
										});
									}}
									type={businessType}
									value={value}
								/>
							) : (
								 {
										setValues({
											parameters: {
												...values.parameters,
												predefinedValues:
													updatePredefinedValues(
														name,
														value
													),
											},
										});
									}}
									onOpenModal={() => {
										const parentWindow =
											Liferay.Util.getOpener();

										parentWindow.Liferay.fire(
											'openExpressionBuilderModal',
											{
												onSave: (value: string) => {
													setValues({
														parameters: {
															...values.parameters,
															predefinedValues:
																updatePredefinedValues(
																	name,
																	value
																),
														},
													});
												},
												required:
													objectFieldsMap.get(name)
														?.required,
												source: value,
												validateExpressionURL,
											}
										);
									}}
									placeholder={
										inputAsValue
											? Liferay.Language.get(
													'input-a-value'
												)
											: Liferay.Language.get(
													'input-a-value-or-create-an-expression'
												)
									}
									value={value}
								/>
							)}
						
					),
				};
			}
		);
	}, [
		creationLanguageId,
		errors,
		objectFieldsMap,
		predefinedValues,
		setValues,
		validateExpressionURL,
		values.parameters,
		values.system,
	]);

	const handleReloadFDS = () => {
		setReloadFDS(true);

		setTimeout(() => setReloadFDS(false), 200);
	};

	useEffect(() => {
		const getSelectedObjectFields = () => {
			const objectFields: ObjectField[] = [];

			predefinedValues?.forEach(({name}) => {
				if (
					objectFieldsMap.has(name) ||
					objectFieldsMap.get(name)?.required
				) {
					const objectField = objectFieldsMap.get(name);
					objectFields.push(objectField as ObjectField);
				}
			});

			return objectFields;
		};

		const deletePredefinedValueObjectField = ({
			itemData,
		}: {
			itemData: PredefinedValueTableItem;
		}) => {
			const {name} = itemData;

			if (objectFieldsMap.get(name)?.required) {
				openToast({
					message: Liferay.Language.get(
						'required-fields-cannot-be-deleted'
					),
					type: 'danger',
				});

				return;
			}

			const newPredefinedValues = predefinedValues?.filter(
				(objectField) => objectField.name !== name
			);

			setValues({
				parameters: {
					...values.parameters,
					predefinedValues: newPredefinedValues,
				},
			});
		};

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

			parentWindow.Liferay.fire('openModalSelectObjectFields', {
				getLabel: ({label, name}: ObjectField) =>
					stringUtils.getLocalizableLabel({
						fallbackLabel: name,
						fallbackLanguageId: creationLanguageId,
						labels: label,
					}),
				getName: ({name}: ObjectField) => name,
				header: Liferay.Language.get('add-fields'),
				items: currentObjectDefinitionFields
					.filter(
						(currentObjectDefinitionField) =>
							!currentObjectDefinitionField.localized
					)
					.map((currentObjectDefinitionField) => ({
						...currentObjectDefinitionField,
						disableCheckbox:
							currentObjectDefinitionField.required &&
							!disableRequiredChecked,
					})),
				onSave: (items: ObjectField[]) => {
					const predefinedValuesMap = new Map<
						string,
						PredefinedValue
					>();

					predefinedValues.forEach((objectField) => {
						predefinedValuesMap.set(objectField.name, objectField);
					});

					const newPredefinedValues = items.map(
						({businessType, label, name}) => {
							const value = predefinedValuesMap.get(name);
							const inputAsValue =
								businessType === 'DateTime' ? true : false;

							return value
								? value
								: {
										businessType,
										inputAsValue,
										label,
										name,
										value: '',
									};
						}
					);
					setValues({
						parameters: {
							...values.parameters,
							predefinedValues: newPredefinedValues,
						},
					});
				},
				selected: getSelectedObjectFields(),
				showModal: true,
				title: Liferay.Language.get('select-the-fields'),
			});
		};

		Liferay.on(
			'deletePredefinedValueObjectField',
			deletePredefinedValueObjectField
		);
		Liferay.on('handleAddObjectFields', handleAddObjectFields);

		return () => {
			Liferay.detach('deletePredefinedValueObjectField');
			Liferay.detach('handleAddObjectFields');
		};
	}, [
		creationLanguageId,
		currentObjectDefinitionFields,
		disableRequiredChecked,
		objectFieldsMap,
		predefinedValues,
		setValues,
		values.parameters,
	]);

	useEffect(() => {
		Liferay.on('reloadFDS', handleReloadFDS);

		return () => {
			Liferay.detach('reloadFDS', handleReloadFDS);
		};
	}, []);

	return (
		<>
			
				
					{reloadFDS ? (
						
					) : (
						
					)}
				
			
		
	);
}