Skip to content

Commit 9668e5b

Browse files
Frnn4268Frnn4268
authored
Merge pull request #174 from Frnn4268/Frnn
Adding new VehiclesHistory.jsx components
2 parents 7425312 + dcc6aa9 commit 9668e5b

File tree

6 files changed

+179
-142
lines changed

6 files changed

+179
-142
lines changed

‎frontend/components/vehicleHistory/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/vehicleHistory/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>
11+
{children}
12+
</Layout.Content>
13+
</Layout>
14+
);
15+
16+
export default VehiclesLayout;

‎frontend/components/vehicleHistory/VehiclesTable.jsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import { Table, Tag } from 'antd';
3+
4+
const VehiclesTable = ({ vehiclesHistory, typeColorMap, colorColorMap, getRandomColor }) => {
5+
const columns = [
6+
{
7+
title: 'ID',
8+
dataIndex: 'id',
9+
key: 'id',
10+
},
11+
{
12+
title: 'Placa del vehículo',
13+
dataIndex: 'license_plate',
14+
key: 'license_plate',
15+
},
16+
{
17+
title: 'Tipo de Vehículo',
18+
dataIndex: 'type',
19+
key: 'type',
20+
render: (type) => (
21+
<Tag color={typeColorMap[type]}>{type}</Tag>
22+
),
23+
},
24+
{
25+
title: 'Marca del vehículo',
26+
dataIndex: 'brand',
27+
key: 'brand',
28+
},
29+
{
30+
title: 'Color del vehículo',
31+
dataIndex: 'color',
32+
key: 'color',
33+
render: (color) => (
34+
<Tag color={colorColorMap[color]}>{color}</Tag>
35+
),
36+
},
37+
{
38+
title: 'Nombre del cliente',
39+
dataIndex: 'firstname_owner',
40+
key: 'firstname_owner',
41+
},
42+
{
43+
title: 'Apellido del cliente',
44+
dataIndex: 'lastname_owner',
45+
key: 'lastname_owner',
46+
},
47+
{
48+
title: 'Número de teléfono del cliente',
49+
dataIndex: 'phone_number',
50+
key: 'phone_number',
51+
render: (phone_number, record) => (
52+
<Tag color={record.phone_number_color}>{phone_number}</Tag>
53+
),
54+
},
55+
];
56+
57+
return (
58+
<Table
59+
style={{ width: '94.75%', marginLeft: '75px' }}
60+
dataSource={vehiclesHistory}
61+
columns={columns}
62+
rowKey="id"
63+
pagination={{
64+
pageSize: 12,
65+
showSizeChanger: false,
66+
pageSizeOptions: ['5', '10', '20'],
67+
showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} filas`,
68+
}}
69+
/>
70+
);
71+
};
72+
73+
export default VehiclesTable;

‎frontend/src/css/VehiclesHistory.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@
99
font-weight: bold;
1010
font-family: 'Poppins', sans-serif;
1111
margin: 10px;
12+
margin-left: 82px;
1213
}

‎frontend/src/pages/income/ParkingPriceComponent.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// ParkingPriceComponent.jsx
21
import React, { useState, useEffect } from 'react';
32
import { Row, Col, Layout, Card, Typography, message, Form } from 'antd';
43
import moment from 'moment';

‎frontend/src/pages/vehicle/VehiclesHistory.jsx

Lines changed: 76 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,94 @@
11
import React, { useEffect, useState } from "react";
2-
import { Layout, Table, Typography, Tag } from 'antd';
2+
import { Layout, Typography } from 'antd';
33

4-
import TopMenu from '../dashboard/TopMenu.jsx';
5-
import LeftMenu from '../dashboard/LeftMenu.jsx';
4+
import VehiclesHeader from '../../../components/vehicleHistory/VehiclesHeader.jsx';
5+
import VehiclesLayout from '../../../components/vehicleHistory/VehiclesLayout';
6+
import VehiclesTable from '../../../components/vehicleHistory/VehiclesTable';
67

78
import '../../css/DashboardMenu.css';
89
import '../../css/VehiclesHistory.css';
910

10-
const { Header } = Layout;
11-
1211
const VehiclesHistory = () => {
13-
const [vehiclesHistory, setVehiclesHistory] = useState([]);
14-
15-
useEffect(() => {
16-
fetchVehiclesHistory();
17-
}, []);
12+
const [vehiclesHistory, setVehiclesHistory] = useState([]);
1813

19-
const fetchVehiclesHistory = async () => {
20-
try {
21-
const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/parking-space`);
22-
if (response.ok) {
23-
const data = await response.json();
14+
useEffect(() => {
15+
fetchVehiclesHistory();
16+
}, []);
2417

25-
const mappedData = data.parkingSpaces.map(space => ({
26-
id: space.id,
27-
firstname_owner: space.customer.firstname_owner,
28-
lastname_owner: space.customer.lastname_owner,
29-
phone_number: space.customer.phone_number,
30-
license_plate: space.vehicle.license_plate,
31-
brand: space.vehicle.brand,
32-
type: space.vehicle.type,
33-
color: space.vehicle.color,
34-
}));
18+
const fetchVehiclesHistory = async () => {
19+
try {
20+
const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/parking-space`);
21+
if (response.ok) {
22+
const data = await response.json();
3523

36-
// Assign random colors to phone numbers
37-
mappedData.forEach(item => {
38-
item.phone_number_color = getRandomColor();
39-
});
24+
const mappedData = data.parkingSpaces.map(space => ({
25+
id: space.id,
26+
firstname_owner: space.customer.firstname_owner,
27+
lastname_owner: space.customer.lastname_owner,
28+
phone_number: space.customer.phone_number,
29+
license_plate: space.vehicle.license_plate,
30+
brand: space.vehicle.brand,
31+
type: space.vehicle.type,
32+
color: space.vehicle.color,
33+
}));
4034

41-
setVehiclesHistory(mappedData);
42-
} else {
43-
console.error('Error getting parking spaces');
44-
}
45-
} catch (error) {
46-
console.error(error);
47-
}
48-
};
35+
// Assign random colors to phone numbers
36+
mappedData.forEach(item => {
37+
item.phone_number_color = getRandomColor();
38+
});
4939

50-
const getRandomColor = () => {
51-
const colors = ['blue', 'red', 'yellow', 'green', 'purple', 'orange', 'gray', 'cyan', 'black', 'brown'];
52-
return colors[Math.floor(Math.random() * colors.length)];
53-
};
40+
setVehiclesHistory(mappedData);
41+
} else {
42+
console.error('Error getting parking spaces');
43+
}
44+
} catch (error) {
45+
console.error(error);
46+
}
47+
};
5448

55-
const typeColorMap = {
56-
SUV: 'blue',
57-
Pickup: 'red',
58-
Hatchback: 'yellow',
59-
Crossover: 'green',
60-
Convertible: 'purple',
61-
Sedan: 'orange',
62-
Coupe: 'gray',
63-
Minivan: 'cyan',
64-
Otro: 'magenta'
65-
};
49+
const getRandomColor = () => {
50+
const colors = ['blue', 'red', 'yellow', 'green', 'purple', 'orange', 'gray', 'cyan', 'black', 'brown'];
51+
return colors[Math.floor(Math.random() * colors.length)];
52+
};
6653

67-
const colorColorMap = {
68-
Rojo: 'volcano',
69-
Azul: 'geekblue',
70-
Negro: 'black',
71-
Blanco: 'lightgray',
72-
Verde: 'green',
73-
Amarillo: 'gold',
74-
Otro: 'cyan'
75-
};
54+
const typeColorMap = {
55+
SUV: 'blue',
56+
Pickup: 'red',
57+
Hatchback: 'yellow',
58+
Crossover: 'green',
59+
Convertible: 'purple',
60+
Sedan: 'orange',
61+
Coupe: 'gray',
62+
Minivan: 'cyan',
63+
Otro: 'magenta'
64+
};
7665

77-
const columns = [
78-
{
79-
title: 'ID',
80-
dataIndex: 'id',
81-
key: 'id',
82-
},
83-
{
84-
title: 'Placa del vehículo',
85-
dataIndex: 'license_plate',
86-
key: 'license_plate',
87-
},
88-
{
89-
title: 'Tipo de Vehículo',
90-
dataIndex: 'type',
91-
key: 'type',
92-
render: (type) => (
93-
<Tag color={typeColorMap[type]}>{type}</Tag>
94-
),
95-
},
96-
{
97-
title: 'Marca del vehículo',
98-
dataIndex: 'brand',
99-
key: 'brand',
100-
},
101-
{
102-
title: 'Color del vehículo',
103-
dataIndex: 'color',
104-
key: 'color',
105-
render: (color) => (
106-
<Tag color={colorColorMap[color]}>{color}</Tag>
107-
),
108-
},
109-
{
110-
title: 'Nombre del cliente',
111-
dataIndex: 'firstname_owner',
112-
key: 'firstname_owner',
113-
},
114-
{
115-
title: 'Apellido del cliente',
116-
dataIndex: 'lastname_owner',
117-
key: 'lastname_owner',
118-
},
119-
{
120-
title: 'Número de teléfono del cliente',
121-
dataIndex: 'phone_number',
122-
key: 'phone_number',
123-
render: (phone_number, record) => (
124-
<Tag color={record.phone_number_color}>{phone_number}</Tag>
125-
),
126-
},
127-
];
66+
const colorColorMap = {
67+
Rojo: 'volcano',
68+
Azul: 'geekblue',
69+
Negro: 'black',
70+
Blanco: 'lightgray',
71+
Verde: 'green',
72+
Amarillo: 'gold',
73+
Otro: 'cyan'
74+
};
12875

129-
return (
130-
<Layout>
131-
<Header className='home-header-dashboard'>
132-
<TopMenu />
133-
</Header>
134-
<Layout>
135-
<Layout.Sider>
136-
<LeftMenu />
137-
</Layout.Sider>
138-
<Layout.Content className='layout-content-vehicle-history'>
139-
<Typography.Title className='table-title-vehicle-history' level={2}>
140-
Historial de Vehículos
141-
</Typography.Title>
142-
<Table
143-
dataSource={vehiclesHistory}
144-
columns={columns}
145-
rowKey="id"
146-
pagination={{
147-
pageSize: 11,
148-
showSizeChanger: false,
149-
pageSizeOptions: ['5', '10', '20'],
150-
showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} filas`,
151-
}}
152-
/>
153-
</Layout.Content>
154-
</Layout>
155-
</Layout>
156-
)
76+
return (
77+
<Layout>
78+
<VehiclesHeader />
79+
<VehiclesLayout>
80+
<Typography.Title className='table-title-vehicle-history' level={2}>
81+
Historial de Vehículos
82+
</Typography.Title>
83+
<VehiclesTable
84+
vehiclesHistory={vehiclesHistory}
85+
typeColorMap={typeColorMap}
86+
colorColorMap={colorColorMap}
87+
getRandomColor={getRandomColor}
88+
/>
89+
</VehiclesLayout>
90+
</Layout>
91+
);
15792
}
15893

159-
export default VehiclesHistory;
94+
export default VehiclesHistory;

0 commit comments

Comments
 (0)