feat: face view support move (#7137)

* feat: face view support move

* feat: optimize code

* feat: optimize code

---------

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

frontend/src/metadata/components/popover/view-popover/add-view/index.js

@@ -17,8 +17,7 @@ const VIEW_OPTIONS = [
   }, {
     key: 'kanban',
     type: VIEW_TYPE.KANBAN,
-  },
+  }, {
-  {
     key: 'map',
     type: VIEW_TYPE.MAP,
   }

frontend/src/metadata/constants/view.js

@@ -70,6 +70,7 @@ export const VIEW_TYPE_DEFAULT_BASIC_FILTER = {
 export const VIEW_TYPE_DEFAULT_SORTS = {
   [VIEW_TYPE.TABLE]: [],
   [VIEW_TYPE.GALLERY]: [{ column_key: PRIVATE_COLUMN_KEY.FILE_CTIME, sort_type: SORT_TYPE.DOWN }],
+  [VIEW_TYPE.FACE_RECOGNITION]: [],
   [VIEW_TYPE.KANBAN]: [],
   [VIEW_TYPE.MAP]: [],
 };
@@ -77,6 +78,7 @@ export const VIEW_TYPE_DEFAULT_SORTS = {
 export const VIEW_SORT_COLUMN_RULES = {
   [VIEW_TYPE.TABLE]: (column) => SORT_COLUMN_OPTIONS.includes(column.type),
   [VIEW_TYPE.GALLERY]: (column) => GALLERY_SORT_COLUMN_OPTIONS.includes(column.type) || GALLERY_SORT_PRIVATE_COLUMN_KEYS.includes(column.key),
+  [VIEW_TYPE.FACE_RECOGNITION]: () => {},
   [VIEW_TYPE.KANBAN]: (column) => SORT_COLUMN_OPTIONS.includes(column.type),
   [VIEW_TYPE.MAP]: () => {},
 };
@@ -84,6 +86,7 @@ export const VIEW_SORT_COLUMN_RULES = {
 export const VIEW_FIRST_SORT_COLUMN_RULES = {
   [VIEW_TYPE.TABLE]: (column) => SORT_COLUMN_OPTIONS.includes(column.type),
   [VIEW_TYPE.GALLERY]: (column) => GALLERY_FIRST_SORT_COLUMN_OPTIONS.includes(column.type) || GALLERY_FIRST_SORT_PRIVATE_COLUMN_KEYS.includes(column.key),
+  [VIEW_TYPE.FACE_RECOGNITION]: () => {},
   [VIEW_TYPE.KANBAN]: (column) => SORT_COLUMN_OPTIONS.includes(column.type),
   [VIEW_TYPE.MAP]: () => {},
 };

frontend/src/metadata/hooks/metadata.js

@@ -15,7 +15,6 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
   const [isLoading, setLoading] = useState(true);
   const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
   const [navigation, setNavigation] = useState([]);
-  const [staticView, setStaticView] = useState([]);
   const [, setCount] = useState(0);
 
   const viewsMap = useRef({});
@@ -23,14 +22,6 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
 
   const { enableMetadata, isBeingBuilt, setIsBeingBuilt } = useMetadataStatus();
 
-  const updateEnableFaceRecognition = useCallback((newValue) => {
-    if (newValue === enableFaceRecognition) return;
-    setEnableFaceRecognition(newValue);
-    if (newValue) {
-      toaster.success(gettext('Recognizing portraits. Please refresh the page later.'));
-    }
-  }, [enableFaceRecognition]);
-
   // views
   useEffect(() => {
     setLoading(true);
@@ -42,11 +33,6 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
             viewsMap.current[view._id] = view;
           });
         }
-        viewsMap.current[FACE_RECOGNITION_VIEW_ID] = {
-          _id: FACE_RECOGNITION_VIEW_ID,
-          name: gettext('Photos - classified by people'),
-          type: VIEW_TYPE.FACE_RECOGNITION,
-        };
         setNavigation(navigation);
         setLoading(false);
       }).catch(error => {
@@ -59,7 +45,6 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
     hideMetadataView && hideMetadataView();
     setEnableFaceRecognition(false);
     viewsMap.current = {};
-    setStaticView([]);
     setNavigation([]);
     setLoading(false);
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -67,7 +52,6 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
 
   useEffect(() => {
     if (!enableMetadata) {
-      setStaticView([]);
       setEnableFaceRecognition(false);
       return;
     }
@@ -79,14 +63,6 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
     });
   }, [repoID, enableMetadata]);
 
-  useEffect(() => {
-    if (!enableFaceRecognition) {
-      setStaticView([]);
-      return;
-    }
-    setStaticView([{ _id: FACE_RECOGNITION_VIEW_ID, type: 'view' }]);
-  }, [enableFaceRecognition]);
-
   const selectView = useCallback((view, isSelected) => {
     if (isSelected) return;
     const node = {
@@ -176,6 +152,24 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
     });
   }, [repoID]);
 
