Feature/sidepanel in search result (#7844)

* show sidepanel in search result * show metadata details * show library details * optimize * optimize * optimize --------- Co-authored-by: zhouwenxuan <aries@Mac.local>
2025-09-23 20:37:42 +00:00 · 2025-05-28 21:29:46 +08:00
parent 1ef68b2a9c
commit 9f64c3ab8f
24 changed files with 364 additions and 39 deletions
--- a/frontend/src/components/search/details/index.js
+++ b/frontend/src/components/search/details/index.js
@@ -0,0 +1,103 @@
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import toaster from '../../toast';
+import { MetadataDetailsProvider } from '../../../metadata';
+import { Repo } from '../../../models';
+import { MetadataStatusProvider } from '../../../hooks';
+import Details from './details';
+import LibDetail from '../../dirent-detail/lib-details';
+
+import './index.css';
+
+const SearchedItemDetails = ({ repoID, path, dirent }) => {
+  const [repoInfo, setRepoInfo] = useState(null);
+  const [direntDetail, setDirentDetail] = useState(null);
+
+  useEffect(() => {
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      const repo = new Repo(res.data);
+      setRepoInfo(repo);
+    }).catch(error => {
+      const errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }, [repoID]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    const fetchData = async () => {
+      if (!repoID || !path || !dirent || dirent.isLib) {
+        setDirentDetail(null);
+        return;
+      }
+
+      try {
+        const res = await seafileAPI[dirent.type === 'file' ? 'getFileInfo' : 'getDirInfo'](
+          repoID,
+          path,
+          { signal: controller.signal }
+        );
+        setDirentDetail(res.data);
+      } catch (error) {
+        if (error.name !== 'AbortError') {
+          const errMessage = Utils.getErrorMsg(error);
+          toaster.danger(errMessage);
+        }
+      }
+    };
+
+    const timer = setTimeout(fetchData, 200);
+
+    return () => {
+      controller.abort();
+      clearTimeout(timer);
+    };
+  }, [repoID, repoInfo, path, dirent]);
+
+  if (!repoInfo) return;
+
+  if (dirent.isLib) {
+    return (
+      <div className="searched-item-details">
+        <LibDetail currentRepoInfo={repoInfo} />
+      </div>
+    );
+  }
+
+  if (!direntDetail) return null;
+
+  let parentDir = path !== '/' && path.endsWith('/') ? path.slice(0, -1) : path; // deal with folder path comes from search results, eg: /folder/
+  parentDir = Utils.getDirName(parentDir);
+  return (
+    <MetadataStatusProvider key={repoID} repoID={repoID} repoInfo={repoInfo}>
+      <MetadataDetailsProvider
+        repoID={repoID}
+        repoInfo={repoInfo}
+        path={path !== '/' && path.endsWith('/') ? path.slice(0, -1) : path}
+        dirent={dirent}
+        direntDetail={direntDetail}
+        direntType={dirent?.type !== 'file' ? 'dir' : 'file'}
+      >
+        <Details
+          repoID={repoID}
+          repoInfo={repoInfo}
+          path={parentDir}
+          dirent={dirent}
+          direntDetail={direntDetail}
+        />
+      </MetadataDetailsProvider>
+    </MetadataStatusProvider>
+  );
+};
+
+SearchedItemDetails.propTypes = {
+  repoID: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  dirent: PropTypes.object.isRequired,
+};
+
+export default SearchedItemDetails;
+