META-INF.resources.js.components.ModalSelectObjectFields.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 ClayAlert, {IClayAlertProps} from '@clayui/alert';
import ClayButton from '@clayui/button';
import ClayEmptyState from '@clayui/empty-state';
import {ClayCheckbox} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayList from '@clayui/list';
import ClayModal, {useModal} from '@clayui/modal';
import {ManagementToolbarSearch} from '@liferay/object-js-components-web';
import {ManagementToolbar} from 'frontend-js-components-web';
import React, {useEffect, useMemo, useState} from 'react';

import './ModalSelectObjectFields.scss';

export type Alert = {
	content: string;
	otherProps: IClayAlertProps;
};

function ModalSelectObjectFields() {
	const [
		{
			alerts,
			emptyState,
			getLabel,
			getName,
			header,
			items,
			onAfterClose,
			onSave,
			searchTerm,
			selected,
			showModal,
			title,
		},
		setState,
	] = useState>({
		items: [],
		searchTerm: '',
		selected: [],
		showModal: false,
	});

	const resetModal = () => {
		setState({items: [], searchTerm: '', selected: [], showModal: false});
	};

	const {observer, onClose} = useModal({
		onClose: onAfterClose
			? () => {
					onAfterClose();
					resetModal();

					return;
				}
			: resetModal,
	});

	useEffect(() => {
		const openModal = ({
			alerts = [],
			items = [],
			onAfterClose,
			searchTerm = '',
			selected = [],
			showModal = false,
			...otherProps
		}: Partial>) => {
			setState({
				alerts,
				items,
				onAfterClose,
				searchTerm,
				selected,
				showModal,
				...otherProps,
			});
		};

		Liferay.on('openModalSelectObjectFields', openModal);

		return () =>
			Liferay.detach(
				'openModalSelectObjectFields',
				openModal as () => void
			);
	}, []);

	const filteredItems = useMemo(() => {
		const loweredTerm = searchTerm.toLowerCase();
		const selectedIds = new Set(selected.map(({id}) => id));

		const filtered: T[] = [];
		items.forEach((item) => {
			if (getName?.(item).toLowerCase().includes(loweredTerm)) {
				filtered.push({
					...item,
					checked: selectedIds.has(item.id),
				});
			}
		});

		return filtered;
	}, [getName, searchTerm, selected, items]);

	const toggleFieldCheckbox = (id: unknown, checked: boolean) => {
		let selectedItems: T[];
		if (checked) {
			const item = items.find((item) => item.id === id) as T;
			selectedItems = [...selected, item];
		}
		else {
			selectedItems = selected.filter((item) => item.id !== id);
		}
		setState((state) => ({...state, selected: selectedItems}));
	};

	return showModal ? (
		
			{header}

			{!!alerts?.length &&
				!!items.length &&
				alerts.map((alert, index) => (
					
						{alert.content}
					
				))}

			
				{items.length ? (
					<>
						
							{title}
						

						
							
								
									 {
											const disabledItems =
												selected.filter(
													(item) =>
														item.disableCheckbox
												);
											const selectedItems =
												items.length -
													disabledItems.length ===
												selected.length -
													disabledItems.length
													? [...disabledItems]
													: [...items];
											setState((state) => ({
												...state,
												selected: selectedItems,
											}));
										}}
									/>
								
							

							
									setState((state) => ({
										...state,
										searchTerm,
									}))
								}
							/>
						

						
							{filteredItems.map((item, index) => (
								
									 {
											toggleFieldCheckbox(
												item.id,
												!item.checked
											);
										}}
									/>

									{item.required && (
										
											
										
									)}
								
							))}
						
					
				) : (
					
						
					
				)}
			

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

							 {
									onSave?.(selected);
									resetModal();
								}}
							>
								{Liferay.Language.get('save')}
							
						
					) : (
						
							{Liferay.Language.get('done')}
						
					)
				}
			/>
		
	) : null;
}

export default ModalSelectObjectFields;

interface ModalItem extends ObjectField {
	checked?: boolean;
	disableCheckbox?: boolean;
}

interface IState {
	alerts?: Alert[];
	disableRequired?: boolean;
	disableRequiredChecked?: boolean;
	emptyState?: {
		message: string;
		title: string;
	};
	getLabel?: (label: T) => string;
	getName?: (name: T) => string;
	header?: string;
	items: T[];
	onAfterClose?: () => void;
	onSave?: (selected: T[]) => void;
	searchTerm: string;
	selected: T[];
	showModal: boolean;
	title?: string;
}