From 0c7c294823b0fd8efa8e2cd2c2f5935ffd2e4ad3 Mon Sep 17 00:00:00 2001
From: Spacelord <git@spacelord.de>
Date: Mon, 15 May 2023 22:10:32 +0200
Subject: [PATCH] Unified Category modal

---
 src/frontend/manage/categoryManager.eta.html | 44 ++------------------
 static/js/editCategory.js                    | 14 +++++++
 2 files changed, 17 insertions(+), 41 deletions(-)

diff --git a/src/frontend/manage/categoryManager.eta.html b/src/frontend/manage/categoryManager.eta.html
index 8eb4739..91418ae 100644
--- a/src/frontend/manage/categoryManager.eta.html
+++ b/src/frontend/manage/categoryManager.eta.html
@@ -1,6 +1,5 @@
 <%~ E.includeFile("../partials/head.eta.html", {"title": "Settings - Category"}) %> <%~ E.includeFile("../partials/controls.eta.html", {"active": "SETT_CAT"}) %>
 
-<!-- Modal -->
 <!-- Modal -->
 <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
 	<div class="modal-dialog">
@@ -23,47 +22,10 @@
 	<!-- Create new category button -->
 	<div class="row">
 		<div class="col-12">
-			<a href="/settings/category/new" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createNewCategoryModal">Create new category</a>
+			<a href="/settings/category/new" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editCategoryModal" onclick="primeCreateNew()">Create new category</a>
 		</div>
 	</div>
 
-	<!-- Modal -->
-	<div class="modal fade" id="createNewCategoryModal" tabindex="-1" aria-labelledby="createNewCategoryModal" aria-hidden="true">
-		<div class="modal-dialog">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h1 class="modal-title fs-5" id="createNewCategoryModalLabel">Create a new category</h1>
-					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-				</div>
-				<form class="frontendForm" method="post" data-target="/api/v1/categories">
-					<div class="modal-body">
-						<div class="mb-3">
-							<label for="createNewCategoryModalName" class="form-label">Name</label>
-							<input type="text" class="form-control" id="createNewCategoryModalName" name="name" required />
-							<div id="createNewCategoryModalNameText" class="form-text">This name should be unqiue.</div>
-						</div>
-						<div class="mb-3">
-							<label for="createNewCategoryModalDescription" class="form-label">Description</label>
-							<input type="text" class="form-control" id="createNewCategoryModalDescription" name="description" />
-							<div id="createNewCategoryModalDescText" class="form-text">Optional</div>
-						</div>
-					</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>
-					<!-- loader overlay -->
-					<div class="loader-overlay">
-						<div class="loader">
-							<div class="spinner-border text-primary" role="status">
-								<span class="visually-hidden">Loading...</span>
-							</div>
-						</div>
-					</div>
-				</form>
-			</div>
-		</div>
-	</div>
 
 	<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModal" aria-hidden="true">
 		<div class="modal-dialog">
@@ -72,7 +34,7 @@
 					<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>
-				<form class="frontendForm" method="patch" data-target="/api/v1/categories">
+				<form class="frontendForm" method="patch" data-target="/api/v1/categories" id="CategoryModalForm">
 					<div class="modal-body">
 						<div class="mb-3">
 							<label for="editCategoryModalName" class="form-label">Name</label>
@@ -111,7 +73,7 @@
 				<td scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= user.id %>"><%= user.name %></td>
 				<td><%= user.description %></td>
 				<td>
-					<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editCategoryModal" onclick="getDataForEdit('<%= user.name %>')"><i class="bi bi-pencil"></i></button>
+					<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editCategoryModal" onclick="primeEdit(); getDataForEdit('<%= user.name %>')"><i class="bi bi-pencil"></i></button>
 					<button class="btn btn-danger" onclick="preFillDeleteModal('<%= user.name %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
 				</td>
 			</tr>
diff --git a/static/js/editCategory.js b/static/js/editCategory.js
index 73f934c..a8eab1f 100644
--- a/static/js/editCategory.js
+++ b/static/js/editCategory.js
@@ -31,6 +31,20 @@ function getDataForEdit(name) {
 	});
 }
 
+function primeCreateNew() {
+	const form = document.getElementById('CategoryModalForm');
+	form.setAttribute('method', 'POST');
+	document.getElementById('editCategoryModalLabel').innerText = 'Create a new category';
+	return true;
+}
+
+function primeEdit() {
+	const form = document.getElementById('CategoryModalForm');
+	document.getElementById('editCategoryModalLabel').innerText = 'Edit category';
+	form.setAttribute('method', 'PATCH');
+	return true;
+}
+
 function deleteEntry(id) {
 	$.ajax({
 		type: 'delete',