root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: api request

Browse Source
This commit is contained in:
jialin
2024-06-10 21:14:37 +08:00
parent 6a60561401
commit f491b5dfb1
24 changed files with 685 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/users/apis/index.ts
+33
View File
@@ -0,0 +1,33 @@
import { request } from '@umijs/max';
import { ListItem } from '../config/types';
export const USERS_API = '/users';
export async function queryUsersList(
params: Global.Pagination & { query?: string }
) {
return request<Global.PageResponse<ListItem>>(`${USERS_API}`, {
methos: 'GET',
params
});
}
export async function createUser(params: { data: FormData }) {
return request(`${USERS_API}`, {
method: 'POST',
data: params.data
});
}
export async function updateUser(params: { data: FormData }) {
return request(`${USERS_API}`, {
method: 'PUT',
data: params.data
});
}
export async function deleteUser(id: number) {
return request(`${USERS_API}/${id}`, {
method: 'DELETE'
});
}
src/pages/users/components/add-modal.tsx
+24 -10
View File
@@ -4,12 +4,14 @@ import SealSelect from '@/components/seal-form/seal-select';
import { PageActionType } from '@/config/types';
import { SyncOutlined } from '@ant-design/icons';
import { Form, Modal } from 'antd';
import { UserRolesOptions } from '../config';
import { FormData } from '../config/types';
type AddModalProps = {
title: string;
action: PageActionType;
open: boolean;
onOk: () => void;
onOk: (values: FormData) => void;
onCancel: () => void;
};
const AddModal: React.FC<AddModalProps> = ({
@@ -19,6 +21,10 @@ const AddModal: React.FC<AddModalProps> = ({
onOk,
onCancel
}) => {
if (!open) {
return null;
}
const [form] = Form.useForm();
const suffix = (
<SyncOutlined
@@ -28,11 +34,16 @@ const AddModal: React.FC<AddModalProps> = ({
}}
/>
);
const handleSumit = () => {
form.submit();
};
return (
<Modal
title={title}
open={open}
onOk={onOk}
onOk={handleSumit}
onCancel={onCancel}
destroyOnClose={true}
closeIcon={false}
@@ -40,19 +51,22 @@ const AddModal: React.FC<AddModalProps> = ({
keyboard={false}
width={600}
styles={{}}
footer={<ModalFooter onOk={onOk} onCancel={onCancel}></ModalFooter>}
footer={
<ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
}
>
<Form name="addUserForm" form={form} onFinish={onOk}>
<Form.Item name="name" rules={[{ required: true }]}>
<Form name="addUserForm" form={form} onFinish={onOk} preserve={false}>
<Form.Item<FormData> name="name" rules={[{ required: true }]}>
<SealInput.Input label="Name"></SealInput.Input>
</Form.Item>
<Form.Item name="role" rules={[{ required: true }]}>
<SealSelect label="Role"></SealSelect>
<Form.Item<FormData> name="full_name" rules={[{ required: true }]}>
<SealInput.Input label="FullName"></SealInput.Input>
</Form.Item>
<Form.Item name="email" rules={[{ required: true }]}>
<SealInput.Input label="Email"></SealInput.Input>
<Form.Item<FormData> name="is_admin" rules={[{ required: true }]}>
<SealSelect label="Role" options={UserRolesOptions}></SealSelect>
</Form.Item>
<Form.Item name="password" rules={[{ required: true }]}>
<Form.Item<FormData> name="password" rules={[{ required: true }]}>
<SealInput.Input label="Password"></SealInput.Input>
</Form.Item>
</Form>
src/pages/users/config/index.ts
+9
View File
@@ -0,0 +1,9 @@
export const UserRoles = {
ADMIN: 'admin',
USER: 'user'
};
export const UserRolesOptions = [
{ label: '管理员', value: UserRoles.ADMIN },
{ label: '普通用户', value: UserRoles.USER }
];
src/pages/users/config/types.ts
+15
View File
@@ -0,0 +1,15 @@
export interface ListItem {
name: string;
is_admin: boolean;
full_name: string;
id: number;
created_at: string;
updated_at: string;
}
export interface FormData {
name: string;
is_admin: boolean;
full_name: string;
password: string;
}
src/pages/users/index.tsx
+78 -34
View File
@@ -13,46 +13,61 @@ import {
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
import { useState } from 'react';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { createUser, deleteUser, queryUsersList } from './apis';
import AddModal from './components/add-modal';
import { FormData, ListItem } from './config/types';
const { Column } = Table;
const dataSource = [
{
key: '1',
name: 'sam',
role: 'admin',
createTime: '2021-09-01 12:00:00'
},
{
key: '2',
name: 'wang',
role: 'user',
createTime: '2021-09-01 12:00:00'
}
];
const Models: React.FC = () => {
const rowSelection = useTableRowSelection();
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const [total, setTotal] = useState(100);
const [total, setTotal] = useState(0);
const [openAddModal, setOpenAddModal] = useState(false);
const [loading, setLoading] = useState(false);
const [dataSource, setDataSource] = useState<ListItem[]>([]);
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
const [title, setTitle] = useState<string>('');
const [queryParams, setQueryParams] = useState({
current: 1,
pageSize: 10,
name: ''
page: 1,
perPage: 10,
query: ''
});
const handleShowSizeChange = (current: number, size: number) => {
console.log(current, size);
const fetchData = async () => {
setLoading(true);
try {
const params = {
..._.pickBy(queryParams, (val: any) => !!val)
};
const res = await queryUsersList(params);
console.log('res=======', res);
setDataSource(res.items);
setTotal(res.pagination.total);
} catch (error) {
console.log('error', error);
} finally {
setLoading(false);
}
};
const handleShowSizeChange = (page: number, size: number) => {
setQueryParams({
...queryParams,
perPage: size
});
};
const handlePageChange = (page: number, pageSize: number | undefined) => {
console.log(page, pageSize);
setQueryParams({
...queryParams,
page: page
});
};
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
@@ -60,9 +75,6 @@ const Models: React.FC = () => {
setSortOrder(sorter.order);
};
const fetchData = async () => {
console.log('fetchData');
};
const handleSearch = (e: any) => {
fetchData();
};
@@ -70,7 +82,7 @@ const Models: React.FC = () => {
const handleNameChange = (e: any) => {
setQueryParams({
...queryParams,
name: e.target.value
query: e.target.value
});
};
@@ -84,9 +96,15 @@ const Models: React.FC = () => {
console.log('click', e);
};
const handleModalOk = () => {
const handleModalOk = async (data: FormData) => {
console.log('handleModalOk');
const params = {
...data,
is_admin: data.is_admin === 'admin'
};
await createUser({ data: params });
setOpenAddModal(false);
message.success('successfully!');
};
const handleModalCancel = () => {
@@ -94,7 +112,23 @@ const Models: React.FC = () => {
setOpenAddModal(false);
};
const handleDelete = () => {
const handleDelete = (row: ListItem) => {
Modal.confirm({
title: '',
content: 'Are you sure you want to delete the selected users?',
async onOk() {
console.log('OK');
await deleteUser(row.id);
message.success('successfully!');
fetchData();
},
onCancel() {
console.log('Cancel');
}
});
};
const handleDeleteBatch = () => {
Modal.confirm({
title: '',
content: 'Are you sure you want to delete the selected users?',
@@ -113,6 +147,11 @@ const Models: React.FC = () => {
setAction(PageAction.EDIT);
setTitle('Edit User');
};
useEffect(() => {
fetchData();
}, [queryParams]);
return (
<>
<PageContainer
@@ -151,7 +190,7 @@ const Models: React.FC = () => {
<Button
icon={<DeleteOutlined />}
danger
onClick={handleDelete}
onClick={handleDeleteBatch}
disabled={!rowSelection.selectedRowKeys.length}
>
Delete
@@ -163,11 +202,12 @@ const Models: React.FC = () => {
dataSource={dataSource}
rowSelection={rowSelection}
loading={loading}
rowKey="id"
onChange={handleTableChange}
pagination={{
showSizeChanger: true,
pageSize: 10,
current: 2,
pageSize: queryParams.perPage,
current: queryParams.page,
total: total,
hideOnSinglePage: true,
onShowSizeChange: handleShowSizeChange,
@@ -177,20 +217,23 @@ const Models: React.FC = () => {
<Column title="Name" dataIndex="name" key="name" width={400} />
<Column
title="Create Time"
dataIndex="createTime"
dataIndex="created_at"
key="createTime"
defaultSortOrder="descend"
sortOrder={sortOrder}
showSorterTooltip={false}
sorter={true}
render={(text, record) => {
return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
}}
/>
<Column
title="Role"
dataIndex="role"
key="role"
width={400}
render={(text, record) => {
return text === 'admin' ? (
render={(text, record: ListItem) => {
return record.is_admin ? (
<UserSwitchOutlined className="size-16" />
) : (
<UserOutlined className="size-16" />
@@ -216,6 +259,7 @@ const Models: React.FC = () => {
size="small"
type="primary"
danger
onClick={() => handleDelete(record)}
icon={<DeleteOutlined></DeleteOutlined>}
></Button>
</Tooltip>