Hass/message-pusher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

chore: sync with gin-template

Browse Source
This commit is contained in:
JustSong
2022-11-22 11:04:06 +08:00
parent 8247192977
commit 5913266969
41 changed files with 813 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/UsersTable.js
+75 -31
View File
@@ -3,18 +3,18 @@ import { Button, Form, Label, Pagination, Table } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import { API, showError, showSuccess } from '../helpers';
const itemsPerPage = 10;
import { ITEMS_PER_PAGE } from '../constants';
function renderRole(role) {
switch (role) {
case 1:
return <Label>普通用户</Label>;
case 10:
return <Label color="yellow">管理员</Label>;
return <Label color='yellow'>管理员</Label>;
case 100:
return <Label color="orange">超级管理员</Label>;
return <Label color='orange'>超级管理员</Label>;
default:
return <Label color="red">未知身份</Label>;
return <Label color='red'>未知身份</Label>;
}
}
@@ -25,11 +25,17 @@ const UsersTable = () => {
const [searchKeyword, setSearchKeyword] = useState('');
const [searching, setSearching] = useState(false);
const loadUsers = async () => {
const res = await API.get('/api/user');
const loadUsers = async (startIdx) => {
const res = await API.get(`/api/user/?p=${startIdx}`);
const { success, message, data } = res.data;
if (success) {
setUsers(data);
if (startIdx === 0) {
setUsers(data);
} else {
let newUsers = users;
newUsers.push(...data);
setUsers(newUsers);
}
} else {
showError(message);
}
@@ -37,18 +43,24 @@ const UsersTable = () => {
};
const onPaginationChange = (e, { activePage }) => {
setActivePage(activePage);
(async () => {
if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
// In this case we have to load more data and then append them.
await loadUsers(activePage - 1);
}
setActivePage(activePage);
})();
};
useEffect(() => {
loadUsers()
loadUsers(0)
.then()
.catch((reason) => {
showError(reason);
});
}, []);
const manageUser = (username, action) => {
const manageUser = (username, action, idx) => {
(async () => {
const res = await API.post('/api/user/manage', {
username,
@@ -57,38 +69,62 @@ const UsersTable = () => {
const { success, message } = res.data;
if (success) {
showSuccess('操作成功完成！');
await loadUsers();
let user = res.data.data;
let newUsers = [...users];
let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
if (action === 'delete') {
newUsers[realIdx].deleted = true;
} else {
newUsers[realIdx].status = user.status;
newUsers[realIdx].role = user.role;
}
setUsers(newUsers);
} else {
showError(message);
}
})();
};
const renderStatus = (status, id) => {
const renderStatus = (status) => {
switch (status) {
case 1:
return '已激活';
return <Label basic>已激活</Label>;
case 2:
return '已封禁';
return (
<Label basic color='red'>
已封禁
</Label>
);
default:
return '未知状态';
return (
<Label basic color='grey'>
未知状态
</Label>
);
}
};
const searchUsers = async () => {
if (searchKeyword === '') {
// if keyword is blank, load files instead.
await loadUsers(0);
setActivePage(1);
return;
}
setSearching(true);
const res = await API.get(`/api/user/search?keyword=${searchKeyword}`);
const { success, message, data } = res.data;
if (success) {
setUsers(data);
setActivePage(1);
} else {
showError(message);
}
setSearching(false);
};
const handleKeywordChange = async (e, { name, value }) => {
setSearchKeyword(value);
const handleKeywordChange = async (e, { value }) => {
setSearchKeyword(value.trim());
};
const sortUser = (key) => {
@@ -109,10 +145,10 @@ const UsersTable = () => {
<>
<Form onSubmit={searchUsers}>
<Form.Input
icon="search"
icon='search'
fluid
iconPosition="left"
placeholder="搜索用户的 ID，用户名，显示名称，以及邮箱地址 ..."
iconPosition='left'
placeholder='搜索用户的 ID，用户名，显示名称，以及邮箱地址 ...'
value={searchKeyword}
loading={searching}
onChange={handleKeywordChange}
@@ -168,22 +204,26 @@ const UsersTable = () => {
<Table.Body>
{users
.slice((activePage - 1) * itemsPerPage, activePage * itemsPerPage)
.slice(
(activePage - 1) * ITEMS_PER_PAGE,
activePage * ITEMS_PER_PAGE
)
.map((user, idx) => {
if (user.deleted) return <></>;
return (
<Table.Row key={user.id}>
<Table.Cell>{user.username}</Table.Cell>
<Table.Cell>{user.display_name}</Table.Cell>
<Table.Cell>{user.email ? user.email : '无'}</Table.Cell>
<Table.Cell>{renderRole(user.role)}</Table.Cell>
<Table.Cell>{renderStatus(user.status, user.id)}</Table.Cell>
<Table.Cell>{renderStatus(user.status)}</Table.Cell>
<Table.Cell>
<div>
<Button
size={'small'}
positive
onClick={() => {
manageUser(user.username, 'promote');
manageUser(user.username, 'promote', idx);
}}
>
提升
@@ -192,7 +232,7 @@ const UsersTable = () => {
size={'small'}
color={'yellow'}
onClick={() => {
manageUser(user.username, 'demote');
manageUser(user.username, 'demote', idx);
}}
>
降级
@@ -201,7 +241,7 @@ const UsersTable = () => {
size={'small'}
negative
onClick={() => {
manageUser(user.username, 'delete');
manageUser(user.username, 'delete', idx);
}}
>
删除
@@ -211,7 +251,8 @@ const UsersTable = () => {
onClick={() => {
manageUser(
user.username,
user.status === 1 ? 'disable' : 'enable'
user.status === 1 ? 'disable' : 'enable',
idx
);
}}
>
@@ -233,17 +274,20 @@ const UsersTable = () => {
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan="6">
<Button size="small" as={Link} to="/user/add" loading={loading}>
<Table.HeaderCell colSpan='6'>
<Button size='small' as={Link} to='/user/add' loading={loading}>
添加新的用户
</Button>
<Pagination
floated="right"
floated='right'
activePage={activePage}
onPageChange={onPaginationChange}
size="small"
size='small'
siblingRange={1}
totalPages={Math.ceil(users.length / itemsPerPage)}
totalPages={
Math.ceil(users.length / ITEMS_PER_PAGE) +
(users.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
}
/>
</Table.HeaderCell>
</Table.Row>