META-INF.resources.js.components.criteria_builder.ContributorsBuilder.js Maven / Gradle / Ivy

Go to download
/**
 * 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 from '@clayui/alert';
import ClayButton from '@clayui/button';
import ClayLayout from '@clayui/layout';
import ClayLoadingIndicator from '@clayui/loading-indicator';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, {useMemo, useState} from 'react';
import {DndProvider} from 'react-dnd';
import {HTML5Backend} from 'react-dnd-html5-backend';

import {contributorShape, propertyGroupShape} from '../../utils/types.es';
import {getPluralMessage} from '../../utils/utils';
import CriteriaSidebar from '../criteria_sidebar/CriteriaSidebar';
import Conjunction from './Conjunction.es';
import CriteriaBuilder from './CriteriaBuilder';
import EmptyPlaceholder from './EmptyPlaceholder.es';

export default function ContributorsBuilder({
	contributors = [],
	editing,
	emptyContributors,
	isSegmentationDisabledAlertDismissed,
	isSegmentationEnabled,
	membersCount = 0,
	membersCountLoading = false,
	onAlertClose = () => {},
	onConjunctionChange = () => {},
	onPreviewMembers = () => {},
	onQueryChange = () => {},
	propertyGroups,
	renderEmptyValuesErrors = false,
}) {
	const propertyKey = useMemo(() => {
		const firstContributorNotEmpty = contributors.find(
			(contributor) => contributor.query !== ''
		);

		return firstContributorNotEmpty
			? firstContributorNotEmpty.propertyKey
			: propertyGroups[0].propertyKey;
	}, [contributors, propertyGroups]);

	const [editingId, setEditingId] = useState(propertyKey);

	const _handleCriteriaChange = (criteriaChange, index) => {
		onQueryChange(criteriaChange, index);
	};

	const _handleCriteriaEdit = (id, editing) => {
		setEditingId(editing ? undefined : id);
	};

	const showDisabledSegmentationAlert =
		!isSegmentationEnabled && !isSegmentationDisabledAlertDismissed;

	return (
		
			
				
					
				

				
					
						{renderEmptyValuesErrors && (
							
								
									
										{Liferay.Language.get(
											'values-need-to-be-added-to-properties-for-the-segment-to-be-saved'
										)}
									
								
							
						)}

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

										
											
												
													{membersCountLoading && (
														
													)}

													{!membersCountLoading && (
														
															{Liferay.Language.get(
																'conditions-match'
															)}

															
																{getPluralMessage(
																	Liferay.Language.get(
																		'x-member'
																	),
																	Liferay.Language.get(
																		'x-members'
																	),
																	membersCount
																)}
															
														
													)}

													
														{Liferay.Language.get(
															'view-members'
														)}
													
												
											
										
									

									{emptyContributors &&
										(editingId === undefined ||
											!editing) && }

									{contributors
										.filter((criteria) => {
											const editingCriteria =
												editingId ===
													criteria.propertyKey &&
												editing;
											const emptyCriteriaQuery =
												criteria.query === '';

											return (
												editingCriteria ||
												!emptyCriteriaQuery
											);
										})
										.map((criteria, i) => {
											return (
												
													{i !== 0 && (
														<>
															
														
													)}

													
												
											);
										})}
								
							
						
					
				
			
		
	);
}

ContributorsBuilder.propTypes = {
	contributors: PropTypes.arrayOf(contributorShape),
	editing: PropTypes.bool.isRequired,
	emptyContributors: PropTypes.bool.isRequired,
	isSegmentationDisabledAlertDismissed: PropTypes.bool,
	isSegmentationEnabled: PropTypes.bool,
	membersCount: PropTypes.number,
	membersCountLoading: PropTypes.bool,
	onAlertClose: PropTypes.func,
	onConjunctionChange: PropTypes.func,
	onPreviewMembers: PropTypes.func,
	onQueryChange: PropTypes.func,
	previewMembersURL: PropTypes.string,
	propertyGroups: PropTypes.arrayOf(propertyGroupShape),
	renderEmptyValuesErrors: PropTypes.bool,
};