From 6bd9b469e0c0033343fbc8da744c6caf72652d5b Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Mon, 5 Aug 2024 18:00:19 +0500 Subject: [PATCH] Client:EmptyView Added empty screen for collaboration room --- .../client/public/locales/en/EmptyView.json | 2 + .../EmptyContainer/EmptyFolderContainer.js | 14 ---- .../src/components/EmptyContainer/index.js | 53 +++++++++---- .../EmptyViewContainer.helpers.tsx | 78 +++++++++++++------ 4 files changed, 93 insertions(+), 54 deletions(-) diff --git a/packages/client/public/locales/en/EmptyView.json b/packages/client/public/locales/en/EmptyView.json index 52a8745fde..b1faf762a5 100644 --- a/packages/client/public/locales/en/EmptyView.json +++ b/packages/client/public/locales/en/EmptyView.json @@ -1,4 +1,5 @@ { + "CollaborationRoomEmptyTitle": "Welcome to the Collaboration room", "CollaboratorEmptyTitle": "The room is empty.", "CreateDocument": "Create a new document", "CreateDocumentDescription": "Take advantage of vast word processing functionality.", @@ -16,6 +17,7 @@ "FormFolderDefaultUserDescription": "The forms uploaded by the administrators will be appeared here.", "FormFolderDefaultUserTitle": "No forms in this folder yet", "FormRoomEmptyTitle": "Welcome to the Form filling room", + "InviteUsersCollaborationOptionDescription": "Add members for joint editing in the room.", "InviteUsersOptionDescription": "Add portal members for joint editing in the room", "InviteUsersOptionTitle": "Inviting Attendees", "PublicRoomEmptyTitle": "Welcome to the Public room", diff --git a/packages/client/src/components/EmptyContainer/EmptyFolderContainer.js b/packages/client/src/components/EmptyContainer/EmptyFolderContainer.js index 8351e3d2c3..bf95d8e6c0 100644 --- a/packages/client/src/components/EmptyContainer/EmptyFolderContainer.js +++ b/packages/client/src/components/EmptyContainer/EmptyFolderContainer.js @@ -28,11 +28,8 @@ import { useCallback, useMemo } from "react"; import { inject, observer } from "mobx-react"; import { withTranslation } from "react-i18next"; -import { FolderType, RoomsType } from "@docspace/shared/enums"; - import EmptyContainer from "./EmptyContainer"; import CommonButtons from "./sub-components/CommonButtons"; -import EmptyViewContainer from "./sub-components/EmptyViewContainer/EmptyViewContainer"; import { getDescriptionText, getEmptyScreenType, @@ -79,17 +76,6 @@ const EmptyFolderContainer = ({ [t, canCreateFiles, type], ); - return ( - - ); - return ( { //const location = useLocation(); + const isRoom = !!roomType; + linkStyles.color = theme.filesEmptyContainer.linkColor; const onCreate = (e) => { @@ -101,22 +108,26 @@ const EmptyContainer = ({ //isLoading && location?.state ? location.state?.isRoot : parentId === 0; - return isFiltered ? ( - - ) : isRootEmptyPage ? ( - - ) : ( - ; + + if (isRootEmptyPage) + return ( + + ); + + return ( + ); }; @@ -131,6 +142,7 @@ export default inject( clientLoadingStore, currentTariffStatusStore, publicRoomStore, + treeFoldersStore, }) => { const { isErrorRoomNotAvailable, isFiltered } = filesStore; const { isLoading } = clientLoadingStore; @@ -143,6 +155,9 @@ export default inject( const isRoomNotFoundOrMoved = isFiltered === null && isErrorRoomNotAvailable; + const { roomType, id: folderId, parentRoomType } = selectedFolderStore; + const { isArchiveFolderRoot } = treeFoldersStore; + const isRoot = selectedFolderStore.pathParts?.length === 1; return { @@ -157,6 +172,10 @@ export default inject( type: selectedFolderStore.type, isRoot, isPublicRoom, + roomType, + parentRoomType, + folderId, + isArchiveFolderRoot, }; }, )(observer(EmptyContainer)); diff --git a/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.helpers.tsx b/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.helpers.tsx index 178601b4a0..28e2cdc032 100644 --- a/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.helpers.tsx +++ b/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.helpers.tsx @@ -12,26 +12,31 @@ import { import EmptyFormRoomDarkIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.dark.svg"; import EmptyFormRoomLightIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.light.svg"; +import EmptyFormRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.collaborator.dark.svg"; +import EmptyFormRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.collaborator.light.svg"; + +import EmptyFormRoomFillingDarkIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.filling.dark.svg"; +import EmptyFormRoomFillingLightIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.filling.light.svg"; + import EmptyCustomRoomDarkIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.dark.svg"; import EmptyCustomRoomLightIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.light.svg"; +import EmptyCustomRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.collaborator.dark.svg"; +import EmptyCustomRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.collaborator.light.svg"; + import EmptyPublicRoomDarkIcon from "PUBLIC_DIR/images/emptyview/empty.public.room.dark.svg"; import EmptyPublicRoomLightIcon from "PUBLIC_DIR/images/emptyview/empty.public.room.light.svg"; import EmptyPublicRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.public.room.collaborator.dark.svg"; import EmptyPublicRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.public.room.collaborator.light.svg"; -import EmptyFormRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.collaborator.dark.svg"; -import EmptyFormRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.collaborator.light.svg"; +import EmptyCollaborationRoomDarkIcon from "PUBLIC_DIR/images/emptyview/empty.collaboration.room.dark.svg"; +import EmptyCollaborationRoomLightIcon from "PUBLIC_DIR/images/emptyview/empty.collaboration.room.light.svg"; +import EmptyCollaborationRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.collaboration.room.collaborator.dark.svg"; +import EmptyCollaborationRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.collaboration.room.collaborator.light.svg"; -import EmptyCustomRoomCollaboratorDarkIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.collaborator.dark.svg"; -import EmptyCustomRoomCollaboratorLightIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.collaborator.light.svg"; - -import EmptyCustomRoomOtherDarkIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.other.dark.svg"; -import EmptyCustomRoomOtherLightIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.other.light.svg"; - -import EmptyFormRoomFillingDarkIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.filling.dark.svg"; -import EmptyFormRoomFillingLightIcon from "PUBLIC_DIR/images/emptyview/empty.form.room.filling.light.svg"; +// import EmptyCustomRoomOtherDarkIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.other.dark.svg"; +// import EmptyCustomRoomOtherLightIcon from "PUBLIC_DIR/images/emptyview/empty.custom.room.other.light.svg"; import CreateNewFormIcon from "PUBLIC_DIR/images/emptyview/create.new.form.svg"; import CreateNewSpreadsheetIcon from "PUBLIC_DIR/images/emptyview/create.new.spreadsheet.svg"; @@ -90,8 +95,6 @@ export const getDescription = ( parentRoomType: Nullable, isArchiveFolderRoot: boolean, ): string => { - const isCollaborator = access === ShareAccessRights.Collaborator; - const isNotAdmin = isUser(access); if (isFolder) { @@ -189,7 +192,7 @@ export const getTitle = ( case RoomsType.FormRoom: return t("EmptyView:FormRoomEmptyTitle"); case RoomsType.EditingRoom: - return ""; + return t("EmptyView:CollaborationRoomEmptyTitle"); case RoomsType.PublicRoom: return t("EmptyView:PublicRoomEmptyTitle"); case RoomsType.CustomRoom: @@ -242,8 +245,25 @@ export const getRoomIcon = ( .with([RoomsType.FormRoom, P._], () => isBaseTheme ? : , ) - - .with([RoomsType.EditingRoom, P._], () =>
) + .with( + [ + RoomsType.EditingRoom, + P.union(ShareAccessRights.None, ShareAccessRights.RoomManager), + ], + () => + isBaseTheme ? ( + + ) : ( + + ), + ) + .with([RoomsType.EditingRoom, ShareAccessRights.Collaborator], () => + isBaseTheme ? ( + + ) : ( + + ), + ) .with( [ RoomsType.PublicRoom, @@ -282,12 +302,8 @@ export const getRoomIcon = ( ), ) - .with([RoomsType.CustomRoom, P._], () => - isBaseTheme ? ( - - ) : ( - - ), + .with([P._, P.when(isUser)], () => + isBaseTheme ? : , ) // eslint-disable-next-line react/jsx-no-useless-fragment .otherwise(() => <>) @@ -426,6 +442,11 @@ export const getOptions = ( t("EmptyView:InviteUsersOptionDescription"), ); + const inviteUserEditingRoom = createInviteOption( + t("EmptyView:InviteUsersOptionTitle"), + t("EmptyView:InviteUsersCollaborationOptionDescription"), + ); + const shareFillingRoom = { title: t("EmptyView:ShareOptionTitle"), description: t("EmptyView:ShareOptionDescription"), @@ -548,7 +569,17 @@ export const getOptions = ( return [uploadPDFFromDocSpace, uploadFromDevicePDF, shareFillingRoom]; case RoomsType.EditingRoom: - return []; + if (isNotAdmin) return []; + + if (isCollaborator) + return [createFile, uploadAllFromDocSpace, uploadFromDeviceAnyFile]; + + return [ + createFile, + inviteUserEditingRoom, + uploadAllFromDocSpace, + uploadFromDeviceAnyFile, + ]; case RoomsType.PublicRoom: if (isNotAdmin) return []; @@ -564,7 +595,8 @@ export const getOptions = ( case RoomsType.CustomRoom: if (isNotAdmin) return []; - if (isCollaborator) return [createFile, uploadFromDeviceAnyFile]; + if (isCollaborator) + return [createFile, uploadAllFromDocSpace, uploadFromDeviceAnyFile]; return [ createFile,