feat: day 29

webseite/frontend/dev/scripts/modules/ProductManager.js

@@ -7,6 +7,8 @@ import { Modal } from 'bootstrap'; // ohne Pfadangabe (Modul auslesen aus node_m
 const ProductManager = (el = null) => {
   // === DOM & VARS =======
 
+  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;
@@ -20,7 +22,12 @@ const ProductManager = (el = null) => {
     btnAdd: module.querySelector('.button-product-add'),
     templateRow: module.querySelector('.template-row'),
 
+    // 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, {
@@ -54,6 +61,18 @@ const ProductManager = (el = null) => {
     disableNonFunctionalButtons();
   };
 
+  const onClickEdit = (e) => {
+    const btnEl = e.currentTarget;
+    const currentRow = parents(btnEl, 'tr')[0];
+    const id = currentRow.dataset.id;
+
+    // async fetch
+    getProduct(id).then((data) => {
+      // console.log(data);
+      showModalEdit(data);
+    });
+  };
+
   const onClickRemove = (e) => {
     const btnEl = e.currentTarget;
     //const currentRowEl = btnEl.parentNode.parentNode; // parentNode -> td - parentNode -> tr
@@ -103,6 +122,7 @@ const ProductManager = (el = null) => {
     const currentRowEl = parents(btnEl, 'tr')[0];
     currentRowEl.draggable = true;
   };
+
   const onMouseUpDrag = (e) => {
     const btnEl = e.currentTarget;
     const currentRowEl = parents(btnEl, 'tr')[0];
@@ -150,9 +170,31 @@ const ProductManager = (el = null) => {
   };
 
   // === XHR/FETCH ========
+
+  // HTTP - Methode - GET
+  // C(R)UD - Read
+  // (B)READ - Browse - auslesen aller Produkte
   const fetchProducts = async () => {
     try {
-      const response = await fetch('http://127.0.0.1:8000/api/products'); // HTTP Request URL
+      const response = await fetch(`${BASE_URL}/api/products`); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+      const data = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error) {
+      console.error(error);
+      return error;
+    }
+  };
+
+  // HTTP - Methode - GET
+  // C(R)UD - Read
+  // B(R)EAD - Read - auslesen eines Produkts
+  const getProduct = async (id) => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products/${id}`); // HTTP Request URL
       if (!response.ok) {
         throw new Error('Fetch went wrong.');
       }
@@ -183,7 +225,7 @@ const ProductManager = (el = null) => {
   };
 
   const addProduct = (product) => {
-    const { name, price } = product;
+    const { name, price, _id: id, position } = product;
 
     // https://developer.mozilla.org/de/docs/Web/API/HTMLTemplateElement/content
     const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true);
@@ -195,10 +237,12 @@ const ProductManager = (el = null) => {
     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);
@@ -211,9 +255,22 @@ const ProductManager = (el = null) => {
     trEl.addEventListener('dragover', onDragOver);
     trEl.addEventListener('drop', onDrop);
 
+    trEl.dataset.id = id; // <tr data-id="..." >...</tr>
+    trEl.dataset.position = position; // <tr data-position="..." >...</tr>
+
     DOM.tBody.appendChild(trEl); // Im DOM hinzufügen
   };
 
+  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');