room list and create room
This commit is contained in:
parent
35b6d419e1
commit
4985dd9ec2
Binary file not shown.
BIN
.vs/slnx.sqlite
BIN
.vs/slnx.sqlite
Binary file not shown.
26
package-lock.json
generated
26
package-lock.json
generated
@ -16,7 +16,7 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-cookie": "^7.0.2",
|
"react-cookie": "^7.0.2",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.21.3"
|
"react-router-dom": "^6.23.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@playwright/test": "^1.42.1",
|
"@playwright/test": "^1.42.1",
|
||||||
@ -990,9 +990,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@remix-run/router": {
|
"node_modules/@remix-run/router": {
|
||||||
"version": "1.14.2",
|
"version": "1.16.1",
|
||||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
|
||||||
"integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==",
|
"integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
}
|
}
|
||||||
@ -5312,11 +5312,11 @@
|
|||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||||
},
|
},
|
||||||
"node_modules/react-router": {
|
"node_modules/react-router": {
|
||||||
"version": "6.21.3",
|
"version": "6.23.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
|
||||||
"integrity": "sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==",
|
"integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@remix-run/router": "1.14.2"
|
"@remix-run/router": "1.16.1"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
@ -5326,12 +5326,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-router-dom": {
|
"node_modules/react-router-dom": {
|
||||||
"version": "6.21.3",
|
"version": "6.23.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
|
||||||
"integrity": "sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==",
|
"integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@remix-run/router": "1.14.2",
|
"@remix-run/router": "1.16.1",
|
||||||
"react-router": "6.21.3"
|
"react-router": "6.23.1"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
|
@ -22,7 +22,7 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-cookie": "^7.0.2",
|
"react-cookie": "^7.0.2",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.21.3"
|
"react-router-dom": "^6.23.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@playwright/test": "^1.42.1",
|
"@playwright/test": "^1.42.1",
|
||||||
|
38
src/assets/styles/room-list.css
Normal file
38
src/assets/styles/room-list.css
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
.list-container {
|
||||||
|
width: 100%;
|
||||||
|
max-height:500px;
|
||||||
|
overflow-y: auto; /* Activer le défilement vertical si nécessaire */
|
||||||
|
padding: 20px; /* Espace intérieur de la liste */
|
||||||
|
}
|
||||||
|
|
||||||
|
.room-details {
|
||||||
|
width: 100%; /* Largeur de chaque boîte */
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px; /* Espace entre chaque boîte */
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.room-details:hover {
|
||||||
|
transform: translateY(-5px); /* Effet d'élévation au survol */
|
||||||
|
}
|
||||||
|
|
||||||
|
.room-details .title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.room-details .characteristic {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.room-details .label {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.room-details .value {
|
||||||
|
color: #666;
|
||||||
|
}
|
@ -15,14 +15,19 @@ const Diagram = ({ data }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="diagram-container">
|
<div className="diagram-container">
|
||||||
<h2>Prix total par an</h2>
|
<h2>Prix total par an</h2>
|
||||||
{diagramData.map(({ name, value }) => (
|
{diagramData.map(({ name, value }) => {
|
||||||
|
// Appliquer l'échelle logarithmique à la valeur
|
||||||
|
const scaledValue = Math.log(value + 1); // Ajouter 1 pour éviter le logarithme de zéro
|
||||||
|
const scaledMaxValue = Math.log(maxValue + 1);
|
||||||
|
return (
|
||||||
<div key={name} className="row-container">
|
<div key={name} className="row-container">
|
||||||
<div className="label">{name}</div>
|
<div className="label">{name}</div>
|
||||||
<div className="row" style={{ width: `${(value / maxValue) * 100}%` }}>
|
<div className="row" style={{ width: `${(scaledValue / scaledMaxValue) * 100}%` }}>
|
||||||
<div className="value">{value}</div>
|
<div className="value">{value}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -3,28 +3,14 @@ import '../../assets/styles/modal.css'
|
|||||||
import '../../assets/styles/itembox.css'
|
import '../../assets/styles/itembox.css'
|
||||||
import FormUpdateItem from '../form/formUpdateItem';
|
import FormUpdateItem from '../form/formUpdateItem';
|
||||||
import {Image } from '../parts/image'
|
import {Image } from '../parts/image'
|
||||||
|
import {Description } from '../parts/description'
|
||||||
|
import {Characteristic } from '../parts/characteristic'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Composant Description
|
|
||||||
const Description = ({ title, children }) => {
|
|
||||||
return (
|
|
||||||
<div className="description">
|
|
||||||
<h2 className="text-ellipsis">{title}</h2>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Composant Caractéristique
|
|
||||||
const Characteristic = ({ label, value }) => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="characteristic">
|
|
||||||
<strong>{label}:</strong> {value}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -42,10 +42,10 @@ const Navbar = () => {
|
|||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
<Menu.Item key="0">
|
<Menu.Item key="0">
|
||||||
<Link to="/">Menu Principal</Link>
|
<Link to="/logout">Login / Logout</Link>
|
||||||
</Menu.Item>,
|
</Menu.Item>,
|
||||||
<Menu.Item key="1" >
|
<Menu.Item key="1" >
|
||||||
<Link to="/home">Home</Link>
|
<Link to="/home">Menu Principal</Link>
|
||||||
</Menu.Item>,
|
</Menu.Item>,
|
||||||
<Menu.Item key="2" >
|
<Menu.Item key="2" >
|
||||||
<Link to="/items">Tous les articles</Link>
|
<Link to="/items">Tous les articles</Link>
|
||||||
|
11
src/components/parts/characteristic.jsx
Normal file
11
src/components/parts/characteristic.jsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
// Composant Caractéristique
|
||||||
|
export const Characteristic = ({ label, value }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="characteristic">
|
||||||
|
<strong>{label}:</strong> {value}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
11
src/components/parts/description.jsx
Normal file
11
src/components/parts/description.jsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
// Composant Description
|
||||||
|
export const Description = ({ title, children }) => {
|
||||||
|
return (
|
||||||
|
<div className="description">
|
||||||
|
<h2 className="text-ellipsis">{title}</h2>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
45
src/components/rooms/room-detail.jsx
Normal file
45
src/components/rooms/room-detail.jsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { FormCreateRoom } from '../../components/form/formCreateRoom';
|
||||||
|
//import { RoomUpdateForm } from './RoomUpdateForm';
|
||||||
|
|
||||||
|
export const RoomDetail = ({ selectedRoom, onCreateFormSubmit, onUpdateFormSubmit, onBack }) => {
|
||||||
|
const [isUpdateFormVisible, setIsUpdateFormVisible] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedRoom) {
|
||||||
|
setIsUpdateFormVisible(true)
|
||||||
|
}
|
||||||
|
}, [selectedRoom]);
|
||||||
|
|
||||||
|
|
||||||
|
// Afficher le formulaire de mise ŕ jour lorsqu'une chambre est sélectionnée
|
||||||
|
const handleRoomClick = () => {
|
||||||
|
setIsUpdateFormVisible(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Afficher le formulaire de création lorsqu'on revient en arričre
|
||||||
|
const handleBackClick = () => {
|
||||||
|
setIsUpdateFormVisible(false);
|
||||||
|
onBack(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="room-detail">
|
||||||
|
{isUpdateFormVisible
|
||||||
|
? (
|
||||||
|
<div>
|
||||||
|
<h2>Modifier une chambre</h2>
|
||||||
|
|
||||||
|
<FormCreateRoom onSubmit={onCreateFormSubmit} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
: (
|
||||||
|
<div>
|
||||||
|
<h2>Ajouter une chambre</h2>
|
||||||
|
<FormCreateRoom onSubmit={onCreateFormSubmit} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -1,17 +1,9 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
|
import '../../assets/styles/room-list.css'
|
||||||
import { ItemBox } from './ItemBox';
|
import { RoomBox } from '../../components/rooms/roomBox'
|
||||||
import { Space, DatePicker, Row, Col, Select, Input, InputNumber } from 'antd';
|
import { formatRoomStats } from "../../api/room";
|
||||||
import '../../assets/styles/item-page.css'
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const { RangePicker } = DatePicker;
|
|
||||||
const { Option } = Select;
|
|
||||||
|
|
||||||
const itemsPerPage = 8; // Nombre total d'items par page
|
|
||||||
const itemsPerRow = 4; // Nombre d'items par rangée
|
|
||||||
|
|
||||||
// Fonction pour diviser le tableau d'items en rangées
|
// Fonction pour diviser le tableau d'items en rangées
|
||||||
const chunkArray = (arr, size) => {
|
const chunkArray = (arr, size) => {
|
||||||
const chunkedArr = [];
|
const chunkedArr = [];
|
||||||
@ -22,25 +14,32 @@ const chunkArray = (arr, size) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Composant d'affichage de la page
|
// Composant d'affichage de la page
|
||||||
export const RoomList = (roomsParam) => {
|
export const RoomList = ({ statsParam, onRoomClick }) => {
|
||||||
const [rooms, setRooms] = useState([]);
|
const [rooms, setRooms] = useState([]);
|
||||||
const [selectedRoom, setSelectedRoom] = useState('all');
|
const [selectedRoom, setSelectedRoom] = useState('all');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setRooms(roomsParam)
|
if (statsParam.rooms) {
|
||||||
}, [roomsParam]);
|
console.log(statsParam.rooms)
|
||||||
|
let formatedStats = formatRoomStats(statsParam)
|
||||||
|
setRooms(formatedStats.rooms)
|
||||||
|
}
|
||||||
|
}, [statsParam]);
|
||||||
|
|
||||||
const handleRoomChange = (value) => {
|
|
||||||
setSelectedRoom(value);
|
const handleRoomClick = (roomId) => {
|
||||||
|
onRoomClick(roomId);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Liste des chambres</h2>
|
||||||
<div className="list-container">
|
<div className="list-container">
|
||||||
<div className="room-list">
|
{rooms && rooms.map((room) => (
|
||||||
{rooms.forEach((room) => {
|
<RoomBox room={room} key={room._id} onRoomClick={handleRoomClick} />
|
||||||
<roomB
|
))}
|
||||||
}) }
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
@ -1,22 +1,19 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React from 'react';
|
||||||
import '../../assets/styles/itembox.css'
|
import '../../assets/styles/room-list.css';
|
||||||
import { } from '../item/ItemBox'
|
import { Description } from '../parts/description';
|
||||||
|
import { Characteristic } from '../parts/characteristic';
|
||||||
|
|
||||||
|
export const RoomBox = ({ room, onRoomClick }) => {
|
||||||
|
|
||||||
// Composant Détails du Produit
|
const handleBoxClick = () => {
|
||||||
export const RoomBox = ({ name, itemCount, roomPrice, _id }) => {
|
onRoomClick(room._id);
|
||||||
const [roomData, setRoomData] = useState();
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setRoomData({name, itemCount, roomPrice, _id})
|
|
||||||
}, [name, itemCount, roomPrice, _id]);
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="product-details" >
|
<div className="room-details" onClick={handleBoxClick}>
|
||||||
<Description title={roomData.name} >
|
<Description title={room?.name}>
|
||||||
<Characteristic label="Nombre d'articles" value={roomData.itemCount} />
|
<Characteristic label="Nombre d'articles" value={room?.items_count || "N/A"} />
|
||||||
<Characteristic label="Prix total" value={roomData.roomPrice} />
|
<Characteristic label="Prix total" value={room?.room_price || "N/A"} />
|
||||||
</Description>
|
</Description>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -2,21 +2,24 @@ import React, { useEffect, useState } from 'react';
|
|||||||
import '../assets/styles/room-page.css'
|
import '../assets/styles/room-page.css'
|
||||||
|
|
||||||
import { useAuth } from "../hooks";
|
import { useAuth } from "../hooks";
|
||||||
import { formatRoomStats, getRooms, getRoomStats } from "../api/room";
|
import { getRoomStats } from "../api/room";
|
||||||
import { usePageTitle } from '../hooks/page-title-context';
|
import { usePageTitle } from '../hooks/page-title-context';
|
||||||
import RoomStats from '../components/rooms/room-stats';
|
import RoomStats from '../components/rooms/room-stats';
|
||||||
|
import { RoomList } from '../components/rooms/room-list';
|
||||||
|
import { RoomDetail } from '../components/rooms/room-detail';
|
||||||
|
|
||||||
export const Rooms = () => {
|
export const Rooms = () => {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const { setPageTitle } = usePageTitle();
|
const { setPageTitle } = usePageTitle();
|
||||||
const [stats, setStats] = useState({});
|
const [stats, setStats] = useState({});
|
||||||
|
const [selectedRoom, setSelectedRoom] = useState();
|
||||||
|
|
||||||
|
|
||||||
// Mettre à jour le titre de la page dans le contexte
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setPageTitle("Toutes les rooms :");
|
setPageTitle("Toutes les rooms :");
|
||||||
}, [setPageTitle]);
|
}, [setPageTitle]);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
const roomsStatsResponse = await getRoomStats();
|
const roomsStatsResponse = await getRoomStats();
|
||||||
@ -26,6 +29,10 @@ export const Rooms = () => {
|
|||||||
fetchData();
|
fetchData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const handleRoomClick = (roomId) => {
|
||||||
|
console.log('Clicked room ID:', roomId);
|
||||||
|
setSelectedRoom(roomId);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="manContainer">
|
<div className="manContainer">
|
||||||
@ -35,11 +42,11 @@ export const Rooms = () => {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="listContainer">
|
<div className="listContainer">
|
||||||
|
<RoomList statsParam={stats} onRoomClick={handleRoomClick}></RoomList>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="detailContainer">
|
<div className="detailContainer">
|
||||||
<RoomStats statsParam={stats} />
|
<RoomDetail selectedRoom={selectedRoom} onBack={handleRoomClick}></RoomDetail>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user