feat: face recognition toggle ui (#6913)

* feat: face recognition toggle ui

* feat: optimize titile

---------

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

frontend/src/metadata/components/dialog/metadata-face-recognition-dialog/index.css

@@ -0,0 +1,16 @@
+.metadata-face-recognition-dialog .change-face-recognition-status-management {
+  margin-bottom: 10px;
+}
+
+.metadata-face-recognition-dialog .change-face-recognition-status-management .custom-switch {
+  padding-left: 0;
+}
+
+.metadata-face-recognition-dialog .change-face-recognition-status-management:not(.disabled) .custom-switch:hover,
+.metadata-face-recognition-dialog .change-face-recognition-status-management:not(.disabled) .custom-switch:hover * {
+  cursor: pointer;
+}
+
+.metadata-face-recognition-dialog .tip {
+  font-size: 12px;
+}

frontend/src/metadata/components/dialog/metadata-face-recognition-dialog/index.js

@@ -1,12 +1,17 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import classnames from 'classnames';
+import Switch from '../../../../components/common/switch';
 import { gettext } from '../../../../utils/constants';
 import metadataAPI from '../../../api';
 import toaster from '../../../../components/toast';
 import { Utils } from '../../../../utils/utils';
 
-const MetadataFaceRecognitionDialog = ({ value, repoID, toggle, submit }) => {
+import './index.css';
+
+const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit }) => {
+  const [value, setValue] = useState(oldValue);
   const [submitting, setSubmitting] = useState(false);
 
   const onToggle = useCallback(() => {
@@ -25,16 +30,32 @@ const MetadataFaceRecognitionDialog = ({ value, repoID, toggle, submit }) => {
     });
   }, [repoID, submit, toggle]);
 
+  const onValueChange = useCallback(() => {
+    const nextValue = !value;
+    setValue(nextValue);
+  }, [value]);
+
   return (
     <Modal className="metadata-face-recognition-dialog" isOpen={true} toggle={onToggle}>
-      <ModalHeader toggle={onToggle}>{gettext('Face recognition')}</ModalHeader>
+      <ModalHeader toggle={onToggle}>{gettext('Face recognition management')}</ModalHeader>
       <ModalBody>
-        {value ? gettext('Face recognition enabled.') : gettext('Whether to enable face recognition?')}
+        <Switch
+          checked={value}
+          disabled={submitting || oldValue}
+          size="large"
+          textPosition="right"
+          className={classnames('change-face-recognition-status-management w-100', { 'disabled': submitting || oldValue })}
+          onChange={onValueChange}
+          placeholder={gettext('Face recognition')}
+        />
+        <div className="tip">
+          {gettext('Enable face recognition to identify people in your photos.')}
+        </div>
       </ModalBody>
-      {!value && (
+      {!oldValue && (
         <ModalFooter>
           <Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" disabled={submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
+          <Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
         </ModalFooter>
       )}
     </Modal>

frontend/src/metadata/components/metadata-details/constants.js

@@ -18,7 +18,8 @@ export const NOT_DISPLAY_COLUMN_KEYS = [
   PRIVATE_COLUMN_KEY.SIZE,
   PRIVATE_COLUMN_KEY.SUFFIX,
   PRIVATE_COLUMN_KEY.FILE_DETAILS,
-  PRIVATE_COLUMN_KEY.LOCATION
+  PRIVATE_COLUMN_KEY.LOCATION,
+  PRIVATE_COLUMN_KEY.FACE_LINKS,
 ];
 
 export const SYSTEM_FOLDERS = [