haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-05 08:53:14 +00:00
Code Issues Releases Wiki Activity

[system admin / users] redesigned the 'user filter' toolbar for the 'Database' tab (#7667)

Browse Source
This commit is contained in:
llj
2025-03-27 14:15:45 +08:00
committed by GitHub
parent 18c72b9391
commit 0666b7a303
5 changed files with 103 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/single-selector.js
View File

@@ -74,7 +74,7 @@ class Selector extends Component {
{customSelectorToggle ? customSelectorToggle : (
<span className="cur-option">
{currentSelectedOption.text}
{isDropdownToggleShown && <i className="sf3-font sf3-font-down ml-2 toggle-icon"></i>}
{isDropdownToggleShown && <i className="sf3-font sf3-font-down ml-1 toggle-icon"></i>}
</span>
)}
</div>

20
frontend/src/pages/sys-admin/users/users-content.js
View File

@@ -15,7 +15,6 @@ import OpMenu from '../../../components/dialog/op-menu';
import SysAdminUserSetQuotaDialog from '../../../components/dialog/sysadmin-dialog/set-quota';
import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
import UserLink from '../user-link';
import UsersFilterBar from './users-filter-bar';
const { availableRoles, availableAdminRoles, institutions } = window.sysadmin.pageOptions;
dayjs.extend(relativeTime);
@@ -42,11 +41,11 @@ class Content extends Component {
};
getPreviousPage = () => {
this.props.getListByPage(this.props.currentPage - 1, this.props.is_active, this.props.role);
this.props.getListByPage(this.props.currentPage - 1);
};
getNextPage = () => {
this.props.getListByPage(this.props.currentPage + 1, this.props.is_active, this.props.role);
this.props.getListByPage(this.props.currentPage + 1);
};
sortByQuotaUsage = (e) => {
@@ -164,14 +163,6 @@ class Content extends Component {
return (
<div>
{this.props.currentItem === 'database' &&
<UsersFilterBar
isActive={this.props.is_active}
role={this.props.role}
onStatusChange={this.props.onStatusChange}
onRoleChange={this.props.onRoleChange}
/>
}
{items.length ? table : <EmptyTip text={gettext('No users')} />}
</div>
);
@@ -201,12 +192,7 @@ Content.propTypes = {
onUserSelected: PropTypes.func,
curPerPage: PropTypes.number,
hasNextPage: PropTypes.bool,
sortOrder: PropTypes.string,
is_active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
role: PropTypes.string,
currentItem: PropTypes.string,
onStatusChange: PropTypes.func,
onRoleChange: PropTypes.func
sortOrder: PropTypes.string
};
class Item extends Component {

29
frontend/src/pages/sys-admin/users/users-filter-bar.css
View File

@@ -1,29 +1,4 @@
.users-filter-bar .users-filter-bar-dropdown-toggle {
height: 30px;
line-height: 30px;
padding-left: 8px;
.users-filter-bar .filter-item,
.users-filter-bar .cur-option {
font-size: 14px;
border-radius: 5px;
}
.users-filter-bar .users-filter-bar-dropdown-toggle .sf3-font-down {
color: #999;
margin-left: auto;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 12px;
width: 24px;
height: 24px;
}
.users-filter-bar .users-filter-bar-dropdown-toggle:hover {
background-color: #f5f5f5;
cursor: pointer;
}
.users-filter-bar .dropdown-menu .dropdown-item {
padding: 0.25rem 0.5rem;
display: flex;
justify-content: space-between;
}

132
frontend/src/pages/sys-admin/users/users-filter-bar.js
View File

@@ -1,117 +1,83 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Dropdown, DropdownToggle, DropdownItem, DropdownMenu } from 'reactstrap';
import { gettext } from '../../../utils/constants';
import Selector from '../../../components/single-selector';
import './users-filter-bar.css';
const { availableRoles } = window.sysadmin.pageOptions;
class UsersFilterBar extends Component {
constructor(props) {
super(props);
this.state = {
isStatusOpen: false,
isRoleOpen: false,
};
}
translateStatus = (status) => {
switch (status) {
case '0':
return gettext('Inactive');
case '1':
return gettext('Active');
default:
return gettext('All');
}
};
translateRole = (role) => {
switch (role) {
case '':
return gettext('All');
case 'default':
return gettext('Default');
case 'guest':
return gettext('Guest');
default:
return gettext('All');
return role;
}
};
toggleStatusDropdown = () => {
this.setState({ isStatusOpen: !this.state.isStatusOpen });
selectStatusOption = (option) => {
this.props.onStatusChange(option.value);
};
toggleRoleDropdown = () => {
this.setState({ isRoleOpen: !this.state.isRoleOpen });
};
renderCheck = () => {
return <span className="sf2-icon-tick text-gray font-weight-bold"></span>;
selectRoleOption = (option) => {
this.props.onRoleChange(option.value);
};
render() {
const { onStatusChange, onRoleChange } = this.props;
const { isActive, role } = this.props;
this.statusOptions = [
{ value: '', text: gettext('All') },
{ value: '1', text: gettext('Active') },
{ value: '0', text: gettext('Inactive') }
].map(item => {
item.isSelected = isActive == item.value;
return item;
});
const currentSelectedStatusOption = this.statusOptions.filter(item => item.isSelected)[0];
this.roleOptions = [''].concat(availableRoles).map(item => {
return {
value: item,
text: this.translateRole(item),
isSelected: item == role
};
});
const currentSelectedRoleOption = this.roleOptions.filter(item => item.isSelected)[0] || { // `|| {...}`: to be compatible with old data(roles not in the present `availableRoles`
value: role,
text: this.translateRole(role),
isSelected: true
};
return (
<div className="users-filter-bar mt-4 mb-2 d-flex">
<Dropdown isOpen={this.state.isStatusOpen} toggle={this.toggleStatusDropdown}>
<DropdownToggle
tag="div"
data-toggle="dropdown"
aria-expanded={this.state.isStatusOpen}
className="users-filter-bar-dropdown-toggle"
>
<span>{gettext('Status')}{': '}{this.translateStatus(this.props.isActive)}</span>
<span className='sf3-font-down sf3-font'></span>
</DropdownToggle>
<DropdownMenu>
<DropdownItem key={0} onClick={() => { onStatusChange(''); }}>
<span>{gettext('All')}</span>{this.props.isActive === '' && this.renderCheck()}
</DropdownItem>
<DropdownItem key={1} onClick={() => { onStatusChange('1'); }}>
<span>{gettext('Active')}</span>{this.props.isActive === '1' && this.renderCheck()}
</DropdownItem>
<DropdownItem key={2} onClick={() => { onStatusChange('0'); }}>
<span>{gettext('Inactive')}</span>{this.props.isActive === '0' && this.renderCheck()}
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={this.state.isRoleOpen} toggle={this.toggleRoleDropdown} className="ml-4">
<DropdownToggle
tag="div"
data-toggle="dropdown"
aria-expanded={this.state.isRoleOpen}
className="users-filter-bar-dropdown-toggle"
>
<span>{gettext('Role')}{': '}{this.translateRole(this.props.role)}</span>
<span className='sf3-font-down sf3-font'></span>
</DropdownToggle>
<DropdownMenu>
<DropdownItem key={0} onClick={() => { onRoleChange(''); }}>
<span>{gettext('All')}</span>
{this.props.role === '' && this.renderCheck()}
</DropdownItem>
{availableRoles.map((item, index) => {
return (
<DropdownItem key={index} onClick={() => { onRoleChange(item); }}>
<span>{this.translateRole(item)}</span>
{this.props.role === item && this.renderCheck()}
</DropdownItem>
);
})}
</DropdownMenu>
</Dropdown>
<div className="users-filter-bar mt-4 mb-2 d-flex align-items-center">
<span className="filter-item mr-2">{`${gettext('Status')}:`}</span>
<Selector
isDropdownToggleShown={true}
currentSelectedOption={currentSelectedStatusOption}
options={this.statusOptions}
selectOption={this.selectStatusOption}
/>
<span className="filter-item mr-2 ml-4">{`${gettext('Role')}:`}</span>
<Selector
isDropdownToggleShown={true}
currentSelectedOption={currentSelectedRoleOption}
options={this.roleOptions}
selectOption={this.selectRoleOption}
/>
</div>
);
}
}
UsersFilterBar.propTypes = {
loading: PropTypes.bool,
curPerPage: PropTypes.number,
sortBy: PropTypes.string,
currentPage: PropTypes.number,
sortOrder: PropTypes.string,
onStatusChange: PropTypes.func,
onRoleChange: PropTypes.func,
role: PropTypes.string,

80
frontend/src/pages/sys-admin/users/users.js
View File

@@ -16,6 +16,7 @@ import SysAdminAdminUser from '../../../models/sysadmin-admin-user';
import MainPanelTopbar from '../main-panel-topbar';
import Search from '../search';
import UsersNav from './users-nav';
import UsersFilterBar from './users-filter-bar';
import Content from './users-content';
const { availableRoles } = window.sysadmin.pageOptions;
@@ -44,8 +45,8 @@ class Users extends Component {
isBatchSetQuotaDialogOpen: false,
isBatchDeleteUserDialogOpen: false,
isBatchAddAdminDialogOpen: false,
is_active: null,
role: null,
is_active: '',
role: ''
};
}
@@ -59,15 +60,17 @@ class Users extends Component {
sortBy = '',
sortOrder = 'asc',
is_active,
role,
role
} = this.state;
this.setState({
perPage: parseInt(urlParams.get('per_page') || perPage),
currentPage: parseInt(urlParams.get('page') || currentPage),
sortBy: urlParams.get('order_by') || sortBy,
sortOrder: urlParams.get('direction') || sortOrder,
is_active: urlParams.get('is_active') || is_active,
role: urlParams.get('role') || role
}, () => {
this.getUsersListByPage(this.state.currentPage, is_active, role);
this.getUsersListByPage(this.state.currentPage);
});
}
}
@@ -164,8 +167,8 @@ class Users extends Component {
});
};
getUsersListByPage = (page, is_active, role) => {
const { perPage, sortBy, sortOrder } = this.state;
getUsersListByPage = (page) => {
const { perPage, sortBy, sortOrder, is_active, role } = this.state;
const { isLDAPImported } = this.props;
systemAdminAPI.sysAdminListUsers(page, perPage, isLDAPImported, sortBy, sortOrder, is_active, role).then(res => {
let users = res.data.data.map(user => {return new SysAdminUser(user);});
@@ -183,11 +186,12 @@ class Users extends Component {
});
};
updateURL = (page, perPage) => {
updateURLSearchParams = (obj) => {
let url = new URL(location.href);
let searchParams = new URLSearchParams(url.search);
searchParams.set('page', page);
searchParams.set('per_page', perPage);
for (const key in obj) {
searchParams.set(key, obj[key]);
}
url.search = searchParams.toString();
navigate(url.toString());
};
@@ -198,21 +202,28 @@ class Users extends Component {
is_active: is_active,
currentPage: 1
}, () => {
const { currentPage, perPage, is_active, role } = this.state;
this.updateURL(currentPage, perPage);
this.getUsersListByPage(currentPage, is_active, role);
const { currentPage, perPage } = this.state;
this.updateURLSearchParams({
'page': currentPage,
'per_page': perPage,
'is_active': is_active
});
this.getUsersListByPage(currentPage);
});
};
// role: 'default', 'guest', ''
onRoleChange = (role) => {
this.setState({
role: role,
currentPage: 1
}, () => {
const { currentPage, perPage, is_active, role } = this.state;
this.updateURL(currentPage, perPage);
this.getUsersListByPage(currentPage, is_active, role);
const { currentPage, perPage } = this.state;
this.updateURLSearchParams({
'page': currentPage,
'per_page': perPage,
'role': role
});
this.getUsersListByPage(currentPage);
});
};
@@ -222,15 +233,14 @@ class Users extends Component {
sortOrder: this.state.sortOrder == 'asc' ? 'desc' : 'asc',
currentPage: 1
}, () => {
let url = new URL(location.href);
let searchParams = new URLSearchParams(url.search);
const { currentPage, sortBy, sortOrder, is_active, role } = this.state;
searchParams.set('page', currentPage);
searchParams.set('order_by', sortBy);
searchParams.set('direction', sortOrder);
url.search = searchParams.toString();
navigate(url.toString());
this.getUsersListByPage(currentPage, is_active, role);
const { currentPage, perPage, sortBy, sortOrder } = this.state;
this.updateURLSearchParams({
'page': currentPage,
'per_page': perPage,
'order_by': sortBy,
'direction': sortOrder
});
this.getUsersListByPage(currentPage);
});
};
@@ -346,7 +356,7 @@ class Users extends Component {
this.setState({
perPage: perPage
}, () => {
this.getUsersListByPage(1, this.state.is_active, this.state.role);
this.getUsersListByPage(1);
});
};
@@ -471,6 +481,8 @@ class Users extends Component {
render() {
const { isAdmin, isLDAPImported } = this.props;
const {
is_active,
role,
hasUserSelected,
isImportUserDialogOpen,
isAddUserDialogOpen,
@@ -478,6 +490,7 @@ class Users extends Component {
isBatchSetQuotaDialogOpen,
isBatchAddAdminDialogOpen
} = this.state;
const curTab = this.getCurrentNavItem();
return (
<Fragment>
<MainPanelTopbar search={this.getSearch()} {...this.props}>
@@ -491,8 +504,16 @@ class Users extends Component {
</MainPanelTopbar>
<div className="main-panel-center flex-row">
<div className="cur-view-container">
<UsersNav currentItem={this.getCurrentNavItem()} />
<UsersNav currentItem={curTab} />
<div className="cur-view-content">
{curTab == 'database' &&
<UsersFilterBar
isActive={is_active}
role={role}
onStatusChange={this.onStatusChange}
onRoleChange={this.onRoleChange}
/>
}
<Content
isAdmin={isAdmin}
isLDAPImported={isLDAPImported}
@@ -505,8 +526,6 @@ class Users extends Component {
currentPage={this.state.currentPage}
hasNextPage={this.state.hasNextPage}
curPerPage={this.state.perPage}
is_active={this.state.is_active}
role={this.state.role}
resetPerPage={this.resetPerPage}
getListByPage={this.getUsersListByPage}
updateUser={this.updateUser}
@@ -516,9 +535,6 @@ class Users extends Component {
onUserSelected={this.onUserSelected}
isAllUsersSelected={this.isAllUsersSelected}
toggleSelectAllUsers={this.toggleSelectAllUsers}
onRoleChange={this.onRoleChange}
onStatusChange={this.onStatusChange}
currentItem={this.getCurrentNavItem()}
/>
</div>
</div>