diff --git a/src/api/api.ts b/src/api/api.ts index 9256c8c..9d86869 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -617,7 +617,7 @@ export function getFileEntityUrl(req: FileURLService): ThunkResponse { +export function getFileInfo(req: GetFileInfoService, skipError = false): ThunkResponse { return async (dispatch, _getState) => { return await dispatch( send( @@ -628,6 +628,7 @@ export function getFileInfo(req: GetFileInfoService): ThunkResponse skipError, }, ), ); diff --git a/src/api/dashboard.ts b/src/api/dashboard.ts index 70b2be0..2974d1d 100644 --- a/src/api/dashboard.ts +++ b/src/api/dashboard.ts @@ -382,6 +382,7 @@ export interface File extends CommonMixin { }; user_hash_id?: string; + file_hash_id?: string; direct_link_map?: Record; } diff --git a/src/api/explorer.ts b/src/api/explorer.ts index 3304439..28d57ec 100644 --- a/src/api/explorer.ts +++ b/src/api/explorer.ts @@ -294,7 +294,8 @@ export interface EntityURLResponse { } export interface GetFileInfoService { - uri: string; + uri?: string; + id?: string; extended?: boolean; folder_summary?: boolean; } diff --git a/src/component/Admin/File/FileDialog/FileForm.tsx b/src/component/Admin/File/FileDialog/FileForm.tsx index e36cd23..bc560d9 100644 --- a/src/component/Admin/File/FileDialog/FileForm.tsx +++ b/src/component/Admin/File/FileDialog/FileForm.tsx @@ -1,11 +1,15 @@ -import { Box, Grid2 as Grid, Link, Typography, useMediaQuery, useTheme } from "@mui/material"; -import { useCallback, useContext, useMemo, useState } from "react"; +import { Box, Grid2 as Grid, Link, Skeleton, styled, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { useCallback, useContext, useEffect, useMemo, useState } from "react"; import { Trans, useTranslation } from "react-i18next"; import { Link as RouterLink } from "react-router-dom"; +import { getFileInfo } from "../../../../api/api"; +import { FileType } from "../../../../api/explorer"; import { useAppDispatch } from "../../../../redux/hooks"; import { sizeToString } from "../../../../util"; +import CrUri from "../../../../util/uri"; import { DenseFilledTextField, NoWrapTypography } from "../../../Common/StyledComponents"; import UserAvatar from "../../../Common/User/UserAvatar"; +import FileBadge from "../../../FileManager/FileBadge"; import SettingForm from "../../../Pages/Setting/SettingForm"; import SinglePolicySelectionInput from "../../Common/SinglePolicySelectionInput"; import UserDialog from "../../User/UserDialog/UserDialog"; @@ -14,6 +18,11 @@ import FileDirectLinks from "./FileDirectLinks"; import FileEntity from "./FileEntity"; import FileMetadata from "./FileMetadata"; +const StyledFileBadge = styled(FileBadge)(({ theme }) => ({ + minHeight: "40px", + border: `1px solid ${theme.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)"}`, +})); + const FileForm = () => { const dispatch = useAppDispatch(); const theme = useTheme(); @@ -22,6 +31,23 @@ const FileForm = () => { const { formRef, values, setFile } = useContext(FileDialogContext); const [userDialogOpen, setUserDialogOpen] = useState(false); const [userDialogID, setUserDialogID] = useState(0); + const [fileParentLoading, setFileParentLoading] = useState(true); + const [fileParent, setFileParent] = useState(null); + + useEffect(() => { + setFileParentLoading(true); + dispatch(getFileInfo({ id: values.file_hash_id }, true)) + .then((res) => { + const crUri = new CrUri(res.path); + setFileParent(crUri.parent().toString()); + }) + .catch(() => { + setFileParent(null); + }) + .finally(() => { + setFileParentLoading(false); + }); + }, [values.id]); const onNameChange = useCallback( (e: React.ChangeEvent) => { @@ -104,7 +130,21 @@ const FileForm = () => { - + + {!fileParentLoading && ( + <> + {fileParent && ( + + )} + {!fileParent && "-"} + + )} + {fileParentLoading && } + + {}} />