Skip to content

Commit 60c0b89

Browse files
Abiodun-ShittuAbiodun-Shittu
committed
Complete Api Consumption
1 parent 226a39c commit 60c0b89

File tree

3 files changed

+169
-69
lines changed

3 files changed

+169
-69
lines changed

‎projects/2-price_precision/client-side/products.html

+5-34
Original file line numberDiff line numberDiff line change
@@ -62,44 +62,15 @@ <h3>Products</h3>
6262
<tr>
6363
<th>Product Name</th>
6464
<th>Price ($)</th>
65+
<th>Per</th>
6566
<th>Order Number</th>
6667
<th>Status</th>
6768
<th>Action</th>
6869
</tr>
6970
</thead>
7071

71-
<tbody>
72-
<tr>
73-
<td></td>
74-
<td></td>
75-
<td></td>
76-
<td class="available"></td>
77-
<th>x</th>
78-
</tr>
79-
80-
<tr>
81-
<td contenteditable="true">Caustic Soda</td>
82-
<td>750</td>
83-
<td>78379</td>
84-
<td class="available">Available</td>
85-
<th>x</th>
86-
</tr>
87-
88-
<tr>
89-
<td>Nama meat</td>
90-
<td>100.00</td>
91-
<td>484577</td>
92-
<td class="available">Available</td>
93-
<th>x</th>
94-
</tr>
95-
96-
<tr>
97-
<td>Folic acid</td>
98-
<td>900.00</td>
99-
<td>483776</td>
100-
<td class="finished">Out of stock</td>
101-
<th>x</th>
102-
</tr>
72+
<tbody id="table-body">
73+
10374
</tbody>
10475
</table>
10576
<button class="btn" id="add-new-product-btn">Add New Product</button>
@@ -127,7 +98,7 @@ <h3>Products</h3>
12798
<div class="backdrop" id="backdrop">
12899
<div class="form-container">
129100
<div class="form-heading">
130-
<h2>Add New Product</h2>
101+
<h2 id="backdrop-heading">Add New Product</h2>
131102
<i class="fa-solid fa-xmark" id="close"></i>
132103
</div>
133104

@@ -158,7 +129,7 @@ <h2>Add New Product</h2>
158129

159130
<div>
160131

161-
<input type="radio" id="status" value="Out of stock" name="status"/>
132+
<input type="radio" id="status2" value="Out of stock" name="status"/>
162133
<label for="finished">Out of stock</label>
163134

164135

‎projects/2-price_precision/client-side/scripts/products.js

+163-34
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const addNewProductBtn = document.querySelector("#add-new-product-btn");
22
const backdrop = document.querySelector("#backdrop");
33
const closeBtn = document.querySelector("#close");
44
const addProductBtn = document.querySelector("#add-product-btn");
5+
const tableBody = document.querySelector("#table-body");
56

