This commit is contained in:
Bilal 2024-04-05 21:01:52 +02:00
parent 3cf55ab609
commit 5bd7ac1951
11 changed files with 206 additions and 23 deletions

View File

@ -18,7 +18,6 @@ export const login = async (username, password) => {
return response.data;
} catch (error) {
window.location.reload();
return error.response.data;
}
};

View File

@ -35,6 +35,12 @@ export const updateItem = async (settings) => {
formData.append("description", settings.description);
formData.append("purchaseDate", settings.purchaseDate);
formData.append("link", settings.link);
formData.append("invoice", settings.invoice);
// je ne sais pas si ca va bug sans je verrai apres
if (settings.image) {
formData.append("image", settings.image);
}
const response = await axios.put(`/item/${settings._id}`, formData);
return response.data;

View File

@ -103,6 +103,16 @@ export const getRooms = async () => {
}
};
export const getRoomsLength = async () => {
try {
const response = await getRooms();
return response.length;
} catch (err) {
console.error(err);
return null;
}
};
export const getRoom = async (id) => {
try {
const response = await axios.get(`/room/${id}`);

View File

@ -2,37 +2,60 @@ import { useAuth } from "../../hooks";
import "./NavBar.scss";
import { logout } from "../../api";
import { Link } from "react-router-dom/";
import { getRoomsLength } from "../../api";
import { useEffect } from "react";
import { useState } from "react";
import refresh from "../../services/pageManagement";
export default function NavBar() {
const { user } = useAuth();
const [roomsLength, setRoomsLength] = useState(null);
const onLogout = () => {
logout().then((res) => {
if (res === "Ok") {
window.location.reload();
refresh();
}
});
};
const refreshAllDatas = async () => {
const roomsLen = await getRoomsLength();
if (!roomsLen) {
return;
}
setRoomsLength(roomsLen);
};
useEffect(() => {
refreshAllDatas();
}, []);
return (
<nav id="nav-container">
<ul id="leafs-container">
{user && (
<li className="leaf">
<Link to="/">Accueil</Link>
<Link onClick={refreshAllDatas} to="/">
Accueil
</Link>
</li>
)}
{user && (
<li className="leaf">
<Link to="rooms">Pieces</Link>
<Link onClick={refreshAllDatas} to="rooms">
Pieces {roomsLength ? `(${roomsLength})` : "(██)"}
</Link>
</li>
)}
{user ? (
<div className="leaf-into">
<li className="leaf">
<Link to="profile">Profil</Link>
<Link onClick={refreshAllDatas} to="profile">
Profil
</Link>
</li>
<button className="leaf-btn" onClick={onLogout}>

View File

@ -12,6 +12,7 @@ import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
import passwordCheck from "../../services/password";
import LoaderSpace from "./../../components/LoaderSpace/LoaderSpace";
import clipboardCopy from "clipboard-copy";
import refresh from "../../services/pageManagement";
//Bilouuuuuuu94!@@
export default function Profile() {
@ -99,7 +100,7 @@ export default function Profile() {
_id: user.user._id,
}).then((res) => {
logout().then((_) => {
window.location.reload();
refresh();
});
console.log(res);
console.log(oldPPassword, password, confirmPassword);
@ -122,7 +123,7 @@ export default function Profile() {
const handleDeleteUser = () => {
deleteUser(user.user._id).then((_) => {
logout().then((res) => {
window.location.reload();
refresh();
});
});
};

View File

@ -7,6 +7,8 @@ import { createItem, deleteItem, updateItem } from "../../api/";
import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
import { useAuth } from "../../hooks";
import { Link } from "react-router-dom";
import refresh from "../../services/pageManagement";
export default function Room() {
const { _user } = useAuth();
@ -29,12 +31,15 @@ export default function Room() {
}, []);
const handleFormUpdateDataChange = (e, name) => {
console.log(e.target.value);
const cpy = { ...formUpdateData };
cpy[name] =
name === "purchaseDate"
? new Date(e.target.value).toISOString()
: name === "image" || name === "invoice"
? e.target.files[0]
: e.target.value;
setFormUpdateData(cpy);
};
@ -46,8 +51,6 @@ export default function Room() {
if (item) {
const cpy = { ...item };
delete cpy.createdAt;
delete cpy.image;
delete cpy.invoice;
delete cpy.user;
delete cpy.updatedAt;
delete cpy.__v;
@ -78,6 +81,7 @@ export default function Room() {
// TODO: Je ferai une modification unitaire plus tard
getRoom(id).then((res) => {
handleFormUpdate();
console.log(res);
setData(res);
});
});
@ -103,7 +107,7 @@ export default function Room() {
createItem(settings).then((_) => {
// Je prefere faire ca que d'actualiser le state[data.items] car
// l'image ne se charge pas correctement
window.location.reload();
refresh();
});
handleForm();
@ -195,6 +199,26 @@ export default function Room() {
{new Date(e.purchaseDate).toLocaleDateString("FR-fr")}
</span>
</div>
<div className="item-invoice-container">
Facture
<span className="item-invoice">
{e.invoice ? (
<Link
target="_blank"
to={
e.invoice._id
? `https://but-3-dev-project-back.onrender.com/api/file/${e.invoice._id}`
: "#"
}
>
{e.invoice._id ? "ICI" : "Pas de facture"}
</Link>
) : (
<div>Pas de facture.</div>
)}
</span>
</div>
</div>
))}
</div>
@ -292,6 +316,18 @@ export default function Room() {
type="text"
placeholder={`(Lien) ${formUpdateData.link}`}
/>
<input
type="file"
onChange={(e) => {
handleFormUpdateDataChange(e, "image");
}}
/>
<input
type="file"
onChange={(e) => {
handleFormUpdateDataChange(e, "invoice");
}}
/>
<div id="actions">
<StylizedBtn

View File

@ -135,6 +135,17 @@
font-weight: bold;
}
}
.item-invoice-container {
display: flex;
width: 100%;
align-items: center;
gap: 5px;
.item-invoice {
font-weight: bold;
}
}
}
}

View File

@ -5,13 +5,17 @@ import { Link } from "react-router-dom";
import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
import AddBtn from "./../../components/AddBtn/AddBtn";
import { useAuth } from "../../hooks";
import { useParams } from "react-router-dom";
import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
export default function Rooms() {
const { _user } = useAuth();
const [rooms, setRooms] = useState(null);
const [isLoad, setIsLoad] = useState(true);
const [isErr, setIsErr] = useState(false);
const [splicedRooms, setSplicedRooms] = useState(null);
const [displayRooms, setDisplayRooms] = useState(null);
const { pageIndex } = useParams();
const [virtualIndex, setVirtualIndex] = useState(0);
const onClickCreate = () => {
const name = prompt("Nom de la piece ?");
@ -37,7 +41,44 @@ export default function Rooms() {
return partitions;
};
console.log(splicer(data, 8));
const newData = splicer(data, 8);
const blabla = newData[pageIndex ? pageIndex : 0];
if (pageIndex) {
setVirtualIndex(parseInt(pageIndex, 10));
}
setRooms(newData);
console.log(newData[pageIndex ? pageIndex : 0]);
setDisplayRooms(newData[pageIndex ? pageIndex : 0]);
if (!blabla) {
window.location.href = "/rooms/0";
setVirtualIndex(0);
}
};
const handleBefore = () => {
if (virtualIndex === 0) {
return;
}
const index = virtualIndex - 1;
console.log(rooms[index]);
setDisplayRooms(rooms[index]);
setVirtualIndex(index);
};
const handleNext = () => {
if (virtualIndex >= rooms.length - 1) {
return;
}
const index = virtualIndex + 1;
console.log(rooms[index]);
setDisplayRooms(rooms[index]);
setVirtualIndex(index);
};
const onClickDelete = (id, name) => {
@ -70,9 +111,9 @@ export default function Rooms() {
return (
<div id="rooms-container">
{rooms ? (
{displayRooms ? (
<div id="rooms-list-container">
{rooms.map((i, j) => (
{displayRooms.map((i, j) => (
<div className="room" key={j}>
<div
className="room-delete"
@ -86,12 +127,7 @@ export default function Rooms() {
<div className="room-id-container">
<span className="label-id">ID</span>
<span className="room-id">
{i._id[0]}
{i._id[1]}
{i._id[2]}
{i._id[3]}
{i._id[4]}
{i._id[5]}
{i._id.slice(0, 5)}
...
</span>
</div>
@ -109,6 +145,28 @@ export default function Rooms() {
<LoaderSpace isVisible={isLoad} isCenterLoader={true} />
)}
{rooms ? (
<div id="pagination-container">
{virtualIndex > 0 ? (
<StylizedBtn
perso_style={{ width: "90px", height: "40px" }}
text="Precedent"
handle={handleBefore}
/>
) : null}
<div id="pagination-index">{virtualIndex}</div>
{virtualIndex < rooms.length - 1 ? (
<StylizedBtn
perso_style={{ width: "90px", height: "40px" }}
text="Suivant"
handle={handleNext}
/>
) : null}
</div>
) : null}
{isErr && !isLoad ? (
<span id="err-no-rooms">Vous n'avez pas de piece pour le moment !</span>
) : null}

View File

@ -3,6 +3,39 @@
#rooms-container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
gap: 30px;
#pagination-container {
display: flex;
flex-direction: row;
gap: 20px;
width: 100%;
align-items: center;
justify-content: center;
#pagination-index {
border-radius: 50px;
background: $white;
color: $primary;
border: 2px dashed $primary;
font-weight: bold;
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
&::selection {
background: transparent;
color: $primary;
}
}
button {
}
}
#err-no-rooms {
height: 100%;

View File

@ -13,7 +13,7 @@ export const Router = () => (
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="rooms/" element={<Rooms />} />
{/* maybe <Route path="rooms/:page" element={<Rooms />} /> */}
<Route path="rooms/:pageIndex" element={<Rooms />} />
<Route path="room/:id" element={<Room />} />
<Route path="profile" element={<Profile />} />
</Routes>

View File

@ -0,0 +1,6 @@
/**
* Par preference je prefere utiliser ca que la modification reactive.
*/
export default function refresh() {
window.location.reload();
}