Skip to content

Commit 1113a52

Browse files
codex-aveecodex-avee
committed
added product add example using ajax
1 parent ec18b1c commit 1113a52

6 files changed

Lines changed: 200 additions & 7 deletions

File tree

‎api/categories-api.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
2+
/***
3+
* A very basic CRUD example using PostgreSQL
4+
*/
5+
6+
module.exports = function (categoryService) {
7+
8+
async function all(req, res) {
9+
try {
10+
let categories = await categoryService.all();
11+
res.json({
12+
status: 'success',
13+
data: categories
14+
});
15+
}
16+
catch (err) {
17+
res.json({
18+
status: "error",
19+
error: err.stack
20+
});
21+
}
22+
};
23+
24+
async function add(req, res) {
25+
try {
26+
let input = req.body;
27+
await categoryService.add(input);
28+
res.json({
29+
status: 'success',
30+
data: categories
31+
});
32+
}
33+
catch (err) {
34+
res.json({
35+
status: "error",
36+
error: err.stack
37+
});
38+
}
39+
};
40+
41+
async function get(req, res) {
42+
try {
43+
var id = req.params.id;
44+
let result = await categoryService.get(id);
45+
res.json({
46+
status: 'success',
47+
data: result.rows[0]
48+
});
49+
}
50+
catch (err) {
51+
res.json({
52+
status: "error",
53+
error: err.stack
54+
});
55+
}
56+
};
57+
58+
async function update(req, res) {
59+
60+
try {
61+
const data = req.body;
62+
const id = req.params.id;
63+
const description = data.description;
64+
65+
await categoryService.update({
66+
id,
67+
description
68+
})
69+
res.json({
70+
status: 'success'
71+
});
72+
}
73+
catch (err) {
74+
res.json({
75+
status: "error",
76+
error: err.stack
77+
});
78+
}
79+
80+
};
81+
82+
async function deleteOne(req, res) {
83+
try{
84+
const id = req.params.id;
85+
await categoryService.delete(id);
86+
res.json({
87+
status: 'success'
88+
});
89+
}
90+
catch(err){
91+
res.json({
92+
status: "error",
93+
error: err.stack
94+
});
95+
}
96+
};
97+
98+
return {
99+
add,
100+
delete: deleteOne,
101+
update,
102+
get,
103+
all
104+
}
105+
}

