From bd7f230fe15a5b539f0da10164c0e8efbb5782af Mon Sep 17 00:00:00 2001
From: Augusto Gunsch <augusto@augustogunsch.com>
Date: Wed, 27 Jul 2022 12:59:59 +0200
Subject: [PATCH] Improve listing page

---
 index.css               | 44 +++++++++++++++++++++++++++++++++++++++--
 index.php => index.html | 10 +++-------
 index.js                | 28 ++++++++++++++++++++++++++
 model/product.php       |  1 +
 view/products.php       |  4 ++++
 5 files changed, 78 insertions(+), 9 deletions(-)
 rename index.php => index.html (75%)
 create mode 100644 index.js
 create mode 100644 view/products.php

diff --git a/index.css b/index.css
index efa041e..2e87909 100644
--- a/index.css
+++ b/index.css
@@ -1,14 +1,54 @@
+body {
+	font-family: cursive;
+}
+
 #header {
 	display: flex;
 	justify-content: space-between;
+	border-bottom: 2px solid gray;
+	margin: 0 1em 2em;
 }
 
 #buttons {
 	display: flex;
+	margin: 0 1em;
 }
 
 #buttons button {
-	height: 2em;
-	margin: 1em;
+	font-family: cursive;
+	padding: .5em 1em;
+	font-size: 1rem;
+	margin: 0 2em;
 	align-self: center;
+	background-color: white;
+	border: 2px solid black;
+	box-shadow: 2px 2px black;
+}
+
+#buttons button:hover {
+	background-color: #EEE;
+	cursor: pointer;
+}
+
+#products {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.product {
+	width: 150px;
+	height: 150px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	text-align: center;
+	border: 2px solid black;
+	margin: 1em;
+	position: relative;
+}
+
+.delete-checkbox {
+	border: 1px solid black;
+	position: absolute;
+	top: 0px;
 }
diff --git a/index.php b/index.html
similarity index 75%
rename from index.php
rename to index.html
index dc8eecd..ad256d6 100644
--- a/index.php
+++ b/index.html
@@ -13,12 +13,8 @@
 				<button id="delete-product-btn">MASS DELETE</button>
 			</div>
 		</div>
-<?php
-require 'model/product.php';
-
-$products = Product::selectAll();
-// TODO
-echo json_encode($products);
-?>
+		<div id="products">
+		</div>
 	</body>
+	<script src="index.js"></script>
 </html>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..fbca442
--- /dev/null
+++ b/index.js
@@ -0,0 +1,28 @@
+const productsList = document.getElementById('products');
+
+const loadItems = () => {
+	const xhttp = new XMLHttpRequest();
+
+	xhttp.onload = function() {
+		const products = JSON.parse(this.responseText);
+
+		const boxes = products.map(product =>
+			`<div class="product">
+				<input type="checkbox" class="delete-checkbox" value="${product.id}">
+				<p>
+					${product.sku}<br>
+					${product.name}<br>
+					${product.price} $<br>
+					${product.attribute}
+				</p>
+			 </div>
+		`)
+
+		productsList.innerHTML = boxes.join('\n');
+	}
+
+	xhttp.open('GET', 'view/products.php', true);
+	xhttp.send();
+}
+
+loadItems();
diff --git a/model/product.php b/model/product.php
index 1386d28..798fe92 100644
--- a/model/product.php
+++ b/model/product.php
@@ -86,6 +86,7 @@ abstract class Product implements JsonSerializable {
 
 	public function jsonSerialize() : mixed {
 		return [
+			'id' => $this->getProductId(),
 			'sku' => $this->getSKU(),
 			'name' => $this->getName(),
 			'price' => $this->getPrice(),
diff --git a/view/products.php b/view/products.php
new file mode 100644
index 0000000..76f5705
--- /dev/null
+++ b/view/products.php
@@ -0,0 +1,4 @@
+<?php
+require '../model/product.php';
+
+echo json_encode(Product::selectAll());