Feat metadata detail location display (#6612)

* feat: metadata location display in detail

* feat: optimize code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/package-lock.json

@@ -19,7 +19,7 @@
         "@seafile/sdoc-editor": "1.0.53",
         "@seafile/seafile-calendar": "0.0.12",
         "@seafile/seafile-editor": "1.0.109",
-        "@seafile/sf-metadata-ui-component": "0.0.23",
+        "@seafile/sf-metadata-ui-component": "0.0.24",
         "@uiw/codemirror-extensions-langs": "^4.19.4",
         "@uiw/react-codemirror": "^4.19.4",
         "axios": "^1.7.3",
@@ -5092,9 +5092,9 @@
       }
     },
     "node_modules/@seafile/sf-metadata-ui-component": {
-      "version": "0.0.23",
-      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.23.tgz",
-      "integrity": "sha512-YL6QSgRQ9c5OgO6Trpnic74HbsCtB8aRzrmTj6bt63L8krI9TG4dwxDbT+m7w0PhLgy6zFC0uyfcF3dqHn5iyw==",
+      "version": "0.0.24",
+      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.24.tgz",
+      "integrity": "sha512-QPIkQ65MiZNEP1CWJFTsiq32Eh+Igq6PIh43x9roPVflEI+eDD1PSLIDbRQl58vLn298maOobLpF9qibVS8I+w==",
       "dependencies": {
         "@seafile/seafile-calendar": "0.0.24",
         "@seafile/seafile-editor": "~1.0.102",

frontend/package.json

@@ -14,7 +14,7 @@
     "@seafile/sdoc-editor": "1.0.53",
     "@seafile/seafile-calendar": "0.0.12",
     "@seafile/seafile-editor": "1.0.109",
-    "@seafile/sf-metadata-ui-component": "0.0.23",
+    "@seafile/sf-metadata-ui-component": "0.0.24",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/react-codemirror": "^4.19.4",
     "axios": "^1.7.3",

frontend/src/components/dirent-detail/detail-item/index.css

@@ -80,7 +80,8 @@
 .dirent-detail-item .dirent-detail-item-value .text-formatter,
 .dirent-detail-item .dirent-detail-item-value .ctime-formatter,
 .dirent-detail-item .dirent-detail-item-value .mtime-formatter,
-.dirent-detail-item .dirent-detail-item-value .date-formatter {
+.dirent-detail-item .dirent-detail-item-value .date-formatter,
+.dirent-detail-item .dirent-detail-item-value .geolocation-formatter {
   padding: 6.5px 6px;
   line-height: 1.5;
 }

frontend/src/components/dirent-detail/dirent-details/file-details.js

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { v4 as uuidV4 } from 'uuid';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
+import classnames from 'classnames';
 import { getDirentPath } from './utils';
 import DetailItem from '../detail-item';
 import { CellType } from '../../../metadata/metadata-view/_basic';
@@ -51,9 +52,13 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
       <DetailItem field={lastModifiedTimeField} className="sf-metadata-property-detail-formatter">
         <Formatter field={lastModifiedTimeField} value={direntDetail.last_modified}/>
       </DetailItem>
-      {!window.app.pageOptions.enableMetadataManagement && enableMetadata && (
+      {window.app.pageOptions.enableFileTags && !enableMetadata && (
         <DetailItem field={tagsField} className="sf-metadata-property-detail-formatter">
-          <div className="" id={tagListTitleID} onClick={onEditFileTagToggle}>
+          <div
+            className={classnames('sf-metadata-property-detail-tags', { 'tags-empty': !Array.isArray(fileTagList) || fileTagList.length === 0 })}
+            id={tagListTitleID}
+            onClick={onEditFileTagToggle}
+          >
             {Array.isArray(fileTagList) && fileTagList.length > 0 ? (
               <FileTagList fileTagList={fileTagList} />
             ) : (
@@ -79,13 +84,15 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
     </>
   );
 }, (props, nextProps) => {
-  const { repoID, repoInfo, dirent, path, direntDetail } = props;
+  const { repoID, repoInfo, dirent, path, direntDetail, repoTags, fileTagList } = props;
   const isChanged = (
     repoID !== nextProps.repoID ||
     path !== nextProps.path ||
     !ObjectUtils.isSameObject(repoInfo, nextProps.repoInfo) ||
     !ObjectUtils.isSameObject(dirent, nextProps.dirent) ||
-    !ObjectUtils.isSameObject(direntDetail, nextProps.direntDetail)
+    !ObjectUtils.isSameObject(direntDetail, nextProps.direntDetail) ||
+    repoTags !== nextProps.repoTags ||
+    fileTagList !== nextProps.fileTagList
   );
   return !isChanged;
 });

frontend/src/components/dirent-detail/dirent-details/index.css

@@ -27,3 +27,18 @@
 .detail-body .empty-tip-text {
   color: #666;
 }
+
+.detail-body .sf-metadata-property-detail-tags {
+  padding: 7px 6px;
+  width: 100%;
+  cursor: pointer;
+}
+
+.detail-body .sf-metadata-property-detail-tags .file-tag-list {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.detail-body .sf-metadata-property-detail-tags.tags-empty {
+  padding: 6.5px 6px;;
+}

frontend/src/metadata/metadata-details/constants.js

@@ -14,7 +14,6 @@ export const NOT_DISPLAY_COLUMN_KEYS = [
   PRIVATE_COLUMN_KEY.FILE_NAME,
   PRIVATE_COLUMN_KEY.IS_DIR,
   PRIVATE_COLUMN_KEY.FILE_TYPE,
-  PRIVATE_COLUMN_KEY.LOCATION,
   PRIVATE_COLUMN_KEY.OBJ_ID,
   PRIVATE_COLUMN_KEY.SIZE,
   PRIVATE_COLUMN_KEY.SUFFIX,

frontend/src/metadata/metadata-details/index.js

@@ -9,7 +9,7 @@ import toaster from '../../components/toast';
 import { gettext } from '../../utils/constants';
 import { DetailEditor, CellFormatter } from '../metadata-view';
 import { getColumnOriginName } from '../metadata-view/utils/column-utils';
-import { CellType, getColumnOptions, getOptionName, PREDEFINED_COLUMN_KEYS, getColumnOptionNamesByIds } from '../metadata-view/_basic';
+import { CellType, getColumnOptions, getOptionName, PREDEFINED_COLUMN_KEYS, getColumnOptionNamesByIds, PRIVATE_COLUMN_KEY } from '../metadata-view/_basic';
 import { SYSTEM_FOLDERS } from './constants';
 
 import './index.css';
@@ -35,7 +35,10 @@ const MetadataDetails = ({ repoID, filePath, repoInfo, direntType }) => {
     metadataAPI.getMetadataRecordInfo(repoID, parentDir, fileName).then(res => {
       const { results, metadata } = res.data;
       const record = Array.isArray(results) && results.length > 0 ? results[0] : {};
-      const fields = normalizeFields(metadata).map(field => new Column(field));
+      let fields = normalizeFields(metadata).map(field => new Column(field));
+      if (!Utils.imageCheck(fileName)) {
+        fields = fields.filter(filed => filed.key !== PRIVATE_COLUMN_KEY.LOCATION);
+      }
       setMetadata({ record, fields });
       setLoading(false);
     }).catch(error => {