Skip to content

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

fetched requests

parent ee82867b
Show whitespace changes
Inline Side-by-side
Showing with 103 additions and 193 deletions
src/features/api/requestApiSlice.ts
View file @ e93810e4
...@@ -13,10 +13,18 @@ interface Request { ...@@ -13,10 +13,18 @@ interface Request {
xml: string; xml: string;
} }
interface RequestsResponse {
list: Request[];
pageNumber: number;
pageSize: number;
totalPages: number;
totalCount: number;
}
export const requestApiSlice = apiSlice.injectEndpoints({ export const requestApiSlice = apiSlice.injectEndpoints({
endpoints: (builder) => ({ endpoints: (builder) => ({
getRequests: builder.query<Request[], void>({ getRequests: builder.query<RequestsResponse, void>({
query: () => 'requests/list', query: () => 'requests/list?pageNumber=0&pageSize=30',
providesTags: ["requests"], providesTags: ["requests"],
}), }),
addNewRequest: builder.mutation<Request, Partial<Request>>({ addNewRequest: builder.mutation<Request, Partial<Request>>({
......
src/features/pagination/mainPagination.ts
View file @ e93810e4
...@@ -7,7 +7,7 @@ const initialState = { ...@@ -7,7 +7,7 @@ const initialState = {
} }
const mainPaginationSlice = createSlice({ const mainPaginationSlice = createSlice({
name: 'pagination', name: 'mainPagination',
initialState, initialState,
reducers: { reducers: {
setCurrentPage: (state, action) => { setCurrentPage: (state, action) => {
......
src/features/pagination/reqPagination.ts 0 → 100644
View file @ e93810e4
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
currentPage: 1,
totalReqNumber: 0,
REQ_NUMBER_PER_PAGE: 10
}
const reqPaginationSlice = createSlice({
name: 'reqPagination',
initialState,
reducers: {
setCurrentPage: (state, action) => {
state.currentPage = action.payload;
},
setTotalReqNumber: (state, action) => {
state.totalReqNumber = action.payload;
}
}
})
export const { setCurrentPage, setTotalReqNumber } = reqPaginationSlice.actions;
export default reqPaginationSlice.reducer;
\ No newline at end of file
src/pages/RequestPage/Columns.tsx
View file @ e93810e4
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useNavigate } from 'react-router';
import { Button, Space, Tag, Modal, message } from 'antd'; import { Button, Space, Tag, Modal, message } from 'antd';
import type { TableProps } from 'antd'; import type { TableProps } from 'antd';
import { getStatusText, getStatusColor } from './utils'; import { getStatusText, getStatusColor } from './utils';
...@@ -18,129 +17,6 @@ export interface DataType { ...@@ -18,129 +17,6 @@ export interface DataType {
xml: string; xml: string;
} }
export const rows = [
{
"id": 2,
"sendDate": "2024-07-11T19:05:00.000+00:00",
"errorMessage": "<soap>err1</soap>",
"resendDate": null,
"resentCount": 0,
"status": 1,
"esutdOrganizationCode": "arta",
"requestType": "contract",
"documentID": "22345678-1234-1234-1234-123456789012",
"xml": "<soapenv>data1</soapenv>"
},
{
"id": 3,
"sendDate": "2024-07-11T19:10:00.000+00:00",
"errorMessage": "<soap>err2</soap>",
"resendDate": null,
"resentCount": 0,
"status": 2,
"esutdOrganizationCode": "arta",
"requestType": "contract",
"documentID": "32345678-1234-1234-1234-123456789012",
"xml": "<soapenv>data2</soapenv>"
},
{
"id": 4,
"sendDate": "2024-07-11T19:15:00.000+00:00",
"errorMessage": "<soap>err3</soap>",
"resendDate": null,
"resentCount": 0,
"status": 3,
"esutdOrganizationCode": "arta",
"requestType": "contract",
"documentID": "42345678-1234-1234-1234-123456789012",
"xml": "<soapenv>data3</soapenv>"
},
{
"id": 5,
"sendDate": "2024-07-11T19:20:00.000+00:00",
"errorMessage": "<soap>err4</soap>",
"resendDate": null,
"resentCount": 0,
"status": 4,
"esutdOrganizationCode": "arta",
"requestType": "contract",
"documentID": "52345678-1234-1234-1234-123456789012",
"xml": "<soapenv>data4</soapenv>"
},
{
"id": 6,
"sendDate": "2024-07-11T19:25:00.000+00:00",
"errorMessage": "<soap>err5</soap>",
"resendDate": null,
"resentCount": 0,
"status": 3,
"esutdOrganizationCode": "arta",
"requestType": "contract",
"documentID": "62345678-1234-1234-1234-123456789012",
"xml": "<soapenv>data5</soapenv>"
},
{
"id": 7,
"sendDate": "2024-07-11T19:30:00.000+00:00",
"errorMessage": "<soap>err6</soap>",
"resendDate": null,
"resentCount": 0,
"status": 4,
"esutdOrganizationCode": "arta",
"requestType": "contract",
"documentID": "72345678-1234-1234-1234-123456789012",
"xml": "<soapenv>data6</soapenv>"
},
{
"id": 8,
"sendDate": "2024-07-11T19:35:00.000+00:00",
"errorMessage": "<soap>err7</soap>",
"resendDate": null,
"resentCount": 0,
"status": 2,
"esutdOrganizationCode": "arta",
"requestType": "contract",
"documentID": "82345678-1234-1234-1234-123456789012",
"xml": "<soapenv>data7</soapenv>"
},
{
"id": 9,
"sendDate": "2024-07-11T19:40:00.000+00:00",
"errorMessage": "<soap>err8</soap>",
"resendDate": null,
"resentCount": 0,
"status": 2,
"esutdOrganizationCode": "arta",
"requestType": "contract",
"documentID": "92345678-1234-1234-1234-123456789012",
"xml": "<soapenv>data8</soapenv>"
},
{
"id": 10,
"sendDate": "2024-07-11T19:45:00.000+00:00",
"errorMessage": "<soap>err9</soap>",
"resendDate": null,
"resentCount": 0,
"status": 1,
"esutdOrganizationCode": "arta",
"requestType": "contract",
"documentID": "102345678-1234-1234-1234-123456789012",
"xml": "<soapenv>data9</soapenv>"
},
{
"id": 11,
"sendDate": "2024-07-11T19:50:00.000+00:00",
"errorMessage": "<soap>err10</soap>",
"resendDate": null,
"resentCount": 0,
"status": 1,
"esutdOrganizationCode": "arta",
"requestType": "contract",
"documentID": "112345678-1234-1234-1234-123456789012",
"xml": "<soapenv>data10</soapenv>"
}
]
export const columns: TableProps<DataType>['columns'] = [ export const columns: TableProps<DataType>['columns'] = [
{ {
title: "ID", title: "ID",
...@@ -207,44 +83,38 @@ export const columns: TableProps<DataType>['columns'] = [ ...@@ -207,44 +83,38 @@ export const columns: TableProps<DataType>['columns'] = [
} }
] ]
export const ActionColumn: React.FC<{ data: DataType }> = ({ data }) => { export const ActionColumn: React.FC<{ data: DataType }> = () => {
const [open, setOpen] = useState<boolean>(false); const [open, setOpen] = useState<boolean>(false);
const navigate = useNavigate();
// const [deleteOrganization] = useDeleteOrganizationMutation();
const showDeleteModal = () => { const showResendModal = () => {
setOpen(true); setOpen(true);
}; };
// const handleDeleteModalOk = async () => { const handleResendModalOk = async () => {
// try { try {
// await deleteOrganization(data.id).unwrap(); // await resendRequest().unwrap();
// message.success('Организация успешно удалена!'); message.success('Запрос успешно переотправлен!');
// setOpen(false);
// } catch (err) {
// message.error('Произошла ошибка при удалении организации!');
// }
// };
const handleDeleteModalCancel = () => {
setOpen(false); setOpen(false);
} catch (err) {
message.error('Произошла ошибка при переотправке запроса!');
}
}; };
const handleEditClick = () => { const handleResendModalCancel = () => {
navigate(`/edit/${data.id}`); setOpen(false);
} };
return ( return (
<Space> <Space>
<Button onClick={handleEditClick}>Изменить</Button> <Button onClick={showResendModal}>П</Button>
<Button onClick={showDeleteModal} type="primary" danger>Удалить</Button>
<Modal <Modal
open={open} open={open}
title={`Вы уверены, что хотите удалить?`} title={`Вы уверены, что хотите переотправить?`}
// onOk={handleDeleteModalOk} // onOk={handleDeleteModalOk}
onCancel={handleDeleteModalCancel} onCancel={handleResendModalCancel}
onOk={handleResendModalOk}
> >
<p>Подтвердите удаление организации.</p> <p>Подтвердите переотправку запроса.</p>
</Modal> </Modal>
</Space> </Space>
) )
......
src/pages/RequestPage/RequestPage.tsx
View file @ e93810e4
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import dayjs from 'dayjs';
import { DatePicker, Select, Button, Pagination, Spin, Table } from 'antd'; import { DatePicker, Select, Button, Pagination, Spin, Table } from 'antd';
// import { MaterialSymbol } from 'react-material-symbols';
import { useNavigate } from 'react-router';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import dayjs from 'dayjs'; import { columns, DataType } from './Columns';
import { useGetRequestsQuery } from '../../features/api/requestApiSlice';
import { setCurrentPage, setTotalReqNumber } from '../../features/pagination/reqPagination';
import './RequestPage.css'; import './RequestPage.css';
import { columns, DataType, rows } from './Columns';
const dateFormat = 'YYYY/MM/DD'; const dateFormat = 'YYYY/MM/DD';
const RequestPage: React.FC = () => { const RequestPage: React.FC = () => {
const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
const totalOrgNumber = useSelector((state: any) => state.mainPagination.totalOrgNumber); const totalReqNumber = useSelector((state: any) => state.reqPagination.totalReqNumber);
const currentPage = useSelector((state: any) => state.mainPagination.currentPage); const currentPage = useSelector((state: any) => state.reqPagination.currentPage);
const ORG_NUMBER_PER_PAGE = useSelector((state: any) => state.mainPagination.ORG_NUMBER_PER_PAGE); const REQ_NUMBER_PER_PAGE = useSelector((state: any) => state.reqPagination.REQ_NUMBER_PER_PAGE);
const handleAddClick = () => {
};
const handlePaginationChange = (page: number) => { const handlePaginationChange = (page: number) => {
dispatch(setCurrentPage(page));
}; };
const paginatedData = (dataSource: DataType[]) => { const paginatedData = (dataSource: DataType[]) => {
const startIndex = (currentPage - 1) * ORG_NUMBER_PER_PAGE; const startIndex = (currentPage - 1) * REQ_NUMBER_PER_PAGE;
const endIndex = Math.min(startIndex + ORG_NUMBER_PER_PAGE, totalOrgNumber); const endIndex = Math.min(startIndex + REQ_NUMBER_PER_PAGE, totalReqNumber);
return dataSource.slice(startIndex, endIndex); return dataSource.slice(startIndex, endIndex);
} };
// const { const {
// data: orgs = [], data: reqs = { list: [] },
// isLoading, isLoading,
// isSuccess, isSuccess,
// isError, isError,
// error error
// } = useGetOrganizationsQuery(); } = useGetRequestsQuery();
// let table; console.log(reqs)
// if (isLoading) { let table;
// table = <Spin />
// } else if (isSuccess) {
// table = <Table dataSource={paginatedData(orgs)} columns={columns} pagination={false} />
// } else if (isError) {
// console.log(error)
// table = <div>{error.toString()}</div>
// }
// useEffect(() => { if (isLoading) {
// if (isSuccess) { table = <Spin />;
} else if (isSuccess) {
table = <Table
dataSource={paginatedData(reqs.list)}
columns={columns}
pagination={false}
/>;
} else if (isError) {
console.log(error);
table = <div>{error.toString()}</div>;
}
// } useEffect(() => {
// }, [isSuccess, orgs]); if (isSuccess) {
dispatch(setTotalReqNumber(reqs.list.length));
}
}, [isSuccess, reqs, dispatch]);
return ( return (
<div className="container"> <div className="container">
<div className="filter"> <div className="filter">
<div className="fields"> <div className="fields">
<div className="dates"> <div className="dates">
<DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} style={{marginRight: 14}}/> <DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} style={{ marginRight: 14 }} />
<DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} /> <DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} />
</div> </div>
<div className="category"> <div className="category">
<Select placeholder="Не выбрано" style={{width: 270}} options={[]} /> <Select placeholder="Не выбрано" style={{ width: 270 }} options={[]} />
</div> </div>
</div> </div>
<Button type='primary'>Применить</Button> <Button type='primary'>Применить</Button>
</div> </div>
<div className="data"> <div className="data">
<Table dataSource={rows} columns={columns} pagination={false} /> {table}
</div> </div>
<div className="pagination_container"> <div className="pagination_container">
<Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} /> <Pagination
current={currentPage}
defaultCurrent={1}
pageSize={REQ_NUMBER_PER_PAGE}
total={totalReqNumber}
onChange={handlePaginationChange}
/>
</div> </div>
</div> </div>
); );
}; };
export default RequestPage export default RequestPage;
\ No newline at end of file \ No newline at end of file
src/store/store.ts
View file @ e93810e4
...@@ -3,6 +3,7 @@ import { apiSlice } from '../features/api/apiSlice'; ...@@ -3,6 +3,7 @@ import { apiSlice } from '../features/api/apiSlice';
import mainPaginationReducer from '../features/pagination/mainPagination'; import mainPaginationReducer from '../features/pagination/mainPagination';
import storage from 'redux-persist/lib/storage'; import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist'; import { persistReducer, persistStore } from 'redux-persist';
import reqPaginationReducer from '../features/pagination/reqPagination';
interface AuthState { interface AuthState {
token: string | null; token: string | null;
} }
...@@ -37,6 +38,7 @@ const store: Store = configureStore({ ...@@ -37,6 +38,7 @@ const store: Store = configureStore({
reducer: { reducer: {
auth: persistedReducer, auth: persistedReducer,
mainPagination: mainPaginationReducer, mainPagination: mainPaginationReducer,
reqPagination: reqPaginationReducer,
[apiSlice.reducerPath]: apiSlice.reducer, [apiSlice.reducerPath]: apiSlice.reducer,
}, },
middleware: (getDefaultMiddleware) => middleware: (getDefaultMiddleware) =>
......
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