From c6fb84759ffe64376a777df0a3e67799368e6d71 Mon Sep 17 00:00:00 2001
From: grey <pnh@thegreydiamond.de>
Date: Wed, 10 May 2023 21:28:11 +0200
Subject: [PATCH] - added some (non-working) category edit

---
 src/frontend/categoryManager.eta.html  | 38 +++++++++++++++++++++++++-
 src/frontend/errors/dbError.eta.html   |  2 +-
 src/routes/frontend/categoryManager.ts | 27 ++++++++++++++++--
 static/js/editCategory.js              | 12 ++++++++
 4 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 static/js/editCategory.js

diff --git a/src/frontend/categoryManager.eta.html b/src/frontend/categoryManager.eta.html
index 81b5d2c..c3626e9 100644
--- a/src/frontend/categoryManager.eta.html
+++ b/src/frontend/categoryManager.eta.html
@@ -40,6 +40,39 @@
 		</div>
 	</div>
 
+	<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModal" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h1 class="modal-title fs-5" id="editCategoryModalLabel">Edit a category</h1>
+					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+				</div>
+				<div class="modal-body">
+					<form method="post">
+						<div class="mb-3">
+							<label for="editCategoryModalName" class="form-label">Name</label>
+							<input type="text" class="form-control" id="editCategoryModalName" name="name" required />
+							<div id="editCategoryModalNameText" class="form-text">This name should be unqiue.</div>
+						</div>
+						<div class="mb-3">
+							<label for="editCategoryModalDescription" class="form-label">Description</label>
+							<input type="text" class="form-control" id="editCategoryModalDescription" name="description" />
+							<div id="editCategoryModalDescText" class="form-text">Optional</div>
+						</div>
+						<input type="text" id="editCategoryModalIsEdit" name="editCategoryModalIsEdit" hidden value="isEdit"/>
+						<input type="text" id="editCategoryModalId" name="editCategoryModalId" hidden/>
+					
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+					<button type="submit" class="btn btn-primary">Save changes</button>
+				</div>
+			</form>
+			</div>
+		</div>
+	</div>
+
+
 	<!-- Table with all categories -->
 	<table class="table">
 		<thead>
@@ -47,18 +80,21 @@
 				<th scope="col">#</th>
 				<th scope="col">Name</th>
 				<th scope="col">Description</th>
+				<th scope="col">Action</th>
 			</tr>
 		</thead>
 		<tbody>
 			<% it.items.forEach(function(user){ %>
-			<tr>
+			<tr id="listEntry-<%= user.id %>">
 				<th scope="row"><%= user.id %></th>
 				<td><%= user.name %></td>
 				<td><%= user.description %></td>
+				<td><button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editCategoryModal" onclick="selectDataForEdit('<%= user.id %>')"><i class="bi bi-pencil"></i></button></td>
 			</tr>
 			<% }) %>
 		</tbody>
 	</table>
 </div>
+<script src="/js/editCategory.js"></script>
 
 <%~ E.includeFile("partials/controlsFoot.eta.html") %> <%~ E.includeFile("partials/foot.eta.html") %>
diff --git a/src/frontend/errors/dbError.eta.html b/src/frontend/errors/dbError.eta.html
index dfc6594..3cd0e4a 100644
--- a/src/frontend/errors/dbError.eta.html
+++ b/src/frontend/errors/dbError.eta.html
@@ -7,7 +7,7 @@
 	</p>
 	<div class="collapse" id="collapseExample">
 		<div class="card card-body">
-			<pre><code><%= error %></code></pre>
+			<pre><code><%= it.error %></code></pre>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/frontend/categoryManager.ts b/src/routes/frontend/categoryManager.ts
index 6f87442..207336a 100644
--- a/src/routes/frontend/categoryManager.ts
+++ b/src/routes/frontend/categoryManager.ts
@@ -1,5 +1,5 @@
 import express, { Request, Response } from 'express';
-import { prisma, __path } from '../../index.js';
+import { prisma, __path, log } from '../../index.js';
 
 export default (req: Request, res: Response) => {
 	// If method is get, render the page
@@ -22,6 +22,9 @@ export default (req: Request, res: Response) => {
 			res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
 			return;
 		}
+		
+		if(!req.body.editCategoryModalIsEdit) {
+			console.log('is not edit');
 		// Save data to category table
 		prisma.category.create({
 			data: {
@@ -34,9 +37,29 @@ export default (req: Request, res: Response) => {
 		})
 		.catch((err) => {
 			// TODO Catch if is a duplicate error and show a message to the user
-			// TODO Fix this as it throws an error on the error page
+			log.db.error(err);
 			res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
 		});
+		} else {
+			// Save data to category table
+		prisma.category.update({
+			where: {
+				id: parseInt(req.body.editCategoryModalId)
+			},
+			data: {
+				name: req.body.name,
+				description: req.body.description,
+			},
+		})
+		.then(() => {
+			res.redirect('/allCategories');
+		})
+		.catch((err) => {
+			// TODO Catch if is a duplicate error and show a message to the user
+			log.db.error(err);
+			res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
+		});
+		}
 	}
 	
 };
diff --git a/static/js/editCategory.js b/static/js/editCategory.js
new file mode 100644
index 0000000..ba22d90
--- /dev/null
+++ b/static/js/editCategory.js
@@ -0,0 +1,12 @@
+function selectDataForEdit(id) {
+	const titleForm = document.getElementById('editCategoryModalName');
+	const descriptionForm = document.getElementById('editCategoryModalDescription');
+	const idForm = document.getElementById('editCategoryModalId');
+	const trData = document.getElementById('listEntry-' + id);
+	const title = trData.children[1].innerText;
+	const description = trData.children[2].innerText;
+	const idData = trData.children[0].innerText;
+	titleForm.value = title;
+	descriptionForm.value = description;
+	idForm.value = idData;
+}
\ No newline at end of file