forked from ddrilling/asb_cloud_front
148 lines
4.0 KiB
JavaScript
148 lines
4.0 KiB
JavaScript
import {Table, Select, DatePicker, ConfigProvider} from 'antd';
|
||
import {MessageService} from '../services/api'
|
||
import {useState, useEffect} from 'react'
|
||
import {useParams} from 'react-router-dom'
|
||
import LoaderPortal from '../components/LoaderPortal'
|
||
import '../styles/message.css'
|
||
import notify from '../components/notify'
|
||
import locale from "antd/lib/locale/ru_RU";
|
||
import moment from 'moment'
|
||
|
||
const {Option} = Select
|
||
const pageSize = 26
|
||
const {RangePicker} = DatePicker;
|
||
|
||
// Словарь категорий для строк таблицы
|
||
const categoryDictionary = {
|
||
1: {title: 'Авария'},
|
||
2: {title: 'Предупреждение'},
|
||
3: {title: 'Информация'},
|
||
}
|
||
|
||
const columns = [
|
||
{
|
||
title: 'Дата',
|
||
key: 'date',
|
||
dataIndex: 'date',
|
||
render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
|
||
},
|
||
{
|
||
title: 'Категория',
|
||
key: 'categoryId',
|
||
dataIndex: 'categoryId',
|
||
render: (_, item) => categoryDictionary[item.categoryId].title,
|
||
style: (_, item) => categoryDictionary[item.categoryId].style,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: 'Сообщение',
|
||
key: 'message',
|
||
dataIndex: 'message',
|
||
},
|
||
{
|
||
title: 'Пользователь',
|
||
key: 'user',
|
||
dataIndex: 'user',
|
||
},
|
||
];
|
||
|
||
const filterOptions = [
|
||
{label: 'Авария', value: 1},
|
||
{label: 'Предупреждение', value: 2},
|
||
{label: 'Информация', value: 3},
|
||
]
|
||
|
||
// Данные для таблицы
|
||
export default function Messages() {
|
||
let {id} = useParams()
|
||
const [messages, setMessages] = useState([])
|
||
const [pagination, setPagination] = useState(null)
|
||
const [page, setPage] = useState(1)
|
||
const [range, setRange] = useState([])
|
||
const [categories, setCategories] = useState([])
|
||
|
||
const [loader, setLoader] = useState(false)
|
||
|
||
const children = filterOptions.map((line) => <Option key={line.value}>{line.label}</Option>)
|
||
|
||
const onChangeRange = (range) => {
|
||
setRange(range)
|
||
}
|
||
|
||
useEffect(() => {
|
||
const GetMessages = async () => {
|
||
setLoader(true)
|
||
try {
|
||
let begin = null
|
||
let end = null
|
||
if (range?.length > 1) {
|
||
begin = range[0].toISOString()
|
||
end = range[1].toISOString()
|
||
}
|
||
let paginatedMessages = await MessageService.getMessage(`${id}`,
|
||
(page - 1) * pageSize,
|
||
pageSize,
|
||
categories,
|
||
begin,
|
||
end)
|
||
setMessages(paginatedMessages.items.map(m => {
|
||
return {
|
||
key: m.id,
|
||
categoryids: categoryDictionary[m.categoryId],
|
||
begin: m.date,
|
||
...m
|
||
}
|
||
}))
|
||
setPagination({
|
||
total: paginatedMessages.count,
|
||
current: Math.floor(paginatedMessages.skip / pageSize),
|
||
})
|
||
} catch (ex) {
|
||
notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
|
||
console.log(ex)
|
||
}
|
||
setLoader(false)
|
||
}
|
||
GetMessages()
|
||
}, [id, page, categories, range])
|
||
|
||
return (
|
||
<>
|
||
|
||
<div className='filter-group'>
|
||
<h3 className='filter-group__heading'>Фильтр сообщений</h3>
|
||
<Select
|
||
mode="multiple"
|
||
allowClear
|
||
placeholder="Фильтр сообщений"
|
||
className="filter-selector"
|
||
value={categories}
|
||
onChange={setCategories}>
|
||
{children}
|
||
</Select>
|
||
<ConfigProvider locale={locale}>
|
||
<RangePicker
|
||
showTime
|
||
onChange={onChangeRange}
|
||
/>
|
||
</ConfigProvider>
|
||
</div>
|
||
<LoaderPortal show={loader}>
|
||
<Table
|
||
columns={columns}
|
||
dataSource={messages}
|
||
rowClassName={(record) => `event_message_${record.categoryId} event_message`}
|
||
size={'small'}
|
||
pagination={{
|
||
pageSize: pageSize,
|
||
showSizeChanger: false,
|
||
total: pagination?.total,
|
||
current: page,
|
||
onChange: (page) => setPage(page)
|
||
}}
|
||
rowKey={(record) => record.id}
|
||
/>
|
||
</LoaderPortal>
|
||
</>
|
||
)
|
||
} |