Merge pull request #3346 from haiwen/repo-label

[my libs] added 'label current state'

frontend/src/components/dialog/label-repo-state-dialog.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import CreatableSelect from 'react-select/lib/Creatable';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import Loading from '../loading';
+import toaster from '../toast';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  repoName: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class LabelRepoStateDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      existingLabels: null,
+      errorMsg: '',
+      submitBtnDisabled: false
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getAllRepoSnapshotLabels().then((res) => {
+      this.setState({
+        isLoading: false,
+        existingLabels: res.data, 
+        errorMsg: ''
+      }); 
+    }).catch((error) => {
+      let errorMsg = ''; 
+      if (error.response) {
+        errorMsg = error.response.data.error_msg || gettext('Error');
+      } else {
+        errorMsg = gettext('Please check the network.');
+      }   
+      this.setState({
+        isLoading: false,
+        errorMsg: errorMsg
+      }); 
+    });
+  }
+
+  handleInputChange = (value) => {
+    this.setState({
+      inputValue: value
+    });
+  }
+
+  formSubmit = () => {
+    const inputValue = this.state.inputValue;
+
+    if (!inputValue || !inputValue.length) { // undefined or []
+      this.setState({
+        formErrorMsg: gettext('It is required.')
+      });
+      return;
+    }
+
+    this.setState({
+      submitBtnDisabled: true 
+    });
+
+    const {repoID, repoName} = this.props;
+    const labels = inputValue.map((item, index) => item.value).join(',');
+    seafileAPI.addNewRepoLabels(repoID, labels).then((res) => {
+      const msg = gettext('Successfully added label(s) for library {placeholder}').replace('{placeholder}', repoName);
+      toaster.success(msg);
+      this.props.toggleDialog();
+    }).catch((error) => {
+      let errorMsg = ''; 
+      if (error.response) {
+        errorMsg = error.response.data.error_msg || gettext('Error');
+      } else {
+        errorMsg = gettext('Please check the network.');
+      }   
+      this.setState({
+        formErrorMsg: errorMsg,
+        submitBtnDisabled: false
+      }); 
+    });
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Label current state')}</ModalHeader>
+        <ModalBody>
+          <Content data={this.state} handleChange={this.handleInputChange} />
+        </ModalBody>
+        {this.state.existingLabels && (
+          <ModalFooter>
+            <button className="btn btn-primary" disabled={this.state.submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
+          </ModalFooter>
+        )}
+      </Modal>
+    );
+  }
+}
+
+class Content extends React.Component {
+
+  render() {
+    const { isLoading, errorMsg, existingLabels, formErrorMsg } = this.props.data;
+
+    if (isLoading) {
+      return <Loading />;
+    }
+
+    if (errorMsg) {
+      return <p className="error mt-4 text-center">{errorMsg}</p>;
+    }
+
+    return (
+      <React.Fragment>
+        <CreatableSelect
+          isMulti={true}
+          onChange={this.props.handleChange}
+          placeholder=''
+          options={existingLabels.map((item, index) => { return {label: item, value: item}; })}
+        />
+        {formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}
+      </React.Fragment>
+    );
+  }
+}
+
+LabelRepoStateDialog.propTypes = propTypes;
+
+export default LabelRepoStateDialog;

frontend/src/pages/my-libs/mylib-repo-list-item.js

@@ -14,6 +14,7 @@ import TransferDialog from '../../components/dialog/transfer-dialog';
 import LibHistorySettingDialog from '../../components/dialog/lib-history-setting-dialog';
 import ChangeRepoPasswordDialog from '../../components/dialog/change-repo-password-dialog';
 import ResetEncryptedRepoPasswordDialog from '../../components/dialog/reset-encrypted-repo-password-dialog';
+import LabelRepoStateDialog from '../../components/dialog/label-repo-state-dialog';
 import Rename from '../../components/rename';
 import MylibRepoMenu from './mylib-repo-menu';
 
@@ -42,6 +43,7 @@ class MylibRepoListItem extends React.Component {
       isHistorySettingDialogShow: false,
       isChangePasswordDialogShow: false,
       isResetPasswordDialogShow: false,
+      isLabelRepoStateDialogOpen: false
     };
   }
 
@@ -90,7 +92,7 @@ class MylibRepoListItem extends React.Component {
         // todo
         break;
       case 'Label current state':
-        this.onLabel();
+        this.onLabelToggle();
         break;
       default:
         break;
@@ -142,8 +144,8 @@ class MylibRepoListItem extends React.Component {
     this.setState({isResetPasswordDialogShow: !this.state.isResetPasswordDialogShow});
   }
 
-  onLabel = () => {
+  onLabelToggle = () => {
-    // todo
+    this.setState({isLabelRepoStateDialogOpen: !this.state.isLabelRepoStateDialogOpen});
   }
 
   onUnfreezedItem = () => {
@@ -350,6 +352,15 @@ class MylibRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
+        {this.state.isLabelRepoStateDialogOpen && (
+          <ModalPortal>
+            <LabelRepoStateDialog
+              repoID={repo.repo_id}
+              repoName={repo.repo_name}
+              toggleDialog={this.onLabelToggle}
+            />
+          </ModalPortal>
+        )}
       </Fragment>
     );
   }