Skip to content

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

wrote basic table layout for requestPage

parent 953a04f6
Hide whitespace changes
Inline Side-by-side
Showing with 323 additions and 90 deletions
src/pages/RequestPage/Columns.tsx 0 → 100644
View file @ 255213c5
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';
import dayjs from 'dayjs';
export interface DataType {
id: number;
sendDate: string;
errorMessage: string;
resendDate: null;
resentCount: number;
status: number;
esutdOrganizationCode: string;
requestType: string;
documentID: 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'] = [
{
title: "ID",
dataIndex: "id",
key: "id",
},
{
title: "XML",
dataIndex: "xml",
key: "xml",
},
{
title: "Дата отправки",
dataIndex: "sendDate",
key: "sendDate",
width: '11%',
render: (_, record) => (
<span>{dayjs(record.sendDate).format('YYYY-MM-DD HH:mm:ss')}</span>
)
},
{
title: "Код организации",
dataIndex: "orgCode",
key: "esutdOrganizationCode"
},
{
title: "Метод",
dataIndex: "requestType",
key: "requestType"
},
{
title: "Статус",
dataIndex: "status",
key: "status",
render: (_, record) => (
<Tag color={getStatusColor(record.status)} style={{ fontSize: '12px' }}>
{getStatusText(record.status)}
</Tag>
)
},
{
title: "Сообщение об ошибке",
dataIndex: "errorMessage",
key: "errorMessage"
},
{
title: "Дата переотправки",
dataIndex: "resendDate",
key: "resendDate"
},
{
title: "Количество попыток",
dataIndex: "resentCount",
key: "resentCount"
},
{
title: "Действия",
width: 60,
render: (_, record) => {
return (
<ActionColumn data={record} />
)
}
}
]
export const ActionColumn: React.FC<{ data: DataType }> = ({ data }) => {
const [open, setOpen] = useState<boolean>(false);
const navigate = useNavigate();
// const [deleteOrganization] = useDeleteOrganizationMutation();
const showDeleteModal = () => {
setOpen(true);
};
// const handleDeleteModalOk = async () => {
// try {
// await deleteOrganization(data.id).unwrap();
// message.success('Организация успешно удалена!');
// setOpen(false);
// } catch (err) {
// message.error('Произошла ошибка при удалении организации!');
// }
// };
const handleDeleteModalCancel = () => {
setOpen(false);
};
const handleEditClick = () => {
navigate(`/edit/${data.id}`);
}
return (
<Space>
<Button onClick={handleEditClick}>Изменить</Button>
<Button onClick={showDeleteModal} type="primary" danger>Удалить</Button>
<Modal
open={open}
title={`Вы уверены, что хотите удалить?`}
// onOk={handleDeleteModalOk}
onCancel={handleDeleteModalCancel}
>
<p>Подтвердите удаление организации.</p>
</Modal>
</Space>
)
}
\ No newline at end of file
src/pages/RequestPage/RequestPage.css
View file @ 255213c5
.filter { .filter {
margin: 1rem 1rem .5rem; margin: 1rem 1rem 2rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
......
src/pages/RequestPage/RequestPage.tsx
View file @ 255213c5
import React from 'react'; import React, { useEffect } from 'react';
import { DatePicker, Select, Button, Pagination } from 'antd'; import { DatePicker, Select, Button, Pagination, Spin, Table } from 'antd';
import { MaterialSymbol } from 'react-material-symbols'; // import { MaterialSymbol } from 'react-material-symbols';
import { useNavigate } from 'react-router';
import { useDispatch, useSelector } from 'react-redux';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
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 handlePaginationChange = (page: number | string | null) => { const navigate = useNavigate();
console.log("Current page:", page); 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 handlePaginationChange = (page: number) => {
};
const paginatedData = (dataSource: DataType[]) => {
const startIndex = (currentPage - 1) * ORG_NUMBER_PER_PAGE;
const endIndex = Math.min(startIndex + ORG_NUMBER_PER_PAGE, totalOrgNumber);
return dataSource.slice(startIndex, endIndex);
} }
// const {
// data: orgs = [],
// isLoading,
// isSuccess,
// isError,
// error
// } = useGetOrganizationsQuery();
// let table;
// 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>
// }
// useEffect(() => {
// if (isSuccess) {
// }
// }, [isSuccess, orgs]);
return ( return (
<div className="container"> <div className="container">
...@@ -26,90 +70,9 @@ const RequestPage: React.FC = () => { ...@@ -26,90 +70,9 @@ const RequestPage: React.FC = () => {
<Button type='primary'>Применить</Button> <Button type='primary'>Применить</Button>
</div> </div>
{/* home.css */} <div className="data">
<section className='section'> <Table dataSource={rows} columns={columns} pagination={false} />
<div className="data"> </div>
<table className="data-table">
<thead>
<tr>
<th>ID</th>
<th>JSON</th>
<th>XML</th>
<th>Дата отправки</th>
<th>Код организации</th>
<th>Метод</th>
<th>Статус</th>
<th>Сообщение об ошибке</th>
<th>Дата переотправки</th>
<th>Количество попыток</th>
<th style={{textAlign: 'center'}}>Действие</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>тут данные JSON</td>
<td>тут данные XML</td>
<td>2023-09-26 11:54:34</td>
<td>nce</td>
<td>terminationContractData</td>
<td>не успешно</td>
<td>тут сообщения об ошибке</td>
<td>2023-09-26 11:54:34</td>
<td>1</td>
<td style={{textAlign: 'center'}}>
<MaterialSymbol icon='mail' size={20} color="#0E2B52" />
</td>
</tr>
<tr>
<td>2</td>
<td>тут данные JSON</td>
<td>тут данные XML</td>
<td>2023-09-26 11:54:34</td>
<td>arta</td>
<td>terminationContractData</td>
<td>переотправлено</td>
<td>тут сообщения об ошибке</td>
<td>2023-09-26 11:54:34</td>
<td>0</td>
<td style={{textAlign: 'center'}}>
<MaterialSymbol icon='mail' size={20} color="#0E2B52" />
</td>
</tr>
<tr>
<td>2</td>
<td>тут данные JSON</td>
<td>тут данные XML</td>
<td>2023-09-26 11:54:34</td>
<td>arta</td>
<td>terminationContractData</td>
<td>доставлено успешно</td>
<td></td>
<td>2023-09-26 11:54:34</td>
<td>5</td>
<td style={{textAlign: 'center'}}>
<MaterialSymbol icon='mail' size={20} color="#0E2B52" />
</td>
</tr>
<tr>
<td>2</td>
<td>тут данные JSON</td>
<td>тут данные XML</td>
<td>2023-09-26 11:54:34</td>
<td>arta</td>
<td>terminationContractData</td>
<td>отправлен</td>
<td></td>
<td>2023-09-26 11:54:34</td>
<td>5</td>
<td style={{textAlign: 'center'}}>
<MaterialSymbol icon='mail' size={20} color="#0E2B52" />
</td>
</tr>
</tbody>
</table>
</div>
</section>
<div className="pagination_container"> <div className="pagination_container">
<Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} /> <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} />
</div> </div>
......
src/pages/RequestPage/utils.ts 0 → 100644
View file @ 255213c5
export const getStatusText = (status: number) => {
switch (status) {
case 1: return "отправлен";
case 2: return "не успешно";
case 3: return "переотправлено";
case 4: return "доставлено успешно";
default: return "неизвестно";
}
}
export const getStatusColor = (status: number) => {
switch (status) {
case 1: return 'cyan';
case 2: return 'red';
case 3: return 'geekblue';
case 4: return 'green'
default: return 'grey';
}
}
\ No newline at end of file
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