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

[org admin] 'info' page: redesigned it (#6240)

Browse Source
This commit is contained in:
llj
2024-06-20 15:51:05 +08:00
committed by GitHub
parent fd2d6c5c82
commit ea6c38b4a6
2 changed files with 118 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/css/org-admin-info-page.css Normal file
View File

@@ -0,0 +1,50 @@
.org-admin-info-content {
background: #f5f5f5;
}
.org-admin-info-content .info-content-item {
padding: 30px;
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 5px;
width: calc(50% - 5.5px);
margin-bottom: 11px;
}
.org-admin-info-content .info-content-item-img {
margin-right: 15px;
}
.org-admin-info-content .info-content-item-heading {
font-size: 1rem;
font-weight: 500;
margin-bottom: 5px;
}
.org-admin-info-content .info-content-name-text {
font-size: .875rem;
margin: 0;
}
.org-admin-info-content .info-content-user-text {
text-align: center;
font-size: 2rem;
font-weight: 500;
margin: 16px 0 0;
}
.org-admin-info-content .info-content-space-text {
font-size: 1.875rem;
font-weight: 500;
margin: 5px 0 0;
}
.org-admin-info-content .progress {
height: 6px;
margin: 20px 0 5px;
}
.org-admin-info-content .progress-text {
font-size: .8125rem;
color: #666666;
}

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

@@ -1,9 +1,11 @@
import React, { Component, Fragment } from 'react';
import { seafileAPI } from '../../utils/seafile-api';
import { gettext, orgMemberQuotaEnabled} from '../../utils/constants';
import { mediaUrl, gettext, orgMemberQuotaEnabled} from '../../utils/constants';
import { Utils } from '../../utils/utils';
import MainPanelTopbar from './main-panel-topbar';
import '../../css/org-admin-info-page.css';
class OrgInfo extends Component {
constructor(props) {
@@ -20,18 +22,25 @@ class OrgInfo extends Component {
componentDidMount() {
seafileAPI.orgAdminGetOrgInfo().then(res => {
const {
org_id, org_name,
member_quota, member_usage, active_members,
storage_quota, storage_usage
} = res.data;
this.setState({
org_name: res.data.org_name,
storage_quota: res.data.storage_quota,
storage_usage: res.data.storage_usage,
member_quota: res.data.member_quota,
member_usage: res.data.member_usage,
active_members: res.data.active_members
org_id, org_name,
member_quota, member_usage, active_members,
storage_quota, storage_usage
});
});
}
render() {
const {
org_id, org_name,
member_quota, member_usage, active_members,
storage_quota, storage_usage
} = this.state;
return (
<Fragment>
<MainPanelTopbar/>
@@ -40,18 +49,62 @@ class OrgInfo extends Component {
<div className="cur-view-path">
<h3 className="sf-heading">{gettext('Info')}</h3>
</div>
<div className="cur-view-content">
<dl>
<strong>{this.state.org_name}</strong>
<dt>{gettext('Space Used')}</dt>
<div className="cur-view-content org-admin-info-content py-4">
<div className="d-flex flex-row flex-wrap justify-content-between">
<div className="info-content-item d-flex">
<img src={`${mediaUrl}img/info-organization.png`} alt="" width="46" height="46" className="info-content-item-img" />
<div>
<h4 className="info-content-item-heading">{gettext('Team name')}</h4>
<p className="info-content-name-text">{org_name}</p>
</div>
</div>
{(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>}
<div className="info-content-item d-flex">
<img src={`${mediaUrl}img/info-id.png`} alt="" width="46" height="46" className="info-content-item-img" />
<div>
<h4 className="info-content-item-heading">{gettext('ID')}</h4>
<p className="info-content-name-text">{org_id}</p>
</div>
</div>
{orgMemberQuotaEnabled ? <dt>{gettext('Active Users')} / {gettext('Total Users')} / {gettext('Limits')}</dt> : <dt>{gettext('Active Users')} / {gettext('Total Users')}</dt>}
<div className="info-content-item w-100 d-flex justify-content-around">
{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>}
<div>
<h4 className="info-content-item-heading">{gettext('Active users')}</h4>
<p className="info-content-user-text">{active_members}</p>
</div>
</dl>
<div>
<h4 className="info-content-item-heading">{gettext('Total users')}</h4>
<p className="info-content-user-text">{member_usage}</p>
</div>
{orgMemberQuotaEnabled &&
<div>
<h4 className="info-content-item-heading">{gettext('User number limit')}</h4>
<p className="info-content-user-text">{member_quota > 0 ? member_quota : '--'}</p>
</div>
}
</div>
<div className="info-content-item">
<h4 className="info-content-item-heading">{gettext('Space used')}</h4>
{storage_quota > 0 ? (
<>
<p className="info-content-space-text">{`${(storage_usage/storage_quota * 100).toFixed(2)}%`}</p>
<div className="progress-container">
<div className="progress">
<div className="progress-bar" role="progressbar" style={{width: `${storage_usage/storage_quota * 100}%`}} aria-valuenow={storage_usage/storage_quota * 100} aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p className="progress-text m-0">{`${Utils.bytesToSize(storage_usage)} / ${Utils.bytesToSize(storage_quota)}`}</p>
</div>
</>
) : (
<p>{Utils.bytesToSize(storage_usage)}</p>
)}
</div>
</div>
</div>
</div>
</div>