diff --git a/packages/client/public/locales/en/EmptyView.json b/packages/client/public/locales/en/EmptyView.json index e40265d495..906410ee79 100644 --- a/packages/client/public/locales/en/EmptyView.json +++ b/packages/client/public/locales/en/EmptyView.json @@ -40,5 +40,6 @@ "MigrationDataTitle": "Migration Data", "MigrationDataDescription": "Import data to your {{productName}} from ONLYOFFICE Workspace, Google Workspace, or Nextcloud.", "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." } 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 15c2a8e43d..0b8f36c9d3 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 @@ -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 CreateRoom from "PUBLIC_DIR/images/emptyview/create.room.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"; @@ -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 { TRoomSecurity } from "@docspace/shared/api/rooms/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 { DefaultFolderType } from "./EmptyViewContainer.constants"; @@ -131,7 +135,7 @@ export const getOptions = ( isRootEmptyPage: boolean, rootFolderType: Nullable, actions: OptionActions, -): EmptyViewItemType[] => { +): EmptyViewOptionsType => { const isFormFiller = access === ShareAccessRights.FormFilling; const isCollaborator = access === ShareAccessRights.Collaborator; @@ -301,6 +305,7 @@ export const getOptions = ( if (isRootEmptyPage) { return match([rootFolderType, access]) + .returnType() .with([FolderType.Rooms, ShareAccessRights.None], () => [ createRoom, inviteRootRoom, @@ -311,6 +316,11 @@ export const getOptions = ( createSpreadsheet, createPresentation, ]) + .with([FolderType.Recent, P._], () => ({ + ...actions.onGoToPersonal(), + icon: , + description: t("Files:GoToPersonal"), + })) .otherwise(() => []); } diff --git a/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.tsx b/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.tsx index 0014a5a2f0..f2d60fee5b 100644 --- a/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.tsx +++ b/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.tsx @@ -2,7 +2,7 @@ import { useTheme } from "styled-components"; import { inject, observer } from "mobx-react"; import { useTranslation } from "react-i18next"; import React, { useMemo, useCallback } from "react"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, LinkProps } from "react-router-dom"; import { Events, @@ -10,6 +10,10 @@ import { FilterType, } from "@docspace/shared/enums"; 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 { getDescription, @@ -42,10 +46,13 @@ const EmptyViewContainer = observer( isArchiveFolderRoot, rootFolderType, isGracePeriod, + myFolderId, + myFolder, setViewInfoPanel, onClickInviteUsers, setVisibleInfoPanel, onCreateAndCopySharedLink, + // setIsSectionFilterLoading, setSelectFileFormRoomDialogVisible, setInviteUsersWarningDialogVisible, inviteUser: inviteRootUser, @@ -61,6 +68,35 @@ const EmptyViewContainer = observer( 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(() => { if (isGracePeriod) { setInviteUsersWarningDialogVisible(true); @@ -195,6 +231,7 @@ const EmptyViewContainer = observer( onCreateRoom, inviteRootUser, navigate, + onGoToPersonal, }, ), [ @@ -217,6 +254,7 @@ const EmptyViewContainer = observer( onCreateRoom, inviteRootUser, navigate, + onGoToPersonal, ], ); @@ -244,7 +282,13 @@ const InjectedEmptyViewContainer = inject< dialogsStore, infoPanelStore, currentTariffStatusStore, + treeFoldersStore, + clientLoadingStore, }): InjectedEmptyViewContainerProps => { + const { myFolderId, myFolder } = treeFoldersStore; + + const { setIsSectionFilterLoading } = clientLoadingStore; + const { onClickInviteUsers, onCreateAndCopySharedLink, inviteUser } = contextOptionsStore; @@ -272,13 +316,16 @@ const InjectedEmptyViewContainer = inject< isVisibleInfoPanel, rootFolderType, isGracePeriod, + myFolderId, + myFolder, + inviteUser, + setViewInfoPanel, onClickInviteUsers, + setVisibleInfoPanel, + setIsSectionFilterLoading, onCreateAndCopySharedLink, setSelectFileFormRoomDialogVisible, setInviteUsersWarningDialogVisible, - setVisibleInfoPanel, - setViewInfoPanel, - inviteUser, }; }, )(EmptyViewContainer as React.FC); diff --git a/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.types.ts b/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.types.ts index fc06c07dc6..b1745905be 100644 --- a/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.types.ts +++ b/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.types.ts @@ -1,4 +1,4 @@ -import type { NavigateFunction } from "react-router-dom"; +import type { NavigateFunction, LinkProps } from "react-router-dom"; import type { FilesSelectorFilterTypes, @@ -54,7 +54,9 @@ export interface InjectedEmptyViewContainerProps Pick< TStore["selectedFolderStore"], "access" | "security" | "rootFolderType" - > { + >, + Pick, + Pick { selectedFolder: ReturnType< TStore["selectedFolderStore"]["getSelectedFolder"] >; @@ -80,4 +82,5 @@ export type OptionActions = { openInfoPanel: VoidFunction; onCreateRoom: VoidFunction; inviteRootUser: TStore["contextOptionsStore"]["inviteUser"]; + onGoToPersonal: () => LinkProps; }; diff --git a/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.utils.tsx b/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.utils.tsx index 47572f9ab9..fe575276b8 100644 --- a/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.utils.tsx +++ b/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.utils.tsx @@ -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 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 EmptyRoomsRootUserLightIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.user.light.svg"; @@ -171,7 +174,7 @@ export const getRootDesctiption = ( .with([FolderType.USER, ShareAccessRights.None], () => t("EmptyView:DefaultFolderDescription"), ) - .with([FolderType.Recent, P._], () => t("Test")) + .with([FolderType.Recent, P._], () => t("EmptyView:EmptyRecentDescription")) .with([FolderType.Archive, P._], () => t("Test")) .with([FolderType.TRASH, P._], () => t("Test")) .otherwise(() => ""); @@ -262,7 +265,7 @@ export const getRootTitle = ( .with([FolderType.USER, ShareAccessRights.None], () => t("Files:EmptyScreenFolder"), ) - .with([FolderType.Recent, P._], () => t("Test")) + .with([FolderType.Recent, P._], () => t("Files:NoFilesHereYet")) .with([FolderType.Archive, P._], () => t("Test")) .with([FolderType.TRASH, P._], () => t("Test")) .otherwise(() => ""); @@ -395,7 +398,9 @@ export const getRootIcom = ( .with([FolderType.USER, ShareAccessRights.None], () => isBaseTheme ? : , ) - .with([FolderType.Recent, P._], () =>
) + .with([FolderType.Recent, P._], () => + isBaseTheme ? : , + ) .with([FolderType.Archive, P._], () =>
) .with([FolderType.TRASH, P._], () =>
) .otherwise(() =>
);