mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-13 22:01:06 +00:00
[org admin] group: rewrote it with react (#3942)
This commit is contained in:
llj
Daniel Pan
36
frontend/src/components/org-admin-group-nav.js
Normal file
36
frontend/src/components/org-admin-group-nav.js
Normal file
@@ -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;
|
||||
@@ -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'}>
|
||||
|
||||
105
frontend/src/pages/org-admin/org-group-info.js
Normal file
105
frontend/src/pages/org-admin/org-group-info.js
Normal file
@@ -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;
|
||||
146
frontend/src/pages/org-admin/org-group-members.js
Normal file
146
frontend/src/pages/org-admin/org-group-members.js
Normal file
@@ -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;
|
||||
195
frontend/src/pages/org-admin/org-group-repos.js
Normal file
195
frontend/src/pages/org-admin/org-group-repos.js
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user