feat: day 29

webseite/frontend/assets/js/build.js

@@ -5166,6 +5166,7 @@
 
   // dev/scripts/modules/ProductManager.js
   var ProductManager = (el = null) => {
+    const BASE_URL = "http://127.0.0.1:8000";
     const module = el || document.querySelector(".product-manager") || console.error("Product Manager not found");
     if (!module) return;
     const DOM = {
@@ -5176,7 +5177,12 @@
       inputPrice: module.querySelector(".input-product-price"),
       btnAdd: module.querySelector(".button-product-add"),
       templateRow: module.querySelector(".template-row"),
-      modalEdit: module.querySelector(".modal-edit")
+      // Modal
+      modalEdit: module.querySelector(".modal-edit"),
+      inputEditName: module.querySelector(".input-edit-name"),
+      inputEditPrice: module.querySelector(".input-edit-price"),
+      inputEditId: module.querySelector(".input-edit-id"),
+      inputEditPosition: module.querySelector(".input-edit-position")
     };
     const bsModalEdit = new Modal(DOM.modalEdit, {
       backdrop: "static",
@@ -5198,6 +5204,14 @@
       addProduct(product);
       disableNonFunctionalButtons();
     };
+    const onClickEdit = (e) => {
+      const btnEl = e.currentTarget;
+      const currentRow = parents(btnEl, "tr")[0];
+      const id = currentRow.dataset.id;
+      getProduct(id).then((data) => {
+        showModalEdit(data);
+      });
+    };
     const onClickRemove = (e) => {
       const btnEl = e.currentTarget;
       const currentRowEl = parents(btnEl, "tr")[0];
@@ -5256,7 +5270,20 @@
     };
     const fetchProducts = async () => {
       try {
-        const response = await fetch("http://127.0.0.1:8000/api/products");
+        const response = await fetch(`${BASE_URL}/api/products`);
+        if (!response.ok) {
+          throw new Error("Fetch went wrong.");
+        }
+        const data = await response.json();
+        return data;
+      } catch (error) {
+        console.error(error);
+        return error;
+      }
+    };
+    const getProduct = async (id) => {
+      try {
+        const response = await fetch(`${BASE_URL}/api/products/${id}`);
         if (!response.ok) {
           throw new Error("Fetch went wrong.");
         }
@@ -5276,7 +5303,7 @@
       });
     };
     const addProduct = (product) => {
-      const { name, price } = product;
+      const { name, price, _id: id, position } = product;
       const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true);
       const tdNameEl = trEl.querySelector(".td-name");
       const tdPriceEl = trEl.querySelector(".td-price");
@@ -5284,8 +5311,10 @@
       const btnMoveUpEl = trEl.querySelector(".button-product-move-up");
       const btnMoveDownEl = trEl.querySelector(".button-product-move-down");
       const btnDragEl = trEl.querySelector(".button-drag");
+      const btnEditEl = trEl.querySelector(".button-product-edit");
       tdNameEl.textContent = name;
       tdPriceEl.textContent = price;
+      btnEditEl.addEventListener("click", onClickEdit);
       btnRemoveEl.addEventListener("click", onClickRemove);
       btnMoveUpEl.addEventListener("click", onClickMoveUp);
       btnMoveDownEl.addEventListener("click", onClickMoveDown);
@@ -5294,8 +5323,17 @@
       trEl.addEventListener("dragstart", onDragStart);
       trEl.addEventListener("dragover", onDragOver);
       trEl.addEventListener("drop", onDrop);
+      trEl.dataset.id = id;
+      trEl.dataset.position = position;
       DOM.tBody.appendChild(trEl);
     };
+    const showModalEdit = (product) => {
+      const { name = "", price = 0, _id: id, position } = product;
+      DOM.inputEditName.value = name;
+      DOM.inputEditPrice.value = price;
+      DOM.inputEditId.value = id;
+      DOM.inputEditPosition.value = position;
+    };
     const disableNonFunctionalButtons = () => {
       Array.from(DOM.tBody.querySelectorAll("tr")).forEach((tr) => {
         const btnMoveUp = tr.querySelector(".button-product-move-up");