Skip to content

Commit 33a2af6

Browse files
Frnn4268Frnn4268
authored
Merge pull request #175 from Frnn4268/Frnn
Creating new components for Vehicles.jsx page
2 parents 9668e5b + 88ec78c commit 33a2af6

File tree

6 files changed

+370
-318
lines changed

6 files changed

+370
-318
lines changed

‎frontend/components/vehicle/VehiclesDrawer.jsx

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import React from 'react';
2+
import { Drawer, Form, Input, Select, Row, Col, Button } from 'antd';
3+
4+
const { Option } = Select;
5+
6+
const VehiclesDrawer = ({ drawerVisible, setDrawerVisible, form, onFinish }) => (
7+
<Drawer
8+
title="Editar vehículo"
9+
width={500}
10+
onClose={() => setDrawerVisible(false)}
11+
visible={drawerVisible}
12+
>
13+
<Form form={form} onFinish={onFinish}>
14+
<Row gutter={16}>
15+
<Col span={12}>
16+
<Form.Item
17+
label="Placa"
18+
name="license_plate"
19+
rules={[
20+
{
21+
required: true,
22+
message: '¡Por favor ingresa el número de placa!',
23+
},
24+
]}
25+
>
26+
<Input />
27+
</Form.Item>
28+
</Col>
29+
<Col span={12}>
30+
<Form.Item
31+
label="Tipo"
32+
name="type_plate"
33+
rules={[
34+
{
35+
required: true,
36+
message: '¡Por favor selecciona el tipo de placa!',
37+
},
38+
]}
39+
>
40+
<Select>
41+
<Option value="P">Particulares (P)</Option>
42+
<Option value="M">Mercantiles (M)</Option>
43+
<Option value="C">Comerciales (C)</Option>
44+
<Option value="O">Oficiales (O)</Option>
45+
<Option value="CD">Cuerpo diplomático, organismos, misiones y funcionarios internacionales (CD)</Option>
46+
<Option value="De emergencia">De emergencia</Option>
47+
<Option value="De aprendizaje">De aprendizaje</Option>
48+
</Select>
49+
</Form.Item>
50+
</Col>
51+
</Row>
52+
<Form.Item
53+
label="Tipo de Vehículo"
54+
name="type"
55+
rules={[
56+
{
57+
required: true,
58+
message: '¡Por favor ingresa el tipo de vehículo!',
59+
},
60+
]}
61+
>
62+
<Select>
63+
<Option value="SUV">SUV</Option>
64+
<Option value="Pickup">Pickup</Option>
65+
<Option value="Hatchback">Hatchback</Option>
66+
<Option value="Crossover">Crossover</Option>
67+
<Option value="Convertible">Convertible</Option>
68+
<Option value="Sedan">Sedan</Option>
69+
<Option value="Coupe">Coupe</Option>
70+
<Option value="Minivan">Minivan</Option>
71+
<Option value="Otro">Otro</Option>
72+
</Select>
73+
</Form.Item>
74+
<Row gutter={16}>
75+
<Col span={12}>
76+
<Form.Item
77+
label="Marca"
78+
name="brand"
79+
rules={[
80+
{
81+
required: true,
82+
message: '¡Por favor ingresa la marca del vehículo!',
83+
},
84+
]}
85+
>
86+
<Select>
87+
<Option value="Toyota">Toyota</Option>
88+
<Option value="Mitsubishi">Mitsubishi</Option>
89+
<Option value="Chevrolet">Chevrolet</Option>
90+
<Option value="Honda">Honda</Option>
91+
<Option value="Mazda">Mazda</Option>
92+
<Option value="Suzuki">Suzuki</Option>
93+
<Option value="Ford">Ford</Option>
94+
<Option value="KIA">KIA</Option>
95+
<Option value="Hyundai">Hyundai</Option>
96+
<Option value="Otro">Otro</Option>
97+
</Select>
98+
</Form.Item>
99+
</Col>
100+
<Col span={12}>
101+
<Form.Item
102+
label="Color"
103+
name="color"
104+
rules={[
105+
{
106+
required: true,
107+
message: '¡Por favor ingresa el color del vehículo!',
108+
},
109+
]}
110+
>
111+
<Select>
112+
<Option value="Rojo">Rojo</Option>
113+
<Option value="Azul">Azul</Option>
114+
<Option value="Negro">Negro</Option>
115+
<Option value="Blanco">Blanco</Option>
116+
<Option value="Verde">Verde</Option>
117+
<Option value="Amarillo">Amarillo</Option>
118+
<Option value="Otro">Otro</Option>
119+
</Select>
120+
</Form.Item>
121+
</Col>
122+
</Row>
123+
<Form.Item>
124+
<Button type="primary" htmlType="submit" style={{ textAlign: 'center' }}>
125+
Guardar cambios
126+
</Button>
127+
</Form.Item>
128+
</Form>
129+
</Drawer>
130+
);
131+
132+
export default VehiclesDrawer;

