fix: bug

haiwen · Aug 6, 2024 · 2321bce · 2321bce
1 parent 5b1e7ba
commit 2321bce
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 82 deletions.
diff --git a/frontend/src/components/dirent-detail/detail-item/index.js b/frontend/src/components/dirent-detail/detail-item/index.js
@@ -20,7 +20,7 @@ const DetailItem = ({ field, value, valueId, valueClick, children, ...params })
         <span className="dirent-detail-item-name">{field.name}</span>
       </div>
       <div className={classnames('dirent-detail-item-value', { 'editable': valueClick })} id={valueId} onClick={valueClick}>
-        {children ? children : (<Formatter { ...params } field={field} value={value}/>)}
+        {children ? children : (<Formatter { ...params } field={field} value={value} />)}
       </div>
     </div>
   );

diff --git a/frontend/src/components/dirent-detail/dirent-details/dir-details.js b/frontend/src/components/dirent-detail/dirent-details/dir-details.js
@@ -6,7 +6,7 @@ import { CellType } from '../../../metadata/metadata-view/_basic';
 import { gettext } from '../../../utils/constants';
 import { MetadataDetails } from '../../../metadata';
 
-const DirDetails = ({ repoID, repoInfo, dirent, path, direntDetail }) => {
+const DirDetails = ({ repoID, repoInfo, dirent, path, direntDetail, ...params }) => {
   const parent = useMemo(() => getFileParent(repoInfo, dirent, path), [repoInfo, dirent, path]);
   const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
 
@@ -22,7 +22,7 @@ const DirDetails = ({ repoID, repoInfo, dirent, path, direntDetail }) => {
       }]} />
       <DetailItem field={{ type: CellType.MTIME, name: gettext('Last modified time') }} value={direntDetail.mtime} />
       {window.app.pageOptions.enableMetadataManagement && (
-        <MetadataDetails repoID={repoID} filePath={direntPath} direntType="dir" />
+        <MetadataDetails repoID={repoID} filePath={direntPath} direntType="dir" { ...params } />
       )}
     </>
   );

diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details.js b/frontend/src/components/dirent-detail/dirent-details/file-details.js
@@ -11,7 +11,7 @@ import { Utils } from '../../../utils/utils';
 import { MetadataDetails } from '../../../metadata';
 import ObjectUtils from '../../../metadata/metadata-view/utils/object-utils';
 
