register + deletions + image request changes
This commit is contained in:
parent
baf31f7959
commit
22ec7f8fdd
@ -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);
|
||||
}
|
||||
}
|
@ -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");
|
||||
|
@ -78,8 +78,7 @@
|
||||
}
|
||||
|
||||
.item-list {
|
||||
width: 100%;
|
||||
max-width:50vw;
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
@ -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;
|
||||
}
|
@ -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>;
|
||||
};
|
@ -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 (
|
||||
|
@ -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 (
|
||||
|
@ -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";
|
||||
|
@ -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"
|
||||
|
@ -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}>
|
||||
×
|
||||
</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}>
|
||||
×
|
||||
</span>
|
||||
<FormUpdateItem itemId={_id}>
|
||||
{console.log("item ID :" + _id)}
|
||||
</FormUpdateItem>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
@ -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"
|
||||
|
@ -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' />;
|
||||
|
@ -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>
|
||||
|
@ -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}>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user