Added basic field validation

codex-avee · codex-avee · commit 9b4e7afec032 · 2018-09-21T18:28:58.000+02:00
diff --git a/api/products-api.js b/api/products-api.js
@@ -1,3 +1,4 @@
+
 module.exports = function(productService) {
 	
 	async function all(req, res) {
diff --git a/public/client.html b/public/client.html
@@ -15,12 +15,14 @@
             <th>Product name</th>
             <th>Category name</th>
             <th>Price</th>
+            <th></th>
         </tr>
         {{#each productList}}
         <tr>
                 <td>{{description}}</td>
                 <td>{{category_description}}</td>
                 <td>{{price}}</td>
+                <td><button onclick="editProduct({{id}})" >Edit</button></td>
             </tr>
         {{/each}}
     </table>
@@ -33,15 +35,25 @@
         {{/each}}
     </script>
 
+    <script type="text/x-template" class="errorsTemplate">
+        <ul>
+            {{#each errors}}
+                <li>{{this}}</li>
+            {{/each}}
+        </ul>
+    </script>
+
 </head>
 <body>
     <div id="container">
             <h1>Products via API</h1>
+            
             <div class="products">
-        
             </div>
             <div>
                 <h1>Add product</h1>
+                <div class="errors">
+                </div>
                 <div>
                     <label for="productName">Name</label>
                     <input type="text" name="productName" class="productName" >
diff --git a/public/client.js b/public/client.js
@@ -1,13 +1,21 @@
 document.addEventListener('DOMContentLoaded', function() {
 
+    function compileTemplate(selector) {
+        let template = document.querySelector(selector);
+        let templateInstance = Handlebars.compile(template.innerHTML);
+        return templateInstance;
+    }
+
     let productListTemplate = document.querySelector('.productListTemplate');
     let categoryListTemplate = document.querySelector('.categoryListTemplate');
 
     let categoryListTemplateInstance = Handlebars.compile(categoryListTemplate.innerHTML);
     let productListTemplateInstance = Handlebars.compile(productListTemplate.innerHTML);
-    
+    let errorsTemplateInstance = compileTemplate('.errorsTemplate');
+
     let productsElem = document.querySelector('.products');
     let categoriesElem = document.querySelector('.categories');
+    let errorsElem = document.querySelector('.errors');
 
     let productNameElem = document.querySelector('.productName');
     let priceElem = document.querySelector('.price');
@@ -56,7 +64,20 @@ document.addEventListener('DOMContentLoaded', function() {
         let category_id = categoryIdElem.value;
         let price = priceElem.value;
 
-        productService.addProduct({
+        let errors = [];
+        if (!description) {
+            errors.push('Enter a product description');
+        }
+        if (!category_id) {
+            errors.push('Select a Category');
+        }
+        if (!description) {
+            errors.push('Enter a price');
+        }
+
+        if (errors.length === 0) {
+            errorsElem.innerHTML = '';
+            productService.addProduct({
                 category_id,
                 description,
                 price
@@ -68,13 +89,23 @@ document.addEventListener('DOMContentLoaded', function() {
             .catch(function(err){
                 alert(err);
             });
+        }
+        else {
+            errorsElem.innerHTML = errorsTemplateInstance({errors});
+        }
+        
     });
 
     showCategoryDropdown();
     showProducts();
 
+
 });
 
+function editProduct(id) {
+    alert(id);
+}
+
 function ProductService() {
     function getProducts(){
         return axios.get('/api/products')
@@ -85,6 +116,7 @@ function ProductService() {
     }
 
     return {
+        addProduct,
         getProducts
     }
 }
diff --git a/public/style.css b/public/style.css
@@ -102,4 +102,8 @@ table {
 
 th, td {
     padding: 15px;
-}	
+}
+
+.errors {
+	color: red;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+`
`1`	`2`	`module.exports = function(productService) {`
`2`	`3`
`3`	`4`	`async function all(req, res) {`