META-INF.resources.invite_members.js.InviteMembers.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 ClayButton, {ClayButtonWithIcon} from '@clayui/button';
import {Option, Picker, Text} from '@clayui/core';
import ClayForm, {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayList from '@clayui/list';
import ClayModal, {useModal} from '@clayui/modal';
import ClayTable from '@clayui/table';
import {ClayTooltipProvider} from '@clayui/tooltip';
import {debounce, fetch, sub} from 'frontend-js-web';
import React, {useCallback, useEffect, useState} from 'react';

export function InviteMembers({
	assignRolesPermission,
	getAvailableUsersURL,
	manageTeamsPermission,
	portletNamespace,
	roles,
	scopeGroupId,
	sendInvitesURL,
	teams,
}) {
	const {observer, onOpenChange, open} = useModal();

	const [invitedEmails, setInvitedEmails] = useState([]);
	const [invitedUsers, setInvitedUsers] = useState([]);
	const [invitedUsersIds, setInvitedUsersIds] = useState([]);
	const [roleId, setRoleId] = useState('');
	const [teamId, setTeamId] = useState('');
	const [users, setUsers] = useState([]);
	const [viewMoreCount, setViewMoreCount] = useState(1);

	const fetchAvailableUsers = useCallback(
		({end = 50, keywords = ''} = {}) => {
			const url = new URL(getAvailableUsersURL);

			const body = new URLSearchParams(
				Liferay.Util.ns(portletNamespace, {
					end,
					keywords,
					start: 0,
				})
			);

			fetch(url, {
				body,
				method: 'POST',
			})
				.then((response) => response.json())
				.then(({users}) => {
					setUsers(users);
				});
		},
		[getAvailableUsersURL, portletNamespace]
	);

	useEffect(() => {
		fetchAvailableUsers({end: viewMoreCount * 50});
	}, [fetchAvailableUsers, viewMoreCount]);

	const onAddEmailClickHandler = () => {
		const emailValue = document.getElementById(
			`${portletNamespace}emailAddress`
		).value;

		if (
			emailValue &&
			!invitedEmails.find((email) => email === emailValue)
		) {
			setInvitedEmails([...invitedEmails, emailValue]);
		}
	};

	const onUserClickHandler = (user) => {
		if (
			invitedUsers.find(
				(invitedUser) => invitedUser.userId === user.userId
			)
		) {
			removeInvitedUser(user);
		}
		else {
			setInvitedUsers([...invitedUsers, user]);

			setInvitedUsersIds([...invitedUsersIds, user.userId]);
		}
	};

	const removeInvitedUser = ({userId}) => {
		setInvitedUsers(
			invitedUsers.filter((invitedUser) => invitedUser.userId !== userId)
		);

		setInvitedUsersIds(
			invitedUsersIds.filter(
				(invitedUsersId) => invitedUsersId !== userId
			)
		);
	};

	const searchUsersCallback = (event) => {
		const debouncedFetch = debounce((keywords) => {
			fetchAvailableUsers({keywords});
		}, 1000);

		debouncedFetch(event.target.value);
	};

	const Users = () => {
		return users.map((user) => {
			return (
				
					
						
							{invitedUsersIds.find(
								(invitedUsersId) =>
									invitedUsersId === user.userId
							) ? (
								 onUserClickHandler(user)}
									size="xs"
									symbol="times"
									title={Liferay.Language.get('remove')}
								/>
							) : user.hasPendingMemberRequest ? (
								 onUserClickHandler(user)}
									size="xs"
									symbol="check"
									title={Liferay.Language.get(
										'user-already-invited'
									)}
								/>
							) : (
								 onUserClickHandler(user)}
									size="xs"
									symbol="plus"
									title={Liferay.Language.get('add')}
								/>
							)}
						

						
							{user.userFullName}
						

						
							
								{user.userEmailAddress}
							
						
					
				
			);
		});
	};

	const InvitedEmails = () => {
		return (
			
				
					{invitedEmails.map((invitedEmail) => {
						return (
							
								
									
										{invitedEmail}
									
								

								
									 {
											setInvitedEmails(
												invitedEmails.filter(
													(emailToRemove) =>
														emailToRemove !==
														invitedEmail
												)
											);
										}}
										symbol="times"
										title={Liferay.Language.get('remove')}
									/>
								
							
						);
					})}
				
			
		);
	};

	const InvitedUsers = () => {
		return (
			
				
					{invitedUsers.map((invitedUser) => {
						return (
							
								
									
										{invitedUser.userFullName}
									
								

								
									{invitedUser.userEmailAddress}
								

								
									 {
											removeInvitedUser(invitedUser);
										}}
										symbol="times"
										title={Liferay.Language.get('remove')}
									/>
								
							
						);
					})}
				
			
		);
	};

	return (
		<>
			{open && (
				
					
						{Liferay.Language.get('invite-members')}
					

					
						
							

							

							

							

							

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

								
									

									{Liferay.Language.get(
										'previous-invitation-was-sent'
									)}
								

								
									 {
											searchUsersCallback(event);
										}}
										placeholder={Liferay.Language.get(
											'search'
										)}
									/>
								

								
									{!users.length && (
										
											{Liferay.Language.get(
												'there-are-no-users-to-invite'
											)}
										
									)}

									{!!users.length && }

									{users.length / (viewMoreCount * 50) >
										1 && (
										
											 {
													setViewMoreCount(
														viewMoreCount + 1
													);
												}}
											>
												{Liferay.Language.get(
													'view-more'
												)}
											
										
									)}
								

								
									{Liferay.Language.get(
										'email-addresses-to-send-invite'
									)}

									
										
											
										
									
								

								
									{!!invitedUsers && }
								

								
									
										
											{Liferay.Language.get(
												'invite-by-email'
											)}
										

										
											
												
											

											
												
														onAddEmailClickHandler()
													}
													type="button"
												>
													{Liferay.Language.get(
														'add-email-address'
													)}
												
											
										
									
								

								
									{Liferay.Language.get(
										'email-addresses-to-send-invite'
									)}
								

								
									{!!invitedEmails && }
								

								{roles.length !== 0 &&
									assignRolesPermission && (
										
											
												{Liferay.Language.get(
													'invite-to-role'
												)}
											

											
													setRoleId(roleId)
												}
											>
												{({label, value}) => (
													
												)}
											
										
									)}

								{teams.length !== 0 &&
									manageTeamsPermission && (
										
											
												{Liferay.Language.get(
													'invite-to-team'
												)}
											

											
													setTeamId(teamId)
												}
											>
												{({label, value}) => (
													
												)}
											
										
									)}
							
						
					

					
								 onOpenChange(false)}
								>
									{Liferay.Language.get('cancel')}
								

								
									{Liferay.Language.get('send-invitations')}
								
							
						}
					/>
				
			)}
			 onOpenChange(true)}
			>
				{Liferay.Language.get('invite-members')}
			
		
	);
}