$

src/api/index.js

@@ -1,3 +1,4 @@
 export * from "./authentication";
 export * from "./user";
 export * from "./rooms";
+export * from "./items";

src/api/items.js

@@ -0,0 +1,20 @@
+import axios from "axios";
+
+export const createItem = async (settings) => {
+  console.log(settings);
+
+  const formData = new FormData();
+  formData.append("room", settings.room);
+  formData.append("brand", settings.brand);
+  formData.append("model", settings.model);
+  formData.append("price", settings.price);
+  formData.append("purchaseDate", settings.purchaseDate);
+  formData.append("link", settings.link);
+  formData.append("description", settings.description);
+  formData.append("image", settings.image);
+  formData.append("invoice", settings.invoice);
+
+  const response = await axios.post("/item", formData);
+
+  return response.data;
+};

src/components/AddBtn/AddBtn.jsx

@@ -0,0 +1,11 @@
+import "./AddBtn.scss";
+
+export default function AddBtn({ handle }) {
+  return (
+    <div className="add-btn-container">
+      <button onClick={handle} className="add-btn">
+        +
+      </button>
+    </div>
+  );
+}

src/components/AddBtn/AddBtn.scss

@@ -0,0 +1,19 @@
+.add-btn-container {
+    display: flex;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    width: 45px;
+    height: 45px;
+
+    .add-btn {
+        width: 100%;
+        height: 100%;
+        border-radius: 50px;
+        border: none;
+        background: rgb(123, 106, 156);
+        color: white;
+        font-weight: bold;
+        font-size: 15px;
+    }
+}

src/pages/room/Room.jsx