-const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList }) => {
+const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList, ...params }) => {
   const [isEditFileTagShow, setEditFileTagShow] = useState(false);
 
   const parent = useMemo(() => getFileParent(repoInfo, dirent, path), [repoInfo, dirent, path]);
@@ -47,7 +47,7 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
         </DetailItem>
       )}
       {window.app.pageOptions.enableMetadataManagement && (
-        <MetadataDetails repoID={repoID} filePath={direntPath} direntType="file" />
+        <MetadataDetails repoID={repoID} filePath={direntPath} direntType="file" { ...params } />
       )}
       {isEditFileTagShow &&
         <EditFileTagPopover

diff --git a/frontend/src/components/dirent-detail/dirent-details/index.js b/frontend/src/components/dirent-detail/dirent-details/index.js
@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { siteRoot } from '../../../utils/constants';
+import { siteRoot, mediaUrl } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
@@ -9,29 +9,53 @@ import Header from '../header';
 import DirDetails from './dir-details';
 import FileDetails from './file-details';
 import ObjectUtils from '../../../metadata/metadata-view/utils/object-utils';
+import metadataAPI from '../../../metadata/api';
+import { User } from '../../../metadata/metadata-view/model';
+import { UserService } from '../../../metadata/metadata-view/_basic';
 
 import './index.css';
 
-const DirentDetails = React.memo(({ dirent: propsDirent, path, repoID, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {
-  const [direntDetail, setDirentDetail] = useState('');
-  const [dirent, setDirent] = useState(null);
+class DirentDetails extends React.Component {
 
-  const updateDetailView = useCallback((repoID, dirent, direntPath) => {
+  constructor(props) {
+    super(props);
+    this.state = {
+      direntDetail: '',
+      dirent: null,
+      collaborators: [],
+      collaboratorsCache: {},
+    };
+    this.userService = new UserService({ mediaUrl, api: metadataAPI.listUserInfo });
+  }
+
+  updateCollaboratorsCache = (user) => {
+    const newCollaboratorsCache = { ...this.state.collaboratorsCache, [user.email]: user };
+    this.setState({ collaboratorsCache: newCollaboratorsCache });
+  };
+
+  loadCollaborators = () => {
+    metadataAPI.getCollaborators(this.props.repoID).then(res => {
+      const collaborators = Array.isArray(res?.data?.user_list) ? res.data.user_list.map(user => new User(user)) : [];
+      this.setState({ collaborators });
+    }).catch(error => {
+      this.setState({ collaborators: [] });
+    });
+  };
+
+  updateDetail = (repoID, dirent, direntPath) => {
     const apiName = dirent.type === 'file' ? 'getFileInfo' : 'getDirInfo';
     seafileAPI[apiName](repoID, direntPath).then(res => {
-      setDirentDetail(res.data);
-      setDirent(dirent);
+      this.setState(({ direntDetail: res.data, dirent }));
     }).catch(error => {
       const errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
-  }, []);
+  };
 
-  useEffect(() => {
-    setDirent(null);
-    if (propsDirent) {
-      const direntPath = Utils.joinPath(path, propsDirent.name);
-      updateDetailView(repoID, propsDirent, direntPath);
+  loadDetail = (repoID, dirent, path) => {
+    if (dirent) {
+      const direntPath = Utils.joinPath(path, dirent.name);
+      this.updateDetail(repoID, dirent, direntPath);
       return;
     }
     const dirPath = Utils.getDirName(path);
@@ -41,73 +65,92 @@ const DirentDetails = React.memo(({ dirent: propsDirent, path, repoID, currentRe
       if (folderDirent) {
         folderDirent = new Dirent(folderDirent);
       }
-      updateDetailView(repoID, folderDirent, path);
+      this.updateDetail(repoID, folderDirent, path);
     }).catch(error => {
       const errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [propsDirent, path, repoID]);
+  };
 
-  if (!dirent) return null;
-  const direntName = dirent.name;
-  const smallIconUrl = Utils.getDirentIcon(dirent);
-  // let bigIconUrl = Utils.getDirentIcon(dirent, true);
-  let bigIconUrl = '';
-  const isImg = Utils.imageCheck(dirent.name);
-  // const isVideo = Utils.videoCheck(dirent.name);
-  if (isImg) {
-    bigIconUrl = `${siteRoot}thumbnail/${repoID}/1024` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
+  componentDidMount() {
+    this.loadCollaborators();
+    this.loadDetail(this.props.repoID, this.props.dirent, this.props.path);
   }
 
-  return (
-    <div className="detail-container">
-      <Header title={direntName} icon={smallIconUrl} onClose={onClose} />
-      <div className="detail-body dirent-info">
-        {isImg && (
-          <div className="detail-image-thumbnail">
-            <img src={bigIconUrl} alt="" className="thumbnail" />
-          </div>
-        )}
-        {direntDetail && (
-          <div className="detail-content">
-            {dirent.type !== 'file' ? (
-              <DirDetails
-                repoID={repoID}
-                repoInfo={currentRepoInfo}
-                dirent={dirent}
-                direntDetail={direntDetail}
-                path={path}
-              />
-            ) : (
-              <FileDetails
-                repoID={repoID}
-                repoInfo={currentRepoInfo}
-                dirent={dirent}
-                path={path}
-                direntDetail={direntDetail}
-                repoTags={repoTags}
-                fileTagList={dirent ? dirent.file_tags : fileTags}
-                onFileTagChanged={onFileTagChanged}
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}, (props, nextProps) => {
-  const { dirent, path, repoID, currentRepoInfo, repoTags, fileTags } = props;
-  const isChanged = (
-    !ObjectUtils.isSameObject(currentRepoInfo, nextProps.currentRepoInfo) ||
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { dirent, path, repoID, currentRepoInfo, repoTags, fileTags } = this.props;
+    if (!ObjectUtils.isSameObject(currentRepoInfo, nextProps.currentRepoInfo) ||
     !ObjectUtils.isSameObject(dirent, nextProps.dirent) ||
     JSON.stringify(repoTags || []) !== JSON.stringify(nextProps.repoTags || []) ||
     JSON.stringify(fileTags || []) !== JSON.stringify(nextProps.fileTags || []) ||
     path !== nextProps.path ||
-    repoID !== nextProps.repoID
-  );
-  return !isChanged;
-});
+    repoID !== nextProps.repoID) {
+      this.setState({ dirent: null }, () => {
+        this.loadDetail(nextProps.repoID, nextProps.dirent, nextProps.path);
+      });
+    }
+  }
+
+  render() {
+    const { dirent, direntDetail, collaborators, collaboratorsCache } = this.state;
+    if (!dirent) return null;
+    const { repoID, path, fileTags } = this.props;
+    const direntName = dirent.name;
+    const smallIconUrl = Utils.getDirentIcon(dirent);
+    // let bigIconUrl = Utils.getDirentIcon(dirent, true);
+    let bigIconUrl = '';
+    const isImg = Utils.imageCheck(dirent.name);
+    // const isVideo = Utils.videoCheck(dirent.name);
+    if (isImg) {
+      bigIconUrl = `${siteRoot}thumbnail/${repoID}/1024` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
+    }
+
+    return (
+      <div className="detail-container">
+        <Header title={direntName} icon={smallIconUrl} onClose={this.props.onClose} />
+        <div className="detail-body dirent-info">
+          {isImg && (
+            <div className="detail-image-thumbnail">
+              <img src={bigIconUrl} alt="" className="thumbnail" />
+            </div>
+          )}
+          {direntDetail && (
+            <div className="detail-content">
+              {dirent.type !== 'file' ? (
+                <DirDetails
+                  repoID={repoID}
+                  repoInfo={this.props.currentRepoInfo}
+                  dirent={dirent}
+                  direntDetail={direntDetail}
+                  path={path}
+                  collaborators={collaborators}
+                  collaboratorsCache={collaboratorsCache}
+                  updateCollaboratorsCache={this.updateCollaboratorsCache}
+                  queryUserAPI={this.userService?.queryUser}
+                />
+              ) : (
+                <FileDetails
+                  repoID={repoID}
+                  repoInfo={this.props.currentRepoInfo}
+                  dirent={dirent}
+                  path={path}
+                  direntDetail={direntDetail}
+                  repoTags={this.props.repoTags}
+                  fileTagList={dirent ? dirent.file_tags : fileTags}
+                  onFileTagChanged={this.props.onFileTagChanged}
+                  collaborators={collaborators}
+                  collaboratorsCache={collaboratorsCache}
+                  updateCollaboratorsCache={this.updateCollaboratorsCache}
+                  queryUserAPI={this.userService?.queryUser}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
 
 DirentDetails.propTypes = {
   repoID: PropTypes.string.isRequired,

diff --git a/frontend/src/metadata/metadata-details/index.css b/frontend/src/metadata/metadata-details/index.css
@@ -0,0 +1,41 @@
+.dirent-detail-item .sf-metadata-checkbox-formatter {
+  border: 2px solid #e0e0e0;
+  border-radius: 3px;
+  height: 20px;
+  width: 20px;
+  overflow: hidden;
+}
+
+.dirent-detail-item .sf-metadata-checkbox-formatter .sf-metadata-icon-check-mark {
+  font-size: 12px;
+}
+
+.dirent-detail-item .sf-metadata-single-select-formatter {
+  height: 20px;
+  line-height: 1 !important;
+}
+
+.dirent-detail-item .sf-metadata-ui.collaborator-item .collaborator-avatar {
+  margin-left: 1px;
+}
+
+.dirent-detail-item .sf-metadata-collaborator-formatter .sf-metadata-ui.collaborator-item {
+  margin-bottom: 2px;
+  margin-top: 2px;
+}
+
+.dirent-detail-item .sf-metadata-record-checkbox-cell-empty {
+  line-height: 1;
+  height: 20px;
+}
+
+.dirent-detail-item .sf-metadata-record-checkbox-cell-empty::before {
+  content: '';
+  position: relative;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  border: 2px solid #e0e0e0;
+  border-radius: 3px;
+  line-height: 1;
+}
diff --git a/frontend/src/metadata/metadata-details/index.js b/frontend/src/metadata/metadata-details/index.js
@@ -5,8 +5,11 @@ import metadataAPI from '../api';
 import Column from '../metadata-view/model/metadata/column';
 import { normalizeFields, getCellValueByColumn } from './utils';
 import DetailItem from '../../components/dirent-detail/detail-item';
+import toaster from '../../components/toast';
 
-const MetadataDetails = ({ repoID, filePath, direntType, emptyTip }) => {
+import './index.css';
+
+const MetadataDetails = ({ repoID, filePath, direntType, emptyTip, ...params }) => {
   const [isLoading, setLoading] = useState(true);
   const [metadata, setMetadata] = useState({ record: {}, fields: [] });
 
@@ -25,6 +28,8 @@ const MetadataDetails = ({ repoID, filePath, direntType, emptyTip }) => {
       setMetadata({ record, fields });
       setLoading(false);
     }).catch(error => {
+      const errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
       setLoading(false);
     });
   }, [repoID, filePath, direntType]);
@@ -34,7 +39,7 @@ const MetadataDetails = ({ repoID, filePath, direntType, emptyTip }) => {
   if (!record._id) return null;
   return fields.map(field => {
     const value = getCellValueByColumn(record, field);
-    return (<DetailItem key={field.key} field={field} value={value} emptyTip={emptyTip}/>);
+    return (<DetailItem key={field.key} field={field} value={value} emptyTip={emptyTip} { ...params } />);
   });
 };
 

diff --git a/frontend/src/metadata/metadata-view/hooks/collaborators.js b/frontend/src/metadata/metadata-view/hooks/collaborators.js
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useContext, useState, useRef, useCallback, useEffect } from 'react';
+import React, { useContext, useState, useCallback, useEffect } from 'react';
 import { useMetadata } from './metadata';
 import { mediaUrl } from '../../../utils/constants';
 import { isValidEmail } from '../_basic';
@@ -9,7 +9,6 @@ const CollaboratorsContext = React.createContext(null);
 export const CollaboratorsProvider = ({
   children,
 }) => {
-  const collaboratorsCacheRef = useRef({});
   const [collaboratorsCache, setCollaboratorsCache] = useState({});
   const [collaborators, setCollaborators] = useState([]);
 
@@ -26,10 +25,9 @@ export const CollaboratorsProvider = ({
   }, [collaborators, collaboratorsCache]);
 
   const updateCollaboratorsCache = useCallback((user) => {
-    const newCollaboratorsCache = { ...collaboratorsCacheRef.current, [user.email]: user };
-    collaboratorsCacheRef.current = newCollaboratorsCache;
+    const newCollaboratorsCache = { ...collaboratorsCache, [user.email]: user };
     setCollaboratorsCache(newCollaboratorsCache);
-  }, []);
+  }, [collaboratorsCache]);
 
   const getCollaborator = useCallback((email) => {
     let collaborator = collaborators && collaborators.find(c => c.email === email);