Skip to content

Commit 91b0682

Browse files
P-NOULISP-NOULIS
committed
Added front end functionality for Update & Delete
Updated the front end to properly support Updating and deleting products from the table
1 parent 8ce4e27 commit 91b0682

File tree

1 file changed

+149
-75
lines changed

1 file changed

+149
-75
lines changed

‎src/main/resources/static/products.html‎

Lines changed: 149 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,162 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
3+
<head>
4+
<meta charset="UTF-8" />
55
<title>All Products</title>
66
<style>
7-
body {
8-
font-family: Arial, sans-serif;
9-
padding: 20px;
10-
}
11-
h1 {
12-
text-align: center;
13-
}
14-
.top-bar {
15-
display: flex;
16-
justify-content: space-between;
17-
align-items: center;
18-
width: 80%;
19-
margin: 0 auto 20px;
20-
}
21-
.add-button {
22-
padding: 10px 20px;
23-
background-color: #4CAF50;
24-
color: white;
25-
border: none;
26-
border-radius: 5px;
27-
cursor: pointer;
28-
text-decoration: none;
29-
}
30-
.add-button:hover {
31-
background-color: #45a049;
32-
}
33-
table {
34-
width: 80%;
35-
margin: auto;
36-
border-collapse: collapse;
37-
}
38-
th, td {
39-
border: 1px solid #aaa;
40-
padding: 10px;
41-
text-align: center;
42-
}
43-
th {
44-
background-color: #f4f4f4;
45-
}
7+
body {
8+
font-family: Arial, sans-serif;
9+
padding: 20px;
10+
}
11+
h1 {
12+
text-align: center;
13+
}
14+
.top-bar {
15+
display: flex;
16+
justify-content: space-between;
17+
align-items: center;
18+
width: 80%;
19+
margin: 0 auto 20px;
20+
}
21+
.add-button {
22+
padding: 10px 20px;
23+
background-color: #4caf50;
24+
color: white;
25+
border: none;
26+
border-radius: 5px;
27+
cursor: pointer;
28+
text-decoration: none;
29+
}
30+
.add-button:hover {
31+
background-color: #45a049;
32+
}
33+
table {
34+
width: 80%;
35+
margin: auto;
36+
border-collapse: collapse;
37+
}
38+
th,
39+
td {
40+
border: 1px solid #aaa;
41+
padding: 10px;
42+
text-align: center;
43+
}
44+
th {
45+
background-color: #f4f4f4;
46+
}
47+
.edit-btn,
48+
.delete-btn {
49+
padding: 5px 10px;
50+
border: none;
51+
border-radius: 3px;
52+
cursor: pointer;
53+
width: 30%;
54+
margin-left: 12px;
55+
margin-right: 12px;
56+
}
57+
.edit-btn {
58+
background-color: #08710a;
59+
color: rgb(255, 255, 255);
60+
}
61+
.edit-btn:hover {
62+
background-color: #045606;
63+
}
64+
.delete-btn {
65+
background-color: #dc3545;
66+
color: white;
67+
}
68+
.delete-btn:hover {
69+
background-color: #c82333;
70+
}
4671
</style>
47-
</head>
48-
<body>
49-
<div class="top-bar">
50-
<h1>Product List</h1>
51-
<a href="add.html" class="add-button">Add Product</a>
52-
</div>
72+
</head>
73+
<body>
74+
<div class="top-bar">
75+
<h1>Product List</h1>
76+
<a href="add.html" class="add-button">Add Product</a>
77+
</div>
5378

54-
<table id="productTable">
55-
<thead>
56-
<tr>
57-
<th>ID</th>
58-
<th>Product Name</th>
59-
<th>Quantity</th>
60-
</tr>
61-
</thead>
62-
<tbody>
63-
<!-- Products will be injected here by JavaScript -->
64-
</tbody>
65-
</table>
79+
<table id="productTable">
80+
<thead>
81+
<tr>
82+
<th>ID</th>
83+
<th>Product Name</th>
84+
<th>Quantity</th>
85+
<th>Actions</th>
86+
</tr>
87+
</thead>
88+
<tbody></tbody>
89+
</table>
6690

67-
<script>
68-
fetch("/products") // Fetch data from backend
69-
.then(response => response.json())
70-
.then(products => {
71-
const tableBody = document.querySelector("#productTable tbody");
91+
<script>
92+
// Fetch products from backend
93+
fetch("/products")
94+
.then((response) => response.json())
95+
.then((products) => {
96+
const tableBody = document.querySelector("#productTable tbody");
7297

73-
products.forEach(product => {
74-
const row = document.createElement("tr");
75-
row.innerHTML = `
98+
products.forEach((product) => {
99+
const row = document.createElement("tr");
100+
row.innerHTML = `
76101
<td>${product.id}</td>
77-
<td>${product.productName}</td>
78-
<td>${product.qt}</td>
102+
<td contenteditable="true" class="editable" data-id="${product.id}" data-field="productName">${product.productName}</td>
103+
<td contenteditable="true" class="editable" data-id="${product.id}" data-field="qt">${product.qt}</td>
104+
<td>
105+
<button class="edit-btn" onclick="updateProduct(${product.id})">Save</button>
106+
<button class="delete-btn" onclick="deleteProduct(${product.id})">Delete</button>
107+
</td>
79108
`;
80-
tableBody.appendChild(row);
81-
});
109+
tableBody.appendChild(row);
110+
});
82111
})
83-
.catch(error => {
84-
console.error("Error fetching products:", error);
112+
.catch((error) => {
113+
console.error("Error fetching products:", error);
85114
});
86-
</script>
87-
</body>
115+
116+
// Delete a product
117+
function deleteProduct(id) {
118+
if (confirm("Are you sure you want to delete this product?")) {
119+
fetch(`/products/${id}`, { method: "DELETE" })
120+
.then((response) => {
121+
if (response.ok) {
122+
alert("Product deleted successfully!");
123+
location.reload();
124+
} else {
125+
alert("Error deleting product.");
126+
}
127+
})
128+
.catch((error) => console.error("Error:", error));
129+
}
130+
}
131+
132+
// Update a product
133+
function updateProduct(id) {
134+
const productName = document.querySelector(
135+
`td[data-id='${id}'][data-field='productName']`
136+
).innerText;
137+
const quantity = document.querySelector(
138+
`td[data-id='${id}'][data-field='qt']`
139+
).innerText;
140+
141+
const updatedProduct = {
142+
productName: productName,
143+
qt: parseInt(quantity),
144+
};
145+
146+
fetch(`/products/${id}`, {
147+
method: "PUT",
148+
headers: { "Content-Type": "application/json" },
149+
body: JSON.stringify(updatedProduct),
150+
})
151+
.then((response) => {
152+
if (response.ok) {
153+
alert("Product updated successfully!");
154+
} else {
155+
alert("Error updating product.");
156+
}
157+
})
158+
.catch((error) => console.error("Error:", error));
159+
}
160+
</script>
161+
</body>
88162
</html>

0 commit comments

Comments
 (0)