feat: add user list sorting and pagination enhancements
This commit is contained in:
parent
c285e000cc
commit
5c1e78ed87
@ -180,24 +180,27 @@ func Register(c *gin.Context) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
func GetAllUsers(c *gin.Context) {
|
func GetAllUsers(c *gin.Context) {
|
||||||
p, _ := strconv.Atoi(c.Query("p"))
|
p, _ := strconv.Atoi(c.Query("p"))
|
||||||
if p < 0 {
|
if p < 0 {
|
||||||
p = 0
|
p = 0
|
||||||
}
|
}
|
||||||
users, err := model.GetAllUsers(p*config.ItemsPerPage, config.ItemsPerPage)
|
|
||||||
if err != nil {
|
order := c.DefaultQuery("order", "")
|
||||||
c.JSON(http.StatusOK, gin.H{
|
users, err := model.GetAllUsers(p*config.ItemsPerPage, config.ItemsPerPage, order)
|
||||||
"success": false,
|
|
||||||
"message": err.Error(),
|
if err != nil {
|
||||||
})
|
c.JSON(http.StatusOK, gin.H{
|
||||||
return
|
"success": false,
|
||||||
}
|
"message": err.Error(),
|
||||||
c.JSON(http.StatusOK, gin.H{
|
})
|
||||||
"success": true,
|
return
|
||||||
"message": "",
|
}
|
||||||
"data": users,
|
|
||||||
})
|
c.JSON(http.StatusOK, gin.H{
|
||||||
return
|
"success": true,
|
||||||
|
"message": "",
|
||||||
|
"data": users,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
func SearchUsers(c *gin.Context) {
|
func SearchUsers(c *gin.Context) {
|
||||||
|
@ -40,9 +40,22 @@ func GetMaxUserId() int {
|
|||||||
return user.Id
|
return user.Id
|
||||||
}
|
}
|
||||||
|
|
||||||
func GetAllUsers(startIdx int, num int) (users []*User, err error) {
|
func GetAllUsers(startIdx int, num int, order string) (users []*User, err error) {
|
||||||
err = DB.Order("id desc").Limit(num).Offset(startIdx).Omit("password").Where("status != ?", common.UserStatusDeleted).Find(&users).Error
|
query := DB.Limit(num).Offset(startIdx).Omit("password").Where("status != ?", common.UserStatusDeleted)
|
||||||
return users, err
|
|
||||||
|
switch order {
|
||||||
|
case "quota":
|
||||||
|
query = query.Order("quota desc")
|
||||||
|
case "used_quota":
|
||||||
|
query = query.Order("used_quota desc")
|
||||||
|
case "request_count":
|
||||||
|
query = query.Order("request_count desc")
|
||||||
|
default:
|
||||||
|
query = query.Order("id desc")
|
||||||
|
}
|
||||||
|
|
||||||
|
err = query.Find(&users).Error
|
||||||
|
return users, err
|
||||||
}
|
}
|
||||||
|
|
||||||
func SearchUsers(keyword string) (users []*User, err error) {
|
func SearchUsers(keyword string) (users []*User, err error) {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Button, Form, Label, Pagination, Popup, Table } from 'semantic-ui-react';
|
import { Button, Form, Label, Pagination, Popup, Table, Dropdown } from 'semantic-ui-react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { API, showError, showSuccess } from '../helpers';
|
import { API, showError, showSuccess } from '../helpers';
|
||||||
|
|
||||||
@ -25,9 +25,10 @@ const UsersTable = () => {
|
|||||||
const [activePage, setActivePage] = useState(1);
|
const [activePage, setActivePage] = useState(1);
|
||||||
const [searchKeyword, setSearchKeyword] = useState('');
|
const [searchKeyword, setSearchKeyword] = useState('');
|
||||||
const [searching, setSearching] = useState(false);
|
const [searching, setSearching] = useState(false);
|
||||||
|
const [orderBy, setOrderBy] = useState('');
|
||||||
|
|
||||||
const loadUsers = async (startIdx) => {
|
const loadUsers = async (startIdx) => {
|
||||||
const res = await API.get(`/api/user/?p=${startIdx}`);
|
const res = await API.get(`/api/user/?p=${startIdx}&order=${orderBy}`);
|
||||||
const { success, message, data } = res.data;
|
const { success, message, data } = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
if (startIdx === 0) {
|
if (startIdx === 0) {
|
||||||
@ -47,19 +48,19 @@ const UsersTable = () => {
|
|||||||
(async () => {
|
(async () => {
|
||||||
if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
|
if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
|
||||||
// In this case we have to load more data and then append them.
|
// In this case we have to load more data and then append them.
|
||||||
await loadUsers(activePage - 1);
|
await loadUsers(activePage - 1, orderBy);
|
||||||
}
|
}
|
||||||
setActivePage(activePage);
|
setActivePage(activePage);
|
||||||
})();
|
})();
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadUsers(0)
|
loadUsers(0, orderBy)
|
||||||
.then()
|
.then()
|
||||||
.catch((reason) => {
|
.catch((reason) => {
|
||||||
showError(reason);
|
showError(reason);
|
||||||
});
|
});
|
||||||
}, []);
|
}, [orderBy]);
|
||||||
|
|
||||||
const manageUser = (username, action, idx) => {
|
const manageUser = (username, action, idx) => {
|
||||||
(async () => {
|
(async () => {
|
||||||
@ -110,6 +111,7 @@ const UsersTable = () => {
|
|||||||
// if keyword is blank, load files instead.
|
// if keyword is blank, load files instead.
|
||||||
await loadUsers(0);
|
await loadUsers(0);
|
||||||
setActivePage(1);
|
setActivePage(1);
|
||||||
|
setOrderBy('');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setSearching(true);
|
setSearching(true);
|
||||||
@ -148,6 +150,11 @@ const UsersTable = () => {
|
|||||||
setLoading(false);
|
setLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleOrderByChange = (e, { value }) => {
|
||||||
|
setOrderBy(value);
|
||||||
|
setActivePage(1);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Form onSubmit={searchUsers}>
|
<Form onSubmit={searchUsers}>
|
||||||
@ -322,6 +329,19 @@ const UsersTable = () => {
|
|||||||
<Button size='small' as={Link} to='/user/add' loading={loading}>
|
<Button size='small' as={Link} to='/user/add' loading={loading}>
|
||||||
添加新的用户
|
添加新的用户
|
||||||
</Button>
|
</Button>
|
||||||
|
<Dropdown
|
||||||
|
placeholder='排序方式'
|
||||||
|
selection
|
||||||
|
options={[
|
||||||
|
{ key: '', text: '默认排序', value: '' },
|
||||||
|
{ key: 'quota', text: '按剩余额度排序', value: 'quota' },
|
||||||
|
{ key: 'used_quota', text: '按已用额度排序', value: 'used_quota' },
|
||||||
|
{ key: 'request_count', text: '按请求次数排序', value: 'request_count' },
|
||||||
|
]}
|
||||||
|
value={orderBy}
|
||||||
|
onChange={handleOrderByChange}
|
||||||
|
style={{ marginLeft: '10px' }}
|
||||||
|
/>
|
||||||
<Pagination
|
<Pagination
|
||||||
floated='right'
|
floated='right'
|
||||||
activePage={activePage}
|
activePage={activePage}
|
||||||
|
Loading…
Reference in New Issue
Block a user