354 lines
15 KiB
TypeScript
354 lines
15 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
||
import { Table, Button, Tag, Space, Modal, Form, Select, Spin, Input, Tooltip } from 'antd';
|
||
import { InfoCircleOutlined, EditOutlined, LockOutlined, UnlockOutlined, DeleteOutlined } from '@ant-design/icons';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { useUsers, useUpdateUser, useDeleteUser, useUser } from '../../hooks/useUsers';
|
||
import { User, UserListParams } from '../../types/api';
|
||
import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
|
||
|
||
const UserListPage: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
const [params, setParams] = useState<UserListParams>({ limit: 20, offset: 0, sort: 'id', order: 'asc' });
|
||
const { data, isLoading } = useUsers(params);
|
||
const updateUser = useUpdateUser();
|
||
const deleteUser = useDeleteUser();
|
||
|
||
// Редактирование
|
||
const [editModal, setEditModal] = useState<{ open: boolean; userId: string | null }>({
|
||
open: false,
|
||
userId: null,
|
||
});
|
||
const { data: editingUser, isLoading: loadingUser } = useUser(editModal.userId || '');
|
||
const [editForm] = Form.useForm();
|
||
const [editHasErrors, setEditHasErrors] = useState(true);
|
||
const originalUserRef = useRef<User | null>(null);
|
||
|
||
// Изменение статуса
|
||
const [statusModal, setStatusModal] = useState<{
|
||
open: boolean;
|
||
userId: string | null;
|
||
newStatus: string;
|
||
currentReason: string;
|
||
}>({
|
||
open: false,
|
||
userId: null,
|
||
newStatus: 'active',
|
||
currentReason: '',
|
||
});
|
||
const [statusForm] = Form.useForm();
|
||
|
||
// ==================== Редактирование ====================
|
||
const handleEdit = (id: string) => {
|
||
setEditModal({ open: true, userId: id });
|
||
};
|
||
|
||
const handleSaveEdit = () => {
|
||
editForm.validateFields().then((values) => {
|
||
if (!editModal.userId || !originalUserRef.current) return;
|
||
const original = originalUserRef.current;
|
||
const cleanedValues: Record<string, any> = {};
|
||
|
||
const allKeys = new Set([...Object.keys(values), ...Object.keys(original)]);
|
||
allKeys.forEach((key) => {
|
||
const newVal = values[key];
|
||
if (newVal === '' || newVal === undefined || newVal === null) {
|
||
const origVal = (original as any)[key];
|
||
if (origVal && origVal !== '-' && origVal !== '' && origVal !== undefined && origVal !== null) {
|
||
cleanedValues[key] = null;
|
||
}
|
||
return;
|
||
}
|
||
if (newVal === '-') return;
|
||
cleanedValues[key] = newVal;
|
||
});
|
||
|
||
const payload = Object.fromEntries(
|
||
Object.entries(cleanedValues).filter(([key, v]) => {
|
||
const origVal = (original as any)[key];
|
||
return JSON.stringify(v) !== JSON.stringify(origVal === '-' ? undefined : origVal);
|
||
})
|
||
);
|
||
|
||
updateUser.mutate(
|
||
{ id: editModal.userId, data: payload },
|
||
{ onSuccess: () => setEditModal({ open: false, userId: null }) }
|
||
);
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (editingUser && editModal.open) {
|
||
originalUserRef.current = editingUser;
|
||
const clean = (val: any) => (val === '-' || val === 'undefined' ? undefined : val);
|
||
setTimeout(() => {
|
||
editForm.setFieldsValue({
|
||
email: clean(editingUser.email),
|
||
nickname: clean(editingUser.nickname),
|
||
role: clean(editingUser.role),
|
||
status: clean(editingUser.status),
|
||
reason: clean(editingUser.reason),
|
||
});
|
||
validateEditForm();
|
||
}, 0);
|
||
}
|
||
}, [editingUser, editModal.open, editForm]);
|
||
|
||
const validateEditForm = () => {
|
||
const role = editForm.getFieldValue('role');
|
||
const status = editForm.getFieldValue('status');
|
||
const hasErrors = !role || !status;
|
||
setEditHasErrors(hasErrors);
|
||
};
|
||
|
||
// ==================== Изменение статуса ====================
|
||
const handleStatusChange = (user: User) => {
|
||
if (user.status === 'deleted') return;
|
||
const newStatus = user.status === 'active' ? 'frozen' : 'active';
|
||
const currentReason = user.reason && user.reason !== '-' ? user.reason : '';
|
||
setStatusModal({
|
||
open: true,
|
||
userId: user.id,
|
||
newStatus,
|
||
currentReason,
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (statusModal.open) {
|
||
setTimeout(() => {
|
||
statusForm.setFieldsValue({ reason: statusModal.currentReason });
|
||
}, 0);
|
||
}
|
||
}, [statusModal.open, statusModal.currentReason, statusForm]);
|
||
|
||
const handleStatusSave = () => {
|
||
statusForm.validateFields().then((values) => {
|
||
if (!statusModal.userId) return;
|
||
const payload: any = { status: statusModal.newStatus };
|
||
if (values.reason && values.reason.trim() !== '') {
|
||
payload.reason = values.reason;
|
||
}
|
||
updateUser.mutate(
|
||
{ id: statusModal.userId, data: payload },
|
||
{ onSuccess: () => setStatusModal({ open: false, userId: null, newStatus: 'active', currentReason: '' }) }
|
||
);
|
||
});
|
||
};
|
||
|
||
// ==================== Удаление ====================
|
||
const handleDelete = (id: string) => {
|
||
Modal.confirm({
|
||
title: 'Удалить пользователя?',
|
||
content: 'Это действие нельзя отменить. При необходимости предварительно укажите причину через редактирование.',
|
||
okText: 'Удалить',
|
||
okType: 'danger',
|
||
cancelText: 'Отмена',
|
||
onOk: () => deleteUser.mutate(id),
|
||
});
|
||
};
|
||
|
||
// ==================== Таблица ====================
|
||
const handleTableChange = (
|
||
pagination: any,
|
||
_filters: any,
|
||
sorter: SorterResult<User> | SorterResult<User>[]
|
||
) => {
|
||
const s = Array.isArray(sorter) ? sorter[0] : sorter;
|
||
setParams(prev => ({
|
||
...prev,
|
||
sort: s.field as string,
|
||
order: s.order === 'ascend' ? 'asc' : s.order === 'descend' ? 'desc' : undefined,
|
||
offset: ((pagination.current - 1) * pagination.pageSize) || 0,
|
||
limit: pagination.pageSize || prev.limit,
|
||
}));
|
||
};
|
||
|
||
const columns: ColumnsType<User> = [
|
||
{
|
||
title: <InfoCircleOutlined />,
|
||
key: 'detail',
|
||
width: 48,
|
||
align: 'center',
|
||
render: (_, record) => (
|
||
<Tooltip title="Открыть страницу пользователя">
|
||
<Button
|
||
icon={<InfoCircleOutlined />}
|
||
size="small"
|
||
type="link"
|
||
onClick={() => navigate(`/users/${record.id}`)}
|
||
/>
|
||
</Tooltip>
|
||
),
|
||
},
|
||
{ title: 'Email', dataIndex: 'email', key: 'email', sorter: true, ellipsis: true },
|
||
{ title: 'Ник', dataIndex: 'nickname', key: 'nickname', sorter: true, ellipsis: true },
|
||
{
|
||
title: 'Роль',
|
||
dataIndex: 'role',
|
||
key: 'role',
|
||
width: 100,
|
||
sorter: true,
|
||
render: (role: string) => {
|
||
const color = role === 'user' ? 'blue' : role === 'bot' ? 'purple' : 'default';
|
||
return <Tag color={color}>{role}</Tag>;
|
||
},
|
||
},
|
||
{
|
||
title: 'Статус',
|
||
dataIndex: 'status',
|
||
key: 'status',
|
||
width: 100,
|
||
sorter: true,
|
||
render: (status: string) => (
|
||
<Tag color={status === 'active' ? 'green' : status === 'frozen' ? 'orange' : 'red'}>
|
||
{status}
|
||
</Tag>
|
||
),
|
||
},
|
||
{ title: 'Последний вход', dataIndex: 'last_login', key: 'last_login', sorter: true },
|
||
{
|
||
title: 'Действия',
|
||
key: 'actions',
|
||
width: 120,
|
||
render: (_, record) => {
|
||
const isDeleted = record.status === 'deleted';
|
||
return (
|
||
<Space>
|
||
<Tooltip title="Редактировать">
|
||
<Button
|
||
icon={<EditOutlined />}
|
||
size="small"
|
||
onClick={() => handleEdit(record.id)}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title={record.status === 'active' ? 'Заморозить' : 'Разморозить'}>
|
||
<Button
|
||
icon={record.status === 'active' ? <LockOutlined /> : <UnlockOutlined />}
|
||
size="small"
|
||
onClick={() => handleStatusChange(record)}
|
||
disabled={isDeleted}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title="Удалить">
|
||
<Button
|
||
icon={<DeleteOutlined />}
|
||
size="small"
|
||
danger
|
||
onClick={() => handleDelete(record.id)}
|
||
disabled={isDeleted}
|
||
/>
|
||
</Tooltip>
|
||
</Space>
|
||
);
|
||
},
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<h2>Пользователи</h2>
|
||
<Table
|
||
columns={columns}
|
||
dataSource={data?.data}
|
||
rowKey="id"
|
||
loading={isLoading}
|
||
onChange={handleTableChange}
|
||
pagination={{
|
||
total: data?.total,
|
||
current: (params.offset || 0) / (params.limit || 20) + 1,
|
||
pageSize: params.limit || 20,
|
||
showSizeChanger: false,
|
||
}}
|
||
/>
|
||
|
||
{/* Модальное окно редактирования */}
|
||
<Modal
|
||
title="Редактировать пользователя"
|
||
open={editModal.open}
|
||
onCancel={() => setEditModal({ open: false, userId: null })}
|
||
onOk={handleSaveEdit}
|
||
confirmLoading={updateUser.isPending}
|
||
destroyOnHidden
|
||
okButtonProps={{ disabled: editHasErrors }}
|
||
>
|
||
{loadingUser ? (
|
||
<div style={{ textAlign: 'center', padding: 24 }}><Spin /></div>
|
||
) : (
|
||
<Form form={editForm} layout="vertical" preserve={false} onValuesChange={validateEditForm}>
|
||
<Form.Item label="Email" name="email">
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item label="Ник" name="nickname">
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="Роль"
|
||
name="role"
|
||
rules={[{ required: true, message: 'Выберите роль' }]}
|
||
>
|
||
<Select placeholder="Выберите роль">
|
||
<Select.Option value="user">user</Select.Option>
|
||
<Select.Option value="bot">bot</Select.Option>
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="Статус"
|
||
name="status"
|
||
rules={[{ required: true, message: 'Выберите статус' }]}
|
||
>
|
||
<Select placeholder="Выберите статус">
|
||
<Select.Option value="active">active</Select.Option>
|
||
<Select.Option value="frozen">frozen</Select.Option>
|
||
<Select.Option value="deleted">deleted</Select.Option>
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="Причина"
|
||
name="reason"
|
||
rules={[
|
||
({ getFieldValue }) => ({
|
||
validator(_, value) {
|
||
const status = getFieldValue('status');
|
||
if (status && status !== 'active' && (!value || value.trim() === '')) {
|
||
return Promise.reject(new Error('Укажите причину изменения статуса'));
|
||
}
|
||
return Promise.resolve();
|
||
},
|
||
}),
|
||
]}
|
||
>
|
||
<Input.TextArea rows={3} />
|
||
</Form.Item>
|
||
</Form>
|
||
)}
|
||
</Modal>
|
||
|
||
{/* Модальное окно изменения статуса */}
|
||
<Modal
|
||
title={`Изменить статус на «${statusModal.newStatus}»`}
|
||
open={statusModal.open}
|
||
onCancel={() => setStatusModal({ open: false, userId: null, newStatus: 'active', currentReason: '' })}
|
||
onOk={handleStatusSave}
|
||
confirmLoading={updateUser.isPending}
|
||
destroyOnHidden
|
||
>
|
||
<Form form={statusForm} layout="vertical" preserve={false}>
|
||
<Form.Item
|
||
label="Причина"
|
||
name="reason"
|
||
rules={[
|
||
{
|
||
required: statusModal.newStatus !== 'active',
|
||
message: 'Укажите причину',
|
||
},
|
||
]}
|
||
>
|
||
<Input.TextArea rows={3} placeholder="Введите причину изменения статуса" />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default UserListPage; |