From 04129d4e7ec657cfb44491bb781b07eb1b438172 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?= <37972689+YangGuoXuan-0503@users.noreply.github.com> Date: Thu, 22 Aug 2024 11:46:19 +0800 Subject: [PATCH] Feat metadata detail location display (#6612) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: metadata location display in detail * feat: optimize code --------- Co-authored-by: 杨国璇 --- frontend/package-lock.json | 8 ++++---- frontend/package.json | 2 +- .../dirent-detail/detail-item/index.css | 3 ++- .../dirent-detail/dirent-details/file-details.js | 15 +++++++++++---- .../dirent-detail/dirent-details/index.css | 15 +++++++++++++++ .../src/metadata/metadata-details/constants.js | 1 - frontend/src/metadata/metadata-details/index.js | 7 +++++-- 7 files changed, 38 insertions(+), 13 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 28609aaf68..227f3329e0 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index ccf9d4e3d4..43d13b8357 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/components/dirent-detail/detail-item/index.css b/frontend/src/components/dirent-detail/detail-item/index.css index 21323101be..f24faabed4 100644 --- a/frontend/src/components/dirent-detail/detail-item/index.css +++ b/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; } diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details.js b/frontend/src/components/dirent-detail/dirent-details/file-details.js index 1442961d31..7e8c761cb9 100644 --- a/frontend/src/components/dirent-detail/dirent-details/file-details.js +++ b/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, - {!window.app.pageOptions.enableMetadataManagement && enableMetadata && ( + {window.app.pageOptions.enableFileTags && !enableMetadata && ( -
+
{Array.isArray(fileTagList) && fileTagList.length > 0 ? ( ) : ( @@ -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; }); diff --git a/frontend/src/components/dirent-detail/dirent-details/index.css b/frontend/src/components/dirent-detail/dirent-details/index.css index 870913a9e3..9a0e83b5b6 100644 --- a/frontend/src/components/dirent-detail/dirent-details/index.css +++ b/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;; +} diff --git a/frontend/src/metadata/metadata-details/constants.js b/frontend/src/metadata/metadata-details/constants.js index f2a54057a9..bd77672873 100644 --- a/frontend/src/metadata/metadata-details/constants.js +++ b/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, diff --git a/frontend/src/metadata/metadata-details/index.js b/frontend/src/metadata/metadata-details/index.js index 756a3c4a8b..47e028bacb 100644 --- a/frontend/src/metadata/metadata-details/index.js +++ b/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 => {