Org libraries (#3110)

* org admin libraris

* update front page

* update code style

* refactor code

* update api name

frontend/src/components/dialog/transfer-dialog.js

@@ -1,14 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import toaster from '../toast';
 import { gettext } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api.js';
 import UserSelect from '../user-select';
 
 const propTypes = {
   itemName: PropTypes.string.isRequired,
-  repoID: PropTypes.string.isRequired,
   toggleDialog: PropTypes.func.isRequired,
   submit: PropTypes.func.isRequired,
 };
@@ -30,17 +27,8 @@ class TransferDialog extends React.Component {
   }
 
   submit = () => {
-    let repoID = this.props.repoID;
-    let user = this.state.selectedOption.email;
-    seafileAPI.transferRepo(repoID, user).then(res => {
-      let message = gettext('Successfully transferred the library.');
-      toaster.success(message);
-      this.props.submit(repoID);
-    }).catch(res => {
-      let message = gettext('Failed. Please check the network.');
-      this.props.toggleDialog();
-      toaster.danger(message);
-    });
+    let user = this.state.selectedOption;
+    this.props.submit(user);
   } 
 
   render() {

frontend/src/components/draft-list-view/draft-list-item.js

@@ -81,7 +81,6 @@ class DraftListItem extends React.Component {
     let fileName = Utils.getFileName(filePath);
     let draftUrl = siteRoot + 'drafts/' + draft.id + '/';
     let libraryUrl = siteRoot + 'library/' + repoID + '/' + encodeURIComponent(draft.repo_name) + '/' ;
-    let reviewUrl = siteRoot + 'drafts/review/' + draft.review_id + '/';
     let localTime = moment.utc(draft.updated_at).toDate();
     localTime = moment(localTime).fromNow();
 

frontend/src/models/org-admin-repo.js

@@ -0,0 +1,15 @@
+import { Utils } from '../utils/utils';
+
+class OrgAdminRepo {
+  constructor(object) {
+    this.repoID = object.repo_id;
+    this.repoName = object.repo_name;
+    this.ownerName = object.owner_name;
+    this.ownerEmail = object.owner_email;
+    this.encrypted = object.encrypted;
+    this.isDepartmentRepo = object.is_department_repo;
+    this.groupID = object.group_id;
+  }
+}
+
+export default OrgAdminRepo;

frontend/src/pages/drafts/draft-content.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { siteRoot, gettext } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import editUtilties from '../../utils/editor-utilties';
 import { Utils } from '../../utils/utils';
 import PropTypes from 'prop-types';

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

@@ -8,6 +8,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, storages } from '../../utils/constants';
 import ModalPortal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
+import toaster from '../../components/toast';
 import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
 import TransferDialog from '../../components/dialog/transfer-dialog';
 import LibHistorySettingDialog from '../../components/dialog/lib-history-setting-dialog';
@@ -175,9 +176,18 @@ class MylibRepoListItem extends React.Component {
     this.setState({isRenaming: !this.state.isRenaming});
   }
 
-  onTransferRepo = (repoID) => {
-    this.onTransferToggle();
+  onTransferRepo = (user) => {
+    let repoID = this.props.repo.repo_id;
+    seafileAPI.transferRepo(repoID, user.email).then(res => {
       this.props.onTransferRepo(repoID);
+      let message = gettext('Successfully transferred the library.');
+      toaster.success(message);
+    }).catch(res => {
+      let message = gettext('Failed. Please check the network.');
+      toaster.danger(message);
+    });
+
+    this.onTransferToggle();
   }
 
   onDeleteRepo = (repo) => {
@@ -316,7 +326,6 @@ class MylibRepoListItem extends React.Component {
         {this.state.isTransferDialogShow && (
           <ModalPortal>
             <TransferDialog
-              repoID={repo.repo_id}
               itemName={repo.repo_name}
               submit={this.onTransferRepo}
               toggleDialog={this.onTransferToggle}

frontend/src/pages/org-admin/index.js

@@ -9,6 +9,7 @@ import OrgUsers from './org-users';
 import OrgUsersList from './org-users-list';
 import OrgAdminList from './org-admin-list';
 import OrgGroups from './org-groups';
+import OrgLibraries from './org-libraries';
 
 import '../../assets/css/fa-solid.css';
 import '../../assets/css/fa-regular.css';
@@ -75,8 +76,8 @@ class Org extends React.Component {
               <OrgUsersList path="/" currentTab={currentTab} isShowAddOrgUserDialog={isShowAddOrgUserDialog} isInviteUserDialogOpen={isInviteUserDialogOpen} toggleAddOrgUser={this.toggleAddOrgUser} toggleInviteUserDialog={this.toggleInviteUserDialog} />
               <OrgAdminList path="admins" currentTab={currentTab} isShowAddOrgAdminDialog={isShowAddOrgAdminDialog} toggleAddOrgAdmin={this.toggleAddOrgAdmin} />
             </OrgUsers>
-            <OrgGroups path={siteRoot + "org/groupadmin"}>
-            </OrgGroups>
+            <OrgGroups path={siteRoot + 'org/groupadmin'} />
+            <OrgLibraries path={siteRoot + 'org/repoadmin'} />
           </Router>
         </MainPanel>
       </div>

frontend/src/pages/org-admin/org-groups.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
 import OrgGroupInfo from '../../models/org-group';
@@ -14,10 +13,10 @@ class OrgGroups extends Component {
     super(props);
     this.state = {
       page: 1,
-      pageNext: 2,
+      pageNext: false,
       orgGroups: [],
       isItemFreezed: false  
-    }
+    };
   }
 
   componentDidMount() {
@@ -68,7 +67,7 @@ class OrgGroups extends Component {
       let msg = gettext('Successfully deleted {name}');
       msg = msg.replace('{name}', group.groupName);
       Toast.success(msg);
-    })
+    });
   }
 
   render() {
@@ -76,7 +75,7 @@ class OrgGroups extends Component {
     return (
       <div className="main-panel-center flex-row">
         <div className="cur-view-container">
-          <div className="cur-view-path org-user-nav">
+          <div className="cur-view-path">
             <h3 className="sf-heading">{gettext('All Groups')}</h3>
           </div>
           <div className="cur-view-content">
@@ -104,8 +103,9 @@ class OrgGroups extends Component {
               </tbody>
             </table>
             <div className="paginator">
-              {this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext("Previous")}</a>}
-              {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext("Next")}</a>}
+              {this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
+              {(this.state.page != 1 && this.state.pageNext) && <span> | </span>}
+              {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
             </div>
           </div>
         </div>
@@ -172,9 +172,9 @@ class GroupItem extends React.Component {
   renderGroupHref = (group) => {
     let groupInfoHref;
     if (group.creatorName == 'system admin') {
-      groupInfoHref = siteRoot + 'org/admin/#address-book/groups/' + group.id + '/'
+      groupInfoHref = siteRoot + 'org/admin/#address-book/groups/' + group.id + '/';
     } else {
-      groupInfoHref = siteRoot + 'org/groupadmin/' + group.id + '/'
+      groupInfoHref = siteRoot + 'org/groupadmin/' + group.id + '/';
     } 
                                                          
     return groupInfoHref; 
@@ -185,13 +185,13 @@ class GroupItem extends React.Component {
     if (group.creatorName == 'system admin') {
       return (
         <td> -- </td>
-      )
+      );
     } else {
       return(
         <td>
           <a href={userInfoHref} className="font-weight-normal">{group.creatorName}</a>
         </td>
-      )
+      );
     }     
   }
 

frontend/src/pages/org-admin/org-libraries.js

@@ -0,0 +1,276 @@
+import React, { Fragment, Component } from 'react';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+import OrgAdminRepo from '../../models/org-admin-repo';
+import toaster from '../../components/toast';
+import TransferDialog from '../../components/dialog/transfer-dialog';
+import ModalPortal from '../../components/modal-portal';
+import { seafileAPI } from '../../utils/seafile-api';
+import { mediaUrl, siteRoot, gettext, orgID } from '../../utils/constants';
+
+class OrgLibraries extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      pageNext: false,
+      orgRepos: [],
+      isItemFreezed: false  
+    };
+  }
+
+  componentDidMount() {
+    let page = this.state.page;
+    this.initData(page);
+  }
+
+  initData = (page) => {
+    seafileAPI.listOrgRepos(orgID, page).then(res => {
+      let orgRepos = res.data.repo_list.map(item => {
+        return new OrgAdminRepo(item);
+      });
+
+      this.setState({
+        orgRepos: orgRepos,
+        pageNext: res.data.page_next,
+        page: res.data.page,
+      });
+    });
+  }
+
+
+  onChangePageNum = (e, num) => {
+    e.preventDefault();
+    let page = this.state.page;
+
+    if (num == 1) {
+      page = page + 1;
+    } else {
+      page = page - 1;
+    }
+    this.initData(page);
+  } 
+
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  deleteRepoItem = (repo) => {
+    seafileAPI.deleteOrgRepo(orgID, repo.repoID).then(res => {
+      this.setState({
+        orgRepos: this.state.orgRepos.filter(item => item.repoID != repo.repoID)
+      });
+      let msg = gettext('Successfully deleted {name}');
+      msg = msg.replace('{name}', repo.repoName);
+      toaster.success(msg);
+    });
+  }
+
+  transferRepoItem = (repoID, user) => {
+    this.setState({
+      orgRepos: this.state.orgRepos.map(item =>{
+        if (item.repoID == repoID) {
+          item.ownerEmail = user.email;
+          item.ownerName = user.value;
+        }
+        return item;
+      })
+    });
+  }
+
+  render() {
+    let repos = this.state.orgRepos;
+    return (
+      <div className="main-panel-center flex-row">
+        <div className="cur-view-container">
+          <div className="cur-view-path">
+            <h3 className="sf-heading">{gettext('All Libraries')}</h3>
+          </div>
+          <div className="cur-view-content">
+            <table>
+              <thead>
+                <tr>
+                  <th width="4%"></th>
+                  <th width="31%">{gettext('Name')}</th>
+                  <th width="26%">{gettext('ID')}</th>
+                  <th width="24%">{gettext('Owner')}</th>
+                  <th width="15%" className="text-center">{gettext('Operations')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {repos.map(item => {
+                  return (
+                    <RepoItem
+                      key={item.repoID}
+                      repo={item}
+                      isItemFreezed={this.state.isItemFreezed}
+                      onFreezedItem={this.onFreezedItem} 
+                      onUnfreezedItem={this.onUnfreezedItem}
+                      deleteRepoItem={this.deleteRepoItem}
+                      transferRepoItem={this.transferRepoItem}
+                    />
+                )})}
+              </tbody>
+            </table>
+            <div className="paginator">
+              {this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
+              {(this.state.page != 1 && this.state.pageNext) && <span> | </span>}
+              {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+class RepoItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      highlight: false,
+      showMenu: false,
+      isItemMenuShow: false,
+      isTransferDialogShow: false
+    };
+  }
+
+  onMouseEnter = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        showMenu: true,
+        highlight: true,
+      });
+    }
+  }
+
+  onMouseLeave = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        showMenu: false,
+        highlight: false
+      });
+    }
+  } 
+
+  onDropdownToggleClick = (e) => {
+    e.preventDefault();
+    this.toggleOperationMenu(e);
+  }
+
+  toggleOperationMenu = (e) => {
+    e.stopPropagation();
+    this.setState(
+      {isItemMenuShow: !this.state.isItemMenuShow }, () => {
+        if (this.state.isItemMenuShow) {
+          this.props.onFreezedItem();
+        } else {
+          this.setState({
+            highlight: false,
+            showMenu: false,
+          });
+          this.props.onUnfreezedItem();
+        }
+      }
+    );
+  }
+
+  toggleDelete = () => {
+    this.props.deleteRepoItem(this.props.repo);
+  }
+
+  toggleTransfer = () => {
+    this.props.transferRepoItem(this.props.repo);
+  }
+
+  renderLibIcon = (repo) => {
+    let href;
+    let iconTitle;
+    if (repo.encrypted) {
+      href = mediaUrl + 'img/lib/48/lib-encrypted.png';
+      iconTitle = gettext('Encrypted library'); 
+    } else {
+      href = mediaUrl + 'img/lib/48/lib.png';
+      iconTitle = gettext('Read-Write  library');
+    } 
+    return <img src={href} title={iconTitle} alt={iconTitle} width="24" />;
+  }
+
+  renderRepoOwnerHref = (repo) => {
+    let href;
+    if (repo.isDepartmentRepo) {
+      href = siteRoot + 'org/admin/#address-book/groups/' + repo.groupID + '/';
+    } else {
+      href = siteRoot + 'org/useradmin/info/' + repo.ownerEmail + '/';
+    }
+    return href;
+  }
+
+  toggleTransfer = () => {
+    this.setState({isTransferDialogShow: !this.state.isTransferDialogShow});
+  }
+
+  onTransferRepo = (user) => {
+    let repo = this.props.repo;
+    seafileAPI.transferOrgRepo(orgID, repo.repoID, user.email).then(res => {
+      this.props.transferRepoItem(repo.repoID, user);
+      let msg = gettext('Successfully transferred the library.');
+      toaster.success(msg);
+    }).catch(res => {
+      let msg = gettext('Failed. Please check the network.');
+      toaster.danger(msg);
+    });
+    this.toggleTransfer();
+  }
+
+  render() {
+    let { repo } = this.props;
+    
+    let isOperationMenuShow = this.state.showMenu && !repo.isDepartmentRepo;
+    return (
+      <Fragment>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+          <td>{this.renderLibIcon(repo)}</td>
+          <td>{repo.repoName}</td>
+          <td style={{'fontSize': '11px'}}>{repo.repoID}</td>
+          <td><a href={this.renderRepoOwnerHref(repo)}>{repo.ownerName}</a></td>
+          <td className="text-center cursor-pointer">
+            {isOperationMenuShow &&
+              <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
+                <DropdownToggle
+                  tag="a"
+                  className="attr-action-icon fas fa-ellipsis-v"
+                  title={gettext('More Operations')}
+                  data-toggle="dropdown"
+                  aria-expanded={this.state.isItemMenuShow}
+                  onClick={this.onDropdownToggleClick}
+                />
+                <DropdownMenu>
+                  <DropdownItem onClick={this.toggleDelete}>{gettext('Delete')}</DropdownItem>
+                  <DropdownItem onClick={this.toggleTransfer}>{gettext('Transfer')}</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+            }
+          </td>
+        </tr>
+        {this.state.isTransferDialogShow && (
+          <ModalPortal>
+            <TransferDialog
+              itemName={repo.repoName}
+              submit={this.onTransferRepo}
+              toggleDialog={this.toggleTransfer}
+          />
+          </ModalPortal>
+        )}
+      </Fragment>
+    );
+  }
+}
+
+export default OrgLibraries;

