diff --git a/packages/client/src/components/GlobalEvents/EditRoomEvent.js b/packages/client/src/components/GlobalEvents/EditRoomEvent.js index 0aa80775cb..644990fc82 100644 --- a/packages/client/src/components/GlobalEvents/EditRoomEvent.js +++ b/packages/client/src/components/GlobalEvents/EditRoomEvent.js @@ -45,6 +45,7 @@ const EditRoomEvent = ({ removeLogoPaths, reloadInfoPanelSelection, + changeRoomOwner, }) => { const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Files"]); @@ -97,6 +98,8 @@ const EditRoomEvent = ({ title: roomParams.title || t("Files:NewRoom"), }; + const isOwnerChanged = roomParams?.roomOwner?.id !== item.createdBy.id; + const tags = roomParams.tags.map((tag) => tag.name); const newTags = roomParams.tags.filter((t) => t.isNew).map((t) => t.name); const removedTags = startTags.filter((sT) => !tags.includes(sT)); @@ -107,6 +110,10 @@ const EditRoomEvent = ({ try { setIsLoading(true); + if (isOwnerChanged) { + await changeRoomOwner(t, roomParams?.roomOwner?.id); + } + let room = await editRoom(item.id, editRoomParams); room.isLogoLoading = true; @@ -259,7 +266,7 @@ export default inject( removeLogoPaths, updateLogoPathsCacheBreaker, } = selectedFolderStore; - const { updateCurrentFolder } = filesActionsStore; + const { updateCurrentFolder, changeRoomOwner } = filesActionsStore; const { getThirdPartyIcon } = settingsStore.thirdPartyStore; const { setCreateRoomDialogVisible } = dialogsStore; const { withPaging } = auth.settingsStore; @@ -297,6 +304,7 @@ export default inject( removeLogoPaths, reloadInfoPanelSelection, + changeRoomOwner, }; } )(observer(EditRoomEvent)); diff --git a/packages/client/src/components/PeopleSelector/index.js b/packages/client/src/components/PeopleSelector/index.js index fa386627f8..93f3921d15 100644 --- a/packages/client/src/components/PeopleSelector/index.js +++ b/packages/client/src/components/PeopleSelector/index.js @@ -59,6 +59,7 @@ const PeopleSelector = ({ withFooterCheckbox, footerCheckboxLabel, isChecked, + setIsChecked, filterUserId, }) => { const [itemsList, setItemsList] = useState(items); @@ -104,6 +105,7 @@ const PeopleSelector = ({ isAdmin, isVisitor, isCollaborator, + hasAvatar, }; }; @@ -246,6 +248,7 @@ const PeopleSelector = ({ withFooterCheckbox={withFooterCheckbox} footerCheckboxLabel={footerCheckboxLabel} isChecked={isChecked} + setIsChecked={setIsChecked} searchLoader={} isSearchLoading={isLoading} rowLoader={} diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ChangeRoomOwner/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ChangeRoomOwner/index.js index 7d698aa460..a3ffc550e3 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ChangeRoomOwner/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ChangeRoomOwner/index.js @@ -14,6 +14,8 @@ const ChangeRoomOwner = ({ onOwnerChange, currentColorScheme, }) => { + const userName = roomOwner.displayName ?? roomOwner.label; + return ( @@ -26,12 +28,12 @@ const ChangeRoomOwner = ({ size="base" role={""} isDefaultSource={roomOwner.hasAvatar} - source={roomOwner.avatarSmall} - userName={roomOwner.displayName} + source={roomOwner.avatarSmall ?? roomOwner.avatar} + userName={userName} />
- {roomOwner.displayName} + {userName} {roomOwner.id === currentUserId && ( ({t("Common:MeLabel")}) diff --git a/packages/client/src/components/dialogs/LeaveRoomDialog/index.js b/packages/client/src/components/dialogs/LeaveRoomDialog/index.js index 12d1733f01..b963656014 100644 --- a/packages/client/src/components/dialogs/LeaveRoomDialog/index.js +++ b/packages/client/src/components/dialogs/LeaveRoomDialog/index.js @@ -1,13 +1,9 @@ -import React, { useEffect, useState } from "react"; -import { useNavigate } from "react-router-dom"; +import { useEffect, useState } from "react"; import ModalDialog from "@docspace/components/modal-dialog"; import Button from "@docspace/components/button"; import Text from "@docspace/components/text"; import { withTranslation } from "react-i18next"; import { inject, observer } from "mobx-react"; -import { ShareAccessRights } from "@docspace/common/constants"; -import toastr from "@docspace/components/toast/toastr"; -import RoomsFilter from "@docspace/common/api/rooms/filter"; const LeaveRoomDialog = (props) => { const { @@ -17,19 +13,9 @@ const LeaveRoomDialog = (props) => { setIsVisible, setChangeRoomOwnerIsVisible, isOwner, - updateRoomMemberRole, - roomId, - userId, - removeFiles, - isAdmin, - setSelected, - isRoot, - folders, - setFolders, + onLeaveRoomAction, } = props; - const navigate = useNavigate(); - const [isLoading, setIsLoading] = useState(false); useEffect(() => { @@ -45,38 +31,15 @@ const LeaveRoomDialog = (props) => { if (e.keyCode === 13 || e.which === 13) onLeaveRoom(); }; - const onLeaveRoom = () => { + const onLeaveRoom = async () => { if (isOwner) { setChangeRoomOwnerIsVisible(true); onClose(); } else { setIsLoading(true); - updateRoomMemberRole(roomId, { - invitations: [{ id: userId, access: ShareAccessRights.None }], - }) - .then(() => { - if (!isAdmin) { - if (!isRoot) { - const filter = RoomsFilter.getDefault(); - navigate(`rooms/shared/filter?${filter.toUrlParams()}`); - } else { - removeFiles(null, [roomId]); - } - } else { - const newFolders = folders; - const folderIndex = newFolders.findIndex((r) => r.id === roomId); - newFolders[folderIndex].inRoom = false; - setFolders(newFolders); - } - - toastr.success(t("Files:YouLeftTheRoom")); - }) - - .finally(() => { - onClose(); - setIsLoading(false); - setSelected("none"); - }); + await onLeaveRoomAction(t, isOwner); + setIsLoading(false); + onClose(); } }; @@ -118,49 +81,32 @@ const LeaveRoomDialog = (props) => { }; export default inject( - ({ auth, dialogsStore, filesStore, selectedFolderStore }) => { + ({ + auth, + dialogsStore, + filesStore, + selectedFolderStore, + filesActionsStore, + }) => { const { leaveRoomDialogVisible: visible, setLeaveRoomDialogVisible: setIsVisible, setChangeRoomOwnerIsVisible, } = dialogsStore; const { user } = auth.userStore; - const { - selection, - bufferSelection, - updateRoomMemberRole, - removeFiles, - setSelected, - folders, - setFolders, - } = filesStore; - - const roomId = selection.length - ? selection[0].id - : bufferSelection - ? bufferSelection.id - : selectedFolderStore.id; + const { selection, bufferSelection } = filesStore; const selections = selection.length ? selection : [bufferSelection]; const folderItem = selections[0] ? selections[0] : selectedFolderStore; const isRoomOwner = folderItem?.createdBy?.id === user.id; - const isRoot = selectedFolderStore.isRootFolder; return { visible, setIsVisible, setChangeRoomOwnerIsVisible, isOwner: isRoomOwner, - updateRoomMemberRole, - roomId, - userId: user.id, - removeFiles, - isAdmin: user.isOwner || user.isAdmin, - setSelected, - isRoot, - folders, - setFolders, + onLeaveRoomAction: filesActionsStore.onLeaveRoom, }; } )(observer(withTranslation(["Common", "Files"])(LeaveRoomDialog))); diff --git a/packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js b/packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js index 7bc5c1003a..22f003848e 100644 --- a/packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js +++ b/packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; import { inject, observer } from "mobx-react"; import styled, { css } from "styled-components"; import Aside from "@docspace/components/aside"; @@ -6,8 +6,7 @@ import Backdrop from "@docspace/components/backdrop"; import PeopleSelector from "@docspace/client/src/components/PeopleSelector"; import { withTranslation } from "react-i18next"; import Filter from "@docspace/common/api/people/filter"; -import { EmployeeType, ShareAccessRights } from "@docspace/common/constants"; -import toastr from "@docspace/components/toast/toastr"; +import { EmployeeType } from "@docspace/common/constants"; import { DeviceType } from "@docspace/common/constants"; import Portal from "@docspace/components/portal"; @@ -43,23 +42,14 @@ const ChangeRoomOwner = (props) => { visible, setIsVisible, showBackButton, - setRoomOwner, - roomId, - setFolder, - updateRoomMemberRole, - userId, - isAdmin, setRoomParams, - removeFiles, - folders, - setFolders, currentDeviceType, roomOwnerId, - isRootFolder, - setCreatedBy, + changeRoomOwner, } = props; const [isLoading, setIsLoading] = useState(false); + const [isChecked, setIsChecked] = useState(!showBackButton); useEffect(() => { document.addEventListener("keyup", onKeyUp, false); @@ -74,47 +64,16 @@ const ChangeRoomOwner = (props) => { if (e.keyCode === 13 || e.which === 13) onChangeRoomOwner(); }; - const onLeaveRoom = () => { - setIsLoading(true); - updateRoomMemberRole(roomId, { - invitations: [{ id: userId, access: ShareAccessRights.None }], - }) - .then(() => { - if (!isAdmin) removeFiles(null, [roomId]); - else { - const newFolders = folders; - const folderIndex = newFolders.findIndex((r) => r.id === roomId); - newFolders[folderIndex].inRoom = false; - setFolders(newFolders); - } - toastr.success(t("Files:LeftAndAppointNewOwner")); - }) + const onChangeRoomOwner = async (user) => { + if (showBackButton) { + setRoomParams && setRoomParams(user[0]); + } else { + setIsLoading(true); - .finally(() => { - onClose(); - setIsLoading(false); - }); - }; - - const onChangeRoomOwner = (user, isChecked) => { - setIsLoading(true); - - setRoomOwner(user[0].id, [roomId]) - .then(async (res) => { - if (isRootFolder) { - setFolder(res[0]); - } else { - setCreatedBy(res[0].createdBy); - } - - if (isChecked) await onLeaveRoom(); - else toastr.success(t("Files:AppointNewOwner")); - setRoomParams && setRoomParams(res[0].createdBy); - }) - .finally(() => { - setIsLoading(false); - onClose(); - }); + await changeRoomOwner(t, user[0]?.id, isChecked); + setIsLoading(false); + } + onClose(); }; const onClose = () => { @@ -150,13 +109,16 @@ const ChangeRoomOwner = (props) => { {...backClickProp} onAccept={onChangeRoomOwner} onCancel={onClose} - acceptButtonLabel={t("Files:AssignOwner")} + acceptButtonLabel={ + showBackButton ? t("Common:SelectAction") : t("Files:AssignOwner") + } headerLabel={t("Files:ChangeTheRoomOwner")} filter={filter} isLoading={isLoading} withFooterCheckbox={!showBackButton} footerCheckboxLabel={t("Files:LeaveTheRoom")} - isChecked={!showBackButton} + isChecked={isChecked} + setIsChecked={setIsChecked} withOutCurrentAuthorizedUser filterUserId={roomOwnerId} /> @@ -172,7 +134,13 @@ const ChangeRoomOwner = (props) => { }; export default inject( - ({ auth, dialogsStore, filesStore, selectedFolderStore }) => { + ({ + auth, + dialogsStore, + filesStore, + selectedFolderStore, + filesActionsStore, + }) => { const { changeRoomOwnerIsVisible, setChangeRoomOwnerIsVisible, @@ -180,17 +148,7 @@ export default inject( } = dialogsStore; const { settingsStore } = auth; - const { user } = auth.userStore; - const { - setRoomOwner, - selection, - bufferSelection, - setFolder, - updateRoomMemberRole, - removeFiles, - folders, - setFolders, - } = filesStore; + const { selection, bufferSelection } = filesStore; const room = selection.length ? selection[0] @@ -205,19 +163,9 @@ export default inject( setIsVisible: setChangeRoomOwnerIsVisible, showBackButton: changeRoomOwnerData.showBackButton, setRoomParams: changeRoomOwnerData.setRoomParams, - setRoomOwner, - userId: user.id, - roomId: room.id, roomOwnerId: room?.createdBy?.id, - isRootFolder: selectedFolderStore.isRootFolder, - setCreatedBy: selectedFolderStore.setCreatedBy, - setFolder, - updateRoomMemberRole, - isAdmin: user.isOwner || user.isAdmin, - removeFiles, - folders, - setFolders, currentDeviceType, + changeRoomOwner: filesActionsStore.changeRoomOwner, }; } )(observer(withTranslation(["Files"])(ChangeRoomOwner))); diff --git a/packages/client/src/store/FilesActionsStore.js b/packages/client/src/store/FilesActionsStore.js index 98c41a550f..68e2c2ba7d 100644 --- a/packages/client/src/store/FilesActionsStore.js +++ b/packages/client/src/store/FilesActionsStore.js @@ -30,6 +30,7 @@ import { FileStatus, FolderType, RoomsType, + ShareAccessRights, } from "@docspace/common/constants"; import { makeAutoObservable } from "mobx"; @@ -2417,6 +2418,78 @@ class FilesActionStore { this.uploadDataStore.itemOperationToFolder(operationData); }; + + onLeaveRoom = (t, isOwner = false) => { + const { + updateRoomMemberRole, + removeFiles, + folders, + setFolders, + selection, + bufferSelection, + } = this.filesStore; + const { user } = this.authStore.userStore; + + const roomId = selection.length + ? selection[0].id + : bufferSelection + ? bufferSelection.id + : this.selectedFolderStore.id; + + const isAdmin = user.isOwner || user.isAdmin; + const isRoot = this.selectedFolderStore.isRootFolder; + + return updateRoomMemberRole(roomId, { + invitations: [{ id: user?.id, access: ShareAccessRights.None }], + }).then(() => { + if (!isAdmin) { + if (!isRoot) { + const filter = RoomsFilter.getDefault(); + window.DocSpace.navigate( + `rooms/shared/filter?${filter.toUrlParams()}` + ); + } else { + removeFiles(null, [roomId]); + } + } else { + const newFolders = folders; + const folderIndex = newFolders.findIndex((r) => r.id === roomId); + newFolders[folderIndex].inRoom = false; + setFolders(newFolders); + } + + isOwner + ? toastr.success(t("Files:LeftAndAppointNewOwner")) + : toastr.success(t("Files:YouLeftTheRoom")); + }); + }; + + changeRoomOwner = (t, userId, isLeaveChecked = false) => { + const { setRoomOwner, setFolder, setSelected, selection, bufferSelection } = + this.filesStore; + const { isRootFolder, setCreatedBy, id } = this.selectedFolderStore; + + const roomId = selection.length + ? selection[0].id + : bufferSelection + ? bufferSelection.id + : id; + + return setRoomOwner(userId, [roomId]) + .then(async (res) => { + if (isRootFolder) { + setFolder(res[0]); + } else { + setCreatedBy(res[0].createdBy); + } + + if (isLeaveChecked) await this.onLeaveRoom(t); + else toastr.success(t("Files:AppointNewOwner")); + }) + .finally(() => { + setSelected("none"); + }); + }; } export default FilesActionStore; diff --git a/packages/components/selector/Selector.types.ts b/packages/components/selector/Selector.types.ts index 7e9c45e190..45f91ce67a 100644 --- a/packages/components/selector/Selector.types.ts +++ b/packages/components/selector/Selector.types.ts @@ -80,4 +80,5 @@ export type SelectorProps = { acceptButtonId?: string; cancelButtonId?: string; isChecked?: boolean; + setIsChecked?: any; }; diff --git a/packages/components/selector/index.tsx b/packages/components/selector/index.tsx index d159d3f256..506272414b 100644 --- a/packages/components/selector/index.tsx +++ b/packages/components/selector/index.tsx @@ -84,6 +84,7 @@ const Selector = ({ acceptButtonId, cancelButtonId, isChecked, + setIsChecked, }: SelectorProps) => { const [footerVisible, setFooterVisible] = React.useState(false); const [isSearch, setIsSearch] = React.useState(false); @@ -375,6 +376,7 @@ const Selector = ({ setNewFooterInputValue={setNewFooterInputValue} isFooterCheckboxChecked={isFooterCheckboxChecked} setIsFooterCheckboxChecked={setIsFooterCheckboxChecked} + setIsChecked={setIsChecked} disableAcceptButton={ withFooterInput ? disableAcceptButton diff --git a/packages/components/selector/sub-components/Footer/Footer.types.ts b/packages/components/selector/sub-components/Footer/Footer.types.ts index 4df785d600..78c529f289 100644 --- a/packages/components/selector/sub-components/Footer/Footer.types.ts +++ b/packages/components/selector/sub-components/Footer/Footer.types.ts @@ -22,6 +22,7 @@ export type FooterProps = { setNewFooterInputValue?: (value: string) => void; isFooterCheckboxChecked?: boolean; setIsFooterCheckboxChecked?: any; + setIsChecked?: any; acceptButtonId?: string; cancelButtonId?: string; diff --git a/packages/components/selector/sub-components/Footer/index.tsx b/packages/components/selector/sub-components/Footer/index.tsx index 929ca0daf3..1ef480ef4f 100644 --- a/packages/components/selector/sub-components/Footer/index.tsx +++ b/packages/components/selector/sub-components/Footer/index.tsx @@ -36,6 +36,7 @@ const Footer = React.memo( setNewFooterInputValue, isFooterCheckboxChecked, setIsFooterCheckboxChecked, + setIsChecked, acceptButtonId, cancelButtonId, }: FooterProps) => { @@ -50,6 +51,7 @@ const Footer = React.memo( }; const onChangeCheckbox = () => { + setIsChecked && setIsChecked((value: boolean) => !value); setIsFooterCheckboxChecked && setIsFooterCheckboxChecked((value: boolean) => !value); };