Skip to content

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

refactor styling

parent 24fa6480
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 90 deletions
index.html
View file @ b7dd0273
......@@ -5,13 +5,9 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ЕСУТД</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
</html>
\ No newline at end of file
src/App.css
View file @ b7dd0273
:root {
--main-blue: #041225;
--icon-blue: #0E2B52;
}
.container {
width: 100%;
max-width: 1500px;
margin: 0 auto;
}
.text-blue {
color: var(--icon-blue);
}
.text-1 {
font-size: 1rem !important;
}
.text-125 {
font-size: 1.25rem !important;
}
.text-15 {
font-size: 1.5rem !important;
}
\ No newline at end of file
src/components/Header/Header.css → src/components/Header/Header.module.css
View file @ b7dd0273
.header {
background-color: #041225;
background-color: var(--main-blue);
color: #fff;
display: flex;
padding: 1rem .5rem;
......@@ -9,6 +9,7 @@
.header_left {
display: flex;
align-items: center;
gap: .5rem;
}
.header_title {
......@@ -25,30 +26,30 @@
}
/* Customizing drawer */
.custom-drawer {
.custom_drawer {
color: #fff;
background-color: #041225 !important;
background-color: var(--main-blue) !important;
}
.custom-drawer .ant-drawer-header {
.custom_drawer :global(.ant-drawer-header) {
padding-bottom: 1.35rem;
border-bottom: 2px solid;
}
.custom-drawer .ant-drawer-header-title {
.custom_drawer :global(.ant-drawer-header-title) {
flex-direction: row-reverse;
}
.custom-drawer .ant-drawer-title {
.custom_drawer :global(.ant-drawer-title) {
font-size: 1.1rem;
letter-spacing: 1px;
}
.custom-drawer .ant-drawer-close span{
.custom_drawer :global(.ant-drawer-close span) {
color: #fff;
}
.custom-drawer .ant-drawer-body {
.custom_drawer :global(.ant-drawer-body) {
margin-top: 1.2rem;
padding: 0;
}
\ No newline at end of file
src/components/Header/Header.tsx
View file @ b7dd0273
......@@ -5,7 +5,7 @@ import { Menu, Button, Drawer } from 'antd';
import type { MenuProps } from 'antd';
import { clearToken } from '@/store/store';
import './Header.css';
import styles from './Header.module.css';
type MenuItem = Required<MenuProps>['items'][number];
......@@ -47,23 +47,22 @@ const Header: React.FC = () => {
};
return (
<header className="header">
<div className="header_left">
<header className={styles.header}>
<div className={styles.header_left}>
<Button
type='text'
onClick={() => {
setOpenMenu(true);
}}
>
<span className='material-icons' style={{fontSize: 24, color: '#fff'}}>menu</span>
</Button>
icon={<span className='material-icons' style={{fontSize: 24, color: '#fff'}}>menu</span>}
/>
<Drawer
open={openMenu}
onClose={() => {
setOpenMenu(false);
}}
placement='left'
className='custom-drawer'
className={styles.custom_drawer}
title="ЕСУТД"
>
<Menu
......@@ -71,15 +70,18 @@ const Header: React.FC = () => {
items={MenuItems}
selectedKeys={[currentNav]}
mode='inline'
className="menu"
className={styles.menu}
onClick={handleMenuClick}
/>
</Drawer>
<h1 className="header_title">ЕСУТД</h1>
<h1 className={styles.header_title}>ЕСУТД</h1>
</div>
<Button type='text' className="header_logout" onClick={handleLogout}>
<span className='material-icons' style={{fontSize: 24, color: '#fff'}}>logout</span>
</Button>
<Button
type='text'
className={styles.header_logout}
onClick={handleLogout}
icon={<span className='material-icons' style={{fontSize: 24, color: '#fff'}}>logout</span>}
/>
</header>
);
};
......
src/index.css
View file @ b7dd0273
......@@ -6,7 +6,6 @@
html,
body {
box-sizing: border-box;
font-family: Open Sans;
font-weight: 700;
}
......
src/main.tsx
View file @ b7dd0273
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import { Provider } from 'react-redux';
import './index.css';
import App from './App.tsx';
import {store, persistor} from '../src/store/store.ts';
import { PersistGate } from 'redux-persist/integration/react';
import '../node_modules/material-icons/iconfont/material-icons.css'
import './index.css';
export type RootState = ReturnType<typeof store.getState>;
ReactDOM.createRoot(document.getElementById('root')!).render(
......@@ -16,4 +18,4 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
</PersistGate>
</Provider>
</React.StrictMode>,
);
);
\ No newline at end of file
src/pages/HomePage/Columns.tsx
View file @ b7dd0273
......@@ -5,9 +5,10 @@ import { Button, Space, Tag, Modal, Checkbox, message } from 'antd';
import type { TableProps } from 'antd';
import { useDeleteOrganizationMutation } from '@/api/organizationApi';
import { addCheckedCode, removeCheckedCode } from '@/store/slices/syncBtn';
import { setCurrentPage } from '@/store/slices/mainPagination';
import { addCheckedCode, removeCheckedCode } from '@/store/slices/syncBtnSlice';
import { setCurrentPage } from '@/store/slices/mainPaginationSlice';
import { getStatusText, getStatusColor } from './utils';
import styles from './Homepage.module.css';
export interface DataType {
id: number;
......@@ -53,7 +54,7 @@ export const columns: TableProps<DataType>['columns'] = [
dataIndex: "status",
key: "status",
render: (_, record) => (
<Tag color={getStatusColor(record.status)} style={{ fontSize: '14px' }}>
<Tag color={getStatusColor(record.status)}>
{getStatusText(record.status)}
</Tag>
)
......@@ -86,7 +87,7 @@ export const CheckboxColumn: React.FC<{ data: DataType }> = ({ data }) => {
return (
<Checkbox
className='checkbox_org--custom'
className={styles.custom_checkbox}
checked={checked}
onChange={handleCheck}
id={`checkbox-${data.id}`}
......@@ -132,12 +133,12 @@ export const ActionColumn: React.FC<{ data: DataType }> = ({ data }) => {
<Space>
<Button
onClick={handleEditClick}
icon={<span className='material-icons' style={{fontSize: 20, color: '#0E2B52'}}>visibility</span>}
icon={<span className='material-icons text-blue text-125'>visibility</span>}
type='text'
/>
<Button
onClick={showDeleteModal}
icon={<span className='material-icons' style={{fontSize: 20, color: '#0E2B52'}}>delete</span>}
icon={<span className='material-icons text-blue text-125'>delete</span>}
type='text'
/>
<Modal
......
src/pages/HomePage/HomePage.tsx
View file @ b7dd0273
......@@ -6,10 +6,10 @@ import { TableRef } from 'antd/es/table';
import { useGetOrganizationsQuery } from '@/api/organizationApi';
import { useUpdateDictionaryMutation } from '@/api/manualApi';
import { setCurrentPage, setTotalOrgNumber } from '@/store/slices/mainPagination';
import { setDisabled, clearCheckedCodes } from '@/store/slices/syncBtn';
import { setCurrentPage, setTotalOrgNumber } from '@/store/slices/mainPaginationSlice';
import { setDisabled, clearCheckedCodes } from '@/store/slices/syncBtnSlice';
import { DataType, columns } from './Columns';
import './Homepage.css';
import styles from './Homepage.module.css';
const HomePage: React.FC = () => {
const navigate = useNavigate();
......@@ -72,7 +72,7 @@ const HomePage: React.FC = () => {
scroll={{
scrollToFirstRowOnChange: true,
x: 'max-content',
y: 470
y: window.innerHeight - 250
}}
pagination={{
position: ['bottomCenter'],
......@@ -107,30 +107,28 @@ const HomePage: React.FC = () => {
}, [checkedCodes, dispatch])
return (
<div className="container">
<section className='section'>
<Space size={'middle'}>
<Button
className='add_title'
onClick={handleAddClick}
icon={<span className='material-icons' style={{fontSize: 20, color: '#0E2B52'}}>add_circle</span>}
>
Добавить
</Button>
<Button
className='add_title'
onClick={handleSyncClick}
disabled={syncBtnState}
loading={isSyncLoading}
icon={<span className='material-icons' style={{fontSize: 22, color: '#0E2B52'}}>sync</span>}
>
Синхронизировать справочники
</Button>
</Space>
<div className="data">
{table}
</div>
</section>
<div className='container'>
<Space className={styles.btn_section} size={'middle'}>
<Button
className={styles.btn}
onClick={handleAddClick}
icon={<span className='material-icons text-blue text-15'>add_circle</span>}
>
Добавить
</Button>
<Button
className={styles.btn}
onClick={handleSyncClick}
disabled={syncBtnState}
loading={isSyncLoading}
icon={<span className='material-icons text-blue text-15'>sync</span>}
>
Синхронизировать справочники
</Button>
</Space>
<div className="data">
{table}
</div>
</div>
);
}
......
src/pages/HomePage/Homepage.css → src/pages/HomePage/Homepage.module.css
View file @ b7dd0273
.add_title {
font-size: 12px;
line-height: 18px;
text-decoration: none;
.btn_section {
margin: 1rem 0;
}
.btn {
font-size: .8rem;
font-weight: 700;
margin-left: -10px;
text-decoration: none;
margin-left: .5rem;
}
/* Custom antd checkbox */
.checkbox_org--custom .ant-checkbox-inner {
.custom_checkbox :global(.ant-checkbox-inner) {
border-color: #33333386;
}
\ No newline at end of file
src/pages/HomePage/utils.ts
View file @ b7dd0273
......@@ -14,4 +14,4 @@ export const getStatusColor = (status: number) => {
case 2: return 'green';
default: return 'grey';
}
}
}
\ No newline at end of file
src/pages/ManageOrganization/ManageOrganization.tsx
View file @ b7dd0273
......@@ -4,7 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
import { Form, Input, Button, Select, message } from 'antd';
import { useEditOrganizationMutation, useGetOrganizationQuery, useGetOrganizationsQuery } from '@/api/organizationApi';
import { setTotalOrgNumber, setCurrentPage } from '@/store/slices/mainPagination';
import { setTotalOrgNumber, setCurrentPage } from '@/store/slices/mainPaginationSlice';
import './ManageOrganization.css';
interface OrganizationValues {
......
src/pages/RequestPage/Columns.tsx
View file @ b7dd0273
......@@ -4,6 +4,7 @@ import type { TableProps } from 'antd';
import dayjs from 'dayjs';
import { getStatusText, getStatusColor, openXMLInNewPage, downloadXML } from './utils';
import styles from './RequestPage.module.css';
export interface DataType {
id: number;
......@@ -31,22 +32,33 @@ export const columns: TableProps<DataType>['columns'] = [
key: "xml",
width: '1%',
render: (_, record) => (
<div style={{display: 'flex', alignItems: 'center', gap: 5}}>
<div className={styles.data_interchange_btnGroup}>
<Button
className={styles.data_interchange_btn}
type='link'
onClick={() => downloadXML(record.xml, record.id)}
style={{padding: 0}}
icon={<span className='material-icons'>download</span>}
onClick={() => openXMLInNewPage(record.xml)}
>
Открыть
</Button>
<Button
className={styles.data_interchange_btn}
type='link'
onClick={() => downloadXML(record.xml, record.id)}
icon={<span className='material-icons text-125'>download</span>}
/>
<Button type='link' onClick={() => openXMLInNewPage(record.xml)} style={{padding: 0}}>Открыть XML</Button>
</div>
),
},
{
title: "JSON",
key: "json",
width: '5%',
},
{
title: "Дата отправки",
dataIndex: "sendDate",
key: "sendDate",
width: '6%',
width: '7%',
render: (_, record) => (
<span>{dayjs(record.sendDate).format('DD-MM-YYYY HH:mm:ss')}</span>
)
......@@ -69,7 +81,7 @@ export const columns: TableProps<DataType>['columns'] = [
key: "status",
width: '1%',
render: (_, record) => (
<Tag color={getStatusColor(record.status)} style={{ fontSize: '12px' }}>
<Tag color={getStatusColor(record.status)}>
{getStatusText(record.status)}
</Tag>
)
......@@ -80,14 +92,20 @@ export const columns: TableProps<DataType>['columns'] = [
key: "errorMessage",
width: '1%',
render: (_, record) => (
<Button type='link' onClick={() => openXMLInNewPage(record.xml)} style={{padding: 0}}>Открыть сообщение</Button>
<Button
className={styles.data_interchange_btn}
type='link'
onClick={() => openXMLInNewPage(record.xml)}
>
Открыть сообщение
</Button>
)
},
{
title: "Дата переотправки",
dataIndex: "resendDate",
key: "resendDate",
width: '6%'
width: '6%',
},
{
title: "Количество попыток",
......@@ -97,10 +115,11 @@ export const columns: TableProps<DataType>['columns'] = [
},
{
width: '1%',
align: 'center',
render: (_, record) => {
return (
<ResendColumn
data={record}
<ResendColumn
data={record}
/>
)
}
......@@ -129,10 +148,10 @@ export const ResendColumn: React.FC<{ data: DataType }> = ({ data }) => {
};
return (
<div style={{textAlign: 'center'}}>
<Button
<>
<Button
onClick={showResendModal}
icon={<span className='material-icons' style={{fontSize: 20, color: '#0E2B52'}}>mail</span>}
icon={<span className='material-icons text-blue text-125'>mail</span>}
type='text'
/>
<Modal
......@@ -140,9 +159,9 @@ export const ResendColumn: React.FC<{ data: DataType }> = ({ data }) => {
title={`Вы уверены, что хотите переотправить запрос с id ${data.id}?`}
onCancel={handleResendModalCancel}
onOk={handleResendModalOk}
>
>
<p>Подтвердите переотправку запроса.</p>
</Modal>
</div>
</>
)
}
\ No newline at end of file
src/pages/RequestPage/RequestPage.css → src/pages/RequestPage/RequestPage.module.css
View file @ b7dd0273
.filter {
margin: 1rem 1rem 1rem;
.filter_section {
margin: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -8,4 +8,14 @@
.fields {
display: flex;
gap: 1rem;
}
.data_interchange_btnGroup {
display: flex;
align-items: center;
gap: 5px;
}
.data_interchange_btn {
padding: 0;
}
\ No newline at end of file
src/pages/RequestPage/RequestPage.tsx
View file @ b7dd0273
......@@ -7,9 +7,9 @@ import { DatePicker, Select, Button, Table } from 'antd';
import { TableRef } from 'antd/es/table';
import { useGetRequestsQuery } from '@/api/requestApi';
import { setCurrentPage, setTotalReqNumber } from '@/store/slices/reqPagination'
import { setCurrentPage, setTotalReqNumber } from '@/store/slices/reqPaginationSlice'
import { columns, DataType } from './Columns';
import './RequestPage.css';
import styles from './RequestPage.module.css';
const DATE_FORMAT = 'YYYY-MM-DD';
const DEFAULT_DATES = {
......@@ -88,9 +88,9 @@ const RequestPage: React.FC = () => {
let max: number = -Infinity;
if (isSuccess) {
console.log(window.innerHeight)
reqs.list.forEach((req) => {
const dateValue = new Date(req.sendDate).valueOf();
console.log(dateValue);
if (min > dateValue && dateValue!=0) {
min = dateValue;
}
......@@ -107,7 +107,7 @@ const RequestPage: React.FC = () => {
scroll={{
scrollToFirstRowOnChange: true,
x: 'max-content',
y: 400
y: window.innerHeight - 270
}}
pagination={{
position: ['bottomCenter'],
......@@ -136,10 +136,11 @@ const RequestPage: React.FC = () => {
return (
<div className="container">
<div className="filter">
<div className="fields">
<div className={styles.filter_section}>
<div className={styles.fields}>
<div className="dates">
<DatePicker.RangePicker
id={{start: 'startDate', end: 'endDate'}}
onChange={onRangeChange}
defaultValue={[
dayjs(DEFAULT_DATES.startDate, DATE_FORMAT),
......
src/store/store.ts
View file @ b7dd0273
......@@ -3,9 +3,9 @@ import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
import { apiSlice } from '../api/mainApi';
import mainPaginationReducer from './slices/mainPagination';
import reqPaginationReducer from './slices/reqPagination';
import syncBtnReducer from './slices/syncBtn';
import mainPaginationReducer from './slices/mainPaginationSlice';
import reqPaginationReducer from './slices/reqPaginationSlice';
import syncBtnReducer from './slices/syncBtnSlice';
interface AuthState {
token: string | null;
......
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