Support mark folder sub items (#5638)

* add folder-items-ex-props api * pass user-name for set folder-items ex-props * frontend feat folder-items ex-props * opt request seaf-io * opt some variables * opt some tips * opt loading style for apply ex-props * feat: update code * fix confirm bug --------- Co-authored-by: er-pai-r <18335219360@163.com>
2025-09-20 10:58:33 +00:00 · 2023-09-25 12:25:20 +08:00
parent 6ee7debdb1
commit cdf36ed154
6 changed files with 296 additions and 15 deletions
--- a/frontend/src/components/dialog/confirm-apply-folder-properties-dialog.js
+++ b/frontend/src/components/dialog/confirm-apply-folder-properties-dialog.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import toaster from '../toast';
+import { Utils } from '../../utils/utils';
+import Loading from '../loading';
+
+import '../../css/apply-folder-properties.css';
+
+const propTypes = {
+  toggle: PropTypes.func,
+  repoID: PropTypes.string,
+  path: PropTypes.string
+};
+
+class ConfirmApplyFolderPropertiesDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      submitting: true
+    };
+    this.timer = null;
+  }
+
+  componentDidMount() {
+    const { repoID, path } = this.props;
+    seafileAPI.queryFolderItemsExtendedPropertiesStatus(repoID, path).then(res => {
+      if (res.data.is_finished) {
+        this.timer && clearInterval(this.timer);
+        this.setState({ submitting: false });
+      } else {
+        this.queryStatus();
+      }
+    }).catch(error => {
+      //
+    });
+  }
+
+  componentWillUnmount() {
+    this.timer && clearInterval(this.timer);
+  }
+
+  queryStatus = () =>{
+    const { repoID, path } = this.props;
+    this.timer = setInterval(() => {
+      seafileAPI.queryFolderItemsExtendedPropertiesStatus(repoID, path).then(res => {
+        if (res.data.is_finished === true) {
+          clearInterval(this.timer);
+          this.timer = null;
+          toaster.success(gettext('Applied folder properties'));
+          this.props.toggle();
+        }
+      }).catch(error => {
+        clearInterval(this.timer);
+        this.timer = null;
+        let errorMsg = Utils.getErrorMsg(error);
+        toaster.danger(errorMsg);
+        this.setState({ submitting: false });
+      });
+    }, 1000);
+  };
+
+  submit = () => {
+    const { repoID, path } = this.props;
+    this.setState({ submitting: true });
+    seafileAPI.setFolderItemsExtendedProperties(repoID, path).then(() => {
+      this.queryStatus();
+    }).catch(error => {
+      let errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
+      this.setState({ submitting: false });
+    });
+  };
+
+  render() {
+    const { submitting } = this.state;
+
+    return (
+      <Modal isOpen={true} toggle={this.props.toggle} className="apply-properties-dialog">
+        <ModalHeader toggle={this.props.toggle}>
+          {gettext('Apply properties')}
+        </ModalHeader>
+        <ModalBody>
+          <p>
+            {gettext('Are you sure to apply properties to all files inside the folder?')}
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color='secondary' onClick={this.props.toggle}>{gettext('Cancel')}</Button>
+          <Button color='primary' className='flex-shrink-0 apply-properties' disabled={submitting} onClick={this.submit}>
+            {submitting ? (<Loading />) : (<>{gettext('Submit')}</>)}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+
+}
+
+ConfirmApplyFolderPropertiesDialog.propTypes = propTypes;
+
+export default ConfirmApplyFolderPropertiesDialog;