feat: add user list sorting and pagination enhancements

This commit is contained in:
陈浩 2024-03-16 19:08:18 +08:00
parent c285e000cc
commit 5c1e78ed87
3 changed files with 62 additions and 26 deletions

View File

@ -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) {

View File

@ -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) {

View File

@ -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}