face_cluster (#6470)

* face_cluster

* update

* update

* feat: update ui

* feat: optimize code

* feat: update code

* feat: optimize ui

* feat: optimize view name

---------

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

frontend/src/components/dir-view-mode/constants.js

@@ -1,3 +1,4 @@
 export const LIST_MODE = 'list';
 export const GRID_MODE = 'grid';
 export const METADATA_MODE = 'metadata';
+export const FACE_RECOGNITION_MODE = 'person_image';

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -9,7 +9,8 @@ import ResizeBar from '../resize-bar';
 import { DRAG_HANDLER_HEIGHT, MAX_SIDE_PANEL_RATE, MIN_SIDE_PANEL_RATE } from '../resize-bar/constants';
 import { SeafileMetadata } from '../../metadata';
 import { mediaUrl } from '../../utils/constants';
-import { GRID_MODE, LIST_MODE, METADATA_MODE } from './constants';
+import { GRID_MODE, LIST_MODE, METADATA_MODE, FACE_RECOGNITION_MODE } from './constants';
+import FaceRecognition from '../../metadata/views/face-recognition';
 
 const propTypes = {
   isSidePanelFolded: PropTypes.bool,
@@ -203,6 +204,9 @@ class DirColumnView extends React.Component {
               renameFileCallback={this.props.renameFileCallback}
             />
           }
+          {currentMode === FACE_RECOGNITION_MODE &&
+            <FaceRecognition repoID={this.props.repoID}/>
+          }
           {currentMode === LIST_MODE &&
             <DirListView
               path={this.props.path}

frontend/src/components/dir-view-mode/dir-views.js

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import TreeSection from '../tree-section';
-import { MetadataStatusManagementDialog, MetadataTreeView, useMetadata } from '../../metadata';
+import { MetadataStatusManagementDialog, MetadataFaceRecognitionDialog, MetadataTreeView, useMetadata } from '../../metadata';
 import ExtensionPrompts from './extension-prompts';
 
 const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
@@ -12,18 +12,31 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
   }, [window.app.pageOptions.enableMetadataManagement]);
 
   const [showMetadataStatusManagementDialog, setShowMetadataStatusManagementDialog] = useState(false);
-  const { enableMetadata, updateEnableMetadata, navigation } = useMetadata();
+  const [showMetadataFaceRecognitionDialog, setShowMetadataFaceRecognitionDialog] = useState(false);
+  const { enableMetadata, updateEnableMetadata, enableFaceRecognition, updateEnableFaceRecognition, navigation } = useMetadata();
   const moreOperations = useMemo(() => {
     if (!enableMetadataManagement || !currentRepoInfo.is_admin) return [];
-    return [
+    let operations = [
       { key: 'extended-properties', value: gettext('Extended properties') }
     ];
-  }, [enableMetadataManagement, currentRepoInfo]);
+    if (enableMetadata) {
+      operations.push({ key: 'face-recognition', value: gettext('Face recognition') });
+    }
+    return operations;
+  }, [enableMetadataManagement, enableMetadata, currentRepoInfo]);
 
   const moreOperationClick = useCallback((operationKey) => {
-    if (operationKey === 'extended-properties') {
-      setShowMetadataStatusManagementDialog(true);
-      return;
+    switch (operationKey) {
+      case 'extended-properties': {
+        setShowMetadataStatusManagementDialog(true);
+        break;
+      }
+      case 'face-recognition': {
+        setShowMetadataFaceRecognitionDialog(true);
+        break;
+      }
+      default:
+        break;
     }
   }, []);
 
@@ -31,6 +44,14 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
     setShowMetadataStatusManagementDialog(false);
   }, []);
 
+  const closeMetadataFaceRecognitionDialog = useCallback(() => {
+    setShowMetadataFaceRecognitionDialog(false);
+  }, []);
+
+  const openMetadataFaceRecognition = useCallback(() => {
+    updateEnableFaceRecognition(true);
+  }, [updateEnableFaceRecognition]);
+
   const toggleMetadataStatus = useCallback((value) => {
     updateEnableMetadata(value);
   }, [updateEnableMetadata]);
@@ -63,6 +84,14 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
           submit={toggleMetadataStatus}
         />
       )}
+      {showMetadataFaceRecognitionDialog && (
+        <MetadataFaceRecognitionDialog
+          value={enableFaceRecognition}
+          repoID={repoID}
+          toggle={closeMetadataFaceRecognitionDialog}
+          submit={openMetadataFaceRecognition}
+        />
+      )}
     </>
   );
 };

frontend/src/components/dropdown-menu/item-dropdown-menu.js

@@ -52,9 +52,9 @@ class ItemDropdownMenu extends React.Component {
 
   UNSAFE_componentWillReceiveProps(nextProps) { // for toolbar item operation
     let { item } = nextProps;
-    if (item.name !== this.props.item.name) {
-      let menuList = this.props.getMenuList(item);
-      this.setState({ menuList: menuList });
+    const nextMenuList = nextProps.getMenuList(item);
+    if (item.name !== this.props.item.name || this.state.menuList !== nextMenuList) {
+      this.setState({ menuList: nextMenuList });
     }
   }