From db287ccf9d507a8f99ab6e8422e77b0e762edcb0 Mon Sep 17 00:00:00 2001 From: Aries Date: Fri, 3 Jan 2025 15:11:06 +0800 Subject: [PATCH] show people name in path (#7281) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * show people name in path * optimize * optimize * optimize * feat: optimize code --------- Co-authored-by: zhouwenxuan Co-authored-by: 杨国璇 --- .../src/components/cur-dir-path/dir-path.js | 109 ++++++++---------- .../dir-view-mode/dir-column-view.js | 2 + .../src/components/dirent-detail/index.js | 10 +- .../view-toolbar/face-recognition/index.js | 10 +- frontend/src/metadata/constants/z-index.js | 2 +- frontend/src/metadata/hooks/metadata-view.js | 1 + frontend/src/metadata/hooks/metadata.js | 4 +- .../src/metadata/metadata-tree-view/index.js | 2 +- frontend/src/metadata/store/index.js | 11 ++ .../src/metadata/store/operations/apply.js | 5 + .../metadata/store/operations/constants.js | 3 + .../metadata/views/face-recognition/index.js | 19 ++- .../face-recognition/person-photos/index.css | 37 ------ .../face-recognition/person-photos/index.js | 11 +- .../lib-content-view/lib-content-view.js | 5 + 15 files changed, 110 insertions(+), 121 deletions(-) diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js index 9db801dd90..011f92060f 100644 --- a/frontend/src/components/cur-dir-path/dir-path.js +++ b/frontend/src/components/cur-dir-path/dir-path.js @@ -9,7 +9,7 @@ import { siteRoot, gettext } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import { PRIVATE_FILE_TYPE } from '../../constants'; import { debounce } from '../../metadata/utils/common'; -import { EVENT_BUS_TYPE } from '../../metadata/constants'; +import { EVENT_BUS_TYPE, FACE_RECOGNITION_VIEW_ID } from '../../metadata/constants'; const propTypes = { currentRepoInfo: PropTypes.object.isRequired, @@ -118,63 +118,59 @@ class DirPath extends React.Component { }); }; - handelRefresh = debounce(() => { + handleRefresh = debounce(() => { window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.RELOAD_DATA); }, 200); + turnViewPathToLink = (pathList) => { + if (!Array.isArray(pathList) || pathList.length === 0) return null; + const [, , viewId, children] = pathList; + const isViewSupportClick = viewId === FACE_RECOGNITION_VIEW_ID && children; + return ( + <> + / + {gettext('Views')} + / + {}}> + + + {children && ( + <> + / + {children} + + )} +
+ + + {gettext('Refresh the view')} + +
+ + ); + }; + + turnTagPathToLink = (pathList) => { + if (!Array.isArray(pathList) || pathList.length === 0) return null; + const [, , tagId] = pathList; + return ( + <> + / + {gettext('Tags')} + / + + + ); + }; + turnPathToLink = (path) => { path = path[path.length - 1] === '/' ? path.slice(0, path.length - 1) : path; - let pathList = path.split('/'); + const pathList = path.split('/'); + if (pathList.includes(PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) return this.turnViewPathToLink(pathList); + if (pathList.includes(PRIVATE_FILE_TYPE.TAGS_PROPERTIES)) return this.turnTagPathToLink(pathList); let nodePath = ''; - if (pathList.length === 2 && !pathList[0] && [PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES, PRIVATE_FILE_TYPE.TAGS_PROPERTIES].includes(pathList[1])) { - return null; - } let pathElem = pathList.map((item, index) => { - if (item === '') { - return null; - } - if (index === pathList.length - 2 && item === PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES) { - return ( - - / - {gettext('Views')} - - ); - } - - if (index === pathList.length - 2 && item === PRIVATE_FILE_TYPE.TAGS_PROPERTIES) { - return ( - - / - {gettext('Tags')} - - ); - } - - if (index === pathList.length - 1 && pathList[pathList.length - 2] === PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES) { - return ( - - / - -
- - - {gettext('Refresh the view')} - -
- - ); - } - - if (index === pathList.length - 1 && pathList[pathList.length - 2] === PRIVATE_FILE_TYPE.TAGS_PROPERTIES) { - return ( - - / - - - ); - } - + if (item === '') return null; if (index === (pathList.length - 1)) { return ( @@ -221,16 +217,9 @@ class DirPath extends React.Component { return pathElem; }; - isViewMetadata = () => { - const { currentPath } = this.props; - const path = currentPath[currentPath.length - 1] === '/' ? currentPath.slice(0, currentPath.length - 1) : currentPath; - const pathList = path.split('/'); - return pathList[pathList.length - 2] === PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES; - }; - render() { - let { currentPath, repoName } = this.props; - let pathElem = this.turnPathToLink(currentPath); + const { currentPath, repoName } = this.props; + const pathElem = this.turnPathToLink(currentPath); return (
diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js index 90f2ed4510..da4e7735c3 100644 --- a/frontend/src/components/dir-view-mode/dir-column-view.js +++ b/frontend/src/components/dir-view-mode/dir-column-view.js @@ -83,6 +83,7 @@ const propTypes = { onItemsScroll: PropTypes.func.isRequired, eventBus: PropTypes.object, updateCurrentDirent: PropTypes.func.isRequired, + updateCurrentPath: PropTypes.func, }; class DirColumnView extends React.Component { @@ -211,6 +212,7 @@ class DirColumnView extends React.Component { addFolder={this.props.onAddFolder} updateCurrentDirent={this.props.updateCurrentDirent} showDirentDetail={this.props.showDirentDetail} + updateCurrentPath={this.props.updateCurrentPath} /> )} {currentMode === TAGS_MODE && ( diff --git a/frontend/src/components/dirent-detail/index.js b/frontend/src/components/dirent-detail/index.js index 542f244cd5..52caf8070a 100644 --- a/frontend/src/components/dirent-detail/index.js +++ b/frontend/src/components/dirent-detail/index.js @@ -7,6 +7,7 @@ import ObjectUtils from '../../metadata/utils/object-utils'; import { MetadataContext } from '../../metadata'; import { PRIVATE_FILE_TYPE } from '../../constants'; import { METADATA_MODE, TAGS_MODE } from '../dir-view-mode/constants'; +import { FACE_RECOGNITION_VIEW_ID } from '../../metadata/constants'; const Detail = React.memo(({ repoID, path, currentMode, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => { const isView = useMemo(() => currentMode === METADATA_MODE || path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES), [currentMode, path]); @@ -30,9 +31,12 @@ const Detail = React.memo(({ repoID, path, currentMode, dirent, currentRepoInfo, if (isTag) return null; - if (isView) { - const viewId = path.split('/').pop(); - if (!dirent) return (); + if (isView && !dirent) { + const pathParts = path.split('/'); + const [, , viewId, children] = pathParts; + if (!viewId) return null; + if (viewId === FACE_RECOGNITION_VIEW_ID && !children) return null; + return (); } if (path === '/' && !dirent) { diff --git a/frontend/src/metadata/components/view-toolbar/face-recognition/index.js b/frontend/src/metadata/components/view-toolbar/face-recognition/index.js index 2206e9454f..601aab0a59 100644 --- a/frontend/src/metadata/components/view-toolbar/face-recognition/index.js +++ b/frontend/src/metadata/components/view-toolbar/face-recognition/index.js @@ -52,13 +52,13 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, onToggleDeta columns={viewColumns} modifySorts={modifySorts} /> + {!isCustomPermission && ( +
+ +
+ )} )} - {!isCustomPermission && ( -
- -
- )}
diff --git a/frontend/src/metadata/constants/z-index.js b/frontend/src/metadata/constants/z-index.js index 01d4717e8b..ec9aeb2f34 100644 --- a/frontend/src/metadata/constants/z-index.js +++ b/frontend/src/metadata/constants/z-index.js @@ -3,7 +3,7 @@ export const CELL_MASK = 1; export const TABLE_MAIN_INTERVAL = 1; export const RESIZE_HANDLE = 1; -export const SEQUENCE_COLUMN = 1; +export const SEQUENCE_COLUMN = 2; // higher than unfrozen header cell(0), RESIZE_HANDLE export const FROZEN_HEADER_CELL = 2; diff --git a/frontend/src/metadata/hooks/metadata-view.js b/frontend/src/metadata/hooks/metadata-view.js index 68669cc5be..f7397091ba 100644 --- a/frontend/src/metadata/hooks/metadata-view.js +++ b/frontend/src/metadata/hooks/metadata-view.js @@ -363,6 +363,7 @@ export const MetadataViewProvider = ({ insertColumn, updateFileTags, addFolder: params.addFolder, + updateCurrentPath: params.updateCurrentPath, }} > {children} diff --git a/frontend/src/metadata/hooks/metadata.js b/frontend/src/metadata/hooks/metadata.js index 59178f3537..1ca4a8f7cc 100644 --- a/frontend/src/metadata/hooks/metadata.js +++ b/frontend/src/metadata/hooks/metadata.js @@ -375,7 +375,7 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, selectMetadata if (idViewMap[FACE_RECOGNITION_VIEW_ID]) { let isSelected = false; if (currentPath.includes('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/')) { - const currentViewId = currentPath.split('/').pop(); + const [, , currentViewId] = currentPath.split('/'); isSelected = currentViewId === FACE_RECOGNITION_VIEW_ID; } const folders = navigation.filter((nav) => nav.type === VIEWS_TYPE_FOLDER); @@ -428,7 +428,7 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, selectMetadata useEffect(() => { if (!currentPath.includes('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/')) return; - const currentViewId = currentPath.split('/').pop(); + const [, , currentViewId] = currentPath.split('/'); const currentView = idViewMap[currentViewId]; if (currentView) { document.title = `${currentView.name} - Seafile`; diff --git a/frontend/src/metadata/metadata-tree-view/index.js b/frontend/src/metadata/metadata-tree-view/index.js index a2282bfc71..373a6c9287 100644 --- a/frontend/src/metadata/metadata-tree-view/index.js +++ b/frontend/src/metadata/metadata-tree-view/index.js @@ -130,7 +130,7 @@ const MetadataTreeView = ({ userPerm, currentPath }) => { const renderView = (view) => { const viewPath = '/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/' + view._id; - const isSelected = currentPath === viewPath; + const isSelected = currentPath.includes(viewPath); return ( { const [showPeopleFaces, setShowPeopleFaces] = useState(false); const peopleRef = useRef(null); - const { metadata, store, updateCurrentDirent } = useMetadataView(); + const { metadata, store, updateCurrentDirent, updateCurrentPath } = useMetadataView(); const peoples = useMemo(() => { if (!Array.isArray(metadata.rows) || metadata.rows.length === 0) return []; @@ -26,19 +29,27 @@ const FaceRecognition = () => { const openPeople = useCallback((people) => { peopleRef.current = people; + const name = people._is_someone ? (people._name || gettext('Person image')) : gettext('Unknown people'); + updateCurrentPath(`/${PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES}/${FACE_RECOGNITION_VIEW_ID}/${name}`); setShowPeopleFaces(true); - }, []); + }, [updateCurrentPath]); const closePeople = useCallback(() => { peopleRef.current = null; setShowPeopleFaces(false); updateCurrentDirent(); - }, [updateCurrentDirent]); + updateCurrentPath(`/${PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES}/${FACE_RECOGNITION_VIEW_ID}`); + }, [updateCurrentDirent, updateCurrentPath]); const onRename = useCallback((id, newName, oldName) => { store.renamePeopleName(id, newName, oldName); }, [store]); + useEffect(() => { + updateCurrentPath(`/${PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES}/${FACE_RECOGNITION_VIEW_ID}`); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + return (
{showPeopleFaces ? ( diff --git a/frontend/src/metadata/views/face-recognition/person-photos/index.css b/frontend/src/metadata/views/face-recognition/person-photos/index.css index c5b9957fac..4b88e00df1 100644 --- a/frontend/src/metadata/views/face-recognition/person-photos/index.css +++ b/frontend/src/metadata/views/face-recognition/person-photos/index.css @@ -3,14 +3,6 @@ overflow-y: hidden !important; } -.sf-metadata-people-photos-container .sf-metadata-people-photos-header { - height: 48px; - display: flex; - align-items: center; - padding: 0 16px; - border-bottom: 1px solid #eee; -} - .sf-metadata-people-photos-container .sf-metadata-icon-btn { margin-left: -4px; border-radius: 3px; @@ -21,35 +13,6 @@ cursor: pointer; } -.sf-metadata-people-photos-container .sf-metadata-people-photos-header .sf-metadata-people-photos-header-back { - font-size: 14px; - height: 24px; - min-width: 24px; - display: flex; - align-items: center; - justify-content: center; - margin-left: -5px; - border-radius: 3px; -} - -.sf-metadata-people-photos-container .sf-metadata-people-photos-header .sf-metadata-people-photos-header-back:hover { - background-color: #EFEFEF; - cursor: pointer; -} - -.sf-metadata-people-photos-container .sf-metadata-people-photos-header-back .sf3-font-arrow { - color: #666; - font-size: 14px !important; -} - -.sf-metadata-people-photos-container .sf-metadata-people-photos-header .sf-metadata-people-name { - margin-left: 4px; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - .sf-metadata-people-photos-container .sf-metadata-gallery-container { height: calc(100% - 48px); } diff --git a/frontend/src/metadata/views/face-recognition/person-photos/index.js b/frontend/src/metadata/views/face-recognition/person-photos/index.js index 6aadbbb75c..6c24967be9 100644 --- a/frontend/src/metadata/views/face-recognition/person-photos/index.js +++ b/frontend/src/metadata/views/face-recognition/person-photos/index.js @@ -21,7 +21,7 @@ const PeoplePhotos = ({ view, people, onClose, onDeletePeoplePhotos, onRemovePeo const [metadata, setMetadata] = useState({ rows: [] }); const repoID = window.sfMetadataContext.getSetting('repoID'); - const { deleteFilesCallback } = useMetadataView(); + const { deleteFilesCallback, store } = useMetadataView(); const onLoadMore = useCallback(async () => { if (isLoadingMore) return; @@ -141,13 +141,14 @@ const PeoplePhotos = ({ view, people, onClose, onDeletePeoplePhotos, onRemovePeo const onViewChange = useCallback((update) => { metadataAPI.modifyView(repoID, FACE_RECOGNITION_VIEW_ID, update).then(res => { + store.modifyLocalView(update); const newView = { ...metadata.view, ...update }; loadData(newView); }).catch(error => { const errorMessage = Utils.getErrorMsg(error); toaster.danger(errorMessage); }); - }, [repoID, metadata, loadData]); + }, [repoID, metadata, store, loadData]); useEffect(() => { loadData({ sorts: view.sorts }); @@ -173,12 +174,6 @@ const PeoplePhotos = ({ view, people, onClose, onDeletePeoplePhotos, onRemovePeo return (
-
-
- -
-
{people._name || gettext('Person image')}
-
); diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index 8adbaf3668..b410f4878f 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -2147,6 +2147,10 @@ class LibContentView extends React.Component { }); }; + updatePath = (path) => { + this.setState({ path }); + }; + render() { const { repoID } = this.props; let { currentRepoInfo, userPerm, isCopyMoveProgressDialogShow, isDeleteFolderDialogOpen, errorMsg, @@ -2387,6 +2391,7 @@ class LibContentView extends React.Component { onItemsScroll={this.onItemsScroll} eventBus={this.props.eventBus} updateCurrentDirent={this.updateCurrentDirent} + updateCurrentPath={this.updatePath} /> :
{gettext('Folder does not exist.')}