add repo create dialog

2025-08-01 23:38:37 +00:00 · 2018-12-07 10:36:59 +08:00 · 2018-12-07 10:36:59 +08:00 · 0efff439e9
commit 0efff439e9
parent 6a3fed0382
8 changed files with 205 additions and 61 deletions
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@ -140,8 +140,8 @@ class App extends Component {
            <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
            <MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
            <DirView path={siteRoot + 'library/:repoID/*'} onMenuClick={this.onShowSidePanel} updateCurrentTab={this.updateCurrentTab}/>
-            <Groups path={siteRoot + 'groups'} />
-            <Group path={siteRoot + 'group/:groupID'} />
+            <Groups path={siteRoot + 'groups'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
+            <Group path={siteRoot + 'group/:groupID'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
          </Router>
        </MainPanel>
      </div>
--- a/frontend/src/components/dialog/create-repo-dialog.js
+++ b/frontend/src/components/dialog/create-repo-dialog.js
@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Check } from 'reactstrap';
+import { Button, Modal, ModalHeader, Input, CustomInput, ModalBody, ModalFooter, Form, FormGroup, Label } from 'reactstrap';
 import { gettext } from '../../utils/constants';

 const propTypes = {
-
+  onCreateRepo: PropTypes.func.isRequired,
+  onCreateToggle: PropTypes.func.isRequired,
 };

 class CreateRepoDialog extends React.Component {
@ -12,21 +13,35 @@ class CreateRepoDialog extends React.Component {
    super(props);
    this.state = {
      repoName: '',
-      password: '',
+      disabled: true,
+      encrypt: false,
+      password1: '',
      password2: '',
+      errMessage: '',
    };
    this.newInput = React.createRef();
  }

-  handleChange = (e) => {
-    this.setState({
-      childName: e.target.value, 
-    });
+  handleRepoNameChange = (e) => {
+    this.setState({repoName: e.target.value});
+  }
+
+  handlePassword1Change = (e) => {
+    this.setState({password1: e.target.value});
+  }
+
+  handlePassword2Change = (e) => {
+    this.setState({password2: e.target.value});
  }

  handleSubmit = () => {
-    let path = this.state.parentPath + this.state.childName;
-    this.props.onAddFolder(path);
+    let isValidate = this.validateInputParams();
+    if (isValidate) {
+      let repoName = this.state.repoName.trim();
+      let password = this.state.encrypt ? this.state.password1 : '';
+      let repo = this.createRepo(repoName, password);
+      this.props.onCreateRepo(repo);
+    }
  } 

  handleKeyPress = (e) => {
@ -36,17 +51,86 @@ class CreateRepoDialog extends React.Component {
  }

  toggle = () => {
-    this.props.addFolderCancel();
+    this.props.onCreateToggle();
  }

  componentDidMount() {
    this.newInput.focus();
  }

+  validateInputParams() {
+    let errMessage = '';
+    let repoName = this.state.repoName.trim();
+    if (!repoName.length) {
+      errMessage = 'Name is required';
+      this.setState({errMessage: errMessage});
+      return false;
+
+    }
+    if (repoName.indexOf('/') > -1) {
+      errMessage = 'Name should not include '/'.';
+      this.setState({errMessage: errMessage});
+      return;
+    }
+    if (this.state.encrypt) {
+      let password1 = this.state.password1.trim();
+      let password2 = this.state.password2.trim();
+      if (!password1.length) {
+        errMessage = 'Please enter password';
+        this.setState({errMessage: errMessage});
+        return false;
+      }
+      if (!password2.length) {
+        errMessage = 'Please enter the password again';
+        this.setState({errMessage: errMessage});
+        return false;
+      }
+      if (password1.length < 8) {
+        errMessage = 'Password is too short';
+        this.setState({errMessage: errMessage});
+        return false;
+      }
+      if (password1 !== password2) {
+        errMessage = 'Passwords don\'t match';
+        this.setState({errMessage: errMessage});
+        return false;
+      }
+    }
+    return true;
+  }
+
+  onEncrypted = (e) => {
+    let isChecked = e.target.checked;
+    this.setState({
+      encrypt: isChecked,
+      disabled: !isChecked
+    });
+  }
+
+  createRepo = (repoName, password) => {
+    let encrypt = password ? true : false;
+    let repo = {
+      id: null,
+      name: repoName,
+      desc: "",
+      encrypted: encrypt,
+      passwd: password,
+      passwd1: password,
+      passwd2: password,
+      mtime: 0,
+      mtime_relative: "",
+      owner: "-",
+      owner_nickname: "-",
+      permission: "rw",
+      storage_name: "-",
+    };
+    return repo;
+  }
+
  render() {
    return (
      <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('New Folder')}</ModalHeader>
+        <ModalHeader toggle={this.toggle}>{gettext('New Library')}</ModalHeader>
        <ModalBody>
          <Form>
            <FormGroup>
@ -55,33 +139,36 @@ class CreateRepoDialog extends React.Component {
                onKeyPress={this.handleKeyPress} 
                innerRef={input => {this.newInput = input;}} 
                id="fileName" placeholder={gettext('newName')} 
-                value={this.state.childName} 
-                onChange={this.handleNameChange}
+                value={this.state.repoName} 
+                onChange={this.handleRepoNameChange}
+              />
+            </FormGroup>
+            <FormGroup check>
+              <Input type="checkbox" id="encrypt" onChange={this.onEncrypted}/>
+              <Label for="encrypt">{gettext('Encrypt')}</Label>
+            </FormGroup>
+            <FormGroup>
+              <Label for="passwd1">{gettext('Password')} ({gettext('at least 8 characters')})</Label>
+              <Input 
+                id="passwd1" 
+                type="password"
+                disabled={this.state.disabled}
+                value={this.state.password1} 
+                onChange={this.handlePassword1Change}
              />
            </FormGroup>
            <FormGroup>
-              <Input type="checkbox" id="encrypt"/>{gettext('Encrypt')}
-            </FormGroup>
-            <FormGroup>
-              <Label for="fileName">{gettext('Password(at least 8 characters)')}</Label>
+              <Label for="passwd2">{gettext('Password again')}: </Label>
              <Input 
-                id="fileName" 
-                placeholder={gettext('password')} 
-                value={this.state.childName} 
-                onChange={this.handlePasswordChange}
-              />
-            </FormGroup>
-            <FormGroup>
-              <Label for="fileName">{gettext('Password again')}: </Label>
-              <Input 
-                id="fileName" 
-                placeholder={gettext('password2')} 
-                value={this.state.childName} 
+                id="passwd2"
+                type="password"
+                disabled={this.state.disabled}
+                value={this.state.password2} 
                onChange={this.handlePassword2Change}
              />
            </FormGroup>
          </Form>
-          <div className="err-message"></div>
+          <Label className="err-message">{gettext(this.state.errMessage)}</Label>
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@ -7,7 +7,7 @@ import More from '../more';

 const propTypes = {
  placeholder: PropTypes.string,
-  repoID: PropTypes.string.isRequired,
+  repoID: PropTypes.string,
  onSearchedClick: PropTypes.func.isRequired,
 };

--- a/frontend/src/components/toolbar/common-toolbar.js
+++ b/frontend/src/components/toolbar/common-toolbar.js
@ -6,7 +6,7 @@ import Notification from '../common/notification';
 import Account from '../common/account';

 const propTypes = {
-  repoID: PropTypes.string.isRequired,
+  repoID: PropTypes.string,
  onSearchedClick: PropTypes.func.isRequired,
  searchPlaceholder: PropTypes.string
 };
--- a/frontend/src/components/toolbar/repo-view-toobar.js
+++ b/frontend/src/components/toolbar/repo-view-toobar.js
@ -1,23 +1,55 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
+import ModalPortal from '../modal-portal';
+import CreateRepoDialog from '../dialog/create-repo-dialog';

 const propTypes = {
-  isOwnLibrary: PropTypes.bool.isRequired,
-  libraryType: PropTypes.string.isRequired,
+  // isOwnLibrary: PropTypes.bool.isRequired,
+  // libraryType: PropTypes.string.isRequired,
+  onCreateRepo: PropTypes.func.isRequired,
 };

 class RepoViewToolbar extends React.Component {
+  
+  constructor(props) {
+    super(props);
+    this.state = {
+      isCreateRepoDialogShow: false,
+    };
+  }
+
+  onCreateRepo = (repo) => {
+    this.props.onCreateRepo(repo);
+    this.onCreateToggle();
+  }
+
+  onCreateToggle = () => {
+    this.setState({isCreateRepoDialogShow: !this.state.isCreateRepoDialogShow});
+  }

  render() {
    return (
-      <div className="cur-view-toolbar border-left-show">
-        <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
-        <div className="operation">
-          <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateClick}>{gettext('New Library')}</button>
-          <button className="btn btn-secondary operation-item" title={gettext('More')} onClick={this.onShareClick}>{gettext('More')}</button>
+      <Fragment>
+        <div className="cur-view-toolbar border-left-show">
+          <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
+          <div className="operation">
+            <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
+              <i className="fas fa-plus-square op-icon"></i>
+              {gettext('New Library')}
+            </button>
+            <button className="btn btn-secondary operation-item" title={gettext('More')} onClick={this.onShareClick}>{gettext('More')}</button>
+          </div>
        </div>
-      </div>
+        {this.state.isCreateRepoDialogShow && (
+          <ModalPortal>
+            <CreateRepoDialog 
+              onCreateRepo={this.onCreateRepo}
+              onCreateToggle={this.onCreateToggle}
+            />
+          </ModalPortal>
+        )}
+      </Fragment>
    );
  }
 }
--- a/frontend/src/pages/group/group.js
+++ b/frontend/src/pages/group/group.js
@ -1,9 +1,11 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, username } from '../../utils/constants';
 import Loading from '../../components/loading';
 import GroupRepoItem from './group-repo-item';
+import CommonToolbar from '../../components/toolbar/common-toolbar';
+import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';

 import '../../css/groups.css';

@ -271,18 +273,31 @@ class Group extends Component {
    });
  }

+  onCreateRepo = (repo) => {
+    let groupId = this.props.groupID;
+    seafileAPI.createGroupRepo(groupId, repo).then(() => {
+      //todo update group list
+    });
+  }
+
  render() {
    return (
-      <div className="main-panel-center">
-        <div className="cur-view-container">
-          <div className="cur-view-path">
-            <Header data={this.state.groupMetaInfo} />
-          </div>
-          <div className="cur-view-content">
-            <Content data={this.state} />
+      <Fragment>
+        <div className="main-panel-north">
+          <RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel} onCreateRepo={this.onCreateRepo} />
+          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
+        </div>
+        <div className="main-panel-center">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <Header data={this.state.groupMetaInfo} />
+            </div>
+            <div className="cur-view-content">
+              <Content data={this.state} />
+            </div>
          </div>
        </div>
-      </div>
+      </Fragment>
    );
  }
 }
--- a/frontend/src/pages/group/groups.js
+++ b/frontend/src/pages/group/groups.js
@ -1,8 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, loginUrl, username } from '../../utils/constants';
 import Loading from '../../components/loading';
 import GroupRepoItem from './group-repo-item';
