META-INF.resources.js.sharing.Sharing.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.sharing.web
There is a newer version: 3.0.75
/**
 * 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 {useResource} from '@clayui/data-provider';
import ClayForm, {
	ClayCheckbox,
	ClayInput,
	ClayRadio,
	ClayRadioGroup,
} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayModal from '@clayui/modal';
import ClayMultiSelect from '@clayui/multi-select';
import ClaySticker from '@clayui/sticker';
import {fetch, getOpener, objectToFormData, sub} from 'frontend-js-web';
import React, {useCallback, useRef, useState} from 'react';

function filterDuplicateItems(items) {
	return items.filter(
		(item, index) =>
			items.findIndex(
				(newItem) =>
					newItem.value.toLowerCase() === item.value.toLowerCase()
			) === index
	);
}

const Sharing = ({
	autocompleteUserURL,
	classNameId,
	classPK,
	portletNamespace,
	shareActionURL,
	sharingEntryPermissionDisplayActionId,
	sharingEntryPermissionDisplays,
	sharingVerifyEmailAddressURL,
}) => {
	const [emailAddressErrorMessages, setEmailAddressErrorMessages] = useState(
		[]
	);
	const [selectedItems, setSelectedItems] = useState([]);
	const [multiSelectValue, setMultiSelectValue] = useState('');
	const [allowSharingChecked, setAllowSharingChecked] = useState(true);
	const [sharingPermission, setSharingPermission] = useState('VIEW');
	const emailValidationInProgressRef = useRef(false);

	const closeDialog = () => {
		getOpener().Liferay.fire('closeModal', {
			id: 'sharingDialog',
		});
	};

	const showNotification = (message, error) => {
		const parentOpenToast = getOpener().Liferay.Util.openToast;

		const openToastParams = {message};

		if (error) {
			openToastParams.title = Liferay.Language.get('error');
			openToastParams.type = 'danger';
		}

		closeDialog();

		parentOpenToast(openToastParams);
	};

	const handleSubmit = (event) => {
		event.preventDefault();

		const data = {
			[`${portletNamespace}classNameId`]: classNameId,
			[`${portletNamespace}classPK`]: classPK,
			[`${portletNamespace}shareable`]: allowSharingChecked,
			[`${portletNamespace}sharingEntryPermissionDisplayActionId`]:
				sharingPermission,
			[`${portletNamespace}userEmailAddress`]: selectedItems
				.map(({value}) => value)
				.join(','),
		};

		const formData = objectToFormData(data);

		fetch(shareActionURL, {
			body: formData,
			method: 'POST',
		})
			.then((response) => {
				const jsonResponse = response.json();

				return response.ok
					? jsonResponse
					: jsonResponse.then((json) => {
							const error = new Error(
								json.errorMessage || response.statusText
							);
							throw Object.assign(error, {response});
						});
			})
			.then((response) => {
				parent.Liferay.fire('sharing:changed', {
					classNameId,
					classPK,
				});
				showNotification(response.successMessage);
			})
			.catch((error) => {
				showNotification(error.message, true);
			});
	};

	const isEmailAddressValid = (email) => {
		const emailRegex = /.+@.+\..+/i;

		return emailRegex.test(email);
	};

	const handleItemsChange = useCallback(
		(items) => {
			emailValidationInProgressRef.current = true;

			Promise.all(
				items.map((item) => {
					if (
						item.id ||
						selectedItems.some(({value}) => item.value === value)
					) {
						return Promise.resolve({item});
					}

					if (!isEmailAddressValid(item.value)) {
						return Promise.resolve({
							error: sub(
								Liferay.Language.get(
									'x-is-not-a-valid-email-address'
								),
								item.value
							),
							item,
						});
					}

					return fetch(sharingVerifyEmailAddressURL, {
						body: objectToFormData({
							[`${portletNamespace}emailAddress`]: item.value,
						}),
						method: 'POST',
					})
						.then((response) => response.json())
						.then(({userExists}) => ({
							error: !userExists
								? sub(
										Liferay.Language.get(
											'user-x-does-not-exist'
										),
										item.value
									)
								: undefined,
							item,
						}));
				})
			).then((results) => {
				emailValidationInProgressRef.current = false;

				const erroredResults = results.filter(({error}) => !!error);

				setEmailAddressErrorMessages(
					erroredResults.map(({error}) => error)
				);

				if (!erroredResults.length) {
					setMultiSelectValue('');
				}

				if (erroredResults.length === 1) {
					setMultiSelectValue(erroredResults[0].item.value);
				}

				setSelectedItems(
					filterDuplicateItems(
						results
							.filter(({error}) => !error)
							.map(({item}) => item)
					)
				);
			});
		},
		[portletNamespace, selectedItems, sharingVerifyEmailAddressURL]
	);

	const handleChange = useCallback((value) => {
		if (!emailValidationInProgressRef.current) {
			setMultiSelectValue(value);

			if (value.trim() === '') {
				setEmailAddressErrorMessages([]);
			}
		}
	}, []);

	const [networkStatus, setNetworkStatus] = useState(4);
	const {resource} = useResource({
		fetchOptions: {
			credentials: 'include',
			headers: new Headers({'x-csrf-token': Liferay.authToken}),
			method: 'GET',
		},
		fetchRetry: {
			attempts: 0,
		},
		link: autocompleteUserURL,
		onNetworkStatusChange: setNetworkStatus,
		variables: {
			[`${portletNamespace}query`]: multiSelectValue,
		},
	});

	const users = resource;

	return (
		
			
				
					
						
							
								{Liferay.Language.get('invite-to-collaborate')}
							

							 {
												return {
													emailAddress:
														user.emailAddress,
													fullName: user.fullName,
													id: user.userId,
													label: user.fullName,
													portraitURL:
														user.portraitURL,
													value: user.emailAddress,
												};
											})
										: []
								}
								value={multiSelectValue}
							>
								{(item) => (
									
										
											
												
													{item.portraitURL ? (
														
															
														
													) : (
														
													)}
												
											

											
												{item.fullName}

												{item.emailAddress}
											
										
									
								)}
							

							
								
									{Liferay.Language.get(
										'you-can-use-a-comma-to-enter-multiple-collaborators'
									)}
								
							

							{!!emailAddressErrorMessages.length && (
								
									{emailAddressErrorMessages.map(
										(emailAddressErrorMessage) => (
											
												{emailAddressErrorMessage}
											
										)
									)}
								
							)}
						
					
				

				
					
							setAllowSharingChecked((allow) => !allow)
						}
					/>
				

				
					{Liferay.Language.get('sharing-permissions')}
				

				
					
							setSharingPermission(permission)
						}
						value={sharingPermission}
					>
						{sharingEntryPermissionDisplays.map((display) => (
							
								
									{display.description}
								
							
						))}
					
				
			

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

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

export default Sharing;