Web:EmptyContainer Added empty screen for the recent page
This commit is contained in:
parent
cd20d199c7
commit
92dd75d907
@ -40,5 +40,6 @@
|
|||||||
"MigrationDataTitle": "Migration Data",
|
"MigrationDataTitle": "Migration Data",
|
||||||
"MigrationDataDescription": "Import data to your {{productName}} from ONLYOFFICE Workspace, Google Workspace, or Nextcloud.",
|
"MigrationDataDescription": "Import data to your {{productName}} from ONLYOFFICE Workspace, Google Workspace, or Nextcloud.",
|
||||||
"EmptyRootRoomUserTitle": "There are no rooms here yet",
|
"EmptyRootRoomUserTitle": "There are no rooms here yet",
|
||||||
"EmptyRootRoomUserDescription": "The shared room will appear here."
|
"EmptyRootRoomUserDescription": "The shared room will appear here.",
|
||||||
|
"EmptyRecentDescription": "Your last viewed or edited docs will be displayed in this section."
|
||||||
}
|
}
|
||||||
|
@ -15,6 +15,7 @@ import CreateNewSpreadsheetIcon from "PUBLIC_DIR/images/emptyview/create.new.spr
|
|||||||
import CreateNewPresentation from "PUBLIC_DIR/images/emptyview/create.new.presentation.svg";
|
import CreateNewPresentation from "PUBLIC_DIR/images/emptyview/create.new.presentation.svg";
|
||||||
import CreateRoom from "PUBLIC_DIR/images/emptyview/create.room.svg";
|
import CreateRoom from "PUBLIC_DIR/images/emptyview/create.room.svg";
|
||||||
import InviteUserFormIcon from "PUBLIC_DIR/images/emptyview/invite.user.svg";
|
import InviteUserFormIcon from "PUBLIC_DIR/images/emptyview/invite.user.svg";
|
||||||
|
import PersonIcon from "PUBLIC_DIR/images/icons/12/person.svg";
|
||||||
|
|
||||||
import SharedIcon from "PUBLIC_DIR/images/emptyview/share.svg";
|
import SharedIcon from "PUBLIC_DIR/images/emptyview/share.svg";
|
||||||
|
|
||||||
@ -27,7 +28,10 @@ import FolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
|
|||||||
import type { Nullable, TTranslation } from "@docspace/shared/types";
|
import type { Nullable, TTranslation } from "@docspace/shared/types";
|
||||||
import type { TRoomSecurity } from "@docspace/shared/api/rooms/types";
|
import type { TRoomSecurity } from "@docspace/shared/api/rooms/types";
|
||||||
import type { TFolderSecurity } from "@docspace/shared/api/files/types";
|
import type { TFolderSecurity } from "@docspace/shared/api/files/types";
|
||||||
import type { EmptyViewItemType } from "@docspace/shared/components/empty-view";
|
import type {
|
||||||
|
EmptyViewItemType,
|
||||||
|
EmptyViewOptionsType,
|
||||||
|
} from "@docspace/shared/components/empty-view";
|
||||||
|
|
||||||
import type { AccessType, OptionActions } from "./EmptyViewContainer.types";
|
import type { AccessType, OptionActions } from "./EmptyViewContainer.types";
|
||||||
import { DefaultFolderType } from "./EmptyViewContainer.constants";
|
import { DefaultFolderType } from "./EmptyViewContainer.constants";
|
||||||
@ -131,7 +135,7 @@ export const getOptions = (
|
|||||||
isRootEmptyPage: boolean,
|
isRootEmptyPage: boolean,
|
||||||
rootFolderType: Nullable<FolderType>,
|
rootFolderType: Nullable<FolderType>,
|
||||||
actions: OptionActions,
|
actions: OptionActions,
|
||||||
): EmptyViewItemType[] => {
|
): EmptyViewOptionsType => {
|
||||||
const isFormFiller = access === ShareAccessRights.FormFilling;
|
const isFormFiller = access === ShareAccessRights.FormFilling;
|
||||||
const isCollaborator = access === ShareAccessRights.Collaborator;
|
const isCollaborator = access === ShareAccessRights.Collaborator;
|
||||||
|
|
||||||
@ -301,6 +305,7 @@ export const getOptions = (
|
|||||||
|
|
||||||
if (isRootEmptyPage) {
|
if (isRootEmptyPage) {
|
||||||
return match([rootFolderType, access])
|
return match([rootFolderType, access])
|
||||||
|
.returnType<EmptyViewOptionsType>()
|
||||||
.with([FolderType.Rooms, ShareAccessRights.None], () => [
|
.with([FolderType.Rooms, ShareAccessRights.None], () => [
|
||||||
createRoom,
|
createRoom,
|
||||||
inviteRootRoom,
|
inviteRootRoom,
|
||||||
@ -311,6 +316,11 @@ export const getOptions = (
|
|||||||
createSpreadsheet,
|
createSpreadsheet,
|
||||||
createPresentation,
|
createPresentation,
|
||||||
])
|
])
|
||||||
|
.with([FolderType.Recent, P._], () => ({
|
||||||
|
...actions.onGoToPersonal(),
|
||||||
|
icon: <PersonIcon />,
|
||||||
|
description: t("Files:GoToPersonal"),
|
||||||
|
}))
|
||||||
.otherwise(() => []);
|
.otherwise(() => []);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@ import { useTheme } from "styled-components";
|
|||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import React, { useMemo, useCallback } from "react";
|
import React, { useMemo, useCallback } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate, LinkProps } from "react-router-dom";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Events,
|
Events,
|
||||||
@ -10,6 +10,10 @@ import {
|
|||||||
FilterType,
|
FilterType,
|
||||||
} from "@docspace/shared/enums";
|
} from "@docspace/shared/enums";
|
||||||
import { EmptyView } from "@docspace/shared/components/empty-view";
|
import { EmptyView } from "@docspace/shared/components/empty-view";
|
||||||
|
import FilesFilter from "@docspace/shared/api/files/filter";
|
||||||
|
|
||||||
|
import { getCategoryUrl } from "SRC_DIR/helpers/utils";
|
||||||
|
import { CategoryType } from "SRC_DIR/helpers/constants";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
getDescription,
|
getDescription,
|
||||||
@ -42,10 +46,13 @@ const EmptyViewContainer = observer(
|
|||||||
isArchiveFolderRoot,
|
isArchiveFolderRoot,
|
||||||
rootFolderType,
|
rootFolderType,
|
||||||
isGracePeriod,
|
isGracePeriod,
|
||||||
|
myFolderId,
|
||||||
|
myFolder,
|
||||||
setViewInfoPanel,
|
setViewInfoPanel,
|
||||||
onClickInviteUsers,
|
onClickInviteUsers,
|
||||||
setVisibleInfoPanel,
|
setVisibleInfoPanel,
|
||||||
onCreateAndCopySharedLink,
|
onCreateAndCopySharedLink,
|
||||||
|
// setIsSectionFilterLoading,
|
||||||
setSelectFileFormRoomDialogVisible,
|
setSelectFileFormRoomDialogVisible,
|
||||||
setInviteUsersWarningDialogVisible,
|
setInviteUsersWarningDialogVisible,
|
||||||
inviteUser: inviteRootUser,
|
inviteUser: inviteRootUser,
|
||||||
@ -61,6 +68,35 @@ const EmptyViewContainer = observer(
|
|||||||
|
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|
||||||
|
const onGoToPersonal = useCallback((): LinkProps => {
|
||||||
|
const newFilter = FilesFilter.getDefault();
|
||||||
|
|
||||||
|
newFilter.folder = myFolderId?.toString() ?? "";
|
||||||
|
|
||||||
|
const state = {
|
||||||
|
title: myFolder.title,
|
||||||
|
isRoot: true,
|
||||||
|
rootFolderType: myFolder.rootFolderType,
|
||||||
|
};
|
||||||
|
|
||||||
|
const path = getCategoryUrl(CategoryType.Personal);
|
||||||
|
|
||||||
|
// setIsSectionFilterLoading(true);
|
||||||
|
|
||||||
|
return {
|
||||||
|
to: {
|
||||||
|
pathname: path,
|
||||||
|
search: newFilter.toUrlParams(),
|
||||||
|
},
|
||||||
|
state,
|
||||||
|
};
|
||||||
|
}, [
|
||||||
|
myFolder.rootFolderType,
|
||||||
|
myFolder.title,
|
||||||
|
myFolderId,
|
||||||
|
// setIsSectionFilterLoading,
|
||||||
|
]);
|
||||||
|
|
||||||
const onCreateRoom = useCallback(() => {
|
const onCreateRoom = useCallback(() => {
|
||||||
if (isGracePeriod) {
|
if (isGracePeriod) {
|
||||||
setInviteUsersWarningDialogVisible(true);
|
setInviteUsersWarningDialogVisible(true);
|
||||||
@ -195,6 +231,7 @@ const EmptyViewContainer = observer(
|
|||||||
onCreateRoom,
|
onCreateRoom,
|
||||||
inviteRootUser,
|
inviteRootUser,
|
||||||
navigate,
|
navigate,
|
||||||
|
onGoToPersonal,
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
[
|
[
|
||||||
@ -217,6 +254,7 @@ const EmptyViewContainer = observer(
|
|||||||
onCreateRoom,
|
onCreateRoom,
|
||||||
inviteRootUser,
|
inviteRootUser,
|
||||||
navigate,
|
navigate,
|
||||||
|
onGoToPersonal,
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -244,7 +282,13 @@ const InjectedEmptyViewContainer = inject<
|
|||||||
dialogsStore,
|
dialogsStore,
|
||||||
infoPanelStore,
|
infoPanelStore,
|
||||||
currentTariffStatusStore,
|
currentTariffStatusStore,
|
||||||
|
treeFoldersStore,
|
||||||
|
clientLoadingStore,
|
||||||
}): InjectedEmptyViewContainerProps => {
|
}): InjectedEmptyViewContainerProps => {
|
||||||
|
const { myFolderId, myFolder } = treeFoldersStore;
|
||||||
|
|
||||||
|
const { setIsSectionFilterLoading } = clientLoadingStore;
|
||||||
|
|
||||||
const { onClickInviteUsers, onCreateAndCopySharedLink, inviteUser } =
|
const { onClickInviteUsers, onCreateAndCopySharedLink, inviteUser } =
|
||||||
contextOptionsStore;
|
contextOptionsStore;
|
||||||
|
|
||||||
@ -272,13 +316,16 @@ const InjectedEmptyViewContainer = inject<
|
|||||||
isVisibleInfoPanel,
|
isVisibleInfoPanel,
|
||||||
rootFolderType,
|
rootFolderType,
|
||||||
isGracePeriod,
|
isGracePeriod,
|
||||||
|
myFolderId,
|
||||||
|
myFolder,
|
||||||
|
inviteUser,
|
||||||
|
setViewInfoPanel,
|
||||||
onClickInviteUsers,
|
onClickInviteUsers,
|
||||||
|
setVisibleInfoPanel,
|
||||||
|
setIsSectionFilterLoading,
|
||||||
onCreateAndCopySharedLink,
|
onCreateAndCopySharedLink,
|
||||||
setSelectFileFormRoomDialogVisible,
|
setSelectFileFormRoomDialogVisible,
|
||||||
setInviteUsersWarningDialogVisible,
|
setInviteUsersWarningDialogVisible,
|
||||||
setVisibleInfoPanel,
|
|
||||||
setViewInfoPanel,
|
|
||||||
inviteUser,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
)(EmptyViewContainer as React.FC<OutEmptyViewContainerProps>);
|
)(EmptyViewContainer as React.FC<OutEmptyViewContainerProps>);
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import type { NavigateFunction } from "react-router-dom";
|
import type { NavigateFunction, LinkProps } from "react-router-dom";
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
FilesSelectorFilterTypes,
|
FilesSelectorFilterTypes,
|
||||||
@ -54,7 +54,9 @@ export interface InjectedEmptyViewContainerProps
|
|||||||
Pick<
|
Pick<
|
||||||
TStore["selectedFolderStore"],
|
TStore["selectedFolderStore"],
|
||||||
"access" | "security" | "rootFolderType"
|
"access" | "security" | "rootFolderType"
|
||||||
> {
|
>,
|
||||||
|
Pick<TStore["treeFoldersStore"], "myFolder" | "myFolderId">,
|
||||||
|
Pick<TStore["clientLoadingStore"], "setIsSectionFilterLoading"> {
|
||||||
selectedFolder: ReturnType<
|
selectedFolder: ReturnType<
|
||||||
TStore["selectedFolderStore"]["getSelectedFolder"]
|
TStore["selectedFolderStore"]["getSelectedFolder"]
|
||||||
>;
|
>;
|
||||||
@ -80,4 +82,5 @@ export type OptionActions = {
|
|||||||
openInfoPanel: VoidFunction;
|
openInfoPanel: VoidFunction;
|
||||||
onCreateRoom: VoidFunction;
|
onCreateRoom: VoidFunction;
|
||||||
inviteRootUser: TStore["contextOptionsStore"]["inviteUser"];
|
inviteRootUser: TStore["contextOptionsStore"]["inviteUser"];
|
||||||
|
onGoToPersonal: () => LinkProps;
|
||||||
};
|
};
|
||||||
|
@ -34,6 +34,9 @@ import CreateNewFormIcon from "PUBLIC_DIR/images/emptyview/create.new.form.svg";
|
|||||||
import EmptyRoomsRootDarkIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.dark.svg";
|
import EmptyRoomsRootDarkIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.dark.svg";
|
||||||
import EmptyRoomsRootLightIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.light.svg";
|
import EmptyRoomsRootLightIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.light.svg";
|
||||||
|
|
||||||
|
import EmptyRecentDarkIcon from "PUBLIC_DIR/images/emptyview/empty.recent.dark.svg";
|
||||||
|
import EmptyRecentLightIcon from "PUBLIC_DIR/images/emptyview/empty.recent.light.svg";
|
||||||
|
|
||||||
import EmptyRoomsRootUserDarkIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.user.dark.svg";
|
import EmptyRoomsRootUserDarkIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.user.dark.svg";
|
||||||
import EmptyRoomsRootUserLightIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.user.light.svg";
|
import EmptyRoomsRootUserLightIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.user.light.svg";
|
||||||
|
|
||||||
@ -171,7 +174,7 @@ export const getRootDesctiption = (
|
|||||||
.with([FolderType.USER, ShareAccessRights.None], () =>
|
.with([FolderType.USER, ShareAccessRights.None], () =>
|
||||||
t("EmptyView:DefaultFolderDescription"),
|
t("EmptyView:DefaultFolderDescription"),
|
||||||
)
|
)
|
||||||
.with([FolderType.Recent, P._], () => t("Test"))
|
.with([FolderType.Recent, P._], () => t("EmptyView:EmptyRecentDescription"))
|
||||||
.with([FolderType.Archive, P._], () => t("Test"))
|
.with([FolderType.Archive, P._], () => t("Test"))
|
||||||
.with([FolderType.TRASH, P._], () => t("Test"))
|
.with([FolderType.TRASH, P._], () => t("Test"))
|
||||||
.otherwise(() => "");
|
.otherwise(() => "");
|
||||||
@ -262,7 +265,7 @@ export const getRootTitle = (
|
|||||||
.with([FolderType.USER, ShareAccessRights.None], () =>
|
.with([FolderType.USER, ShareAccessRights.None], () =>
|
||||||
t("Files:EmptyScreenFolder"),
|
t("Files:EmptyScreenFolder"),
|
||||||
)
|
)
|
||||||
.with([FolderType.Recent, P._], () => t("Test"))
|
.with([FolderType.Recent, P._], () => t("Files:NoFilesHereYet"))
|
||||||
.with([FolderType.Archive, P._], () => t("Test"))
|
.with([FolderType.Archive, P._], () => t("Test"))
|
||||||
.with([FolderType.TRASH, P._], () => t("Test"))
|
.with([FolderType.TRASH, P._], () => t("Test"))
|
||||||
.otherwise(() => "");
|
.otherwise(() => "");
|
||||||
@ -395,7 +398,9 @@ export const getRootIcom = (
|
|||||||
.with([FolderType.USER, ShareAccessRights.None], () =>
|
.with([FolderType.USER, ShareAccessRights.None], () =>
|
||||||
isBaseTheme ? <DefaultFolderLight /> : <DefaultFolderDark />,
|
isBaseTheme ? <DefaultFolderLight /> : <DefaultFolderDark />,
|
||||||
)
|
)
|
||||||
.with([FolderType.Recent, P._], () => <div />)
|
.with([FolderType.Recent, P._], () =>
|
||||||
|
isBaseTheme ? <EmptyRecentLightIcon /> : <EmptyRecentDarkIcon />,
|
||||||
|
)
|
||||||
.with([FolderType.Archive, P._], () => <div />)
|
.with([FolderType.Archive, P._], () => <div />)
|
||||||
.with([FolderType.TRASH, P._], () => <div />)
|
.with([FolderType.TRASH, P._], () => <div />)
|
||||||
.otherwise(() => <div />);
|
.otherwise(() => <div />);
|
||||||
|
Loading…
Reference in New Issue
Block a user