Skip to content

E
ESYTD
Commit e55bd6b3 authored by Дияр Амангельды's avatar Дияр Амангельды
Browse files
Options

add and edit

parents 35b96bc1 e93810e4
Show whitespace changes
Inline Side-by-side
Showing with 183 additions and 222 deletions
src/features/api/apiSlice.ts 0 → 100644
View file @ e55bd6b3
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { RootState } from '../../main';
export const apiSlice = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({
baseUrl: "http://77.243.80.217:8080/esutd/api",
prepareHeaders: (headers, { getState }) => {
const state = getState() as RootState;
const accessToken = state.auth.token;
if (accessToken) {
headers.set("Authorization", `Bearer ${accessToken}`);
}
headers.set("Content-Type", "application/json");
headers.set("Accept", "application/json");
return headers;
},
}),
tagTypes: ["organizations", "requests"],
endpoints: () => ({}),
});
\ No newline at end of file
src/features/api/apiSlice.tsx → src/features/api/organizationApiSlice.ts
View file @ e55bd6b3
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { RootState } from '../../main';
import { apiSlice } from "./apiSlice";
interface Organization {
id: number;
......@@ -14,58 +13,50 @@ interface Organization {
host: string;
}
export const apiSlice = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({
baseUrl: "http://77.243.80.217:8080/esutd/api/organizations",
prepareHeaders: (headers, { getState }) => {
const state = getState() as RootState;
const accessToken = state.auth.token;
if (accessToken) {
headers.set("Authorization", `Bearer ${accessToken}`);
}
headers.set("Content-Type", "application/json");
headers.set("Accept", "application/json");
return headers;
},
}),
tagTypes: ["organizations"],
export const organizationApiSlice = apiSlice.injectEndpoints({
endpoints: (builder) => ({
getOrganizations: builder.query<Organization[], void>({
query: () => '/list',
query: () => 'organizations/list',
providesTags: ["organizations"],
}),
getOrganization: builder.query<Organization, string>({
query: (orgId) => `/info?id=${orgId}`,
query: (orgId) => `organizations/info?id=${orgId}`,
}),
addNewOrganization: builder.mutation<Organization, Partial<Organization>>({
query: (initialOrg) => ({
<<<<<<< HEAD:src/features/api/apiSlice.tsx
url: '/save',
=======
url: 'organizations/save',
>>>>>>> e93810e4a59710e9f9329c2e9ad9fd0a34104287:src/features/api/organizationApiSlice.ts
method: 'POST',
body: initialOrg,
}),
invalidatesTags: ["organizations"],
}),
editOrganization: builder.mutation<Organization, Partial<Organization>>({
<<<<<<< HEAD:src/features/api/apiSlice.tsx
query: ({ ...rest }) => ({
url: `/save`,
method: 'POST',
=======
query: ({ id, ...rest }) => ({
url: `organizations/edit?id=${id}`,
method: 'PUT',
>>>>>>> e93810e4a59710e9f9329c2e9ad9fd0a34104287:src/features/api/organizationApiSlice.ts
body: rest,
}),
invalidatesTags: ["organizations"],
}),
deleteOrganization: builder.mutation<{ success: boolean; id: number }, number>({
query: (orgId) => ({
url: `/delete?id=${orgId}`,
url: `organizations/delete?id=${orgId}`,
method: 'DELETE',
}),
invalidatesTags: ["organizations"],
}),
}),
});
})
})
export const {
useGetOrganizationsQuery,
......@@ -73,4 +64,4 @@ export const {
useAddNewOrganizationMutation,
useEditOrganizationMutation,
useDeleteOrganizationMutation,
} = apiSlice;
} = organizationApiSlice;
src/features/api/requestApiSlice.ts 0 → 100644
View file @ e55bd6b3
import { apiSlice } from "./apiSlice";
interface Request {
id: number;
sendDate: string;
errorMessage: string;
resendDate: null;
resentCount: number;
status: number;
esutdOrganizationCode: string;
requestType: string;
documentID: string;
xml: string;
}
interface RequestsResponse {
list: Request[];
pageNumber: number;
pageSize: number;
totalPages: number;
totalCount: number;
}
export const requestApiSlice = apiSlice.injectEndpoints({
endpoints: (builder) => ({
getRequests: builder.query<RequestsResponse, void>({
query: () => 'requests/list?pageNumber=0&pageSize=30',
providesTags: ["requests"],
}),
addNewRequest: builder.mutation<Request, Partial<Request>>({
query: (initialReq) => ({
url: 'requests/save',
method: 'POST',
body: initialReq,
}),
invalidatesTags: ["requests"],
})
})
})
export const {
useAddNewRequestMutation,
useGetRequestsQuery,
} = requestApiSlice;
\ No newline at end of file
src/features/pagination/mainPagination.tsx → src/features/pagination/mainPagination.ts
View file @ e55bd6b3
......@@ -13,7 +13,7 @@ const initialState: InitialState = {
}
const mainPaginationSlice = createSlice({
name: 'pagination',
name: 'mainPagination',
initialState,
reducers: {
setCurrentPage: (state, action) => {
......
src/features/pagination/reqPagination.ts 0 → 100644
View file @ e55bd6b3
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/(crudPages)/AddPage.tsx
View file @ e55bd6b3
import React from 'react';
import { useNavigate } from 'react-router';
import { Form, Input, Button, Select, message } from 'antd';
import { useAddNewOrganizationMutation } from '../../features/api/apiSlice';
import { useAddNewOrganizationMutation } from '../../features/api/organizationApiSlice';
import { setTotalOrgNumber, setCurrentPage } from '../../features/pagination/mainPagination';
import { useSelector, useDispatch } from 'react-redux';
import './style.css';
......
src/pages/(crudPages)/EditPage.tsx
View file @ e55bd6b3
import React, { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router';
import { Form, Input, Button, Select, message } from 'antd';
import { useGetOrganizationQuery, useEditOrganizationMutation } from '../../features/api/apiSlice';
import { useGetOrganizationQuery, useEditOrganizationMutation } from '../../features/api/organizationApiSlice';
import './style.css';
interface EditValues {
id: number;
......
src/pages/HomePage/Columns.tsx
View file @ e55bd6b3
......@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useNavigate } from 'react-router';
import { Button, Space, Tag, Modal, message } from 'antd';
import type { TableProps } from 'antd';
import { useDeleteOrganizationMutation } from '../../features/api/apiSlice';
import { useDeleteOrganizationMutation } from '../../features/api/organizationApiSlice';
import { getStatusText, getStatusColor } from './utils';
export interface DataType {
......
src/pages/HomePage/HomePage.tsx
View file @ e55bd6b3
......@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
import { useNavigate } from 'react-router';
import { useSelector, useDispatch } from 'react-redux';
import { Button, Pagination, Spin, Table } from 'antd';
import { useGetOrganizationsQuery } from '../../features/api/apiSlice';
import { useGetOrganizationsQuery } from '../../features/api/organizationApiSlice';
import { setCurrentPage, setTotalOrgNumber } from '../../features/pagination/mainPagination';
import { DataType, columns } from './Columns';
import './Homepage.css';
......
src/pages/RequestPage/Columns.tsx
View file @ e55bd6b3
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 @ e55bd6b3
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 @ e55bd6b3
......@@ -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