From f85ee6817dc4073214fbc7ce02ec4203c4a4a363 Mon Sep 17 00:00:00 2001
From: VietHg1995 <viethg1995@gmail.com>
Date: Sun, 15 Oct 2023 22:09:50 +0700
Subject: [PATCH] update function edit and delete product

---
 asserts/js/index.js        |  4 ++++
 asserts/js/main/product.js | 28 ++++++++++++++++++++++++----
 index.html                 |  7 ++++++-
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/asserts/js/index.js b/asserts/js/index.js
index 925a7ff..a66efd1 100644
--- a/asserts/js/index.js
+++ b/asserts/js/index.js
@@ -1,3 +1,5 @@
+let isLoading = true;
+
 const includeHTML = () => {
   let z, i, elmnt, file, xhttp;
   /*loop through a collection of all HTML elements:*/
@@ -28,4 +30,6 @@ const includeHTML = () => {
       return;
     }
   }
+
+  isLoading = false;
 };
diff --git a/asserts/js/main/product.js b/asserts/js/main/product.js
index 10f93b4..fbd2605 100644
--- a/asserts/js/main/product.js
+++ b/asserts/js/main/product.js
@@ -1,8 +1,12 @@
+const getProducts = () => {
+  return JSON.parse(localStorage.getItem("products")) || [];
+};
+
 /**
  * Show product
  */
 const showProduct = () => {
-  const products = JSON.parse(localStorage.getItem("products")) || [];
+  const products = getProducts();
   let productShow = "";
   products.forEach((product, index) => {
     productShow += `
@@ -11,8 +15,8 @@ const showProduct = () => {
         <td>${product.name}</td>
         <td>${product.price}</td>
         <td>
-          <button>Sửa</button>
-          <button>Xóa</button>
+          <button onclick="editProduct(${index})">Sửa</button>
+          <button onclick="delProduct(${index})">Xóa</button>
         </td>
       </tr>
     `;
@@ -24,7 +28,7 @@ const showProduct = () => {
 const addProduct = () => {
   const productName = document.getElementById("product-name").value;
   const productPrice = document.getElementById("price").value;
-  const products = JSON.parse(localStorage.getItem("products")) || [];
+  const products = getProducts();
   const product = {
     name: productName,
     price: productPrice,
@@ -33,3 +37,19 @@ const addProduct = () => {
   localStorage.setItem("products", JSON.stringify(products));
   showProduct();
 };
+
+const editProduct = (index) => {
+  const products = getProducts();
+  if (products.length === 0) return;
+
+  const product = products[index];
+  document.getElementById("product-name").value = product.name;
+  document.getElementById("price").value = product.price;
+};
+
+const delProduct = (index) => {
+  const products = getProducts();
+  products.splice(index, 1);
+  localStorage.setItem("products", JSON.stringify(products));
+  showProduct();
+};
diff --git a/index.html b/index.html
index 26e861b..29af97c 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,12 @@
     <main w3-include-html="./pages/main/index.html"></main>
     <script>
       includeHTML();
-      showProduct();
+      const interval = setInterval(() => {
+        if (!isLoading) {
+          clearInterval(interval);
+          showProduct();
+        }
+      }, 1);
     </script>
   </body>
 </html>