67
addNewProductBtn.addEventListener("click", function () {
78
backdrop.style.display = "block";
@@ -18,45 +19,173 @@ const initials = localStorage.getItem("initials");
1819

1920
document.getElementById("initials").innerHTML = initials
2021

21-
addProductForm.addEventListener("submit", async (e) => {
22-
e.preventDefault();
23-
// console.log("Product added successfully")
24-
25-
// Get the form data
26-
// const productData = new FormData(e.target)
27-
// const productDataObject = Object.fromEntries(productData.entries())
28-
// console.log(productDataObject)
29-
const productNameInput = document.getElementById("product_name");
30-
const priceInput = document.getElementById("price");
31-
const perInput = document.getElementById("per");
32-
const statusInput = document.getElementById("status");
33-
// const statusInput2 = document.getElementById("status2")
34-
35-
const productData = {
36-
product_name: productNameInput.value,
37-
price: priceInput.value,
38-
per: perInput.value,
39-
product_status: statusInput.checked ? "Available" : "Out of stock",
40-
};
41-
42-
// console.log(productData);
4322

23+
const productNameInput = document.getElementById("product_name");
24+
const priceInput = document.getElementById("price");
25+
const perInput = document.getElementById("per");
26+
const statusInput = document.getElementById("status");
27+
// Handle form submission for adding new product
28+
if (addProductBtn.innerHTML === "Add Product"){
29+
addProductForm.addEventListener("submit", async (e) => {
30+
e.preventDefault();
31+
// console.log("Product added successfully")
32+
33+
// Get the form data
34+
// const productData = new FormData(e.target)
35+
// const productDataObject = Object.fromEntries(productData.entries())
36+
// console.log(productDataObject)
37+
// const statusInput2 = document.getElementById("status2")
38+
39+
const productData = {
40+
product_name: productNameInput.value,
41+
price: priceInput.value,
42+
per: perInput.value,
43+
product_status: statusInput.checked ? "Available" : "Out of stock",
44+
};
45+
46+
// console.log(productData);
47+
48+
try {
49+
const response = await fetch(`${baseUrl}/products/create`, {
50+
method: "POST",
51+
headers: {
52+
"Content-Type": "application/json",
53+
Authorization: `Bearer ${userToken}`,
54+
},
55+
body: JSON.stringify(productData),
56+
});
57+
const data = await response.json();
58+
console.log(data);
59+
if (data.message === "Product Created successfully") {
60+
alert(data.message);
61+
backdrop.style.display = "none";
62+
addProductForm.reset();
63+
fetchAllProducts();
64+
}
65+
66+
} catch (error) {
67+
console.log("Error ==>", error);
68+
}
69+
});
70+
}
71+
72+
// fetch all products
73+
const fetchAllProducts = async () => {
4474
try {
45-
const response = await fetch(`${baseUrl}/products/create`, {
46-
method: "POST",
47-
headers: {
48-
"Content-Type": "application/json",
49-
Authorization: `Bearer ${userToken}`,
50-
},
51-
body: JSON.stringify(productData),
75+
const response = await fetch(`${baseUrl}/products/all`, {
76+
headers: { Authorization: `Bearer ${userToken}`,}
5277
});
78+
79+
tableBody.innerHTML = ""; // Clear existing table rows
5380
const data = await response.json();
54-
console.log(data);
55-
if (data.message === "Product Created successfully") {
56-
alert(data.message);
57-
addProductForm.reset();
81+
// console.log(data)
82+
if (data.message === "All products retrieved successfully") {
83+
data.products.forEach( (product) => {
84+
const rows = document.createElement("tr");
85+
rows.innerHTML = `
86+
<td>${product.product_name}</td>
87+
<td>${product.price}</td>
88+
<td>${product.per}</td>
89+
<td>${product.order_no}</td>
90+
<td>${product.product_status}</td>
91+
<td>
92+
<button class="edit-btn" data-id=${product.order_no}>Edit</button>
93+
<button class="delete-btn" data-id=${product.order_no}>Delete</button>
94+
</td>
95+
`;
96+
tableBody.appendChild(rows);
97+
})
5898
}
5999
} catch (error) {
60100
console.log("Error ==>", error);
61101
}
62-
});
102+
}
103+
104+
// Fetch Products when the page loads
105+
fetchAllProducts();
106+
107+
// Handle Product edit and delete
108+
tableBody.addEventListener("click", async(e) => {
109+
e.preventDefault()
110+
const target = e.target;
111+
const order_no = target.dataset.id
112+
113+
if (target.classList.contains("edit-btn")) {
114+
115+
try {
116+
const response = await fetch(`${baseUrl}/products/${order_no}`, {
117+
headers: { Authorization: `Bearer ${userToken}` },
118+
});
119+
const data = await response.json();
120+
console.log(data);
121+
if (data.message === "Product retrieved successfully") {
122+
document.getElementById("backdrop-heading").innerHTML = "Edit Product";
123+
addProductBtn.innerHTML = "Save";
124+
backdrop.style.display = "block";
125+
126+
127+
document.getElementById("product_name").value = data.product[0].product_name;
128+
document.getElementById("price").value = data.product[0].price
129+
document.getElementById("per").value = data.product[0].per
130+
// check the radio button based on the product_status
131+
if (data.product[0].product_status === "Available") {
132+
document.getElementById("status").checked = true
133+
} else {
134+
document.getElementById("status2").checked = true
135+
}
136+
}
137+
138+
// Handle Updating Product
139+
if (addProductBtn.innerHTML === "Save") {
140+
addProductForm.addEventListener("submit", async(e) => {
141+
e.preventDefault();
142+
const updatedProductData = {
143+
product_name: productNameInput.value,
144+
price: priceInput.value,
145+
per: perInput.value,
146+
product_status: statusInput.checked ? "Available" : "Out of stock",
147+
};
148+
149+
try {
150+
const response = await fetch(`${baseUrl}/products/${order_no}`, {
151+
method: "PUT",
152+
headers: {
153+
"Content-Type": "application/json",
154+
Authorization: `Bearer ${userToken}`
155+
},
156+
body: JSON.stringify(updatedProductData)
157+
});
158+
const data = await response.json();
159+
// console.log(data);
160+
if (data.message === "Product updated successfully") {
161+
alert(data.message);
162+
backdrop.style.display = "none";
163+
addProductForm.reset();
164+
fetchAllProducts();
165+
}
166+
} catch (error) {
167+
console.log("Error ==>", error);
168+
}
169+
})
170+
}
171+
} catch (error) {
172+
console.log("Error ==>", error);
173+
}
174+
175+
} else if (target.classList.contains("delete-btn")) {
176+
try {
177+
const response = await fetch(`${baseUrl}/products/${order_no}`, {
178+
method: "DELETE",
179+
headers: { Authorization: `Bearer ${userToken}` },
180+
});
181+
const data = await response.json()
182+
183+
if (data.message === "Product deleted successfully") {
184+
alert(data.message);
185+
fetchAllProducts();
186+
}
187+
} catch (error) {
188+
console.log("Error ==>", error);
189+
}
190+
}
191+
})

‎projects/2-price_precision/server-side/src/controllers/product.controller.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export const deleteProduct = async(req, res) => {
8383

8484
await queryPromise("DELETE FROM product_info WHERE order_no = ? AND business_id = ?", [ order_no, business_id ])
8585

86-
return res.status(200).json({ message: " Product deleted successfully"})
86+
return res.status(200).json({ message: "Product deleted successfully"})
8787

8888
} catch (error) {
8989
console.log("Error deleting product", error.message);

0 commit comments

Comments
 (0)