49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
export default class ProductView {
|
|
constructor(root, handlers) {
|
|
this.root = root;
|
|
this.handlers = handlers;
|
|
}
|
|
|
|
render(products) {
|
|
this.root.innerHTML = "";
|
|
|
|
const table = document.createElement("table");
|
|
table.innerHTML = `
|
|
<tr><th>ID</th><th>Название</th><th>Категория</th><th>Бренд</th><th>Действия</th></tr>
|
|
`;
|
|
|
|
products.forEach((p) => {
|
|
const row = document.createElement("tr");
|
|
row.innerHTML = `
|
|
<td>${p.id}</td>
|
|
<td>${p.name}</td>
|
|
<td>${p.categoryId}</td>
|
|
<td>${p.brandId}</td>
|
|
<td>
|
|
<button data-id="${p.id}" class="edit">✏️</button>
|
|
<button data-id="${p.id}" class="delete">🗑️</button>
|
|
</td>
|
|
`;
|
|
table.appendChild(row);
|
|
});
|
|
|
|
this.root.appendChild(table);
|
|
|
|
this.root
|
|
.querySelectorAll(".edit")
|
|
.forEach((btn) =>
|
|
btn.addEventListener("click", (e) =>
|
|
this.handlers.onEdit(parseInt(e.target.dataset.id)),
|
|
),
|
|
);
|
|
|
|
this.root
|
|
.querySelectorAll(".delete")
|
|
.forEach((btn) =>
|
|
btn.addEventListener("click", (e) =>
|
|
this.handlers.onDelete(parseInt(e.target.dataset.id)),
|
|
),
|
|
);
|
|
}
|
|
}
|