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

@@ -24,6 +24,7 @@ const ProductManager = (el = null) => {
 
     // Modal
     modalEdit: module.querySelector('.modal-edit'),
+    formEdit: module.querySelector('.form-product-edit'),
     inputEditName: module.querySelector('.input-edit-name'),
     inputEditPrice: module.querySelector('.input-edit-price'),
     inputEditId: module.querySelector('.input-edit-id'),
@@ -45,9 +46,30 @@ const ProductManager = (el = null) => {
 
     // Event-Lauscher zu beginn der Anwendung
     DOM.btnAdd.addEventListener('click', onClickAdd);
+    DOM.formEdit.addEventListener('submit', onSubmitEdit);
   };
 
   // === EVENTHANDLER =====
+  const onSubmitEdit = (e) => {
+    e.preventDefault(); // Standardverhalten unterbinden (Formular nicht an action versenden)
+
+    const product = {
+      name: DOM.inputEditName.value,
+      price: Number(DOM.inputEditPrice.value),
+      _id: DOM.inputEditId.value,
+      position: DOM.inputEditPosition.value,
+    };
+
+    // update async process
+    updateProduct(product).then((data) => {
+      console.log(data);
+      if (data.success) {
+        loadProducts(); // All Produkte auslesen
+        bsModalEdit.hide();
+      }
+    });
+  };
+
   const onClickAdd = (e) => {
     console.log('click');
 
@@ -56,7 +78,15 @@ const ProductManager = (el = null) => {
       price: Number(DOM.inputPrice.value),
     };
 
-    addProduct(product);
+    createProduct(product).then((data) => {
+      console.log(data);
+      if (data.success) {
+        console.log('add');
+        loadProducts();
+      }
+    });
+
+    // addProduct(product);
 
     disableNonFunctionalButtons();
   };
@@ -171,10 +201,34 @@ const ProductManager = (el = null) => {
 
   // === XHR/FETCH ========
 
+  // HTTP - Methode - POST
+  // (C)RUD - create
+  // BRE(A)D - add - neues Produkt hinzufügen
+  const createProduct = async (product) => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(product),
+      }); // 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)READ - Browse - auslesen aller Produkte
-  const fetchProducts = async () => {
+  const getProducts = async () => {
     try {
       const response = await fetch(`${BASE_URL}/api/products`); // HTTP Request URL
       if (!response.ok) {
@@ -207,10 +261,34 @@ const ProductManager = (el = null) => {
     }
   };
 
+  // HTTP - Methode - PUT
+  // CR(U)D - update
+  // BR(E)AD - edit - Produkt aktualisieren
+  const updateProduct = async (product) => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(product),
+      }); // 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;
+    }
+  };
+
   // === FUNCTIONS ========
 
   const initProducts = () => {
-    fetchProducts().then((products) => {
+    getProducts().then((products) => {
       products.forEach((product) => {
         addProduct(product);
       });
@@ -224,6 +302,16 @@ const ProductManager = (el = null) => {
     // PRODUCTS.forEach(addProduct);
   };
 
+  const loadProducts = () => {
+    DOM.tBody.innerHTML = '';
+    getProducts().then((data) => {
+      data.forEach((product) => {
+        addProduct(product);
+      });
+      disableNonFunctionalButtons();
+    });
+  };
+
   const addProduct = (product) => {
     const { name, price, _id: id, position } = product;