+  const updateEnableFaceRecognition = useCallback((newValue) => {
+    if (newValue === enableFaceRecognition) return;
+    if (newValue) {
+      toaster.success(gettext('Recognizing portraits. Please refresh the page later.'));
+      addView(gettext('Photos - classified by people'), VIEW_TYPE.FACE_RECOGNITION, () => {}, () => {});
+    } else {
+      if (viewsMap.current[FACE_RECOGNITION_VIEW_ID]) {
+        let isSelected = false;
+        if (currentPath.includes('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/')) {
+          const currentViewId = currentPath.split('/').pop();
+          isSelected = currentViewId === FACE_RECOGNITION_VIEW_ID;
+        }
+        deleteView(FACE_RECOGNITION_VIEW_ID, isSelected);
+      }
+    }
+    setEnableFaceRecognition(newValue);
+  }, [enableFaceRecognition, currentPath, addView, deleteView]);
+
   useEffect(() => {
     if (isLoading) return;
     if (isBeingBuilt) {
@@ -228,7 +222,6 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, hideMetadataVi
       isBeingBuilt,
       setIsBeingBuilt,
       navigation,
-      staticView,
       viewsMap: viewsMap.current,
       selectView,
       addView,

frontend/src/metadata/metadata-tree-view/index.js

@@ -22,9 +22,7 @@ const MetadataTreeView = ({ userPerm, currentPath }) => {
   }, [userPerm]);
   const [, setState] = useState(0);
   const {
-    enableFaceRecognition,
     navigation,
-    staticView,
     viewsMap,
     selectView,
     addView,
@@ -136,20 +134,6 @@ const MetadataTreeView = ({ userPerm, currentPath }) => {
                 />
               </div>
             )}
-            {enableFaceRecognition && staticView.map((item) => {
-              const view = viewsMap[item._id];
-              const viewPath = '/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/' + view._id;
-              const isSelected = currentPath === viewPath;
-              return (
-                <ViewItem
-                  key={view._id}
-                  userPerm="r"
-                  view={view}
-                  isSelected={isSelected}
-                  onClick={(view) => selectView(view, isSelected)}
-                />
-              );
-            })}
             {canAdd && (
               <div id="sf-metadata-view-popover">
                 <CustomizeAddTool

frontend/src/metadata/metadata-tree-view/view-item/index.js

@@ -7,7 +7,7 @@ import Icon from '../../../components/icon';
 import ItemDropdownMenu from '../../../components/dropdown-menu/item-dropdown-menu';
 import { Utils, isMobile } from '../../../utils/utils';
 import { useMetadata } from '../../hooks';
-import { VIEW_TYPE_ICON } from '../../constants';
+import { FACE_RECOGNITION_VIEW_ID, VIEW_TYPE_ICON } from '../../constants';
 import { isValidViewName } from '../../utils/validate';
 import { isEnter } from '../../utils/hotkey';
 import toaster from '../../../components/toast';
@@ -49,6 +49,11 @@ const ViewItem = ({
 
   const operations = useMemo(() => {
     if (!canUpdate) return [];
+    if (view._id === FACE_RECOGNITION_VIEW_ID) {
+      return [
+        { key: 'rename', value: gettext('Rename') },
+      ];
+    }
     let value = [
       { key: 'rename', value: gettext('Rename') },
       { key: 'duplicate', value: gettext('Duplicate') }
@@ -57,7 +62,7 @@ const ViewItem = ({
       value.push({ key: 'delete', value: gettext('Delete') });
     }
     return value;
-  }, [canUpdate, canDelete]);
+  }, [view, canUpdate, canDelete]);
 
   const onMouseEnter = useCallback(() => {
     if (freeze) return;

seahub/repo_metadata/models.py

@@ -17,7 +17,10 @@ def generate_random_string_lower_digits(length):
     return random_string
 
 
-def generate_view_id(length, view_ids=None):
+def generate_view_id(length, type, view_ids=None):
+    if type == 'face_recognition':
+        return '_face_recognition'
+
     if not view_ids:
         return generate_random_string_lower_digits(length)
 
@@ -81,7 +84,7 @@ class RepoView(object):
 
     def init_view(self, view_ids=None):
         self.view_json = {
-            "_id": generate_view_id(4, view_ids),
+            "_id": generate_view_id(4, self.type, view_ids),
             "table_id": '0001',  # by default
             "name": self.name,
             "filters": [],