+import GeneralToolbar from '../../components/toolbar/general-toolbar';

 import '../../css/groups.css';

@ -157,16 +158,19 @@ class Groups extends Component {

  render() {
    return (
-      <div className="main-panel-center">
-        <div className="cur-view-container">
-          <div className="cur-view-path">
-            <h3 className="sf-heading">{gettext("My Groups")}</h3>
-          </div>
-          <div className="cur-view-content">
-            <Content data={this.state} />
+      <Fragment>
+        <GeneralToolbar onShowSidePanel={this.props.onShowSidePanel} onSearchedClick={this.props.onSearchedClick}/>
+        <div className="main-panel-center">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext("My Groups")}</h3>
+            </div>
+            <div className="cur-view-content">
+              <Content data={this.state} />
+            </div>
          </div>
        </div>
-      </div>
+      </Fragment>
    );
  }
 }
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@ -393,11 +393,17 @@ class MyLibraries extends Component {
    });
  }

+  onCreateRepo = (repo) => {
+    seafileAPI.createMineRepo(repo).then((res) => {
+      
+    });
+  }
+
  render() {
    return (
      <Fragment>
        <div className="main-panel-north">
-          <RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel}/>
+          <RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel} onCreateRepo={this.onCreateRepo} />
          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
        </div>
        <div className="main-panel-center">