haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-07 09:51:26 +00:00
Code Issues Releases Wiki Activity

add main panel topbar

Browse Source
This commit is contained in:
Michael An
2019-05-02 20:33:27 +08:00
parent 400f4e4aea
commit 1ef0cdd68c
8 changed files with 401 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
frontend/src/pages/org-admin/org-department-item.js
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from '@reach/router'; import { Link } from '@reach/router';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
@@ -11,6 +11,7 @@ import DeleteMemberDialog from '../../components/dialog/org-delete-member-dialog
import AddRepoDialog from '../../components/dialog/org-add-repo-dialog'; import AddRepoDialog from '../../components/dialog/org-add-repo-dialog';
import DeleteRepoDialog from '../../components/dialog/org-delete-repo-dialog'; import DeleteRepoDialog from '../../components/dialog/org-delete-repo-dialog';
import RoleEditor from '../../components/select-editor/role-editor'; import RoleEditor from '../../components/select-editor/role-editor';
import MainPanelTopbar from './main-panel-topbar';
import '../../css/org-department-item.css'; import '../../css/org-department-item.css';
class OrgDepartmentItem extends React.Component { class OrgDepartmentItem extends React.Component {
@@ -96,143 +97,152 @@ class OrgDepartmentItem extends React.Component {
const { members, repos } = this.state; const { members, repos } = this.state;
const groupID = this.props.groupID; const groupID = this.props.groupID;
return ( return (
<div className="main-panel-center flex-row h-100"> <Fragment>
<div className="cur-view-container o-auto"> <MainPanelTopbar
<div className="cur-view-path"> currentTab={this.props.currentTab}
<div className="fleft"> groupID={groupID}
<h3 className="sf-heading"> toggleAddDepartDialog={this.props.toggleAddDepartDialog}
{groupID ? toggleAddMemberDialog={this.props.toggleAddMemberDialog}
<Link to={siteRoot + 'org/departmentadmin/'}>{gettext('Departments')}</Link> toggleAddRepoDialog={this.props.toggleAddRepoDialog}
: <span>{gettext('Departments')}</span> />
} <div className="main-panel-center flex-row h-100">
{this.state.ancestorGroups.map(ancestor => { <div className="cur-view-container o-auto">
let newHref = siteRoot + 'org/departmentadmin/groups/' + ancestor.id + '/';
return <span key={ancestor.id}>{' / '}<Link to={newHref}>{ancestor.name}</Link></span>;
})}
{groupID && <span>{' / '}{this.state.groupName}</span>}
</h3>
</div>
</div>
<div className="cur-view-subcontainer org-groups">
<OrgDepartmentsList
groupID={groupID}
isShowAddDepartDialog={this.props.isShowAddDepartDialog}
toggleAddDepartDialog={this.props.toggleAddDepartDialog}
/>
</div>
<div className="cur-view-subcontainer org-members">
<div className="cur-view-path"> <div className="cur-view-path">
<div className="fleft"> <div className="fleft">
<h3 className="sf-heading">{gettext('Members')}</h3> <h3 className="sf-heading">
{groupID ?
<Link to={siteRoot + 'org/departmentadmin/'}>{gettext('Departments')}</Link>
: <span>{gettext('Departments')}</span>
}
{this.state.ancestorGroups.map(ancestor => {
let newHref = siteRoot + 'org/departmentadmin/groups/' + ancestor.id + '/';
return <span key={ancestor.id}>{' / '}<Link to={newHref}>{ancestor.name}</Link></span>;
})}
{groupID && <span>{' / '}{this.state.groupName}</span>}
</h3>
</div> </div>
</div> </div>
<div className="cur-view-content">
{(members && members.length === 1 && members[0].role === 'Owner') ? <div className="cur-view-subcontainer org-groups">
<p className="no-member">{gettext('No members')}</p> : <OrgDepartmentsList
<table> groupID={groupID}
<thead> isShowAddDepartDialog={this.props.isShowAddDepartDialog}
<tr> toggleAddDepartDialog={this.props.toggleAddDepartDialog}
<th width="5%"></th> />
<th width="50%">{gettext('Name')}</th> </div>
<th width="15%">{gettext('Role')}</th>
<th width="30%"></th> <div className="cur-view-subcontainer org-members">
</tr> <div className="cur-view-path">
</thead> <div className="fleft">
<tbody> <h3 className="sf-heading">{gettext('Members')}</h3>
{members.map((member, index) => { </div>
return ( </div>
<React.Fragment key={index}> <div className="cur-view-content">
<MemberItem {(members && members.length === 1 && members[0].role === 'Owner') ?
member={member} <p className="no-member">{gettext('No members')}</p> :
showDeleteMemberDialog={this.showDeleteMemberDialog} <table>
isItemFreezed={this.state.isItemFreezed} <thead>
onMemberChanged={this.onMemberChanged} <tr>
toggleItemFreezed={this.toggleItemFreezed} <th width="5%"></th>
groupID={groupID} <th width="50%">{gettext('Name')}</th>
/> <th width="15%">{gettext('Role')}</th>
</React.Fragment> <th width="30%"></th>
); </tr>
})} </thead>
</tbody> <tbody>
</table> {members.map((member, index) => {
return (
<React.Fragment key={index}>
<MemberItem
member={member}
showDeleteMemberDialog={this.showDeleteMemberDialog}
isItemFreezed={this.state.isItemFreezed}
onMemberChanged={this.onMemberChanged}
toggleItemFreezed={this.toggleItemFreezed}
groupID={groupID}
/>
</React.Fragment>
);
})}
</tbody>
</table>
}
</div>
</div>
<div className="cur-view-subcontainer org-libriries">
<div className="cur-view-path">
<div className="fleft"><h3 className="sf-heading">{gettext('Libraries')}</h3></div>
</div>
{ repos.length > 0 ?
<div className="cur-view-content">
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="50%">{gettext('Name')}</th>
<th width="30%">{gettext('Size')}</th>
<th width="15%"></th>
</tr>
</thead>
<tbody>
{repos.map((repo, index) => {
return(
<React.Fragment key={index}>
<RepoItem repo={repo} showDeleteRepoDialog={this.showDeleteRepoDialog}/>
</React.Fragment>
);
})}
</tbody>
</table>
</div>
: <p className="no-libraty">{gettext('No libraries')}</p>
} }
</div> </div>
</div>
<div className="cur-view-subcontainer org-libriries">
<div className="cur-view-path">
<div className="fleft"><h3 className="sf-heading">{gettext('Libraries')}</h3></div>
</div>
{ repos.length > 0 ?
<div className="cur-view-content">
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="50%">{gettext('Name')}</th>
<th width="30%">{gettext('Size')}</th>
<th width="15%"></th>
</tr>
</thead>
<tbody>
{repos.map((repo, index) => {
return(
<React.Fragment key={index}>
<RepoItem repo={repo} showDeleteRepoDialog={this.showDeleteRepoDialog}/>
</React.Fragment>
);
})}
</tbody>
</table>
</div>
: <p className="no-libraty">{gettext('No libraries')}</p>
}
</div> </div>
<React.Fragment>
{this.state.showDeleteMemberDialog && (
<ModalPortal>
<DeleteMemberDialog
toggle={this.toggleCancel}
onMemberChanged={this.onMemberChanged}
member={this.state.deletedMember}
groupID={groupID}
/>
</ModalPortal>
)}
{this.state.showDeleteRepoDialog && (
<ModalPortal>
<DeleteRepoDialog
toggle={this.toggleCancel}
onRepoChanged={this.onRepoChanged}
repo={this.state.deletedRepo}
groupID={groupID}
/>
</ModalPortal>
)}
{this.props.isShowAddMemberDialog && (
<ModalPortal>
<AddMemberDialog
toggle={this.props.toggleAddMemberDialog}
onMemberChanged={this.onMemberChanged}
groupID={groupID}
/>
</ModalPortal>
)}
{this.props.isShowAddRepoDialog && (
<ModalPortal>
<AddRepoDialog
toggle={this.props.toggleAddRepoDialog}
onRepoChanged={this.onRepoChanged}
groupID={groupID}
/>
</ModalPortal>
)}
</React.Fragment>
</div> </div>
<React.Fragment> </Fragment>
{this.state.showDeleteMemberDialog && (
<ModalPortal>
<DeleteMemberDialog
toggle={this.toggleCancel}
onMemberChanged={this.onMemberChanged}
member={this.state.deletedMember}
groupID={groupID}
/>
</ModalPortal>
)}
{this.state.showDeleteRepoDialog && (
<ModalPortal>
<DeleteRepoDialog
toggle={this.toggleCancel}
onRepoChanged={this.onRepoChanged}
repo={this.state.deletedRepo}
groupID={groupID}
/>
</ModalPortal>
)}
{this.props.isShowAddMemberDialog && (
<ModalPortal>
<AddMemberDialog
toggle={this.props.toggleAddMemberDialog}
onMemberChanged={this.onMemberChanged}
groupID={groupID}
/>
</ModalPortal>
)}
{this.props.isShowAddRepoDialog && (
<ModalPortal>
<AddRepoDialog
toggle={this.props.toggleAddRepoDialog}
onRepoChanged={this.onRepoChanged}
groupID={groupID}
/>
</ModalPortal>
)}
</React.Fragment>
</div>
); );
} }
} }

