[org admin] group: rewrote it with react (#3942)

frontend/src/components/org-admin-group-nav.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { siteRoot, gettext } from '../utils/constants'; 
+
+const propTypes = {
+  groupID: PropTypes.string.isRequired,
+  currentItem: PropTypes.string.isRequired
+};
+
+class OrgAdminGroupNav extends React.Component {
+
+  render() {
+    const { groupID, currentItem } = this.props;
+    const urlBase = `${siteRoot}org/groupadmin/${groupID}/`;
+    return (
+      <div className="cur-view-path org-admin-user-nav">
+        <ul className="nav">
+          <li className="nav-item">
+            <Link to={urlBase} className={`nav-link${currentItem == 'info' ? ' active' : ''}`}>{gettext('Group Info')}</Link>
+          </li>
+          <li className="nav-item">
+            <Link to={`${urlBase}repos/`} className={`nav-link${currentItem == 'repos' ? ' active' : ''}`}>{gettext('Libraries')}</Link>
+          </li>
+          <li className="nav-item">
+            <Link to={`${urlBase}members/`} className={`nav-link${currentItem == 'members' ? ' active' : ''}`}>{gettext('Members')}</Link>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+OrgAdminGroupNav.propTypes = propTypes;
+
+export default OrgAdminGroupNav;

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

@@ -9,6 +9,9 @@ import OrgUserProfile from './org-user-profile';
 import OrgUserRepos from './org-user-repos';
 import OrgUserSharedRepos from './org-user-shared-repos';
 import OrgGroups from './org-groups';
+import OrgGroupInfo from './org-group-info';
+import OrgGroupRepos from './org-group-repos';
+import OrgGroupMembers from './org-group-members';
 import OrgLibraries from './org-libraries';
 import OrgInfo from './org-info';
 import OrgLinks from './org-links';
@@ -67,7 +70,10 @@ class Org extends React.Component {
             <OrgUserProfile path={siteRoot + 'org/useradmin/info/:email/'} />
             <OrgUserRepos path={siteRoot + 'org/useradmin/info/:email/repos/'} />
             <OrgUserSharedRepos path={siteRoot + 'org/useradmin/info/:email/shared-repos/'} />
-            <OrgGroups path={siteRoot + 'org/groupadmin'}/>
+            <OrgGroups path={siteRoot + 'org/groupadmin'} />
+            <OrgGroupInfo path={siteRoot + 'org/groupadmin/:groupID/'} />
+            <OrgGroupRepos path={siteRoot + 'org/groupadmin/:groupID/repos/'} />
+            <OrgGroupMembers path={siteRoot + 'org/groupadmin/:groupID/members/'} />
             <OrgLibraries path={siteRoot + 'org/repoadmin'}/>
             <OrgLinks path={siteRoot + 'org/publinkadmin'}/>
             <OrgDepartments path={siteRoot + 'org/departmentadmin'}>

frontend/src/pages/org-admin/org-group-info.js

@@ -0,0 +1,105 @@
+import React, { Component, Fragment } from 'react';
+import { Link } from '@reach/router';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl, siteRoot } from '../../utils/constants';
+import Loading from '../../components/loading';
+import OrgAdminGroupNav from '../../components/org-admin-group-nav';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID } = window.org.pageOptions;
+
+class OrgGroupInfo extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.orgAdminGetGroup(orgID, this.props.groupID).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminGroupNav groupID={this.props.groupID} currentItem='info' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  render() {
+    const {
+      loading, errorMsg,
+      group_name, creator_email, creator_name
+    } = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center mt-2">{errorMsg}</p>;
+    }
+
+    return (
+      <dl>
+        <dt>{gettext('Name')}</dt>
+        <dd>{group_name}</dd>
+
+        <dt>{gettext('Creator')}</dt>
+        <dd>
+          <Link to={`${siteRoot}org/useradmin/info/${encodeURIComponent(creator_email)}/`}>{creator_name}</Link>
+        </dd>
+      </dl>
+    ); 
+  }
+}
+
+export default OrgGroupInfo;

frontend/src/pages/org-admin/org-group-members.js

@@ -0,0 +1,146 @@
+import React, { Component, Fragment } from 'react';
+import { Link } from '@reach/router';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl, siteRoot } from '../../utils/constants';
+import Loading from '../../components/loading';
+import OrgAdminGroupNav from '../../components/org-admin-group-nav';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID } = window.org.pageOptions;
+
+class OrgGroupMembers extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.orgAdminListGroupMembers(orgID, this.props.groupID).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminGroupNav groupID={this.props.groupID} currentItem='members' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      loading, errorMsg, members 
+    } = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center mt-2">{errorMsg}</p>;
+    }
+
+    return (
+      <Fragment>
+        <table className="table-hover">
+          <thead>
+            <tr>
+              <th width="10%"></th>
+              <th width="50%">{gettext('Name')}</th>
+              <th width="40%">{gettext('Role')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {members.map((item, index) => {
+              return <Item key={index} data={item} />;
+            })}
+          </tbody>
+        </table>
+      </Fragment>
+    ); 
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  getRoleText() {
+    switch (this.props.data.role) {
+      case 'Owner':
+        return gettext('Owner');
+      case 'Admin':
+        return gettext('Admin');
+      case 'Member':
+        return gettext('Member');
+    }
+  }
+
+  render() {
+    const item = this.props.data; 
+    return (
+      <Fragment>
+        <tr>
+          <td className="text-center">
+            <img src={item.avatar_url} alt="" className="avatar" width="32" />
+          </td>
+          <td>
+            <Link to={`${siteRoot}org/useradmin/info/${encodeURIComponent(item.email)}/`}>{item.name}</Link>
+          </td>
+          <td>
+            {this.getRoleText()}
+          </td>
+        </tr>
+      </Fragment>
+    );
+  }
+}
+
+export default OrgGroupMembers;

