working on edit product and edit category

Easybuoy · Nov 21, 2018 · a6441d2 · a6441d2
1 parent d49afed
commit a6441d2
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 30 deletions.
diff --git a/assets/uploads/products/1542815496371Capture paystack.PNG b/assets/uploads/products/1542815496371Capture paystack.PNG
diff --git a/assets/uploads/products/1542815520153Capture paystack.PNG b/assets/uploads/products/1542815520153Capture paystack.PNG
diff --git a/assets/uploads/products/1542815685294Capture paystack.PNG b/assets/uploads/products/1542815685294Capture paystack.PNG
diff --git a/client/admin_create_product.html b/client/admin_create_product.html
@@ -62,23 +62,10 @@ <h2>Product Price</h2>
                                 <input type="number" id="productprice" name="productprice" placeholder="Enter Price">
                                 <h2>Product Quantity</h2>
                                 <input type="number" id="productquantity" name="productquantity" placeholder="Enter Quantity">
-                                <img src="" id="showimage" class="text-center" style="display: none; height: 100px; width: 100px">
                                 <h2>Product Image</h2>
+                                <img src="" id="showimage" class="text-center" style="display: none; height: 150px; width: 150px"> <br>
                                 <input type="file" id="productimage" name="upload" onchange="showImage.call(this)" >
-                                <script>
-                                function showImage() {
-                                    if (this.files && this.files[0]) {
-                                        var obj = new FileReader();
-                                        obj.onload = function(data) {
-                                            var image = document.getElementById('showimage');
-                                            image.src = data.target.result;
-                                            image.style.display = 'block';
-                                            image.style.justifyContent = 'center';
-                                        }
-                                        obj.readAsDataURL(this.files[0]);
-                                    }
-                                }
-                                </script>
+
                                 <h2>Category</h2>
                                 <select id="categoryoption">
                                 <option value="">Select Category</option>
@@ -95,8 +82,8 @@ <h2>Category</h2>
         <footer id="footer">
             <p>Store Manager Copyright &copy; 2018</p>
         </footer>
-    <script src="js/main.js"></script>
     <script src="js/middleware.js"></script>
+    <script src="js/main.js"></script>
     <script src="js/products.js"></script>
     </body>
 

diff --git a/client/admin_dashboard.html b/client/admin_dashboard.html
@@ -7,7 +7,7 @@
         <meta name="description" content="A web application that helps store owners manage sales and product inventory records.">
         <meta name="keywords" content="Store Manager">
         <title>Store Manager | Welcome</title>
-        <script src="js/middleware.js"></script>
+        <script src="js/middleware.js" async></script>
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
         <link rel="stylesheet" href="css/style.css">
         <link rel="icon" type="image/ico" sizes="32x32" href="img/favicon.ico">

diff --git a/client/admin_edit_product.html b/client/admin_edit_product.html
@@ -13,7 +13,7 @@
 
     </head>
 
-    <body>
+    <body onload="getProductsById()">
 
         <nav class="navbar">
             <span class="open-slide">
@@ -55,17 +55,18 @@
                                 <h1 class="text-center">Edit Product</h1>
                         <form method="POST" action="index.html">
                                 <h2>Product Name</h2>
-                                <input type="text" name="productname" placeholder="Enter Name" value="iPhone x">
+                                <input type="text" id="productname" name="productname" placeholder="Enter Name" value="">
                                 <h2>Product Summary</h2>
-                                <input type="text" name="productsummary" placeholder="Enter Summary" value="The phone comes with a 5.80-inch touchscreen display.............">
+                                <input type="text" id="productsummary" name="productsummary" placeholder="Enter Summary" value="">
                                 <h2>Product Amount</h2>
-                                <input type="text" name="productamount" placeholder="Enter Amount" value="$620">
+                                <input type="text" id="productamount" name="productamount" placeholder="Enter Amount" value="">
                                 <h2>Product Quantity</h2>
-                                <input type="text" name="productquantity" placeholder="Enter Quantity" value="40">
+                                <input type="text" id="productquantity" name="productquantity" placeholder="Enter Quantity" value="">
                                 <h2>Product Image</h2>
-                                <input type="file" name="upload" >
+                                <img src="" id="showimage" class="text-center" style="display: none; height: 150px; width: 150px"> <br>
+                                <input type="file" id="productimage" name="upload" onchange="showImage.call(this)" >
                                 <h2>Category</h2>
-                                <select>
+                                <select id="categoryoption">
                                 <option value="volvo">Phones & Tablets</option>
                                 <option value="saab">Computing</option>
                                 <option value="mercedes">Gaming</option>
@@ -85,6 +86,7 @@ <h2>Category</h2>
 
     <script src="js/middleware.js"></script>
     <script src="js/main.js"></script>
+    <script src="js/products.js"></script>
     </body>
 
 </html>
