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

15
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,15 +29,9 @@ 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();
}
};

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

@ -1,19 +1,15 @@
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();
}
};

14
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,15 +69,9 @@ 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();
}
};

21
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";
@ -27,19 +27,22 @@ 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);
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"

18
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);
@ -17,6 +19,13 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
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 + "€";
let formatedDate = new Date(purchaseDate).toLocaleDateString("fr-FR");
@ -26,13 +35,16 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
return (
<div className="product-details">
<Description title={productname}>
<Image request={request} _id={_id} alt="Product" />
<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} />
{/* Bouton d'édition pour ouvrir la fenêtre modale */}
<button onClick={openModal}>Edit</button>
{/* 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 && (

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

@ -28,6 +28,7 @@ const { SubMenu } = Menu;
const Navbar = () => {
const [rooms, setRooms] = useState([]);
useEffect(() => {
console.log("NAVBAR EFFECT");
isLoggedIn().then((user) => {
@ -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>

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

@ -8,6 +8,7 @@ export const RoomBox = ({ room, onRoomClick }) => {
onRoomClick(room._id);
};
return (
<div className="room-details" onClick={handleBoxClick}>
<Description title={room?.name}>

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

@ -18,6 +18,10 @@ export const Login = () => {
}
};
const onRegister = () => {
window.location.href = '/register'
}
return (
<div>
<h1>Login page</h1>
@ -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>
);

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

@ -22,6 +22,7 @@ export const Register = () => {
return (
<div>
<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