add create department dialog

2025-09-01 23:20:51 +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 {
@@ -34,6 +34,15 @@ class SharedRepoListItem extends React.Component {
    }
  }

+  onMouseOver = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        highlight: true,
+        isOperationShow: true,
+      });
+    }
+  }
+  
  onMouseLeave = () => {
    if (!this.props.isItemFreezed) {
      this.setState({
@@ -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'))
-              }
            </th>
            <th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
          </tr>
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 import { gettext, username, loginUrl } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import Loading from '../../components/loading';
+import ModalPortal from '../../components/modal-portal';
 import Group from '../../models/group';
 import RepoInfo from '../../models/repoInfo';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
-import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
 import CurRepoPath from '../../components/cur-repo-path/';
+import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
+import CreateDepartmentRepoDialog from '../../components/dialog/create-department-repo-dialog';
 import ShareRepoListView from '../../components/share-repo-list-view/share-repo-list-view';

 const propTypes = {
@@ -15,6 +17,8 @@ const propTypes = {
  onSearchedClick: PropTypes.func.isRequired,
 };

+const DEPARETMENT_GROUP_ONWER_NAME = 'system admin';
+
 class GroupView extends React.Component {

  constructor(props) {
@@ -26,8 +30,9 @@ class GroupView extends React.Component {
      currentGroup: null,
      isStaff: false,
      repoList: [],
-      currentTab: 'group',
-      isShowRepoOwner: true,
+      libraryType: 'group',
+      isCreateRepoDialogShow: false,
+      isDepartmentGroup: false,
    }
  }

@@ -47,10 +52,12 @@ class GroupView extends React.Component {
      let currentGroup = new Group(res.data);
      let emptyTip = this.getEmptyTip(currentGroup);
      let isStaff  = currentGroup.admins.indexOf(username) > -1;  //for item operations
+      let isDepartmentGroup = currentGroup.owner === DEPARETMENT_GROUP_ONWER_NAME;
      this.setState({
        emptyTip: emptyTip,
        currentGroup: currentGroup,
        isStaff: isStaff,
+        isDepartmentGroup: isDepartmentGroup,
      });
      this.loadRepos(groupID);
    }).catch((error) => {
@@ -141,6 +148,10 @@ class GroupView extends React.Component {
    return emptyTip;
  }

+  onCreateRepoToggle = () => {
+    this.setState({isCreateRepoDialogShow: !this.state.isCreateRepoDialogShow});
+  }
+
  onCreateRepo = (repo) => {
    let groupId = this.props.groupID;
    seafileAPI.createGroupRepo(groupId, repo).then(res => {
@@ -150,6 +161,7 @@ class GroupView extends React.Component {
    }).catch(() => {
      //todo
    });
+    this.onCreateRepoToggle();
  }

  addRepoItem = (repo) => {
@@ -158,22 +170,36 @@ class GroupView extends React.Component {
    return newRepoList;
  }

+  onItemUnshared = (repo) => {
+    let group = this.state.currentGroup;
+    seafileAPI.unshareRepo(repo.repo_id, {share_type: 'group', group_id: group.id}).then(() => {
+      let repoList = this.state.repoList.filter(item => {
+        return item.repo_id !== repo.repo_id;
+      });
+      this.setState({repoList: repoList});
+    });
+  }
+
  render() {
    let { errMessage, emptyTip } = this.state;
    return (
      <Fragment>
        <div className="main-panel-north">
-          <RepoViewToolbar 
-            libraryType={this.state.currentTab}
-            onShowSidePanel={this.props.onShowSidePanel} 
-            onCreateRepo={this.onCreateRepo} 
-          />
+          <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.onCreateRepoToggle}>
+                <i className="fas fa-plus-square op-icon"></i>
+                {gettext('New Library')}
+              </button>
+            </div>
+          </div>
          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
        </div>
        <div className="main-panel-center">
          <div className="cur-view-container">
            <div className="cur-view-path">
-              <CurRepoPath currentTab={this.state.currentTab} currentGroup={this.state.currentGroup}/>
+              <CurRepoPath libraryType={this.state.libraryType} currentGroup={this.state.currentGroup}/>
            </div>
            <div className="cur-view-content">
              {this.state.isLoading && <Loading />}
@@ -183,12 +209,29 @@ class GroupView extends React.Component {
                <ShareRepoListView 
                  repoList={this.state.repoList} 
                  currentGroup={this.state.currentGroup} 
-                  isShowRepoOwner={this.state.isShowRepoOwner}
+                  onItemUnshared={this.onItemUnshared}
                />
              }
            </div>
          </div>
        </div>
+        {this.state.isCreateRepoDialogShow && !this.state.isDepartmentGroup && (
+          <ModalPortal>
+            <CreateRepoDialog 
+              hasPermission={this.hasPermission}
+              libraryType={this.state.libraryType}
+              onCreateToggle={this.onCreateRepoToggle}
+              onCreateRepo={this.onCreateRepo}
+            />
+          </ModalPortal>
+        )}
+        {this.state.isCreateRepoDialogShow && this.state.isDepartmentGroup &&
+          <CreateDepartmentRepoDialog 
+            isAdmin={this.state.isAdmin}
+            onCreateToggle={this.onCreateRepoToggle}
+            onCreateRepo={this.onCreateRepo}
+          />
+        }
      </Fragment>
    );
  }
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -27,6 +27,7 @@ export const storages = window.app.pageOptions.storages; // storage backends
 export const enableRepoSnapshotLabel = window.app.pageOptions.enableRepoSnapshotLabel;
 export const shareLinkExpireDaysMin = window.app.pageOptions.shareLinkExpireDaysMin;
 export const shareLinkExpireDaysMax = window.app.pageOptions.shareLinkExpireDaysMax;
+export const maxFileName = window.app.pageOptions.maxFileName;

 // wiki
 export const slug = window.wiki ? window.wiki.config.slug : '';
--- a/seahub/templates/base_for_react.html
+++ b/seahub/templates/base_for_react.html
@@ -61,6 +61,7 @@
            enableRepoSnapshotLabel: {% if enable_repo_snapshot_label %} true {% else %} false {% endif %},
            shareLinkExpireDaysMin: "{{ share_link_expire_days_min }}",
            shareLinkExpireDaysMax: "{{ share_link_expire_days_max }}",
+            maxFileName: "{{ max_file_name }}"
        }
     };
 </script>