diff --git a/client/attendant_dashboard.html b/client/attendant_dashboard.html
@@ -7,7 +7,7 @@
         <meta name="description" content="A web application that helps store owners manage sales and product inventory records.">
         <meta name="keywords" content="Store Manager">
         <title>Store Manager | Welcome</title>
-        <script src="js/middleware.js"></script>
+        <script src="js/middleware.js" async></script>
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
         <link rel="stylesheet" href="css/style.css">
         <link rel="icon" type="image/ico" sizes="32x32" href="img/favicon.ico">

diff --git a/client/js/middleware.js b/client/js/middleware.js
@@ -57,7 +57,7 @@ if (window.location.pathname !== '/' && window.location.pathname !== '/index.htm
     if (decodedToken.type === 2) {
       this.dashboard_url = 'attendant_dashboard.html';
       if(document.location.href.indexOf('admin') > -1) {
-        alert('Forbidden, PS: You would be fired soon');
+        // alert('Forbidden, PS: You would be fired soon');
         return window.history.back();
       }
     }

diff --git a/client/js/products.js b/client/js/products.js
@@ -158,3 +158,47 @@ const deleteProduct = (id) => {
 //     e.preventDefault();
 //     // createProduct();
 // });
+
+ function showImage() {
+    if (this.files && this.files[0]) {
+        let obj = new FileReader();
+        obj.onload = (data) => {
+            let image = document.getElementById('showimage');
+            image.src = data.target.result;
+            image.style.display = 'block';
+            image.style.justifyContent = 'center';
+        }
+        obj.readAsDataURL(this.files[0]);
+    }
+}
+
+const getProductsById = () => {
+    let urlParams = new URLSearchParams(window.location.search);
+
+    const productId = urlParams.get('id');
+
+    request(`/products/${productId}`, 'GET')
+    .then(res => {
+       return res.json()
+    })
+    .then(data => {
+        const response = data.data;
+        console.log(data)
+        let productname = document.getElementById('productname');
+        let productsummary = document.getElementById('productsummary');
+        let productamount = document.getElementById('productamount');
+        let productquantity = document.getElementById('productquantity');
+        let productimage = document.getElementById('productimage');
+        let categoryoption = document.getElementById('categoryoption');
+        let image = document.getElementById('showimage');
+            image.src = response.product_image;
+            image.style.display = 'block';
+            image.style.justifyContent = 'center';
+            console.log(response.name)
+        productname.value = response.name;
+        productsummary.value = response.description;
+        productamount.value = `$${response.price}`;
+        productquantity.value = response.quantity;
+        productimage.filename = response.product_image;
+    })
+}
diff --git a/server/controllers/products.js b/server/controllers/products.js
@@ -160,7 +160,7 @@ class productController {
       productImage = req.file.path;
     }
     const {
-      name, description, quantity, price,
+      name, description, quantity, price, category_id
     } = req.body;
 
     const text = queries.productUpdateWithId;
@@ -170,13 +170,14 @@ class productController {
       description,
       quantity,
       price,
+      category_id,
       productImage,
       new Date(),
     ];
 
     db.query(text, values).then((dbres) => {
       return res.status(200).json({ status: 'success', data: dbres.rows[0] });
-    }).catch(() => {
+    }).catch((e) => { console.log(e)
       return res.status(400).json({ status: 'error', message: 'Error Updating Products, Please try again' });
     });
   }

diff --git a/server/models/queries.js b/server/models/queries.js
@@ -13,7 +13,7 @@ const queries = {
   productExist: 'SELECT * FROM products ',
   productExistWithId: 'SELECT * FROM products WHERE id = $1',
   productDeleteWithId: 'DELETE FROM products WHERE id = $1 returning *',
-  productUpdateWithId: 'UPDATE products SET name=($2), description=($3), quantity=($4), price=($5), product_image=($6), updated_at=($7) WHERE id=($1) returning *',
+  productUpdateWithId: 'UPDATE products SET name=($2), description=($3), quantity=($4), price=($5), category_id=($6), product_image=($7), updated_at=($8) WHERE id=($1) returning *',
   productUpdateCategoryWithId: 'UPDATE products SET category_id=($2), updated_at=($3) WHERE id=($1) returning *',
   categoryExists: 'SELECT * FROM categories ',
   categoryExistWithId: 'SELECT * FROM categories WHERE id = $1',

diff --git a/server/routes/api/v1/products.js b/server/routes/api/v1/products.js
@@ -67,7 +67,7 @@ router.delete('/:id', isLoggedIn, isAdmin, deleteProductById);
 // @route   PUT api/v1/products/<productId>
 // @desc    Update a single product record
 // @access   Private
-router.put('/:id', isLoggedIn, isAdmin, updateProductById);
+router.put('/:id', isLoggedIn, isAdmin, upload.single('productImage'), updateProductById);
 
 // @route   PUT api/v1/products/<productId>/<categoryId>
 // @desc    Assign Products To Category