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 {
xml: string;
}
interface RequestsResponse {
list: Request[];
pageNumber: number;
pageSize: number;
totalPages: number;
totalCount: number;
}
export const requestApiSlice = apiSlice.injectEndpoints({
endpoints: (builder) => ({
getRequests: builder.query<Request[], void>({
query: () => 'requests/list',
getRequests: builder.query<RequestsResponse, void>({
query: () => 'requests/list?pageNumber=0&pageSize=30',
providesTags: ["requests"],
}),
addNewRequest: builder.mutation<Request, Partial<Request>>({
......
src/features/pagination/mainPagination.ts
View file @ e93810e4
......@@ -7,7 +7,7 @@ const initialState = {
}
const mainPaginationSlice = createSlice({
name: 'pagination',
name: 'mainPagination',
initialState,
reducers: {
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 { useNavigate } from 'react-router';
import { Button, Space, Tag, Modal, message } from 'antd';
import type { TableProps } from 'antd';
import { getStatusText, getStatusColor } from './utils';
......@@ -18,129 +17,6 @@ export interface DataType {
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'] = [
{
title: "ID",
......@@ -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 navigate = useNavigate();
// const [deleteOrganization] = useDeleteOrganizationMutation();
const showDeleteModal = () => {
const showResendModal = () => {
setOpen(true);
};
// const handleDeleteModalOk = async () => {
// try {
// await deleteOrganization(data.id).unwrap();
// message.success('Организация успешно удалена!');
// setOpen(false);
// } catch (err) {
// message.error('Произошла ошибка при удалении организации!');
// }
// };
const handleDeleteModalCancel = () => {
const handleResendModalOk = async () => {
try {
// await resendRequest().unwrap();
message.success('Запрос успешно переотправлен!');
setOpen(false);
} catch (err) {
message.error('Произошла ошибка при переотправке запроса!');
}
};
const handleEditClick = () => {
navigate(`/edit/${data.id}`);
}
const handleResendModalCancel = () => {
setOpen(false);
};
return (
<Space>
<Button onClick={handleEditClick}>Изменить</Button>
<Button onClick={showDeleteModal} type="primary" danger>Удалить</Button>
<Button onClick={showResendModal}>П</Button>
<Modal
open={open}
title={`Вы уверены, что хотите удалить?`}
title={`Вы уверены, что хотите переотправить?`}
// onOk={handleDeleteModalOk}
onCancel={handleDeleteModalCancel}
onCancel={handleResendModalCancel}
onOk={handleResendModalOk}
>
<p>Подтвердите удаление организации.</p>
<p>Подтвердите переотправку запроса.</p>
</Modal>
</Space>
)
......
src/pages/RequestPage/RequestPage.tsx
View file @ e93810e4
import React, { useEffect } from 'react';
import dayjs from 'dayjs';
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 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 { columns, DataType, rows } from './Columns';
const dateFormat = 'YYYY/MM/DD';
const RequestPage: React.FC = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const totalOrgNumber = useSelector((state: any) => state.mainPagination.totalOrgNumber);
const currentPage = useSelector((state: any) => state.mainPagination.currentPage);
const ORG_NUMBER_PER_PAGE = useSelector((state: any) => state.mainPagination.ORG_NUMBER_PER_PAGE);
const handleAddClick = () => {
};
const totalReqNumber = useSelector((state: any) => state.reqPagination.totalReqNumber);
const currentPage = useSelector((state: any) => state.reqPagination.currentPage);
const REQ_NUMBER_PER_PAGE = useSelector((state: any) => state.reqPagination.REQ_NUMBER_PER_PAGE);
const handlePaginationChange = (page: number) => {
dispatch(setCurrentPage(page));
};
const paginatedData = (dataSource: DataType[]) => {
const startIndex = (currentPage - 1) * ORG_NUMBER_PER_PAGE;
const endIndex = Math.min(startIndex + ORG_NUMBER_PER_PAGE, totalOrgNumber);
const startIndex = (currentPage - 1) * REQ_NUMBER_PER_PAGE;
const endIndex = Math.min(startIndex + REQ_NUMBER_PER_PAGE, totalReqNumber);
return dataSource.slice(startIndex, endIndex);
}
};
// const {
// data: orgs = [],
// isLoading,
// isSuccess,
// isError,
// error
// } = useGetOrganizationsQuery();
const {
data: reqs = { list: [] },
isLoading,
isSuccess,
isError,
error
} = useGetRequestsQuery();
// let table;
console.log(reqs)
// if (isLoading) {
// 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>
// }
let table;
// useEffect(() => {
// if (isSuccess) {
if (isLoading) {
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>;
}
// }
// }, [isSuccess, orgs]);
useEffect(() => {
if (isSuccess) {
dispatch(setTotalReqNumber(reqs.list.length));
}
}, [isSuccess, reqs, dispatch]);
return (
<div className="container">
<div className="filter">
<div className="fields">
<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} />
</div>
<div className="category">
<Select placeholder="Не выбрано" style={{width: 270}} options={[]} />
<Select placeholder="Не выбрано" style={{ width: 270 }} options={[]} />
</div>
</div>
<Button type='primary'>Применить</Button>
</div>
<div className="data">
<Table dataSource={rows} columns={columns} pagination={false} />
{table}
</div>
<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>
);
};
export default RequestPage
\ No newline at end of file
export default RequestPage;
\ No newline at end of file
src/store/store.ts
View file @ e93810e4
......@@ -3,6 +3,7 @@ import { apiSlice } from '../features/api/apiSlice';
import mainPaginationReducer from '../features/pagination/mainPagination';
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
import reqPaginationReducer from '../features/pagination/reqPagination';
interface AuthState {
token: string | null;
}
......@@ -37,6 +38,7 @@ const store: Store = configureStore({
reducer: {
auth: persistedReducer,
mainPagination: mainPaginationReducer,
reqPagination: reqPaginationReducer,
[apiSlice.reducerPath]: apiSlice.reducer,
},
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