Client:EmptyView Added empty screen for collaboration room
This commit is contained in:
parent
88b4c17bb5
commit
6bd9b469e0
@ -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",
|
||||
|
@ -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 (
|
||||
<EmptyViewContainer
|
||||
type={roomType}
|
||||
folderType={type}
|
||||
isFolder={!isRoom}
|
||||
folderId={folderId}
|
||||
parentRoomType={parentRoomType}
|
||||
isArchiveFolderRoot={isArchiveFolderRoot}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<EmptyContainer
|
||||
headerText={headerText}
|
||||
|
@ -31,9 +31,10 @@ import { Events, FileExtensions } from "@docspace/shared/enums";
|
||||
|
||||
import RootFolderContainer from "./RootFolderContainer";
|
||||
import EmptyFilterContainer from "./EmptyFilterContainer";
|
||||
import EmptyFolderContainer from "./EmptyFolderContainer";
|
||||
import RoomNoAccessContainer from "./RoomNoAccessContainer";
|
||||
|
||||
import EmptyViewContainer from "./sub-components/EmptyViewContainer/EmptyViewContainer";
|
||||
|
||||
const linkStyles = {
|
||||
isHovered: true,
|
||||
type: "action",
|
||||
@ -56,9 +57,15 @@ const EmptyContainer = ({
|
||||
isRoot,
|
||||
isPublicRoom,
|
||||
isEmptyPage,
|
||||
roomType,
|
||||
parentRoomType,
|
||||
folderId,
|
||||
isArchiveFolderRoot,
|
||||
}) => {
|
||||
//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 ? (
|
||||
<EmptyFilterContainer linkStyles={linkStyles} />
|
||||
) : isRootEmptyPage ? (
|
||||
<RootFolderContainer
|
||||
onCreate={onCreate}
|
||||
linkStyles={linkStyles}
|
||||
onCreateRoom={onCreateRoom}
|
||||
sectionWidth={sectionWidth}
|
||||
/>
|
||||
) : (
|
||||
<EmptyFolderContainer
|
||||
sectionWidth={sectionWidth}
|
||||
onCreate={onCreate}
|
||||
linkStyles={linkStyles}
|
||||
type={type}
|
||||
isEmptyPage={isEmptyPage}
|
||||
if (isFiltered) return <EmptyFilterContainer linkStyles={linkStyles} />;
|
||||
|
||||
if (isRootEmptyPage)
|
||||
return (
|
||||
<RootFolderContainer
|
||||
onCreate={onCreate}
|
||||
linkStyles={linkStyles}
|
||||
onCreateRoom={onCreateRoom}
|
||||
sectionWidth={sectionWidth}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<EmptyViewContainer
|
||||
type={roomType}
|
||||
folderType={type}
|
||||
isFolder={!isRoom}
|
||||
folderId={folderId}
|
||||
parentRoomType={parentRoomType}
|
||||
isArchiveFolderRoot={isArchiveFolderRoot}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -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));
|
||||
|
@ -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<FolderType>,
|
||||
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 ? <EmptyFormRoomLightIcon /> : <EmptyFormRoomDarkIcon />,
|
||||
)
|
||||
|
||||
.with([RoomsType.EditingRoom, P._], () => <div />)
|
||||
.with(
|
||||
[
|
||||
RoomsType.EditingRoom,
|
||||
P.union(ShareAccessRights.None, ShareAccessRights.RoomManager),
|
||||
],
|
||||
() =>
|
||||
isBaseTheme ? (
|
||||
<EmptyCollaborationRoomLightIcon />
|
||||
) : (
|
||||
<EmptyCollaborationRoomDarkIcon />
|
||||
),
|
||||
)
|
||||
.with([RoomsType.EditingRoom, ShareAccessRights.Collaborator], () =>
|
||||
isBaseTheme ? (
|
||||
<EmptyCollaborationRoomCollaboratorLightIcon />
|
||||
) : (
|
||||
<EmptyCollaborationRoomCollaboratorDarkIcon />
|
||||
),
|
||||
)
|
||||
.with(
|
||||
[
|
||||
RoomsType.PublicRoom,
|
||||
@ -282,12 +302,8 @@ export const getRoomIcon = (
|
||||
<EmptyCustomRoomCollaboratorDarkIcon />
|
||||
),
|
||||
)
|
||||
.with([RoomsType.CustomRoom, P._], () =>
|
||||
isBaseTheme ? (
|
||||
<EmptyCustomRoomOtherLightIcon />
|
||||
) : (
|
||||
<EmptyCustomRoomOtherDarkIcon />
|
||||
),
|
||||
.with([P._, P.when(isUser)], () =>
|
||||
isBaseTheme ? <DefaultFolderUserLight /> : <DefaultFolderUserDark />,
|
||||
)
|
||||
// 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,
|
||||
|
Loading…
Reference in New Issue
Block a user