144
frontend/src/pages/org-admin/org-departments-list.js
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import moment from 'moment'; import moment from 'moment';
import { Link } from '@reach/router'; import { Link } from '@reach/router';
@@ -9,6 +9,7 @@ import ModalPortal from '../../components/modal-portal';
import AddDepartDialog from '../../components/dialog/org-add-department-dialog'; import AddDepartDialog from '../../components/dialog/org-add-department-dialog';
import DeleteDepartDialog from '../../components/dialog/org-delete-department-dialog'; import DeleteDepartDialog from '../../components/dialog/org-delete-department-dialog';
import SetGroupQuotaDialog from '../../components/dialog/org-set-group-quota-dialog'; import SetGroupQuotaDialog from '../../components/dialog/org-set-group-quota-dialog';
import MainPanelTopbar from './main-panel-topbar';
import '../../css/org-department-item.css'; import '../../css/org-department-item.css';
moment.locale(lang); moment.locale(lang);
@@ -73,73 +74,84 @@ class OrgDepartmentsList extends React.Component {
let header = isSub ? gettext('Sub-departments') : gettext('Departments'); let header = isSub ? gettext('Sub-departments') : gettext('Departments');
let noGroup = isSub ? gettext('No sub-departments') : gettext('No departments'); let noGroup = isSub ? gettext('No sub-departments') : gettext('No departments');
return ( return (
<div className="main-panel-center flex-row h-100"> <Fragment>
<div className="cur-view-container o-auto"> {!isSub &&
<div className="cur-view-path"> <MainPanelTopbar
<div className="fleft"><h3 className="sf-heading">{header}</h3></div> currentTab={this.props.currentTab}
groupID={this.props.groupID}
toggleAddDepartDialog={this.props.toggleAddDepartDialog}
toggleAddMemberDialog={this.props.toggleAddMemberDialog}
toggleAddRepoDialog={this.props.toggleAddRepoDialog}
/>
}
<div className="main-panel-center flex-row h-100">
<div className="cur-view-container o-auto">
<div className="cur-view-path">
<div className="fleft"><h3 className="sf-heading">{header}</h3></div>
</div>
<div className="cur-view-content">
{groups && groups.length > 0 ?
<table>
<thead>
<tr>
<th width="40%">{gettext('Name')}</th>
<th width="25%">{gettext('Created At')}</th>
<th width="20%">{gettext('Quota')}</th>
<th width="15%"></th>
</tr>
</thead>
<tbody>
{groups.map((group, index) => {
return(
<React.Fragment key={group.id}>
<GroupItem
group={group}
showDeleteDepartDialog={this.showDeleteDepartDialog}
showSetGroupQuotaDialog={this.showSetGroupQuotaDialog}
/>
</React.Fragment>
);
})}
</tbody>
</table>
:
<p className="no-group">{noGroup}</p>
}
</div>
<React.Fragment>
{this.props.isShowAddDepartDialog && (
<ModalPortal>
<AddDepartDialog
onDepartChanged={this.onDepartChanged}
parentGroupID={this.props.groupID}
groupID={this.state.groupID}
toggle={this.props.toggleAddDepartDialog}
/>
</ModalPortal>
)}
{this.state.showDeleteDepartDialog && (
<ModalPortal>
<DeleteDepartDialog
toggle={this.toggleCancel}
groupID={this.state.groupID}
groupName={this.state.groupName}
onDepartChanged={this.onDepartChanged}
/>
</ModalPortal>
)}
{this.state.showSetGroupQuotaDialog && (
<ModalPortal>
<SetGroupQuotaDialog
toggle={this.toggleCancel}
groupID={this.state.groupID}
onDepartChanged={this.onDepartChanged}
/>
</ModalPortal>
)}
</React.Fragment>
</div> </div>
<div className="cur-view-content">
{groups && groups.length > 0 ?
<table>
<thead>
<tr>
<th width="40%">{gettext('Name')}</th>
<th width="25%">{gettext('Created At')}</th>
<th width="20%">{gettext('Quota')}</th>
<th width="15%"></th>
</tr>
</thead>
<tbody>
{groups.map((group, index) => {
return(
<React.Fragment key={group.id}>
<GroupItem
group={group}
showDeleteDepartDialog={this.showDeleteDepartDialog}
showSetGroupQuotaDialog={this.showSetGroupQuotaDialog}
/>
</React.Fragment>
);
})}
</tbody>
</table>
:
<p className="no-group">{noGroup}</p>
}
</div>
<React.Fragment>
{this.props.isShowAddDepartDialog && (
<ModalPortal>
<AddDepartDialog
onDepartChanged={this.onDepartChanged}
parentGroupID={this.props.groupID}
groupID={this.state.groupID}
toggle={this.props.toggleAddDepartDialog}
/>
</ModalPortal>
)}
{this.state.showDeleteDepartDialog && (
<ModalPortal>
<DeleteDepartDialog
toggle={this.toggleCancel}
groupID={this.state.groupID}
groupName={this.state.groupName}
onDepartChanged={this.onDepartChanged}
/>
</ModalPortal>
)}
{this.state.showSetGroupQuotaDialog && (
<ModalPortal>
<SetGroupQuotaDialog
toggle={this.toggleCancel}
groupID={this.state.groupID}
onDepartChanged={this.onDepartChanged}
/>
</ModalPortal>
)}
</React.Fragment>
</div> </div>
</div> </Fragment>
); );
} }
} }