‎api/products-api.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ module.exports = function(productService) {
33
async function all(req, res) {
44
try {
55
let results = await productService.all();
6-
76
res.json({
87
status: 'success',
98
data: results
10-
})
9+
});
1110
}
1211
catch (err) {
1312
next(err);

‎index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const express = require('express');
44
const exphbs = require('express-handlebars');
55
const bodyParser = require('body-parser');
66
const Categories = require('./routes/categories');
7+
const CategoriesAPI = require('./api/categories-api');
78
const Products = require('./routes/products');
89
const ProductsAPI = require('./api/products-api');
910

@@ -32,6 +33,7 @@ const pool = new Pool({
3233
const categoryService = CategoryService(pool);
3334
const productService = ProductService(pool);
3435
const categoryRoutes = Categories(categoryService);
36+
const categoryAPI = CategoriesAPI(categoryService);
3537
const productRoutes = Products(productService, categoryService);
3638
const productsAPI = ProductsAPI(productService);
3739

@@ -80,6 +82,9 @@ app.post('/products/add', productRoutes.add);
8082
app.get('/products/delete/:id', productRoutes.delete);
8183

8284
app.get('/api/products', productsAPI.all);
85+
app.post('/api/products', productsAPI.add);
86+
87+
app.get('/api/categories', categoryAPI.all);
8388

8489
app.use(errorHandler);
8590

‎public/client.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,39 @@
2626
</table>
2727
</script>
2828

29+
<script type="text/x-template" class="categoryListTemplate">
30+
<option value="">Select category</option>
31+
{{#each categoryList}}
32+
<option value="{{id}}">{{description}}</option>
33+
{{/each}}
34+
</script>
35+
2936
</head>
3037
<body>
3138
<div id="container">
3239
<h1>Products via API</h1>
3340
<div class="products">
3441

3542
</div>
43+
<div>
44+
<h1>Add product</h1>
45+
<div>
46+
<label for="productName">Name</label>
47+
<input type="text" name="productName" class="productName" >
48+
</div>
49+
<div>
50+
<select name="category" id="" class="categories categoryId">
51+
<option value="">Select category</option>
52+
</select>
53+
</div>
54+
<div>
55+
<label for="price">Price</label>
56+
<input type="number" name="price" id="" class="price">
57+
</div>
58+
<div>
59+
<button class="addProductBtn">Add product</button>
60+
</div>
61+
</div>
3662
</div>
3763
</body>
3864
<script src="client.js"></script>

‎public/client.js‎

Lines changed: 62 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,89 @@
11
document.addEventListener('DOMContentLoaded', function() {
22

33
let productListTemplate = document.querySelector('.productListTemplate');
4+
let categoryListTemplate = document.querySelector('.categoryListTemplate');
5+
6+
let categoryListTemplateInstance = Handlebars.compile(categoryListTemplate.innerHTML);
47
let productListTemplateInstance = Handlebars.compile(productListTemplate.innerHTML);
8+
59
let productsElem = document.querySelector('.products');
10+
let categoriesElem = document.querySelector('.categories');
11+
12+
let productNameElem = document.querySelector('.productName');
13+
let priceElem = document.querySelector('.price');
14+
let categoryIdElem = document.querySelector('.categoryId');
15+
let productBtn = document.querySelector('.addProductBtn');
616

717
// Client side Factory function
818
let productService = ProductService();
919

10-
productService
20+
function showCategoryDropdown() {
21+
axios
22+
.get('/api/categories')
23+
.then(function(results){
24+
let response = results.data;
25+
let data = response.data;
26+
let html = categoryListTemplateInstance({
27+
categoryList: data
28+
});
29+
categoriesElem.innerHTML = html;
30+
});
31+
}
32+
33+
function showProducts() {
34+
productService
1135
.getProducts()
1236
.then(function(results){
1337
let response = results.data;
1438
let data = response.data;
15-
// console.log(data);
16-
let productTableHTML = productListTemplateInstance({
39+
let html = productListTemplateInstance({
1740
productList : data
1841
});
42+
let productTableHTML = html;
1943
productsElem.innerHTML = productTableHTML;
2044
});
21-
});
45+
}
46+
47+
function clearFields() {
48+
productNameElem.value = '';
49+
categoryIdElem.value = '';
50+
priceElem.value= '';
51+
}
52+
53+
productBtn.addEventListener('click', function() {
54+
55+
let description = productNameElem.value;
56+
let category_id = categoryIdElem.value;
57+
let price = priceElem.value;
58+
59+
productService.addProduct({
60+
category_id,
61+
description,
62+
price
63+
})
64+
.then(function() {
65+
showProducts();
66+
clearFields();
67+
})
68+
.catch(function(err){
69+
alert(err);
70+
});
71+
});
72+
73+
showCategoryDropdown();
74+
showProducts();
2275

76+
});
2377

2478
function ProductService() {
2579
function getProducts(){
2680
return axios.get('/api/products')
2781
}
2882

83+
function addProduct(data) {
84+
return axios.post('/api/products', data)
85+
}
86+
2987
return {
3088
getProducts
3189
}

‎public/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ input[type=text], input[type=number] {
5151
margin-bottom: 1em;
5252
}
5353

54-
input[type=submit] {
54+
input[type=submit], button {
5555
padding: 1em;
5656
border: 0.3em solid #000;
5757
font-weight: bold;

0 commit comments

Comments
 (0)