$
This commit is contained in:
parent
3cf55ab609
commit
5bd7ac1951
@ -18,7 +18,6 @@ export const login = async (username, password) => {
|
|||||||
|
|
||||||
return response.data;
|
return response.data;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
window.location.reload();
|
|
||||||
return error.response.data;
|
return error.response.data;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -35,6 +35,12 @@ export const updateItem = async (settings) => {
|
|||||||
formData.append("description", settings.description);
|
formData.append("description", settings.description);
|
||||||
formData.append("purchaseDate", settings.purchaseDate);
|
formData.append("purchaseDate", settings.purchaseDate);
|
||||||
formData.append("link", settings.link);
|
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);
|
const response = await axios.put(`/item/${settings._id}`, formData);
|
||||||
return response.data;
|
return response.data;
|
||||||
|
@ -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) => {
|
export const getRoom = async (id) => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`/room/${id}`);
|
const response = await axios.get(`/room/${id}`);
|
||||||
|
@ -2,37 +2,60 @@ import { useAuth } from "../../hooks";
|
|||||||
import "./NavBar.scss";
|
import "./NavBar.scss";
|
||||||
import { logout } from "../../api";
|
import { logout } from "../../api";
|
||||||
import { Link } from "react-router-dom/";
|
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() {
|
export default function NavBar() {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
|
const [roomsLength, setRoomsLength] = useState(null);
|
||||||
|
|
||||||
const onLogout = () => {
|
const onLogout = () => {
|
||||||
logout().then((res) => {
|
logout().then((res) => {
|
||||||
if (res === "Ok") {
|
if (res === "Ok") {
|
||||||
window.location.reload();
|
refresh();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const refreshAllDatas = async () => {
|
||||||
|
const roomsLen = await getRoomsLength();
|
||||||
|
if (!roomsLen) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setRoomsLength(roomsLen);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
refreshAllDatas();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav id="nav-container">
|
<nav id="nav-container">
|
||||||
<ul id="leafs-container">
|
<ul id="leafs-container">
|
||||||
{user && (
|
{user && (
|
||||||
<li className="leaf">
|
<li className="leaf">
|
||||||
<Link to="/">Accueil</Link>
|
<Link onClick={refreshAllDatas} to="/">
|
||||||
|
Accueil
|
||||||
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{user && (
|
{user && (
|
||||||
<li className="leaf">
|
<li className="leaf">
|
||||||
<Link to="rooms">Pieces</Link>
|
<Link onClick={refreshAllDatas} to="rooms">
|
||||||
|
Pieces {roomsLength ? `(${roomsLength})` : "(██)"}
|
||||||
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{user ? (
|
{user ? (
|
||||||
<div className="leaf-into">
|
<div className="leaf-into">
|
||||||
<li className="leaf">
|
<li className="leaf">
|
||||||
<Link to="profile">Profil</Link>
|
<Link onClick={refreshAllDatas} to="profile">
|
||||||
|
Profil
|
||||||
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<button className="leaf-btn" onClick={onLogout}>
|
<button className="leaf-btn" onClick={onLogout}>
|
||||||
|
@ -12,6 +12,7 @@ import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
|
|||||||
import passwordCheck from "../../services/password";
|
import passwordCheck from "../../services/password";
|
||||||
import LoaderSpace from "./../../components/LoaderSpace/LoaderSpace";
|
import LoaderSpace from "./../../components/LoaderSpace/LoaderSpace";
|
||||||
import clipboardCopy from "clipboard-copy";
|
import clipboardCopy from "clipboard-copy";
|
||||||
|
import refresh from "../../services/pageManagement";
|
||||||
//Bilouuuuuuu94!@@
|
//Bilouuuuuuu94!@@
|
||||||
|
|
||||||
export default function Profile() {
|
export default function Profile() {
|
||||||
@ -99,7 +100,7 @@ export default function Profile() {
|
|||||||
_id: user.user._id,
|
_id: user.user._id,
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
logout().then((_) => {
|
logout().then((_) => {
|
||||||
window.location.reload();
|
refresh();
|
||||||
});
|
});
|
||||||
console.log(res);
|
console.log(res);
|
||||||
console.log(oldPPassword, password, confirmPassword);
|
console.log(oldPPassword, password, confirmPassword);
|
||||||
@ -122,7 +123,7 @@ export default function Profile() {
|
|||||||
const handleDeleteUser = () => {
|
const handleDeleteUser = () => {
|
||||||
deleteUser(user.user._id).then((_) => {
|
deleteUser(user.user._id).then((_) => {
|
||||||
logout().then((res) => {
|
logout().then((res) => {
|
||||||
window.location.reload();
|
refresh();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -7,6 +7,8 @@ import { createItem, deleteItem, updateItem } from "../../api/";
|
|||||||
import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
|
import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
|
||||||
import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
|
import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
|
||||||
import { useAuth } from "../../hooks";
|
import { useAuth } from "../../hooks";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import refresh from "../../services/pageManagement";
|
||||||
|
|
||||||
export default function Room() {
|
export default function Room() {
|
||||||
const { _user } = useAuth();
|
const { _user } = useAuth();
|
||||||
@ -29,12 +31,15 @@ export default function Room() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleFormUpdateDataChange = (e, name) => {
|
const handleFormUpdateDataChange = (e, name) => {
|
||||||
console.log(e.target.value);
|
|
||||||
const cpy = { ...formUpdateData };
|
const cpy = { ...formUpdateData };
|
||||||
|
|
||||||
cpy[name] =
|
cpy[name] =
|
||||||
name === "purchaseDate"
|
name === "purchaseDate"
|
||||||
? new Date(e.target.value).toISOString()
|
? new Date(e.target.value).toISOString()
|
||||||
|
: name === "image" || name === "invoice"
|
||||||
|
? e.target.files[0]
|
||||||
: e.target.value;
|
: e.target.value;
|
||||||
|
|
||||||
setFormUpdateData(cpy);
|
setFormUpdateData(cpy);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -46,8 +51,6 @@ export default function Room() {
|
|||||||
if (item) {
|
if (item) {
|
||||||
const cpy = { ...item };
|
const cpy = { ...item };
|
||||||
delete cpy.createdAt;
|
delete cpy.createdAt;
|
||||||
delete cpy.image;
|
|
||||||
delete cpy.invoice;
|
|
||||||
delete cpy.user;
|
delete cpy.user;
|
||||||
delete cpy.updatedAt;
|
delete cpy.updatedAt;
|
||||||
delete cpy.__v;
|
delete cpy.__v;
|
||||||
@ -78,6 +81,7 @@ export default function Room() {
|
|||||||
// TODO: Je ferai une modification unitaire plus tard
|
// TODO: Je ferai une modification unitaire plus tard
|
||||||
getRoom(id).then((res) => {
|
getRoom(id).then((res) => {
|
||||||
handleFormUpdate();
|
handleFormUpdate();
|
||||||
|
console.log(res);
|
||||||
setData(res);
|
setData(res);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -103,7 +107,7 @@ export default function Room() {
|
|||||||
createItem(settings).then((_) => {
|
createItem(settings).then((_) => {
|
||||||
// Je prefere faire ca que d'actualiser le state[data.items] car
|
// Je prefere faire ca que d'actualiser le state[data.items] car
|
||||||
// l'image ne se charge pas correctement
|
// l'image ne se charge pas correctement
|
||||||
window.location.reload();
|
refresh();
|
||||||
});
|
});
|
||||||
|
|
||||||
handleForm();
|
handleForm();
|
||||||
@ -195,6 +199,26 @@ export default function Room() {
|
|||||||
{new Date(e.purchaseDate).toLocaleDateString("FR-fr")}
|
{new Date(e.purchaseDate).toLocaleDateString("FR-fr")}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@ -292,6 +316,18 @@ export default function Room() {
|
|||||||
type="text"
|
type="text"
|
||||||
placeholder={`(Lien) ${formUpdateData.link}`}
|
placeholder={`(Lien) ${formUpdateData.link}`}
|
||||||
/>
|
/>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
onChange={(e) => {
|
||||||
|
handleFormUpdateDataChange(e, "image");
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
onChange={(e) => {
|
||||||
|
handleFormUpdateDataChange(e, "invoice");
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
<div id="actions">
|
<div id="actions">
|
||||||
<StylizedBtn
|
<StylizedBtn
|
||||||
|
@ -135,6 +135,17 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-invoice-container {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
|
.item-invoice {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,13 +5,17 @@ import { Link } from "react-router-dom";
|
|||||||
import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
|
import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
|
||||||
import AddBtn from "./../../components/AddBtn/AddBtn";
|
import AddBtn from "./../../components/AddBtn/AddBtn";
|
||||||
import { useAuth } from "../../hooks";
|
import { useAuth } from "../../hooks";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
|
||||||
|
|
||||||
export default function Rooms() {
|
export default function Rooms() {
|
||||||
const { _user } = useAuth();
|
const { _user } = useAuth();
|
||||||
const [rooms, setRooms] = useState(null);
|
const [rooms, setRooms] = useState(null);
|
||||||
const [isLoad, setIsLoad] = useState(true);
|
const [isLoad, setIsLoad] = useState(true);
|
||||||
const [isErr, setIsErr] = useState(false);
|
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 onClickCreate = () => {
|
||||||
const name = prompt("Nom de la piece ?");
|
const name = prompt("Nom de la piece ?");
|
||||||
@ -37,7 +41,44 @@ export default function Rooms() {
|
|||||||
return partitions;
|
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) => {
|
const onClickDelete = (id, name) => {
|
||||||
@ -70,9 +111,9 @@ export default function Rooms() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="rooms-container">
|
<div id="rooms-container">
|
||||||
{rooms ? (
|
{displayRooms ? (
|
||||||
<div id="rooms-list-container">
|
<div id="rooms-list-container">
|
||||||
{rooms.map((i, j) => (
|
{displayRooms.map((i, j) => (
|
||||||
<div className="room" key={j}>
|
<div className="room" key={j}>
|
||||||
<div
|
<div
|
||||||
className="room-delete"
|
className="room-delete"
|
||||||
@ -86,12 +127,7 @@ export default function Rooms() {
|
|||||||
<div className="room-id-container">
|
<div className="room-id-container">
|
||||||
<span className="label-id">ID</span>
|
<span className="label-id">ID</span>
|
||||||
<span className="room-id">
|
<span className="room-id">
|
||||||
{i._id[0]}
|
{i._id.slice(0, 5)}
|
||||||
{i._id[1]}
|
|
||||||
{i._id[2]}
|
|
||||||
{i._id[3]}
|
|
||||||
{i._id[4]}
|
|
||||||
{i._id[5]}
|
|
||||||
...
|
...
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -109,6 +145,28 @@ export default function Rooms() {
|
|||||||
<LoaderSpace isVisible={isLoad} isCenterLoader={true} />
|
<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 ? (
|
{isErr && !isLoad ? (
|
||||||
<span id="err-no-rooms">Vous n'avez pas de piece pour le moment !</span>
|
<span id="err-no-rooms">Vous n'avez pas de piece pour le moment !</span>
|
||||||
) : null}
|
) : null}
|
||||||
|
@ -3,6 +3,39 @@
|
|||||||
#rooms-container {
|
#rooms-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 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 {
|
#err-no-rooms {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -13,7 +13,7 @@ export const Router = () => (
|
|||||||
<Route path="login" element={<Login />} />
|
<Route path="login" element={<Login />} />
|
||||||
<Route path="register" element={<Register />} />
|
<Route path="register" element={<Register />} />
|
||||||
<Route path="rooms/" element={<Rooms />} />
|
<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="room/:id" element={<Room />} />
|
||||||
<Route path="profile" element={<Profile />} />
|
<Route path="profile" element={<Profile />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
6
src/services/pageManagement.js
Normal file
6
src/services/pageManagement.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/**
|
||||||
|
* Par preference je prefere utiliser ca que la modification reactive.
|
||||||
|
*/
|
||||||
|
export default function refresh() {
|
||||||
|
window.location.reload();
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user