feat: add form for drawer and refactor styles
This commit is contained in:
parent
e7fbd53dfe
commit
5300e53c43
3
client/public/icons/drawer/reg.svg
Normal file
3
client/public/icons/drawer/reg.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.5 16V13.2C0.5 12.65 0.641667 12.1333 0.925 11.65C1.20833 11.1667 1.6 10.8 2.1 10.55C2.95 10.1167 3.90833 9.75 4.975 9.45C6.04167 9.15 7.21667 9 8.5 9C9 9 9.4875 9.025 9.9625 9.075C10.4375 9.125 10.9 9.2 11.35 9.3L9.6 11.05C9.41667 11.0167 9.2375 11 9.0625 11H8.5C7.31667 11 6.25417 11.1417 5.3125 11.425C4.37083 11.7083 3.6 12.0167 3 12.35C2.85 12.4333 2.72917 12.55 2.6375 12.7C2.54583 12.85 2.5 13.0167 2.5 13.2V14H8.75L10.75 16H0.5ZM14.05 16.4L10.6 12.95L12 11.55L14.05 13.6L19.1 8.55L20.5 9.95L14.05 16.4ZM8.5 8C7.4 8 6.45833 7.60833 5.675 6.825C4.89167 6.04167 4.5 5.1 4.5 4C4.5 2.9 4.89167 1.95833 5.675 1.175C6.45833 0.391667 7.4 0 8.5 0C9.6 0 10.5417 0.391667 11.325 1.175C12.1083 1.95833 12.5 2.9 12.5 4C12.5 5.1 12.1083 6.04167 11.325 6.825C10.5417 7.60833 9.6 8 8.5 8ZM8.5 6C9.05 6 9.52083 5.80417 9.9125 5.4125C10.3042 5.02083 10.5 4.55 10.5 4C10.5 3.45 10.3042 2.97917 9.9125 2.5875C9.52083 2.19583 9.05 2 8.5 2C7.95 2 7.47917 2.19583 7.0875 2.5875C6.69583 2.97917 6.5 3.45 6.5 4C6.5 4.55 6.69583 5.02083 7.0875 5.4125C7.47917 5.80417 7.95 6 8.5 6Z" fill="#606060"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
client/public/icons/drawer/save.svg
Normal file
3
client/public/icons/drawer/save.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.5 4V16C18.5 16.55 18.3042 17.0208 17.9125 17.4125C17.5208 17.8042 17.05 18 16.5 18H2.5C1.95 18 1.47917 17.8042 1.0875 17.4125C0.695833 17.0208 0.5 16.55 0.5 16V2C0.5 1.45 0.695833 0.979167 1.0875 0.5875C1.47917 0.195833 1.95 0 2.5 0H14.5L18.5 4ZM16.5 4.85L13.65 2H2.5V16H16.5V4.85ZM9.5 15C10.3333 15 11.0417 14.7083 11.625 14.125C12.2083 13.5417 12.5 12.8333 12.5 12C12.5 11.1667 12.2083 10.4583 11.625 9.875C11.0417 9.29167 10.3333 9 9.5 9C8.66667 9 7.95833 9.29167 7.375 9.875C6.79167 10.4583 6.5 11.1667 6.5 12C6.5 12.8333 6.79167 13.5417 7.375 14.125C7.95833 14.7083 8.66667 15 9.5 15ZM3.5 7H12.5V3H3.5V7Z" fill="#606060"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 744 B |
3
client/public/icons/header/add_2.svg
Normal file
3
client/public/icons/header/add_2.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.125 18V10H0.125V8H8.125V0H10.125V8H18.125V10H10.125V18H8.125Z" fill="#606060"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 195 B |
|
Before Width: | Height: | Size: 392 B After Width: | Height: | Size: 392 B |
@ -3,9 +3,10 @@ import Title from 'antd/es/typography/Title';
|
||||
|
||||
interface HeaderProps {
|
||||
title: string;
|
||||
additionalContent?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function Header({ title }: HeaderProps) {
|
||||
export default function Header({ title, additionalContent }: HeaderProps) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@ -26,8 +27,9 @@ export default function Header({ title }: HeaderProps) {
|
||||
marginRight: '26px',
|
||||
}}
|
||||
>
|
||||
{additionalContent}
|
||||
<img
|
||||
src="./icons/sider/more.svg"
|
||||
src="./icons/header/more.svg"
|
||||
alt="more"
|
||||
style={{ height: '16px', width: '16px' }}
|
||||
/>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
export const theme = {
|
||||
token: {
|
||||
fontFamily: 'Roboto, sans-serif',
|
||||
colorPrimary: '#548d10',
|
||||
colorPrimary: '#C2DA3D',
|
||||
Menu: {
|
||||
itemColor: 'f2f2f2',
|
||||
itemBg: '#f2f2f2',
|
||||
|
||||
@ -26,6 +26,15 @@ code {
|
||||
color: #548d10;
|
||||
}
|
||||
|
||||
.ant-menu-item-selected {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.ant-menu-item-selected a,
|
||||
.ant-menu-item-selected {
|
||||
color: #548d10 !important;
|
||||
}
|
||||
|
||||
.sider {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
@ -1,9 +1,143 @@
|
||||
import { Button, Form, Input, Select } from 'antd';
|
||||
import Header from '../components/Header';
|
||||
import { useState } from 'react';
|
||||
import ContentDrawer from '../components/ContentDrawer';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
export default function AccountsPage() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const showDrawer = () => setOpen(true);
|
||||
const closeDrawer = () => setOpen(false);
|
||||
|
||||
const userEdit = (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<Form
|
||||
name="user-edit-form"
|
||||
layout="vertical"
|
||||
// onFinish={onFinish}
|
||||
initialValues={{
|
||||
name: 'Александр Александров',
|
||||
login: 'alexandralex@vorkout.ru',
|
||||
password: 'jKUUl776GHd',
|
||||
email: 'alexandralex@vorkout.ru',
|
||||
tenant: 'text',
|
||||
role: 'Директор магазина',
|
||||
status: 'Активен',
|
||||
}}
|
||||
style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
<Form.Item
|
||||
label="Имя"
|
||||
name="name"
|
||||
rules={[{ required: true, message: 'Введите имя' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Логин"
|
||||
name="login"
|
||||
rules={[{ required: true, message: 'Введите логин' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Пароль (последний ввод)"
|
||||
name="password"
|
||||
rules={[{ required: true, message: 'Введите пароль' }]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="E-mail"
|
||||
name="email"
|
||||
rules={[
|
||||
{ required: true, message: 'Введите имейл' },
|
||||
{ type: 'email', message: 'Некорректный имейл' },
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Привязка"
|
||||
name="tenant"
|
||||
rules={[{ required: true, message: 'Введите привязку' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Роль"
|
||||
name="role"
|
||||
rules={[{ required: true, message: 'Выберите роль' }]}
|
||||
>
|
||||
<Select placeholder="Выберите роль">
|
||||
<Option value="Директор магазина">Директор магазина</Option>
|
||||
<Option value="Менеджер">Менеджер</Option>
|
||||
<Option value="Кассир">Кассир</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Статус"
|
||||
name="status"
|
||||
rules={[{ required: true, message: 'Выберите статус' }]}
|
||||
>
|
||||
<Select placeholder="Выберите статус">
|
||||
<Option value="ACTIVE">Активен</Option>
|
||||
<Option value="DISABLED">Неактивен</Option>
|
||||
<Option value="BLOCKED">Заблокирован</Option>
|
||||
<Option value="DELETED">Удален</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ flexGrow: 1 }} />
|
||||
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
block
|
||||
style={{ color: '#000' }}
|
||||
>
|
||||
<img
|
||||
src="/icons/drawer/reg.svg"
|
||||
alt="save"
|
||||
style={{ height: '18px', width: '18px' }}
|
||||
/>{' '}
|
||||
Сохранить изменения
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="Учетные записи" />
|
||||
<Header
|
||||
title="Учетные записи"
|
||||
additionalContent={
|
||||
<img
|
||||
src="./icons/header/add_2.svg"
|
||||
alt="add"
|
||||
style={{
|
||||
height: '18px',
|
||||
width: '18px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={showDrawer}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<ContentDrawer open={open} closeDrawer={closeDrawer}>
|
||||
{userEdit}
|
||||
</ContentDrawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user