From 22ec7f8fdd2e72242043579583b77c4989478762 Mon Sep 17 00:00:00 2001 From: catanese Date: Mon, 13 May 2024 19:42:49 +0200 Subject: [PATCH] register + deletions + image request changes --- src/api/item.js | 42 +++++++++++++++++ src/api/room.js | 50 ++++++++++++++++++++ src/assets/styles/item-page.css | 3 +- src/assets/styles/itembox.css | 31 +++++++++++++ src/components/authenticated.jsx | 3 +- src/components/form/formCreateItem.jsx | 17 +++---- src/components/form/formCreateRoom.jsx | 14 ++---- src/components/form/formUpdateItem.jsx | 16 ++----- src/components/form/formUpdateRoom.jsx | 27 ++++++----- src/components/item/ItemBox.jsx | 64 +++++++++++++++----------- src/components/nav/Navbar.jsx | 15 +++--- src/components/parts/image.jsx | 10 ++-- src/components/rooms/room-detail.jsx | 2 +- src/components/rooms/roomBox.jsx | 3 +- src/pages/authenticated/login.jsx | 7 ++- src/pages/authenticated/register.jsx | 3 +- 16 files changed, 220 insertions(+), 87 deletions(-) diff --git a/src/api/item.js b/src/api/item.js index ba3a149..e5fb835 100644 --- a/src/api/item.js +++ b/src/api/item.js @@ -24,3 +24,45 @@ export const getItems = async () => { return error.response.data; } }; + +export const createItem = async (values) => { + try { + const response = await axios.post( + `${import.meta.env.VITE_API_URL}/item`, + values, + ); + console.log(response.data); + return response; + + } catch (error) { + console.error(error); + } +} + + +export const updateItem = async (_id, values) => { + try { + const response = await axios.put( + `${import.meta.env.VITE_API_URL}/item/${_id}`, + values, + ); + console.log(response.data); + return response; + + } catch (error) { + console.error(error); + } +} + +export const deleteItem = async (_id) => { + try { + const response = await axios.delete( + `${import.meta.env.VITE_API_URL}/item/${_id}` + ); + console.log(response.data); + return response; + + } catch (error) { + console.error(error); + } +} \ No newline at end of file diff --git a/src/api/room.js b/src/api/room.js index 4fbb4bd..4db5f95 100644 --- a/src/api/room.js +++ b/src/api/room.js @@ -26,6 +26,56 @@ export const getRooms = async () => { } }; +export const createRoom = async (values) => { + try { + const response = await axios.post( + `${import.meta.env.VITE_API_URL}/room`, + values, + ); + console.log(response.data); + return response; + } catch (error) { + console.error(error); + } +} + +export const updateRoom = async(_id, values) => { + try { + const response = await axios.put( + `${import.meta.env.VITE_API_URL}/room/${_id}`, + values, + ); + console.log(response.data); + return response; + } catch (error) { + console.error(error); + } +} + +export const deleteRoom = async (_id) => { + try { + const itemsResponse = await axios.get( + `${import.meta.env.VITE_API_URL}/item`, + ); + const items = itemsResponse.data; + items?.forEach(async (item) => { + await axios.delete( + `${import.meta.env.VITE_API_URL}/item/${item._id}`, + ); + }) + + const response = await axios.delete( + `${import.meta.env.VITE_API_URL}/room/${_id}` + ); + console.log(response.data); + return response; + + } catch (error) { + console.error(error); + } +} + + export const getRoomStats = async () => { try { const response = await axios.get("/room/stats"); diff --git a/src/assets/styles/item-page.css b/src/assets/styles/item-page.css index 24ea94e..bd1babf 100644 --- a/src/assets/styles/item-page.css +++ b/src/assets/styles/item-page.css @@ -78,8 +78,7 @@ } .item-list { - width: 100%; - max-width:50vw; + width: 50vw; } .pagination { diff --git a/src/assets/styles/itembox.css b/src/assets/styles/itembox.css index 9955900..2dc8ef9 100644 --- a/src/assets/styles/itembox.css +++ b/src/assets/styles/itembox.css @@ -57,3 +57,34 @@ .product-details button:hover { background-color: #0056b3; } + +.button-group { + margin-top: 10px; + display: flex; +} + +.edit-button, +.delete-button { + flex: 1; + padding: 10px 15px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.edit-button { + background-color: #007bff; + color: #fff; + margin-right: 10px; +} + +.delete-button { + background-color: #dc3545; + color: #fff; +} + + .edit-button:hover, + .delete-button:hover { + background-color: #0056b3; + } \ No newline at end of file diff --git a/src/components/authenticated.jsx b/src/components/authenticated.jsx index 3168c67..159e051 100644 --- a/src/components/authenticated.jsx +++ b/src/components/authenticated.jsx @@ -1,7 +1,8 @@ -import React from "react"; +import React, { useContext } from "react"; import { AuthenticationProvider } from "../contexts"; export const Authenticated = ({ children }) => { + return {children}; }; \ No newline at end of file diff --git a/src/components/form/formCreateItem.jsx b/src/components/form/formCreateItem.jsx index a87c0b2..6aea5e9 100644 --- a/src/components/form/formCreateItem.jsx +++ b/src/components/form/formCreateItem.jsx @@ -1,6 +1,9 @@ import React, { useState, useEffect } from "react"; import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd"; import axios from "axios"; +import { createItem } from '../../api/item' + + const { TextArea } = Input; const { Option } = Select; @@ -26,16 +29,10 @@ export const FormCreateItem = ({ onClose }) => { }, []); const onFinish = async (values) => { - try { - const response = await axios.post( - `${import.meta.env.VITE_API_URL}/item`, - values, - ); - console.log(response.data); - - } catch (error) { - console.error(error); - } + let response = await createItem(values); + if (response?.status >= 200 && response?.status < 300) { + window.location.reload(); + } }; return ( diff --git a/src/components/form/formCreateRoom.jsx b/src/components/form/formCreateRoom.jsx index a9b6c19..da2915b 100644 --- a/src/components/form/formCreateRoom.jsx +++ b/src/components/form/formCreateRoom.jsx @@ -1,20 +1,16 @@ import React from "react"; import { Form, Input, Button } from "antd"; + import axios from "axios"; export const FormCreateRoom = () => { const [form] = Form.useForm(); const onFinish = async (values) => { - try { - const response = await axios.post( - `${import.meta.env.VITE_API_URL}/room`, - values, - ); - console.log(response.data); - } catch (error) { - console.error(error); - } + let response = await createRoom(values); + if (response?.status >= 200 && response?.status < 300) { + window.location.reload(); + } }; return ( diff --git a/src/components/form/formUpdateItem.jsx b/src/components/form/formUpdateItem.jsx index 84d979e..bf79b86 100644 --- a/src/components/form/formUpdateItem.jsx +++ b/src/components/form/formUpdateItem.jsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd"; import axios from "axios"; import { getRooms } from "../../api/room"; -import { getItem } from "../../api/item"; +import { getItem, updateItem } from "../../api/item"; import moment from "moment"; const { Option } = Select; @@ -69,16 +69,10 @@ export const FormUpdateItem = ({ itemId, onClose }) => { }, [item, form]); const onFinish = async (values) => { - try { - const response = await axios.put( - `${import.meta.env.VITE_API_URL}/item/${item._id}`, - values, - ); - console.log(response.data); - - } catch (error) { - console.error(error); - } + let response = await updateItem(item._id, values); + if (response?.status >= 200 && response?.status < 300) { + window.location.reload(); + } }; const dateFormat = "YYYY-MM-DD"; diff --git a/src/components/form/formUpdateRoom.jsx b/src/components/form/formUpdateRoom.jsx index 021d255..ddeb497 100644 --- a/src/components/form/formUpdateRoom.jsx +++ b/src/components/form/formUpdateRoom.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import {getRoom } from '../../api/room' +import {getRoom, updateRoom, deleteRoom } from '../../api/room' import { Form, Input, Button } from "antd"; import axios from "axios"; @@ -26,20 +26,23 @@ export const FormUpdateRoom = ({_id}) => { } }, [room, form]); - const onFinish = async (values) => { - try { - const response = await axios.put( - `${import.meta.env.VITE_API_URL}/room/${_id}`, - values, - ); - console.log(response.data); - } catch (error) { - console.error(error); - } - }; + const onFinish = async (values) => { + let response = await updateRoom(_id, values); + if (response?.status >= 200 && response?.status < 300) { + window.location.reload(); + } + }; + + const onDelete = async () => { + let response = await deleteRoom(_id); + if (response?.status >= 200 && response?.status < 300) { + window.location.reload(); + } + } return (
+ { const [isModalOpen, setIsModalOpen] = useState(false); @@ -15,7 +17,14 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => { const closeModal = () => { setIsModalOpen(false); - }; + }; + + const onDelete = async () => { + let response = await deleteItem(_id); + if (response?.status >= 200 && response?.status < 300) { + window.location.reload(); + } + } let productname = brand + " " + model; let formatedPrice = price + "€"; @@ -23,30 +32,33 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => { let request = brand + " " + model; - return ( -
- - Product - - - - - {/* Bouton d'édition pour ouvrir la fenêtre modale */} - - - {/* Fenêtre modale */} - {isModalOpen && ( -
-
- - × - - - {console.log("item ID :" + _id)} - -
+ return ( +
+ + Product + + + + + {/* Boutons d'édition et de suppression */} +
+ + +
+ + {/* Fenêtre modale */} + {isModalOpen && ( +
+
+ + × + + + {console.log("item ID :" + _id)} + +
+
+ )}
- )} -
- ); + ); }; diff --git a/src/components/nav/Navbar.jsx b/src/components/nav/Navbar.jsx index 18fb182..8dbb0f6 100644 --- a/src/components/nav/Navbar.jsx +++ b/src/components/nav/Navbar.jsx @@ -26,16 +26,17 @@ function getItem(key, label) { const { SubMenu } = Menu; const Navbar = () => { - const [rooms, setRooms] = useState([]); + const [rooms, setRooms] = useState([]); + useEffect(() => { console.log("NAVBAR EFFECT"); isLoggedIn().then((user) => { - if (user !== "Unauthorized") { - getRooms().then((result) => { - setRooms(result); - }); - } + if (user !== "Unauthorized") { + getRooms().then((result) => { + setRooms(result); + }); + } }); }, []); @@ -57,7 +58,7 @@ const Navbar = () => { try { return ( { +export const Image = ({ src, alt, request }) => { const [cacheUrl, setCacheUrl] = useState(null); useEffect(() => { const fetchData = async () => { - let cachedUrl = localStorage.getItem(_id); + let cachedUrl = localStorage.getItem(request); if (!cachedUrl) { try { cachedUrl = await searchAndResizeImage(request); - localStorage.setItem(_id, cachedUrl); - console.log("Mise en cache de l'image avec l'ID : " + _id); + localStorage.setItem(request, cachedUrl); + console.log("Mise en cache de l'image avec la requête : " + request); } catch (error) { console.error("Erreur lors de la récupération de l'image : ", error); } @@ -21,7 +21,7 @@ export const Image = ({ src, alt, request, _id }) => { }; fetchData(); - }, [request, _id]); + }, [request]); if (src) { return {alt}; diff --git a/src/components/rooms/room-detail.jsx b/src/components/rooms/room-detail.jsx index 409de47..1c01afb 100644 --- a/src/components/rooms/room-detail.jsx +++ b/src/components/rooms/room-detail.jsx @@ -24,7 +24,7 @@ export const RoomDetail = ({
{isUpdateFormVisible ? (
-

Modifier une chambre (non fonctionnel)

+

Modifier une chambre

diff --git a/src/components/rooms/roomBox.jsx b/src/components/rooms/roomBox.jsx index f6f94ca..e93d943 100644 --- a/src/components/rooms/roomBox.jsx +++ b/src/components/rooms/roomBox.jsx @@ -6,7 +6,8 @@ import { Characteristic } from "../parts/characteristic"; export const RoomBox = ({ room, onRoomClick }) => { const handleBoxClick = () => { onRoomClick(room._id); - }; + }; + return (
diff --git a/src/pages/authenticated/login.jsx b/src/pages/authenticated/login.jsx index 41c6dbe..f958450 100644 --- a/src/pages/authenticated/login.jsx +++ b/src/pages/authenticated/login.jsx @@ -16,7 +16,11 @@ export const Login = () => { if (response && !response.success) { setError(response.error); } - }; + }; + + const onRegister = () => { + window.location.href = '/register' + } return (
@@ -36,6 +40,7 @@ export const Login = () => { onChange={(e) => setPassword(e.target.value)} /> +
); diff --git a/src/pages/authenticated/register.jsx b/src/pages/authenticated/register.jsx index af08a92..10ecf0c 100644 --- a/src/pages/authenticated/register.jsx +++ b/src/pages/authenticated/register.jsx @@ -21,7 +21,8 @@ export const Register = () => { return (
-

Register page

+

Register page

+

Password must include a capital letter, a digit and a symbol

{error &&

{error}

}