descampsv/2024-DEV-BUT3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: descampsv:68cd3397d49ff577e1fefbf7bbd011f204c29ed3
Branches Tags
descampsv:main
..
compare: descampsv:18b7052259535f73f8cb11e18ea7bb44dc6fe6e9
Branches Tags
descampsv:main

No commits in common. "68cd3397d49ff577e1fefbf7bbd011f204c29ed3" and "18b7052259535f73f8cb11e18ea7bb44dc6fe6e9" have entirely different histories.
68cd3397d4 ... 18b7052259

14 changed files with 90 additions and 189 deletions
Show Stats Expand all files Collapse all files

BIN
.vs/2024-DEV-BUT3/v17/.wsuo
View File

Binary file not shown.

BIN
.vs/slnx.sqlite
View File

Binary file not shown.

26
package-lock.json generated
View File

@ -16,7 +16,7 @@
"react": "^18.2.0",
"react-cookie": "^7.0.2",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.1"
"react-router-dom": "^6.21.3"
},
"devDependencies": {
"@playwright/test": "^1.42.1",
@ -990,9 +990,9 @@
}
},
"node_modules/@remix-run/router": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
"integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
"version": "1.14.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
"integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==",
"engines": {
"node": ">=14.0.0"
}
@ -5312,11 +5312,11 @@
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-router": {
"version": "6.23.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
"integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
"version": "6.21.3",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.3.tgz",
"integrity": "sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==",
"dependencies": {
"@remix-run/router": "1.16.1"
"@remix-run/router": "1.14.2"
},
"engines": {
"node": ">=14.0.0"
@ -5326,12 +5326,12 @@
}
},
"node_modules/react-router-dom": {
"version": "6.23.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
"integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
"version": "6.21.3",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.3.tgz",
"integrity": "sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==",
"dependencies": {
"@remix-run/router": "1.16.1",
"react-router": "6.23.1"
"@remix-run/router": "1.14.2",
"react-router": "6.21.3"
},
"engines": {
"node": ">=14.0.0"

2
package.json
View File

@ -22,7 +22,7 @@
"react": "^18.2.0",
"react-cookie": "^7.0.2",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.1"
"react-router-dom": "^6.21.3"
},
"devDependencies": {
"@playwright/test": "^1.42.1",

38
src/assets/styles/room-list.css
View File

@ -1,38 +0,0 @@
.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;
}

21
src/components/diagram.jsx
View File

@ -14,20 +14,15 @@ const Diagram = ({ data }) => {
return (
<div className="diagram-container">
<h2>Prix total par an</h2>
{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 className="label">{name}</div>
<div className="row" style={{ width: `${(scaledValue / scaledMaxValue) * 100}%` }}>
<div className="value">{value}</div>
</div>
<h2>Prix total par an</h2>
{diagramData.map(({ name, value }) => (
<div key={name} className="row-container">
<div className="label">{name}</div>
<div className="row" style={{ width: `${(value / maxValue) * 100}%` }}>
<div className="value">{value}</div>
</div>
);
})}
</div>
))}
</div>
);
};

20
src/components/item/ItemBox.jsx
View File

@ -3,14 +3,28 @@ import '../../assets/styles/modal.css'
import '../../assets/styles/itembox.css'
import FormUpdateItem from '../form/formUpdateItem';
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>
);
};

4
src/components/nav/Navbar.jsx
View File

@ -42,10 +42,10 @@ const Navbar = () => {
const items = [
<Menu.Item key="0">
<Link to="/logout">Login / Logout</Link>
<Link to="/">Menu Principal</Link>
</Menu.Item>,
<Menu.Item key="1" >
<Link to="/home">Menu Principal</Link>
<Link to="/home">Home</Link>
</Menu.Item>,
<Menu.Item key="2" >
<Link to="/items">Tous les articles</Link>

11
src/components/parts/characteristic.jsx
View File

@ -1,11 +0,0 @@
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
View File

@ -1,11 +0,0 @@
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
View File

@ -1,45 +0,0 @@
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>
);
};

55
src/components/rooms/room-list.jsx
View File