‎frontend/components/vehicle/VehiclesHeader.jsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { Layout } from 'antd';
3+
import TopMenu from '../../src/pages/dashboard/TopMenu.jsx';
4+
5+
const { Header } = Layout;
6+
7+
const VehiclesHeader = () => (
8+
<Header className='home-header-dashboard'>
9+
<TopMenu />
10+
</Header>
11+
);
12+
13+
export default VehiclesHeader;

‎frontend/components/vehicle/VehiclesLayout.jsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { Layout } from 'antd';
3+
import LeftMenu from '../../src/pages/dashboard/LeftMenu.jsx';
4+
5+
const VehiclesLayout = ({ children }) => (
6+
<Layout>
7+
<Layout.Sider>
8+
<LeftMenu />
9+
</Layout.Sider>
10+
<Layout.Content className='layout-content-vehicle'>
11+
{children}
12+
</Layout.Content>
13+
</Layout>
14+
);
15+
16+
export default VehiclesLayout;

‎frontend/components/vehicle/VehiclesTable.jsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
import { Table, Tag, Button, Space } from 'antd';
3+
import { DeleteOutlined, SyncOutlined } from '@ant-design/icons';
4+
5+
const VehiclesTable = ({ vehicles, handleUpdate, handleDelete, getRandomColor, typeColorMap, colorColorMap }) => {
6+
const columns = [
7+
{
8+
title: 'ID',
9+
dataIndex: 'id',
10+
key: 'id',
11+
},
12+
{
13+
title: 'Placa',
14+
dataIndex: 'license_plate',
15+
key: 'license_plate',
16+
},
17+
{
18+
title: 'Tipo de Vehículo',
19+
dataIndex: 'type',
20+
key: 'type',
21+
render: (type) => (
22+
<Tag color={typeColorMap[type]}>{type}</Tag>
23+
),
24+
},
25+
{
26+
title: 'Marca',
27+
dataIndex: 'brand',
28+
key: 'brand',
29+
render: (brand) => (
30+
<Tag color={getRandomColor()}>{brand}</Tag>
31+
),
32+
},
33+
{
34+
title: 'Color',
35+
dataIndex: 'color',
36+
key: 'color',
37+
render: (color) => (
38+
<Tag color={colorColorMap[color]}>{color}</Tag>
39+
),
40+
},
41+
{
42+
title: 'Acción',
43+
key: 'action',
44+
render: (_, record) => (
45+
<Space size="middle">
46+
<Button type="primary" icon={<SyncOutlined />} onClick={() => handleUpdate(record)}>Editar</Button>
47+
<Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.id)}>Eliminar</Button>
48+
</Space>
49+
),
50+
},
51+
];
52+
53+
return (
54+
<Table
55+
dataSource={vehicles}
56+
columns={columns}
57+
rowKey="id"
58+
pagination={{
59+
pageSize: 10,
60+
showSizeChanger: false,
61+
pageSizeOptions: ['5', '10', '20'],
62+
showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} filas`,
63+
}}
64+
/>
65+
);
66+
};
67+
68+
export default VehiclesTable;

‎frontend/components/vehicleHistory/VehiclesTable.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const VehiclesTable = ({ vehiclesHistory, typeColorMap, colorColorMap, getRandom
6161
columns={columns}
6262
rowKey="id"
6363
pagination={{
64-
pageSize: 12,
64+
pageSize: 11,
6565
showSizeChanger: false,
6666
pageSizeOptions: ['5', '10', '20'],
6767
showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} filas`,

0 commit comments

Comments
 (0)