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>

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;

frontend/src/components/dirent-detail/detail-list-view.js

@@ -8,6 +8,7 @@ import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ModalPortal from '../modal-portal';
 import ExtraAttributesDialog from '../dialog/extra-attributes-dialog';
 import FileTagList from '../file-tag-list';
+import ConfirmApplyFolderPropertiesDialog from '../dialog/confirm-apply-folder-properties-dialog';
 
 const propTypes = {
   repoInfo: PropTypes.object.isRequired,
@@ -26,7 +27,8 @@ class DetailListView extends React.Component {
     super(props);
     this.state = {
       isEditFileTagShow: false,
-      isShowExtraAttributes: false,
+      isShowExtraProperties: false,
+      isShowApplyProperties: false
     };
   }
 
@@ -61,8 +63,12 @@ class DetailListView extends React.Component {
     return Utils.joinPath(path, dirent.name);
   };
 
-  toggleExtraAttributesDialog = () => {
-    this.setState({ isShowExtraAttributes: !this.state.isShowExtraAttributes });
+  toggleExtraPropertiesDialog = () => {
+    this.setState({ isShowExtraProperties: !this.state.isShowExtraProperties });
+  };
+
+  toggleApplyPropertiesDialog = () => {
+    this.setState({ isShowApplyProperties: !this.state.isShowApplyProperties });
   };
 
   renderTags = () => {
@@ -78,13 +84,26 @@ class DetailListView extends React.Component {
             <tr><th>{gettext('Location')}</th><td>{position}</td></tr>
             <tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.mtime).format('YYYY-MM-DD')}</td></tr>
             {direntDetail.permission === 'rw' && (
-              <tr className="file-extra-attributes">
-                <th colSpan={2}>
-                  <div className="edit-file-extra-attributes-btn" onClick={this.toggleExtraAttributesDialog}>
-                    {gettext('Edit extra properties')}
-                  </div>
-                </th>
-              </tr>
+              <Fragment>
+                <tr className="file-extra-attributes">
+                  <th colSpan={2}>
+                    <div className="edit-file-extra-attributes-btn" onClick={this.toggleExtraPropertiesDialog}>
+                      {gettext('Edit extra properties')}
+                    </div>
+                  </th>
+                </tr>
+                <tr className="file-extra-attributes">
+                  <th colSpan={2}>
+                    <div
+                      className="edit-file-extra-attributes-btn text-truncate"
+                      onClick={this.toggleApplyPropertiesDialog}
+                      title={gettext('Apply properties to files inside the folder')}
+                    >
+                      {gettext('Apply properties to files inside the folder')}
+                    </div>
+                  </th>
+                </tr>
+              </Fragment>
             )}
           </tbody>
         </table>
@@ -109,7 +128,7 @@ class DetailListView extends React.Component {
           {direntDetail.permission === 'rw' && (
             <tr className="file-extra-attributes">
               <th colSpan={2}>
-                <div className="edit-file-extra-attributes-btn" onClick={this.toggleExtraAttributesDialog}>
+                <div className="edit-file-extra-attributes-btn" onClick={this.toggleExtraPropertiesDialog}>
                   {gettext('Edit extra properties')}
                 </div>
               </th>
@@ -138,13 +157,20 @@ class DetailListView extends React.Component {
             />
           </ModalPortal>
         }
-        {this.state.isShowExtraAttributes && (
+        {this.state.isShowExtraProperties && (
           <ExtraAttributesDialog
             repoID={this.props.repoID}
             filePath={direntPath}
             direntType={direntType}
             direntDetail={direntDetail}
-            onToggle={this.toggleExtraAttributesDialog}
+            onToggle={this.toggleExtraPropertiesDialog}
+          />
+        )}
+        {this.state.isShowApplyProperties && (
+          <ConfirmApplyFolderPropertiesDialog
+            toggle={this.toggleApplyPropertiesDialog}
+            repoID={this.props.repoID}
+            path={direntPath}
           />
         )}
       </Fragment>