@ -1,9 +1,17 @@
import React, { useState, useEffect } from "react";
import '../../assets/styles/room-list.css'
import { RoomBox } from '../../components/rooms/roomBox'
import { formatRoomStats } from "../../api/room";
import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
import { ItemBox } from './ItemBox';
import { Space, DatePicker, Row, Col, Select, Input, InputNumber } from 'antd';
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
const chunkArray = (arr, size) => {
const chunkedArr = [];
@ -14,32 +22,25 @@ const chunkArray = (arr, size) => {
};
// Composant d'affichage de la page
export const RoomList = ({ statsParam, onRoomClick }) => {
const [rooms, setRooms] = useState([]);
const [selectedRoom, setSelectedRoom] = useState('all');
export const RoomList = (roomsParam) => {
const [rooms, setRooms] = useState([]);
const [selectedRoom, setSelectedRoom] = useState('all');
useEffect(() => {
if (statsParam.rooms) {
console.log(statsParam.rooms)
let formatedStats = formatRoomStats(statsParam)
setRooms(formatedStats.rooms)
}
}, [statsParam]);
setRooms(roomsParam)
}, [roomsParam]);
const handleRoomChange = (value) => {
setSelectedRoom(value);
};
const handleRoomClick = (roomId) => {
onRoomClick(roomId);
};
return (
<div>
<h2>Liste des chambres</h2>
<div className="list-container">
{rooms && rooms.map((room) => (
<RoomBox room={room} key={room._id} onRoomClick={handleRoomClick} />
))}
</div>
</div>
);
return (
<div className="list-container">
<div className="room-list">
{rooms.forEach((room) => {
<roomB
}) }
</div>
</div>
);
};

27
src/components/rooms/roomBox.jsx
View File

@ -1,19 +1,22 @@
import React from 'react';
import '../../assets/styles/room-list.css';
import { Description } from '../parts/description';
import { Characteristic } from '../parts/characteristic';
import React, { useEffect, useState } from 'react';
import '../../assets/styles/itembox.css'
import { } from '../item/ItemBox'
export const RoomBox = ({ room, onRoomClick }) => {
const handleBoxClick = () => {
onRoomClick(room._id);
};
// Composant Détails du Produit
export const RoomBox = ({ name, itemCount, roomPrice, _id }) => {
const [roomData, setRoomData] = useState();
useEffect(() => {
setRoomData({name, itemCount, roomPrice, _id})
}, [name, itemCount, roomPrice, _id]);
return (
<div className="room-details" onClick={handleBoxClick}>
<Description title={room?.name}>
<Characteristic label="Nombre d'articles" value={room?.items_count || "N/A"} />
<Characteristic label="Prix total" value={room?.room_price || "N/A"} />
<div className="product-details" >
<Description title={roomData.name} >
<Characteristic label="Nombre d'articles" value={roomData.itemCount} />
<Characteristic label="Prix total" value={roomData.roomPrice} />
</Description>
</div>
);

19
src/pages/rooms.jsx
View File

@ -2,24 +2,21 @@ import React, { useEffect, useState } from 'react';
import '../assets/styles/room-page.css'
import { useAuth } from "../hooks";
import { getRoomStats } from "../api/room";
import { formatRoomStats, getRooms, getRoomStats } from "../api/room";
import { usePageTitle } from '../hooks/page-title-context';
import RoomStats from '../components/rooms/room-stats';
import { RoomList } from '../components/rooms/room-list';
import { RoomDetail } from '../components/rooms/room-detail';
export const Rooms = () => {
const { user } = useAuth();
const { setPageTitle } = usePageTitle();
const [stats, setStats] = useState({});
const [selectedRoom, setSelectedRoom] = useState();
// Mettre à jour le titre de la page dans le contexte
useEffect(() => {
setPageTitle("Toutes les rooms :");
}, [setPageTitle]);
useEffect(() => {
const fetchData = async () => {
const roomsStatsResponse = await getRoomStats();
@ -29,24 +26,20 @@ export const Rooms = () => {
fetchData();
}, []);
const handleRoomClick = (roomId) => {
console.log('Clicked room ID:', roomId);
setSelectedRoom(roomId);
};
return (
<div className="manContainer">
<div className="topContainer">
<div className="statsContainer">
<RoomStats statsParam={stats} />
<RoomStats statsParam={stats} />
</div>
<div className="listContainer">
<RoomList statsParam={stats} onRoomClick={handleRoomClick}></RoomList>
<div className="listContainer">
</div>
</div>
<div className="detailContainer">
<RoomDetail selectedRoom={selectedRoom} onBack={handleRoomClick}></RoomDetail>
<RoomStats statsParam={stats} />
</div>
</div>
);