add_close_face_recognition (#6998)

* add_close_face_recognition

* update

* update

* update

---------

Co-authored-by: zheng.shen <zheng.shen@seafile.com>

frontend/src/components/dialog/lib-settings.js

@@ -111,7 +111,7 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
                   <LibFaceRecognitionSettingPanel
                     repoID={repoID}
                     value={enableFaceRecognition}
-                    submit={(value) => { updateEnableFaceRecognition(true); }}
+                    submit={(value) => { updateEnableFaceRecognition(value); }}
                     toggleDialog={toggleDialog}
                   />
                 </TabPane>

frontend/src/metadata/api.js

@@ -267,6 +267,11 @@ class MetadataManagerAPI {
     return this.req.post(url);
   };
 
+  closeFaceRecognition = (repoID) => {
+    const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/face-recognition/';
+    return this.req.delete(url);
+  };
+
   getFaceData = (repoID, start = 0, limit = 1000) => {
     const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/face-records/?start=' + start + '&limit=' + limit;
     return this.req.get(url);

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

@@ -7,18 +7,24 @@ import { gettext } from '../../../../utils/constants';
 import metadataAPI from '../../../api';
 import toaster from '../../../../components/toast';
 import { Utils } from '../../../../utils/utils';
+import TurnOffConfirmDialog from './turn-off-confirm';
 
 import './index.css';
 
 const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit }) => {
   const [value, setValue] = useState(oldValue);
   const [submitting, setSubmitting] = useState(false);
+  const [showTurnOffConfirmDialog, setShowTurnOffConfirmDialog] = useState(false);
 
   const onToggle = useCallback(() => {
     toggle();
   }, [toggle]);
 
   const onSubmit = useCallback(() => {
+    if (!value) {
+      setShowTurnOffConfirmDialog(true);
+      return;
+    }
     setSubmitting(true);
     metadataAPI.openFaceRecognition(repoID).then(res => {
       submit(true);
@@ -28,6 +34,23 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggleDialog:
       toaster.danger(errorMsg);
       setSubmitting(false);
     });
+  }, [repoID, submit, toggle, value]);
+
+  const turnOffConfirmToggle = useCallback(() => {
+    setShowTurnOffConfirmDialog(!showTurnOffConfirmDialog);
+  }, [showTurnOffConfirmDialog]);
+
+  const turnOffConfirmSubmit = useCallback(() => {
+    setShowTurnOffConfirmDialog(false);
+    setSubmitting(true);
+    metadataAPI.closeFaceRecognition(repoID).then(res => {
+      submit(false);
+      toggle();
+    }).catch(error => {
+      const errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
+      setSubmitting(false);
+    });
   }, [repoID, submit, toggle]);
 
   const onValueChange = useCallback(() => {
@@ -37,25 +60,30 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggleDialog:
 
   return (
     <>
-      <ModalBody className="metadata-face-recognition-dialog">
-        <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')}
-        />
-        <p className="tip m-0">
-          {gettext('Enable face recognition to identify people in your photos.')}
-        </p>
-      </ModalBody>
-      {!oldValue && (
-        <ModalFooter>
-          <Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
-        </ModalFooter>
+      {!showTurnOffConfirmDialog && (
+        <>
+          <ModalBody className="metadata-face-recognition-dialog">
+            <Switch
+              checked={value}
+              disabled={submitting}
+              size="large"
+              textPosition="right"
+              className={classnames('change-face-recognition-status-management w-100', { 'disabled': submitting || oldValue })}
+              onChange={onValueChange}
+              placeholder={gettext('Face recognition')}
+            />
+            <p className="tip m-0">
+              {gettext('Enable face recognition to identify people in your photos.')}
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
+            <Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
+          </ModalFooter>
+        </>
+      )}
+      {showTurnOffConfirmDialog && (
+        <TurnOffConfirmDialog toggle={turnOffConfirmToggle} submit={turnOffConfirmSubmit} />
       )}
     </>
   );

frontend/src/metadata/components/dialog/metadata-face-recognition-dialog/turn-off-confirm.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { gettext } from '../../../../utils/constants';
+
+const TurnOffConfirmDialog = ({ toggle, submit }) => {
+  return (
+    <Modal isOpen={true} toggle={toggle}>
+      <ModalHeader toggle={toggle}>{gettext('Turn off face recognition')}</ModalHeader>
+      <ModalBody>
+        <p>{gettext('Do you really want to turn off face recognition? Existing results will all be deleted.')}</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button color="secondary" onClick={toggle}>{gettext('Cancel')}</Button>
+        <Button color="primary" onClick={submit}>{gettext('Turn off')}</Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+TurnOffConfirmDialog.propTypes = {
+  toggle: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired
+};
+
+export default TurnOffConfirmDialog;