@@ -1,21 +1,146 @@
 import { useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { getRoom } from "../../api";
+import "./Room.scss";
+import AddBtn from "../../components/AddBtn/AddBtn";
+import { createItem } from "../../api/";
 
 export default function Room() {
-    const { id } = useParams();
+  const { id } = useParams();
-    const [data, setData] = useState();
+  const [data, setData] = useState({});
+  const [isInForm, setInForm] = useState(false);
 
-    useEffect(() => {
+  useEffect(() => {
-        getRoom(id).then((res) => {
+    getRoom(id).then((res) => {
-            setData(res);
+      console.log(res);
-            console.log(res);
+      setData(res);
-        });
+    });
-    }, []);
+  }, []);
 
-    return (
+  const handleForm = () => {
-        <div>
+    setInForm(!isInForm);
-            <span>Piece n{id}</span>
+  };
+
+  const handleSubmit = (e) => {
+    try {
+      const settings = {};
+      settings.brand = e.target[0].value;
+      settings.model = e.target[1].value;
+      settings.price = e.target[2].value;
+      settings.purchaseDate = e.target[3].value;
+      settings.link = e.target[4].value;
+      settings.description = e.target[5].value;
+      settings.room = id;
+      settings.image = e.target[6].files[0];
+      settings.invoice = e.target[7].files[0];
+
+      createItem(settings).then((res) => {
+        console.log(res);
+      });
+
+      handleForm();
+    } catch (err) {
+      alert("Quelque chose cloche avec le formulaire ...");
+      console.log(err);
+    }
+  };
+
+  return (
+    <div id="room-container">
+      {data.name ? (
+        <div id="room-title-container">
+          <span id="room-title">
+            <u>{data.name}</u>
+          </span>
         </div>
-    );
+      ) : null}
+
+      {data.items && data.items.length > 0 ? (
+        <div id="items-container">
+          {data.items.map((e, i) => (
+            <div className="item-container" key={i}>
+              <div className="item-brand-container">
+                Marque&nbsp;
+                <a className="item-brand" href={e.link}>
+                  {e.brand}
+                </a>
+              </div>
+
+              <div className="item-model-container">
+                Modele&nbsp;
+                <a className="item-model" href={e.link}>
+                  {e.model}
+                </a>
+              </div>
+
+              {e.image ? (
+                <div className="item-image-container">
+                  <img
+                    className="item-image"
+                    src={`https://but-3-dev-project-back.onrender.com/api/file/${e.image._id}`}
+                    alt="coucou"
+                  />
+                </div>
+              ) : (
+                <span className="item-no-img">Pas d'Image</span>
+              )}
+
+              <div className="item-description-container">
+                Description
+                <span className="item-description">&nbsp;{e.description}</span>
+              </div>
+
+              <div className="item-price-container">
+                Montant
+                <span className="item-price">&nbsp;{e.price}$</span>
+              </div>
+
+              <div className="item-buy-date-container">
+                Date d'achat
+                <span className="item-buy-date">
+                  {new Date(e.purchaseDate).toDateString()}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div>
+          <span>Cette piece ne contient pas d'objet.</span>
+        </div>
+      )}
+
+      {isInForm && (
+        <div id="form-container">
+          <span>Creation d'item</span>
+
+          <div id="form-closure-container">
+            <button id="form-closure" onClick={handleForm}>
+              ×
+            </button>
+          </div>
+
+          <form id="form" onSubmit={handleSubmit}>
+            <input type="text" placeholder="Marque ..." />
+            <input type="text" placeholder="Model ..." />
+            <input type="number" placeholder="Prix ..." />
+            <input type="date" placeholder="Date d'achat ..." />
+            <input type="text" placeholder="Lien ..." />
+            <input type="text" placeholder="Description ..." />
+            <input type="file" placeholder="Photo ..." />
+            <input type="file" placeholder="Facture ..." />
+
+            <div id="actions">
+              <button className="actions-btn">Annuler</button>
+              <button className="actions-btn" type="submit">
+                Confirmer
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      <AddBtn handle={handleForm} />
+    </div>
+  );
 }

src/pages/room/Room.scss

@@ -0,0 +1,147 @@
+#room-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+
+    #items-container {
+        margin-top: 20px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 20px;
+        justify-content: center;
+        align-items: center;
+
+        .item-container {
+            padding: 10px;
+            gap: 10px;
+            border: 1px dashed rgb(54, 54, 54);
+            width: 340px;
+            height: 340px;
+            display: flex;
+            flex-direction: column;
+            overflow: auto;
+
+            .item-brand-container {
+                text-align: center;
+                .item-brand {
+                    color: black;
+                    font-weight: bold;
+                }
+            }
+
+            .item-model-container {
+                text-align: center;
+                gap: 5px;
+
+                .item-model {
+                    color: black;
+                    font-weight: bold;
+                }
+            }
+
+            .item-image-container {
+                width: 200px;
+                height: auto;
+                .item-image {
+                    width: 100%;
+                }
+            }
+
+            .item-no-img {
+            }
+
+            .item-description-container {
+                display: flex;
+                width: 100%;
+                gap: 5px;
+
+                .item-description {
+                    color: black;
+                    font-weight: bold;
+                }
+            }
+
+            .item-price-container {
+                display: flex;
+                width: 100%;
+                gap: 5px;
+
+                .item-price {
+                    font-weight: bold;
+                }
+            }
+
+            .item-buy-date-container {
+                display: flex;
+                width: 100%;
+                gap: 5px;
+
+                .item-buy-date {
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+
+    #form-container {
+        border: 1px solid black;
+        width: 300px;
+        height: 400px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        gap: 20px;
+        padding: 20px;
+
+        #form-closure-container {
+            position: absolute;
+            top: 0px;
+            right: 0;
+            width: 20px;
+            height: 20px;
+
+            #form-closure {
+                width: 100%;
+                height: 100%;
+                border: none;
+
+                &:hover {
+                    background: red;
+                    cursor: pointer;
+                    color: white;
+                    font-weight: bold;
+                }
+            }
+        }
+
+        #form {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+
+            #actions {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                gap: 10px;
+                justify-content: center;
+                align-items: center;
+
+                .actions-btn {
+                }
+            }
+        }
+    }
+
+    #room-title-container {
+        margin-top: 20px;
+        text-align: center;
+
+        #room-title {
+        }
+    }
+}