From 3b6033f585e23dcd1db2247ab1d94684efce7358 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?= <ygx@Hello-word.local>
Date: Fri, 6 Dec 2024 17:34:51 +0800
Subject: [PATCH] feat: people sorts

---
 .../view-toolbar/face-recognition/index.js    | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

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 9cef59d51d1..25789c505f4 100644
--- a/frontend/src/metadata/components/view-toolbar/face-recognition/index.js
+++ b/frontend/src/metadata/components/view-toolbar/face-recognition/index.js
@@ -1,18 +1,24 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { GalleryGroupBySetter, GallerySliderSetter } from '../../data-process-setter';
+import { GalleryGroupBySetter, GallerySliderSetter, SortSetter } from '../../data-process-setter';
 import { gettext } from '../../../../utils/constants';
-import { EVENT_BUS_TYPE } from '../../../constants';
+import { EVENT_BUS_TYPE, FACE_RECOGNITION_VIEW_ID, VIEW_TYPE } from '../../../constants';
 
-const FaceRecognitionViewToolbar = ({ isCustomPermission, view, showDetail }) => {
+const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, view, showDetail }) => {
   const [isShow, setShow] = useState(false);
+  const [columns, setColumns] = useState([]);
 
-  const onToggle = useCallback((isShow) => {
+  const onToggle = useCallback((isShow, columns = []) => {
+    setColumns(columns);
     setShow(isShow);
   }, []);
 
+  const modifySorts = useCallback((sorts) => {
+    console.log(sorts);
+  }, []);
+
   useEffect(() => {
-    const unsubscribeToggle = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, onToggle);
+    const unsubscribeToggle = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, onToggle, columns);
     return () => {
       unsubscribeToggle && unsubscribeToggle();
     };
@@ -24,8 +30,18 @@ const FaceRecognitionViewToolbar = ({ isCustomPermission, view, showDetail }) =>
   return (
     <>
       <div className="sf-metadata-tool-left-operations">
-        <GalleryGroupBySetter view={view} />
-        <GallerySliderSetter view={view} />
+        <GalleryGroupBySetter view={{ _id: FACE_RECOGNITION_VIEW_ID }} />
+        <GallerySliderSetter view={{ _id: FACE_RECOGNITION_VIEW_ID }} />
+        <SortSetter
+          isNeedSubmit={true}
+          wrapperClass="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-sort"
+          target="sf-metadata-sort-popover"
+          readOnly={readOnly}
+          sorts={view.sorts}
+          type={VIEW_TYPE.FACE_RECOGNITION}
+          columns={columns}
+          modifySorts={modifySorts}
+        />
         {!isCustomPermission && (
           <div className="cur-view-path-btn ml-2" onClick={showDetail}>
             <span className="sf3-font sf3-font-info" aria-label={gettext('Properties')} title={gettext('Properties')}></span>