76
frontend/src/pages/org-admin/org-groups.js
View File

@@ -1,9 +1,8 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import OrgGroupInfo from '../../models/org-group'; import OrgGroupInfo from '../../models/org-group';
import Toast from '../../components/toast'; import Toast from '../../components/toast';
import MainPanelTopbar from './main-panel-topbar';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { siteRoot, gettext, orgID } from '../../utils/constants'; import { siteRoot, gettext, orgID } from '../../utils/constants';
@@ -73,43 +72,46 @@ class OrgGroups extends Component {
render() { render() {
let groups = this.state.orgGroups; let groups = this.state.orgGroups;
return ( return (
<div className="main-panel-center flex-row"> <Fragment>
<div className="cur-view-container"> <MainPanelTopbar currentTab={this.props.currentTab}/>
<div className="cur-view-path"> <div className="main-panel-center flex-row">
<h3 className="sf-heading">{gettext('All Groups')}</h3> <div className="cur-view-container">
</div> <div className="cur-view-path">
<div className="cur-view-content"> <h3 className="sf-heading">{gettext('All Groups')}</h3>
<table> </div>
<thead> <div className="cur-view-content">
<tr> <table>
<th width="30%">{gettext('Name')}</th> <thead>
<th width="35%">{gettext('Creator')}</th> <tr>
<th width="23%">{gettext('Created At')}</th> <th width="30%">{gettext('Name')}</th>
<th width="12%" className="text-center">{gettext('Operations')}</th> <th width="35%">{gettext('Creator')}</th>
</tr> <th width="23%">{gettext('Created At')}</th>
</thead> <th width="12%" className="text-center">{gettext('Operations')}</th>
<tbody> </tr>
{groups.map(item => { </thead>
return ( <tbody>
<GroupItem {groups.map(item => {
key={item.id} return (
group={item} <GroupItem
isItemFreezed={this.state.isItemFreezed} key={item.id}
onFreezedItem={this.onFreezedItem} group={item}
onUnfreezedItem={this.onUnfreezedItem} isItemFreezed={this.state.isItemFreezed}
deleteGroupItem={this.deleteGroupItem} onFreezedItem={this.onFreezedItem}
/> onUnfreezedItem={this.onUnfreezedItem}
)})} deleteGroupItem={this.deleteGroupItem}
</tbody> />
</table> )})}
<div className="paginator"> </tbody>
{this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>} </table>
{(this.state.page != 1 && this.state.pageNext) && <span> | </span>} <div className="paginator">
{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>
</div> </div>
</div> </div>
</div> </Fragment>
); );
} }
} }

