add create department dialog

2025-09-17 15:53:28 +00:00 · 2018-12-10 17:59:26 +08:00
parent b77ace6aa2
commit 64a70b7ee8
9 changed files with 199 additions and 44 deletions
--- a/frontend/src/components/cur-repo-path/index.js
+++ b/frontend/src/components/cur-repo-path/index.js
@@ -4,18 +4,18 @@ import RepoPath from './repo-path';
 import RepoTool from './repo-tool';

 const propTypes = {
-  currentTab: PropTypes.string.isRequired,
+  libraryType: PropTypes.string.isRequired,
  currentGroup: PropTypes.object,
 };

 class CurGroupPath extends React.Component {

  render() {
-    let { currentTab, currentGroup } = this.props;
+    let { libraryType, currentGroup } = this.props;
    return (
      <Fragment>
-        <RepoPath currentTab={currentTab} currentGroup={currentGroup}/>
-        <RepoTool currentTab={currentTab} currentGroup={currentGroup}/>
+        <RepoPath libraryType={libraryType} currentGroup={currentGroup}/>
+        <RepoTool libraryType={libraryType} currentGroup={currentGroup}/>
      </Fragment>
    );
  }
--- a/frontend/src/components/cur-repo-path/repo-path.js
+++ b/frontend/src/components/cur-repo-path/repo-path.js
@@ -4,14 +4,14 @@ import {gettext, siteRoot} from '../../utils/constants';

 const propTypes = {
  currentGroup: PropTypes.object, // for group
-  currentTab: PropTypes.string.isRequired, //for my-library, shared width me, shared whith all, groups 
+  libraryType: PropTypes.string.isRequired, //for my-library, shared width me, shared whith all, groups 
 };

 class RepoPath extends React.Component {

  render() {
-    let { currentTab, currentGroup } = this.props;
-    if (currentTab === 'group' && currentGroup) {
+    let { libraryType, currentGroup } = this.props;
+    if (libraryType === 'group' && currentGroup) {
      return (
        <div className="path-container">
          <a href={`${siteRoot}groups/`}>{gettext("Groups")}</a>
@@ -26,7 +26,7 @@ class RepoPath extends React.Component {

    return (
      <div className="path-container">
-        <span>{currentTab}</span>
+        <span>{libraryType}</span>
      </div>
    ); 
  }
--- a/frontend/src/components/cur-repo-path/repo-tool.js
+++ b/frontend/src/components/cur-repo-path/repo-tool.js
@@ -4,13 +4,13 @@ import { gettext, username } from '../../utils/constants';

 const propTypes = {
  currentGroup: PropTypes.object, // for group
-  currentTab: PropTypes.string.isRequired, //for my-library, shared width me, shared whith all, groups 
+  libraryType: PropTypes.string.isRequired, //for my-library, shared width me, shared whith all, groups 
 };

 class RepoTool extends React.Component {

  render() {
-    if (this.props.currentTab === 'group' && this.props.currentGroup) {
+    if (this.props.libraryType === 'group' && this.props.currentGroup) {
      let currentGroup = this.props.currentGroup;
      let isShowSettingIcon = !(currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
      return (
--- a/frontend/src/components/dialog/create-department-repo-dialog.js
+++ b/frontend/src/components/dialog/create-department-repo-dialog.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Col, FormText } from 'reactstrap';
+import { gettext, maxFileName } from '../../utils/constants';
+
+const propTypes = {
+  onCreateRepo: PropTypes.func.isRequired,
+  onCreateToggle: PropTypes.func.isRequired
+};
+
+class CreateDepartmentRepoDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      repoName: '',
+      errMessage: '',
+    };
+    this.newInput = React.createRef();
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      repoName: e.target.value, 
+    });
+  }
+
+  handleSubmit = () => {
+    let isValid = this.validateRepoName();
+    if (isValid) {
+      let repo = this.createRepo(this.state.repoName);
+      this.props.onCreateRepo(repo);
+    }
+
+  } 
+
+  handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.handleSubmit();
+    }
+  }
+
+  toggle = () => {
+    this.props.onCreateToggle();
+  }
+
+  componentDidMount = () => {
+    this.newInput.focus();
+  }
+
+  validateRepoName = () => {
+    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 false;
+    }
+    if (repoName.length > maxFileName) {
+      errMessage = 'RepoName\'s length is must little than ' + maxFileName;
+      this.setState({errMessage: errMessage});
+      return false;
+    }
+    return true;
+  }
+
+  createRepo = (repoName) => {
+    let repo = { repo_name: repoName };
+    return repo;
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('New Department Library')}</ModalHeader>
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <Label for="repo-name">{gettext('Name')}</Label>
+              <Input 
+                id="repo-name" 
+                onKeyPress={this.handleKeyPress} 
+                innerRef={input => {this.newInput = input;}} 
+                value={this.state.repoName} 
+                onChange={this.handleChange}
+                maxLength={maxFileName}
+              />
+            </FormGroup>
+          </Form>
+          <Label className="err-message">{gettext(this.state.errMessage)}</Label>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+CreateDepartmentRepoDialog.propTypes = propTypes;
+
+export default CreateDepartmentRepoDialog;
--- a/frontend/src/components/share-repo-list-view/share-repo-list-item.js
+++ b/frontend/src/components/share-repo-list-view/share-repo-list-item.js
@@ -9,8 +9,8 @@ const propTypes = {
  currentGroup: PropTypes.object,
  repo: PropTypes.object.isRequired,
  isItemFreezed: PropTypes.bool.isRequired,
-  isShowRepoOwner: PropTypes.bool.isRequired,
  onFreezedItem: PropTypes.func.isRequired,
+  onItemUnshared: PropTypes.func.isRequired,
 };

 class SharedRepoListItem extends React.Component {
@@ -33,6 +33,15 @@ class SharedRepoListItem extends React.Component {
      });
    }
  }
+
+  onMouseOver = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        highlight: true,
+        isOperationShow: true,
+      });
+    }
+  }
  
  onMouseLeave = () => {
    if (!this.props.isItemFreezed) {
@@ -128,6 +137,7 @@ class SharedRepoListItem extends React.Component {

  onItemUnshared = () => {
    // todo
+    this.props.onItemUnshared(this.props.repo);
  }

  onItemDelete = () => {
@@ -208,7 +218,7 @@ class SharedRepoListItem extends React.Component {
    // scene two: (share, unshare), (share), (unshare)
    let operations = this.generatorOperations();
    const shareOperation   = <a href="#" className="sf2-icon-share sf2-x op-icon" title={gettext("Share")} onClick={this.onItemShared}></a>;
-    const unshareOperation = <a href="#" className="sf2-icon-x3 sf2-x op-icon" title={gettext("Unshare")} onClick={this.onItemShared}></a>
+    const unshareOperation = <a href="#" className="sf2-icon-x3 sf2-x op-icon" title={gettext("Unshare")} onClick={this.onItemUnshared}></a>
    const deleteOperation  = <a href="#" className="sf2-icon-delete sf2-x op-icon" title={gettext('Delete')} onClick={this.onItemDelete}></a>;
    
    if (this.isDeparementOnwerGroupMember) {
@@ -255,28 +265,28 @@ class SharedRepoListItem extends React.Component {

  renderPCUI = () => {
    let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
-    let { repo, isShowRepoOwner } = this.props;
+    let { repo } = this.props;
    return (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
        <td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
        <td><a href={libPath}>{repo.repo_name}</a></td>
        <td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
        <td>{repo.size}</td>
        <td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
-        {isShowRepoOwner && <td title={repo.owner_contact_email}>{repo.owner_name}</td>}
+        <td title={repo.owner_contact_email}>{repo.owner_name}</td>
      </tr>
    );
  }
  
  renderMobileUI = () => {
    let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
-    let { repo, isShowRepoOwner } = this.props;
+    let { repo } = this.props;
    return (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
        <td><img src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
        <td>
          <a href={libPath}>{repo.repo_name}</a><br />
-          {isShowRepoOwner ? <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span> : null}
+          <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>
          <span className="item-meta-info">{repo.size}</span>
          <span className="item-meta-info" title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</span>
        </td>
--- a/frontend/src/components/share-repo-list-view/share-repo-list-view.js
+++ b/frontend/src/components/share-repo-list-view/share-repo-list-view.js
@@ -6,8 +6,8 @@ import ShareRepoListItem from './share-repo-list-item';
 const propTypes = {
  currentGroup: PropTypes.object,
  repoList: PropTypes.array.isRequired,
-  isShowRepoOwner: PropTypes.bool.isRequired,
  isShowTableThread: PropTypes.bool,
+  onItemUnshared: PropTypes.func.isRequired,
 };

 class ShareRepoListView extends React.Component {
@@ -33,10 +33,10 @@ class ShareRepoListView extends React.Component {
            <ShareRepoListItem
              key={repo.repo_id}
              repo={repo}
-              isShowRepoOwner={this.props.isShowRepoOwner}
              currentGroup={this.props.currentGroup}
              isItemFreezed={this.state.isItemFreezed}
              onFreezedItem={this.onFreezedItem}
+              onItemUnshared={this.props.onItemUnshared}
            />
          );
        })}
@@ -45,7 +45,6 @@ class ShareRepoListView extends React.Component {
  }

  renderPCUI = () => {
-    let isShowRepoOwner = this.props.isShowRepoOwner;
    let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
    return (
      <table>
@@ -56,11 +55,11 @@ class ShareRepoListView extends React.Component {
              <a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a>
            </th>
            <th width="12%"><span className="sr-only">{gettext("Actions")}</span></th>
-            <th width={isShowRepoOwner ? '14%' : '22%'}>{gettext("Size")}</th>
-            <th width={isShowRepoOwner ? '14%' : '22%'}>{gettext("Last Update")}
+            <th width={'14%'}>{gettext("Size")}</th>
+            <th width={'14%'}>{gettext("Last Update")}
              <a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a>
            </th>
-            {isShowRepoOwner && <th width="16%">{gettext("Owner")}</th>}
+            <th width="16%">{gettext("Owner")}</th>
          </tr>
        </thead>
        <tbody>
@@ -71,7 +70,6 @@ class ShareRepoListView extends React.Component {
  }

  renderMobileUI = () => {
-    let isShowRepoOwner = this.props.isShowRepoOwner;
    let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
    return (
      <table>
@@ -79,15 +77,11 @@ class ShareRepoListView extends React.Component {
          <tr>
            <th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
            <th width="68%">
-              {isShowRepoOwner ? (
-                <Fragment>
-                  {gettext("Sort:")} {/* TODO: sort */}
-                  {gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
-                  {gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
-                </Fragment>
-              ) :
-              (gettext('name'))
-              }
+              <Fragment>
+                {gettext("Sort:")} {/* TODO: sort */}
+                {gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
+                {gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
+              </Fragment>
            </th>
            <th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
          </tr>