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

register + deletions + image request changes

Browse Source
This commit is contained in:
Simon CATANESE 2024-05-13 19:42:49 +02:00
parent baf31f7959
commit 22ec7f8fdd
16 changed files with 220 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/api/item.js
View File

@ -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);
}
}

50
src/api/room.js
View File

@ -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");

3
src/assets/styles/item-page.css
View File

@ -78,8 +78,7 @@
}
.item-list {
width: 100%;
max-width:50vw;
width: 50vw;
}
.pagination {

31
src/assets/styles/itembox.css
View File

@ -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;
}

3
src/components/authenticated.jsx
View File

@ -1,7 +1,8 @@
import React from "react";
import React, { useContext } from "react";
import { AuthenticationProvider } from "../contexts";
export const Authenticated = ({ children }) => {
return <AuthenticationProvider>{children}</AuthenticationProvider>;
};

17
src/components/form/formCreateItem.jsx
View File

@ -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 (

14
src/components/form/formCreateRoom.jsx
View File

@ -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 (

16
src/components/form/formUpdateItem.jsx
View File

@ -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";

25
src/components/form/formUpdateRoom.jsx
View File

@ -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 (
<Form form={form} onFinish={onFinish}>
<button onClick={onDelete}> Supprimer </button>
<Form.Item
label="Room Name"
name="name"

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

@ -5,6 +5,8 @@ import FormUpdateItem from "../form/formUpdateItem";
import { Image } from "../parts/image";
import { Description } from "../parts/description";
import { Characteristic } from "../parts/characteristic";
import { deleteItem } from '../../api/item'
export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
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 (
<div className="product-details">
<Description title={productname}>
<Image request={request} _id={_id} alt="Product" />
<Characteristic label="Model" value={model} />
<Characteristic label="Brand" value={brand} />
<Characteristic label="Purchase Date" value={formatedDate} />
<Characteristic label="Price" value={formatedPrice} />
{/* Bouton d'édition pour ouvrir la fenêtre modale */}
<button onClick={openModal}>Edit</button>
</Description>
{/* Fenêtre modale */}
{isModalOpen && (
<div className="modal">
<div className="modal-content">
<span className="close" onClick={closeModal}>
&times;
</span>
<FormUpdateItem itemId={_id}>
{console.log("item ID :" + _id)}
</FormUpdateItem>
</div>
return (
<div className="product-details">
<Description title={productname}>
<Image request={request} alt="Product" />
<Characteristic label="Model" value={model} />
<Characteristic label="Brand" value={brand} />
<Characteristic label="Purchase Date" value={formatedDate} />
<Characteristic label="Price" value={formatedPrice} />
{/* Boutons d'édition et de suppression */}
<div className="button-group">
<button className="edit-button" onClick={openModal}>Edit</button>
<button className="delete-button" onClick={onDelete}>Delete</button>
</div>
</Description>
{/* Fenêtre modale */}
{isModalOpen && (
<div className="modal">
<div className="modal-content">
<span className="close" onClick={closeModal}>
&times;
</span>
<FormUpdateItem itemId={_id}>
{console.log("item ID :" + _id)}
</FormUpdateItem>
</div>
</div>
)}
</div>
)}
</div>
);
);
};

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

@ -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 (
<Menu
defaultSelectedKeys={["1"]}
defaultSelectedKeys={["0"]}
defaultOpenKeys={["sub1"]}
theme="dark"
mode="inline"

10
src/components/parts/image.jsx
View File

@ -2,17 +2,17 @@
import React, { useEffect, useState } from 'react';
import { searchAndResizeImage } from '../../api/image-request'
export const Image = ({ src, alt, request, _id }) => {
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 <img src={src} alt={alt} style={{ display: 'block', margin: 'auto' }} width='150px' height='150px' />;

2
src/components/rooms/room-detail.jsx
View File

@ -24,7 +24,7 @@ export const RoomDetail = ({
<div className="room-detail">
{isUpdateFormVisible ? (
<div>
<h2>Modifier une chambre (non fonctionnel)</h2>
<h2>Modifier une chambre</h2>
<button onClick={handleBackClick}>Annuler </button>
<FormUpdateRoom _id={selectedRoom} />
</div>

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

@ -6,7 +6,8 @@ import { Characteristic } from "../parts/characteristic";
export const RoomBox = ({ room, onRoomClick }) => {
const handleBoxClick = () => {
onRoomClick(room._id);
};
};
return (
<div className="room-details" onClick={handleBoxClick}>

7
src/pages/authenticated/login.jsx
View File

@ -16,7 +16,11 @@ export const Login = () => {
if (response && !response.success) {
setError(response.error);
}
};
};
const onRegister = () => {
window.location.href = '/register'
}
return (
<div>
@ -36,6 +40,7 @@ export const Login = () => {
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">submit</button>
<button onClick={onRegister}>Register</button>
</form>
</div>
);

3
src/pages/authenticated/register.jsx
View File

@ -21,7 +21,8 @@ export const Register = () => {
return (
<div>
<h1>Register page</h1>
<h1>Register page</h1>
<p>Password must include a capital letter, a digit and a symbol</p>
{error && <p className="text-red-500">{error}</p>}
<form onSubmit={onSubmit}>
<input