frontend/src/pages/org-admin/org-group-repos.js

@@ -0,0 +1,195 @@
+import React, { Component, Fragment } from 'react';
+import { Link } from '@reach/router';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl, siteRoot } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import Loading from '../../components/loading';
+import toaster from '../../components/toast';
+import OrgAdminGroupNav from '../../components/org-admin-group-nav';
+import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID } = window.org.pageOptions;
+
+class OrgGroupRepos extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.orgAdminListGroupRepos(orgID, this.props.groupID).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminGroupNav groupID={this.props.groupID} currentItem='repos' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      loading, errorMsg, libraries 
+    } = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center mt-2">{errorMsg}</p>;
+    }
+
+    return (
+      <Fragment>
+        <table className="table-hover">
+          <thead>
+            <tr>
+              <th width="4%">{/*icon*/}</th>
+              <th width="35%">{gettext('Name')}</th>
+              <th width="20%">{gettext('Size')}</th>
+              <th width="26%">{gettext('Shared By')}</th>
+              <th width="15%"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {libraries.map((item, index) => {
+              return <Item key={index} data={item} />;
+            })}
+          </tbody>
+        </table>
+      </Fragment>
+    ); 
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+      deleted: false,
+      isDeleteRepoDialogOpen: false
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isOpIconShown: true
+    }); 
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isOpIconShown: false
+    });
+  }
+
+  handleDeleteIconClick = (e) => {
+    e.preventDefault();
+    this.toggleDeleteRepoDialog();
+  }
+
+  toggleDeleteRepoDialog = () => {
+    this.setState({
+      isDeleteRepoDialogOpen: !this.state.isDeleteRepoDialogOpen
+    });
+  }
+
+  deleteRepo = () => {
+    const repo = this.props.data;
+    seafileAPI.deleteOrgRepo(orgID, repo.repo_id).then((res) => {
+      this.setState({
+        deleted: true
+      });
+      const msg = gettext('Successfully deleted {name}.').replace('{name}', repo.name);
+      toaster.success(msg);
+    }).catch((error) => {
+      const errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
+    });
+  }
+
+  render() {
+    const { deleted, isOpIconShown, isDeleteRepoDialogOpen } = this.state;
+    const repo = this.props.data; 
+
+    if (deleted) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td>
+            <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" /> 
+          </td>
+          <td>{repo.name}</td>
+          <td>{Utils.bytesToSize(repo.size)}</td>
+          <td><Link to={`${siteRoot}org/useradmin/info/${encodeURIComponent(repo.shared_by)}/`}>{repo.shared_by_name}</Link></td>
+          <td>
+            <a href="#" className={`action-icon sf2-icon-delete${isOpIconShown ? '' : ' invisible'}`} title={gettext('Delete')} onClick={this.handleDeleteIconClick}></a>
+          </td>
+        </tr>
+        {isDeleteRepoDialogOpen && 
+        <DeleteRepoDialog
+          repo={repo}
+          onDeleteRepo={this.deleteRepo}
+          toggle={this.toggleDeleteRepoDialog}
+        />
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default OrgGroupRepos;