init shared file view (#2748)

frontend/src/components/dialog/save-shared-file-dialog.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import FileChooser from '../file-chooser/file-chooser';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  sharedToken: PropTypes.string.isRequired,
+  toggleCancel: PropTypes.func.isRequired,
+  handleSaveSharedFile: PropTypes.func.isRequired,
+};
+
+class SaveSharedFileDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      repo: null,
+      selectedPath: '',
+      errMessage: '',
+    };
+  }
+
+  onSaveSharedFile = () => {
+    seafileAPI.saveSharedFile(this.state.repo.repo_id, this.state.selectedPath, this.props.sharedToken).then((res) => {
+      this.props.toggleCancel();
+      this.props.handleSaveSharedFile();
+    }).catch((error) => {
+      if (error.response) {
+        this.setState({
+          errMessage: error.response.data.error_msg
+        });
+      }
+    });
+  }
+
+  onDirentItemClick = (repo, selectedPath, dirent) => {
+    if (dirent.type === 'dir') {
+      this.setState({
+        repo: repo,
+        selectedPath: selectedPath,
+      });
+    }
+    else {
+      this.setState({
+        repo: null,
+        selectedPath: '',
+      });
+    }
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} className="sf-save-file">
+        <ModalHeader toggle={this.props.toggleCancel}>{gettext('Select Folder')}</ModalHeader>
+        <ModalBody>
+          <FileChooser
+            isShowFile={false}
+            onDirentItemClick={this.onDirentItemClick}
+          />
+          {this.state.errMessage && <Alert color="danger">{this.state.errMessage}</Alert>}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.props.toggleCancel}>{gettext('Cancel')}</Button>
+          { this.state.selectedPath ?
+            <Button color="primary" onClick={this.onSaveSharedFile}>{gettext('Submit')}</Button>
+            :
+            <Button color="primary" disabled>{gettext('Submit')}</Button>
+          }
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SaveSharedFileDialog.propTypes = propTypes;
+
+export default SaveSharedFileDialog;

frontend/src/components/file-chooser/file-chooser.js

@@ -9,7 +9,7 @@ import '../../css/file-chooser.css';
 
 const propTypes = {
   isShowFile: PropTypes.bool,
-  repoID: PropTypes.string.isRequired,
+  repoID: PropTypes.string,
   onDirentItemClick: PropTypes.func,
   onRepoItemClick: PropTypes.func,
 };
@@ -30,26 +30,31 @@ class FileChooser extends React.Component {
   }
 
   componentDidMount() {
-    let repoID = this.props.repoID;
-    seafileAPI.getRepoInfo(repoID).then(res => {
-      // need to optimized
-      let repoInfo = new RepoInfo(res.data);
-      this.setState({
-        currentRepoInfo: repoInfo,
+    if (this.props.repoID) {
+      let repoID = this.props.repoID;
+      seafileAPI.getRepoInfo(repoID).then(res => {
+        // need to optimized
+        let repoInfo = new RepoInfo(res.data);
+        this.setState({
+          currentRepoInfo: repoInfo,
+        });
       });
-    });
+    }
   }
 
   onOtherRepoToggle = () => {
     if (!this.state.hasRequest) {
-      let { currentRepoInfo } = this.state;
+      let that = this;
       seafileAPI.listRepos().then(res => {
         // todo optimized code
         let repos = res.data.repos;
         let repoList = [];
         let repoIdList = [];
         for(let i = 0; i < repos.length; i++) {
-          if (repos[i].repo_name === currentRepoInfo.repo_name || repos[i].permission !== 'rw') {
+          if (repos[i].permission !== 'rw') {
+            continue;
+          }
+          if (that.props.repoID && (repos[i].repo_name === that.state.currentRepoInfo.repo_name)) {
             continue;
           }
           if (repoIdList.indexOf(repos[i].repo_id) > -1) {
@@ -63,7 +68,8 @@ class FileChooser extends React.Component {
           isOtherRepoShow: !this.state.isOtherRepoShow,
         });
       });
-    } else {
+    }
+    else {
       this.setState({isOtherRepoShow: !this.state.isOtherRepoShow});
     }
   }
@@ -93,24 +99,27 @@ class FileChooser extends React.Component {
   render() {
     return (
       <div className="file-chooser-container">
-        <div className="list-view">
-          <div className="list-view-header">
-            <span className={`item-toggle fa ${this.state.isCurrentRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onCurrentRepoToggle}></span>
-            <span className="library">{gettext('Current Library')}</span>
+        {
+          this.props.repoID &&
+          <div className="list-view">
+            <div className="list-view-header">
+              <span className={`item-toggle fa ${this.state.isCurrentRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onCurrentRepoToggle}></span>
+              <span className="library">{gettext('Current Library')}</span>
+            </div>
+            {
+              this.state.isCurrentRepoShow && this.state.currentRepoInfo &&
+              <RepoListView 
+                initToShowChildren={true}
+                currentRepoInfo={this.state.currentRepoInfo}
+                selectedRepo={this.state.selectedRepo}
+                selectedPath={this.state.selectedPath}
+                onRepoItemClick={this.onRepoItemClick} 
+                onDirentItemClick={this.onDirentItemClick}
+                isShowFile={this.props.isShowFile}
+              />
+            }
           </div>
-          {
-            this.state.isCurrentRepoShow && this.state.currentRepoInfo &&
-            <RepoListView 
-              initToShowChildren={true}
-              currentRepoInfo={this.state.currentRepoInfo}
-              selectedRepo={this.state.selectedRepo}
-              selectedPath={this.state.selectedPath}
-              onRepoItemClick={this.onRepoItemClick} 
-              onDirentItemClick={this.onDirentItemClick}
-              isShowFile={this.props.isShowFile}
-            />
-          }
-        </div>
+        }
         <div className="list-view">
           <div className="list-view-header">
             <span className={`item-toggle fa ${this.state.isOtherRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onOtherRepoToggle}></span>