frontend/src/pages/org-admin/org-users-list.js

@@ -25,7 +25,7 @@ class OrgUsersList extends React.Component {
       orgUsers: [],
       isItemFreezed: false,
       page: 1,
-      pageNext: 2,
+      pageNext: false,
     };
   }
 
@@ -127,7 +127,8 @@ class OrgUsersList extends React.Component {
           </tbody>
         </table>
         <div className="paginator">
-          {this.state.page !=1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}{' | '}</a>}
+          {this.state.page !=1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
+          {(this.state.page != 1 && this.state.pageNext) && <span> | </span>}
           {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
         </div>
         {this.props.isShowAddOrgUserDialog && (

frontend/src/pages/org-admin/org-users.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Link } from '@reach/router';
-
 import { siteRoot, gettext } from '../../utils/constants';
 
 class OrgUsers extends Component {
@@ -21,10 +19,10 @@ class OrgUsers extends Component {
           <div className="cur-view-path org-user-nav">
             <ul className="nav">
               <li className="nav-item" onClick={() => this.tabItemClick('users')}>
-                <Link className={`nav-link ${this.props.currentTab === 'users' ? 'active': ''}`} to={siteRoot + "org/useradmin/"} title={gettext('All')}>{gettext('All')}</Link>
+                <Link className={`nav-link ${this.props.currentTab === 'users' ? 'active': ''}`} to={siteRoot + 'org/useradmin/'} title={gettext('All')}>{gettext('All')}</Link>
               </li>
               <li className="nav-item" onClick={() => this.tabItemClick('admins')}>
-                <Link className={`nav-link ${this.props.currentTab === 'admins' ? 'active': ''}`} to={siteRoot + "org/useradmin/admins/"} title={gettext('Admin')}>{gettext('Admin')}</Link>
+                <Link className={`nav-link ${this.props.currentTab === 'admins' ? 'active': ''}`} to={siteRoot + 'org/useradmin/admins/'} title={gettext('Admin')}>{gettext('Admin')}</Link>
               </li>
             </ul>
           </div>

frontend/src/pages/org-admin/side-panel.js

@@ -33,25 +33,25 @@ class SidePanel extends React.Component {
               <h3 className="sf-heading" style={{ 'color': '#f7941d' }}>{gettext('Admin')}</h3>
               <ul className="nav nav-pills flex-column nav-container">
                 <li className="nav-item">
-                  <a className='nav-link ellipsis' href={siteRoot + "org/orgmanage/"}>
+                  <a className='nav-link ellipsis' href={siteRoot + 'org/orgmanage/'}>
                     <span className="sf2-icon-monitor" aria-hidden="true"></span>
                     <span className="nav-text">{gettext('Info')}</span>
                   </a>
                 </li>
                 <li className="nav-item">
-                  <a className='nav-link ellipsis' href={siteRoot + "org/repoadmin/"}>
+                  <Link className={`nav-link ellipsis ${this.getActiveClass('repoadmin')}`} to={siteRoot + 'org/repoadmin/'} onClick={() => this.tabItemClick('repoadmin')} >
                     <span className="sf2-icon-library"></span>
                     <span className="nav-text">{gettext('Libraries')}</span>
-                  </a>
+                  </Link>
                 </li>
                 <li className="nav-item">
-                  <Link className={`nav-link ellipsis ${this.getActiveClass('users') || this.getActiveClass('admins')}`} to={siteRoot + "org/useradmin/"} onClick={() => this.tabItemClick('users')} >
+                  <Link className={`nav-link ellipsis ${this.getActiveClass('users') || this.getActiveClass('admins')}`} to={siteRoot + 'org/useradmin/'} onClick={() => this.tabItemClick('users')} >
                     <span className="sf2-icon-user"></span>
                     <span className="nav-text">{gettext('Users')}</span>
                   </Link>
                 </li>
                 <li className="nav-item">
-                  <Link className={`nav-link ellipsis ${this.getActiveClass('groupadmin')}`} to={siteRoot + "org/groupadmin/"} onClick={() => this.tabItemClick('groupadmin')}>
+                  <Link className={`nav-link ellipsis ${this.getActiveClass('groupadmin')}`} to={siteRoot + 'org/groupadmin/'} onClick={() => this.tabItemClick('groupadmin')}>
                     <span className="sf2-icon-group"></span>
                     <span className="nav-text">{gettext('Groups')}</span>
                   </Link>