32
frontend/src/pages/org-admin/org-info.js
View File

@@ -1,7 +1,8 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { gettext, orgMemberQuotaEnabled} from '../../utils/constants'; import { gettext, orgMemberQuotaEnabled} from '../../utils/constants';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import MainPanelTopbar from './main-panel-topbar';
class OrgInfo extends Component { class OrgInfo extends Component {
@@ -30,25 +31,28 @@ class OrgInfo extends Component {
render() { render() {
return ( return (
<div className="main-panel-center flex-row"> <Fragment>
<div className="cur-view-container"> <MainPanelTopbar currentTab={this.props.currentTab}/>
<div className="cur-view-path"> <div className="main-panel-center flex-row">
<h3 className="sf-heading">{gettext('Info')}</h3> <div className="cur-view-container">
</div> <div className="cur-view-path">
<div className="cur-view-content"> <h3 className="sf-heading">{gettext('Info')}</h3>
<dl> </div>
<dt>{gettext('Space Used')}</dt> <div className="cur-view-content">
<dl>
<dt>{gettext('Space Used')}</dt>
{(this.state.storage_quota > 0) ? <dd>{Utils.bytesToSize(this.state.storage_usage)} / {Utils.bytesToSize(this.state.storage_quota)}</dd> : <dd>{Utils.bytesToSize(this.state.storage_usage)}</dd>} {(this.state.storage_quota > 0) ? <dd>{Utils.bytesToSize(this.state.storage_usage)} / {Utils.bytesToSize(this.state.storage_quota)}</dd> : <dd>{Utils.bytesToSize(this.state.storage_usage)}</dd>}
{orgMemberQuotaEnabled ? <dt>{gettext('Active Users')} / {gettext('Total Users')} / {gettext('Limits')}</dt> : <dt>{gettext('Active Users')} / {gettext('Total Users')}</dt>} {orgMemberQuotaEnabled ? <dt>{gettext('Active Users')} / {gettext('Total Users')} / {gettext('Limits')}</dt> : <dt>{gettext('Active Users')} / {gettext('Total Users')}</dt>}
{orgMemberQuotaEnabled ? <dd>{(this.state.active_members > 0) ? this.state.active_members : '--'} / {(this.state.member_usage > 0) ? this.state.member_usage : '--'} / {(this.state.member_quota > 0) ? this.state.member_quota : '--'}</dd> : <dd>{this.state.active_members > 0 ? this.state.active_members : '--'} / {this.state.member_usage > 0 ? this.state.member_usage : '--'}</dd>} {orgMemberQuotaEnabled ? <dd>{(this.state.active_members > 0) ? this.state.active_members : '--'} / {(this.state.member_usage > 0) ? this.state.member_usage : '--'} / {(this.state.member_quota > 0) ? this.state.member_quota : '--'}</dd> : <dd>{this.state.active_members > 0 ? this.state.active_members : '--'} / {this.state.member_usage > 0 ? this.state.member_usage : '--'}</dd>}
</dl> </dl>
</div>
</div> </div>
</div> </div>
</div> </Fragment>
); );
} }
} }

79
frontend/src/pages/org-admin/org-libraries.js
View File

@@ -1,7 +1,7 @@
import React, { Fragment, Component } from 'react'; import React, { Fragment, Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import MainPanelTopbar from './main-panel-topbar';
import OrgAdminRepo from '../../models/org-admin-repo'; import OrgAdminRepo from '../../models/org-admin-repo';
import toaster from '../../components/toast'; import toaster from '../../components/toast';
import TransferDialog from '../../components/dialog/transfer-dialog'; import TransferDialog from '../../components/dialog/transfer-dialog';
@@ -87,46 +87,49 @@ class OrgLibraries extends Component {
render() { render() {
let repos = this.state.orgRepos; let repos = this.state.orgRepos;
return ( return (
<div className="main-panel-center flex-row"> <Fragment>
<div className="cur-view-container"> <MainPanelTopbar currentTab={this.props.currentTab}/>
<div className="cur-view-path"> <div className="main-panel-center flex-row">
<h3 className="sf-heading">{gettext('All Libraries')}</h3> <div className="cur-view-container">
</div> <div className="cur-view-path">
<div className="cur-view-content"> <h3 className="sf-heading">{gettext('All Libraries')}</h3>
<table> </div>
<thead> <div className="cur-view-content">
<tr> <table>
<th width="4%"></th> <thead>
<th width="31%">{gettext('Name')}</th> <tr>
<th width="26%">ID</th> <th width="4%"></th>
<th width="24%">{gettext('Owner')}</th> <th width="31%">{gettext('Name')}</th>
<th width="15%" className="text-center">{gettext('Operations')}</th> <th width="26%">ID</th>
</tr> <th width="24%">{gettext('Owner')}</th>
</thead> <th width="15%" className="text-center">{gettext('Operations')}</th>
<tbody> </tr>
{repos.map(item => { </thead>
return ( <tbody>
<RepoItem {repos.map(item => {
key={item.repoID} return (
repo={item} <RepoItem
isItemFreezed={this.state.isItemFreezed} key={item.repoID}
onFreezedItem={this.onFreezedItem} repo={item}
onUnfreezedItem={this.onUnfreezedItem} isItemFreezed={this.state.isItemFreezed}
deleteRepoItem={this.deleteRepoItem} onFreezedItem={this.onFreezedItem}
transferRepoItem={this.transferRepoItem} onUnfreezedItem={this.onUnfreezedItem}
/> deleteRepoItem={this.deleteRepoItem}
);} transferRepoItem={this.transferRepoItem}
)} />
</tbody> );}
</table> )}
<div className="paginator"> </tbody>
{this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>} </table>
{(this.state.page != 1 && this.state.pageNext) && <span> | </span>} <div className="paginator">
{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>
</div> </div>
</div> </div>
</div> </Fragment>
); );
} }
} }

80
frontend/src/pages/org-admin/org-links.js
View File

@@ -1,9 +1,10 @@
import React from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import moment from 'moment'; import moment from 'moment';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { siteRoot, gettext } from '../../utils/constants'; import { siteRoot, gettext } from '../../utils/constants';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import MainPanelTopbar from './main-panel-topbar';
class OrgLinks extends React.Component { class OrgLinks extends React.Component {
@@ -62,46 +63,49 @@ class OrgLinks extends React.Component {
render() { render() {
const linkList = this.state.linkList; const linkList = this.state.linkList;
return ( return (
<div className="main-panel-center flex-row"> <Fragment>
<div className="cur-view-container"> <MainPanelTopbar currentTab={this.props.currentTab}/>
<div className="cur-view-path"> <div className="main-panel-center flex-row">
<h3 className="sf-heading">{gettext('All Public Links')}</h3> <div className="cur-view-container">
</div> <div className="cur-view-path">
<div className="cur-view-content"> <h3 className="sf-heading">{gettext('All Public Links')}</h3>
<table> </div>
<thead> <div className="cur-view-content">
<tr> <table>
<th width="50%">{gettext('Name')}</th> <thead>
<th width="15%">{gettext('Owner')}</th> <tr>
<th width="15%">{gettext('Created At')}</th> <th width="50%">{gettext('Name')}</th>
<th width="10%">{gettext('Count')}</th> <th width="15%">{gettext('Owner')}</th>
<th width="10%"></th> <th width="15%">{gettext('Created At')}</th>
</tr> <th width="10%">{gettext('Count')}</th>
</thead> <th width="10%"></th>
<tbody> </tr>
{linkList && linkList.map((item, index) => { </thead>
return( <tbody>
<React.Fragment key={index}> {linkList && linkList.map((item, index) => {
<RepoItem return(
link={item} <React.Fragment key={index}>
isItemFreezed={this.state.isItemFreezed} <RepoItem
onFreezedItem={this.onFreezedItem} link={item}
onUnfreezedItem={this.onUnfreezedItem} isItemFreezed={this.state.isItemFreezed}
deleteOrgLink={this.deleteOrgLink} onFreezedItem={this.onFreezedItem}
/> onUnfreezedItem={this.onUnfreezedItem}
</React.Fragment> deleteOrgLink={this.deleteOrgLink}
); />
})} </React.Fragment>
</tbody> );
</table> })}
<div className="paginator"> </tbody>
{this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>} </table>
{(this.state.page != 1 && this.state.pageNext) && <span> | </span>} <div className="paginator">
{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>
</div> </div>
</div> </div>
</div> </Fragment>
); );
} }
} }

38
frontend/src/pages/org-admin/org-logs.js
View File

@@ -1,6 +1,7 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import { Link } from '@reach/router'; import { Link } from '@reach/router';
import { siteRoot, gettext } from '../../utils/constants'; import { siteRoot, gettext } from '../../utils/constants';
import MainPanelTopbar from './main-panel-topbar';
class OrgLogs extends Component { class OrgLogs extends Component {
@@ -14,24 +15,27 @@ class OrgLogs extends Component {
render() { render() {
return ( return (
<div className="main-panel-center flex-row"> <Fragment>
<div className="cur-view-container"> <MainPanelTopbar currentTab={this.props.currentTab}/>
<div className="cur-view-path org-user-nav"> <div className="main-panel-center flex-row">
<ul className="nav"> <div className="cur-view-container">
<li className="nav-item" onClick={() => this.tabItemClick('logadmin')}> <div className="cur-view-path org-user-nav">
<Link className={`nav-link ${this.props.currentTab === 'logadmin' ? 'active': ''}`} to={siteRoot + 'org/logadmin/'} title={gettext('File Access')}>{gettext('File Access')}</Link> <ul className="nav">
</li> <li className="nav-item" onClick={() => this.tabItemClick('logadmin')}>
<li className="nav-item" onClick={() => this.tabItemClick('file-update')}> <Link className={`nav-link ${this.props.currentTab === 'logadmin' ? 'active': ''}`} to={siteRoot + 'org/logadmin/'} title={gettext('File Access')}>{gettext('File Access')}</Link>
<Link className={`nav-link ${this.props.currentTab === 'file-update' ? 'active': ''}`} to={siteRoot + 'org/logadmin/file-update/'} title={gettext('File Update')}>{gettext('File Update')}</Link> </li>
</li> <li className="nav-item" onClick={() => this.tabItemClick('file-update')}>
<li className="nav-item" onClick={() => this.tabItemClick('perm-audit')}> <Link className={`nav-link ${this.props.currentTab === 'file-update' ? 'active': ''}`} to={siteRoot + 'org/logadmin/file-update/'} title={gettext('File Update')}>{gettext('File Update')}</Link>
<Link className={`nav-link ${this.props.currentTab === 'perm-audit' ? 'active': ''}`} to={siteRoot + 'org/logadmin/perm-audit/'} title={gettext('Permission')}>{gettext('Permission')}</Link> </li>
</li> <li className="nav-item" onClick={() => this.tabItemClick('perm-audit')}>
</ul> <Link className={`nav-link ${this.props.currentTab === 'perm-audit' ? 'active': ''}`} to={siteRoot + 'org/logadmin/perm-audit/'} title={gettext('Permission')}>{gettext('Permission')}</Link>
</li>
</ul>
</div>
{this.props.children}
</div> </div>
{this.props.children}
</div> </div>
</div> </Fragment>
); );
} }
} }

37
frontend/src/pages/org-admin/org-users.js
View File

@@ -1,6 +1,7 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import { Link } from '@reach/router'; import { Link } from '@reach/router';
import { siteRoot, gettext } from '../../utils/constants'; import { siteRoot, gettext } from '../../utils/constants';
import MainPanelTopbar from './main-panel-topbar';
class OrgUsers extends Component { class OrgUsers extends Component {
@@ -14,21 +15,29 @@ class OrgUsers extends Component {
render() { render() {
return ( return (
<div className="main-panel-center flex-row"> <Fragment>
<div className="cur-view-container"> <MainPanelTopbar
<div className="cur-view-path org-user-nav"> currentTab={this.props.currentTab}
<ul className="nav"> toggleAddOrgUser={this.props.toggleAddOrgUser}
<li className="nav-item" onClick={() => this.tabItemClick('users')}> toggleInviteUserDialog={this.props.toggleInviteUserDialog}
<Link className={`nav-link ${this.props.currentTab === 'users' ? 'active': ''}`} to={siteRoot + 'org/useradmin/'} title={gettext('All')}>{gettext('All')}</Link> toggleAddOrgAdmin={this.props.toggleAddOrgAdmin}
</li> />
<li className="nav-item" onClick={() => this.tabItemClick('admins')}> <div className="main-panel-center flex-row">
<Link className={`nav-link ${this.props.currentTab === 'admins' ? 'active': ''}`} to={siteRoot + 'org/useradmin/admins/'} title={gettext('Admin')}>{gettext('Admin')}</Link> <div className="cur-view-container">
</li> <div className="cur-view-path org-user-nav">
</ul> <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>
</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>
</li>
</ul>
</div>
{this.props.children}
</div> </div>
{this.props.children}
</div> </div>
</div> </Fragment>
); );
} }
} }