Skip to content

E
ESYTD
Commit 9d2d20ed authored by Merekeyev Dias's avatar Merekeyev Dias
Browse files
Options

added filter in RequestPage

parent ed69d9bb
Show whitespace changes
Inline Side-by-side
Showing with 92 additions and 55 deletions
src/pages/RequestPage/Columns.tsx
View file @ 9d2d20ed
......@@ -42,7 +42,7 @@ export const columns: TableProps<DataType>['columns'] = [
key: "sendDate",
width: '11%',
render: (_, record) => (
<span>{dayjs(record.sendDate).format('YYYY-MM-DD HH:mm:ss')}</span>
<span>{dayjs(record.sendDate).format('DD-MM-YYYY HH:mm:ss')}</span>
)
},
{
......
src/pages/RequestPage/RequestPage.tsx
View file @ 9d2d20ed
import React, { useEffect, useState, createRef } from 'react';
import dayjs from 'dayjs';
// import isBetween from 'dayjs/plugin/isBetween';
// import customParseFormat from "dayjs/plugin/customParseFormat";
import dayjs, { Dayjs } from 'dayjs';
import isBetween from 'dayjs/plugin/isBetween';
import { DatePicker, Select, Button, Pagination, Spin, Table } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { columns, DataType } from './Columns';
......@@ -10,7 +9,8 @@ import { setCurrentPage, setTotalReqNumber } from '../../features/pagination/req
import { TableRef } from 'antd/es/table';
import './RequestPage.css';
const dateFormat = 'YYYY/MM/DD';
dayjs.extend(isBetween);
const dateFormat = 'DD/MM/YYYY';
const RequestPage: React.FC = () => {
const dispatch = useDispatch();
......@@ -19,53 +19,54 @@ const RequestPage: React.FC = () => {
const currentPage = useSelector((state: any) => state.reqPagination.currentPage);
const REQ_NUMBER_PER_PAGE = useSelector((state: any) => state.reqPagination.REQ_NUMBER_PER_PAGE);
const [startDate, setStartDate] = useState<Date>();
const [endDate, setEndDate] = useState();
const [startDate, setStartDate] = useState<Dayjs | null>(null);
const [endDate, setEndDate] = useState<Dayjs | null>(null);
const [data, setData] = useState<DataType[]>([]);
const [method, setMethod] = useState('');
const [filteredData, setFilteredData] = useState<Request[]>([]);
const handlePaginationChange = (page: number) => {
/*
scrollIntoView resets to the top of the table after changing the page with Pagination. But the bug was found - the add button scrolls to top of the page too, under the Header component. It happens because of overflow
*/
// tableRef.current?.nativeElement.scrollIntoView({ behavior: 'smooth' });
dispatch(setCurrentPage(page));
};
const paginatedData = (dataSource: DataType[]) => {
const paginateData = (dataSource: DataType[]) => {
const startIndex = (currentPage - 1) * REQ_NUMBER_PER_PAGE;
const endIndex = Math.min(startIndex + REQ_NUMBER_PER_PAGE, totalReqNumber);
return dataSource.slice(startIndex, endIndex);
};
const filterByDate = () => {
if (!startDate || !endDate) return;
const filtered = reqs.list.filter((req) => {
const applyFilters = () => {
let filtered = reqs.list;
if (startDate && endDate) {
filtered = filtered.filter((req) => {
const sendDate = dayjs(req.sendDate, dateFormat);
return sendDate.isBetween(startDate, endDate, 'day', '[]');
});
}
console.log(filtered);
// setFilteredData(filtered);
dispatch(setTotalReqNumber(filtered.length));
};
if (method && method !== 'all') {
filtered = filtered.filter(req => req.requestType === method);
}
const setDefaultDate = () => {
let min = Infinity;
reqs.list.map((req) => {
const dateValue = new Date(req.sendDate).valueOf();
if (min >= dateValue) {
min = dateValue;
setData(filtered);
dispatch(setCurrentPage(1));
dispatch(setTotalReqNumber(filtered.length));
}
})
let minDateType = new Date(min);
setStartDate(minDateType);
const onSelectStartDate = (date: Dayjs | null) => {
setStartDate(date);
}
const onSelectStartDate = (dateString: any) => {
setStartDate(dateString);
const onSelectEndDate = (date: Dayjs | null) => {
setEndDate(date);
}
const onSelectEndDate = (dateString: any) => {
setEndDate(dateString);
const onSelectMethod = (method: string) => {
setMethod(method);
}
const {
......@@ -77,12 +78,23 @@ const RequestPage: React.FC = () => {
} = useGetRequestsQuery();
let table;
let min: number = Infinity;
let max: number = -Infinity;
if (isLoading) {
table = <Spin />;
} else if (isSuccess) {
reqs.list.forEach((req) => {
const dateValue = new Date(req.sendDate).valueOf();
if (min > dateValue) {
min = dateValue;
}
if (max < dateValue) {
max = dateValue;
}
})
table = <Table
dataSource={paginatedData(reqs.list)}
dataSource={paginateData(data)}
columns={columns}
pagination={false}
rowKey="id"
......@@ -95,24 +107,43 @@ const RequestPage: React.FC = () => {
useEffect(() => {
if (isSuccess) {
setData(reqs.list);
dispatch(setTotalReqNumber(reqs.list.length));
setStartDate(dayjs(min));
setEndDate(dayjs(max));
}
}, [isSuccess, reqs, dispatch]);
useEffect(() => {
setDefaultDate();
}, [setStartDate])
return (
<div className="container">
<div className="filter">
<div className="fields">
<div className="dates">
<DatePicker onChange={onSelectStartDate} defaultValue={dayjs('2024/07/11', dateFormat)} format={dateFormat} style={{ marginRight: 14 }} />
<DatePicker onChange={onSelectEndDate} defaultValue={dayjs('2024/07/11', dateFormat)} format={dateFormat} />
<DatePicker
onChange={onSelectStartDate}
format={dateFormat}
defaultValue={startDate}
value={startDate}
style={{ marginRight: 14 }}
/>
<DatePicker
onChange={onSelectEndDate}
format={dateFormat}
defaultValue={endDate}
value={endDate}
/>
</div>
<div className="category">
<Select placeholder="Не выбрано" style={{ width: 270 }} options={[
<Select
placeholder="Не выбрано"
style={{ width: 270 }}
onChange={onSelectMethod}
defaultValue={'all'}
options={[
{
value: 'all',
label: 'Все методы'
},
{
value: "contract",
label: "contract"
......@@ -121,11 +152,17 @@ const RequestPage: React.FC = () => {
value: "dictionary",
label: "dictionary"
}
]} />
]}
/>
</div>
</div>
<Button onClick={filterByDate} type='primary'>Применить</Button>
<Button
type='primary'
onClick={applyFilters}
>
Применить
</Button>
</div>
<div className="data">
{table}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment