addPage, editPage

parent 989d69f2
Pipeline #403 failed with stages
import React from 'react'; import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom' import { BrowserRouter, Routes, Route } from 'react-router-dom';
import AuthPage from './pages/AuthPage'; import AuthPage from './pages/AuthPage';
import HomePage from './pages/HomePage'; import HomePage from './pages/HomePage';
import AddPage from './pages/AddPage'; import AddPage from './pages/AddPage';
import './App.css' import './App.css';
import RequestPage from './pages/RequestPage'; import RequestPage from './pages/RequestPage';
import Header from './components/HomePage/Header'; import Header from './components/HomePage/Header';
import EditPage from './pages/EditPage';
const App: React.FC = () => { const App: React.FC = () => {
return ( return (
...@@ -16,11 +17,12 @@ const App: React.FC = () => { ...@@ -16,11 +17,12 @@ const App: React.FC = () => {
<Route path="/auth" element={<AuthPage />} /> <Route path="/auth" element={<AuthPage />} />
<Route path="/" element={<HomePage />} /> <Route path="/" element={<HomePage />} />
<Route path="/add" element={<AddPage />} /> <Route path="/add" element={<AddPage />} />
<Route path='requests' element={<RequestPage />} /> <Route path="/edit" element={<EditPage />} />
<Route path="/requests" element={<RequestPage />} />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
</> </>
); );
}; };
export default App; export default App;
\ No newline at end of file
import React from 'react'; import React from 'react';
import Header from '../components/HomePage/Header';
import { Form, Input, Button } from 'antd'; import { Form, Input, Button } from 'antd';
import "../../src/styles/Home/addPage.css"; import "../../src/styles/Home/addPage.css";
import { useNavigate } from 'react-router';
const { Item } = Form; const { Item } = Form;
const AddPage: React.FC = () => { const AddPage: React.FC = () => {
const navigate = useNavigate();
return ( return (
<div className='container'> <div className='container'>
<Header />
<Form <Form
layout="vertical" layout="vertical"
name="organization_form" name="organization_form"
initialValues={{ remember: true }} initialValues={{ remember: true }}
// onFinish={(values) => console.log(values)}
className='form' className='form'
> >
<Item <Item
...@@ -63,16 +63,20 @@ const AddPage: React.FC = () => { ...@@ -63,16 +63,20 @@ const AddPage: React.FC = () => {
> >
<Input.Password maxLength={128} placeholder="Максимальная длина: 128 символов" /> <Input.Password maxLength={128} placeholder="Максимальная длина: 128 символов" />
</Item> </Item>
<hr />
<Item style={{ textAlign: 'right' }}>
<Button type="default" style={{ marginRight: '8px' }}>
Отмена
</Button>
<Button type="primary" htmlType="submit"> <div className='form-footer'>
Сохранить <hr className='add-hr' />
</Button> <Item style={{ textAlign: 'right' }}>
</Item> <Button type="default" style={{ marginRight: '8px' }}
onClick={() => navigate("/")}>
Отмена
</Button>
<Button type="primary" htmlType="submit">
Сохранить
</Button>
</Item>
</div>
</Form> </Form>
</div> </div>
); );
......
import { Form, Input, Button, Select } from 'antd';
import "../../src/styles/Home/editPage.css";
import { useNavigate } from 'react-router';
const { Item } = Form;
const { Option } = Select;
const EditPage = () => {
const navigate = useNavigate();
return (
<div className="container">
<Form
layout="vertical"
name="organization_form"
initialValues={{ remember: true }}
className='form'
>
<Item
label="ID"
name="id"
rules={[{ required: true, message: 'Пожалуйста, введите ID!' }]}
>
<Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
</Item>
<Item
label="БИН организации"
name="bin"
rules={[{ required: true, message: 'Пожалуйста, введите БИН организации!' }]}
>
<Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
</Item>
<Item
label="Код организации"
name="code"
rules={[{ required: true, message: 'Пожалуйста, введите код организации!' }]}
>
<Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
</Item>
<Item
label="Наименование организации"
name="name"
rules={[{ required: true, message: 'Пожалуйста, введите наименование организации!' }]}
>
<Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
</Item>
<Item
label="Адрес системы/хост"
name="address"
rules={[{ required: true, message: 'Пожалуйста, введите адрес системы/хост!' }]}
>
<Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
</Item>
<Item
label="Логин"
name="login"
rules={[{ required: true, message: 'Пожалуйста, введите логин!' }]}
>
<Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
</Item>
<Item
label="Пароль"
name="password"
rules={[{ required: true, message: 'Пожалуйста, введите пароль!' }]}
>
<Input.Password maxLength={128} placeholder="Максимальная длина: 128 символов" />
</Item>
<Item
label="Статус"
name="status"
rules={[{ required: true, message: 'Пожалуйста, выберите статус!' }]}
>
<Select placeholder="Выберите статус">
<Option value="active">Активен</Option>
<Option value="blocked">Заблокирован</Option>
<Option value="deleted">Удален</Option>
</Select>
</Item>
<div className='form-footer'>
<Item style={{ textAlign: 'right' }}>
<Button type="default" style={{ marginRight: '8px' }}
onClick={() => navigate("/")}>
Отмена
</Button>
<Button type="primary" htmlType="submit">
Сохранить
</Button>
</Item>
</div>
</Form>
</div>
);
};
export default EditPage;
...@@ -4,6 +4,29 @@ ...@@ -4,6 +4,29 @@
margin-top: 10px; margin-top: 10px;
} }
hr{ .container {
margin-top: 120px; display: flex;
flex-direction: column;
height: calc(100vh - 60px);
padding: 10px 20px;
}
.form {
flex: 1;
overflow-y: auto;
padding-bottom: 80px;
}
.form-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: white;
padding: 10px 20px;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}
.add-hr {
margin-top: 20px;
} }
\ No newline at end of file
/* styles.css */
.form{
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
.container {
display: flex;
flex-direction: column;
height: calc(100vh - 80px);
padding: 10px 20px;
overflow: hidden;
}
.form {
flex: 1;
overflow-y: auto;
padding-bottom: 150px;
margin-left: 20px;
}
.form-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: white;
padding: 10px 20px;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}
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