Unified Category modal

This commit is contained in:
Leon Meier 2023-05-15 22:10:32 +02:00
parent 4bfd71f09f
commit 0c7c294823
2 changed files with 17 additions and 41 deletions

View File

@ -1,6 +1,5 @@
<%~ E.includeFile("../partials/head.eta.html", {"title": "Settings - Category"}) %> <%~ E.includeFile("../partials/controls.eta.html", {"active": "SETT_CAT"}) %> <%~ E.includeFile("../partials/head.eta.html", {"title": "Settings - Category"}) %> <%~ E.includeFile("../partials/controls.eta.html", {"active": "SETT_CAT"}) %>
<!-- Modal -->
<!-- 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 fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
@ -23,47 +22,10 @@
<!-- Create new category button --> <!-- Create new category button -->
<div class="row"> <div class="row">
<div class="col-12"> <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>
</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 fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModal" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
@ -72,7 +34,7 @@
<h1 class="modal-title fs-5" id="editCategoryModalLabel">Edit a category</h1> <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> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </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="modal-body">
<div class="mb-3"> <div class="mb-3">
<label for="editCategoryModalName" class="form-label">Name</label> <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 scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= user.id %>"><%= user.name %></td>
<td><%= user.description %></td> <td><%= user.description %></td>
<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> <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> </td>
</tr> </tr>

View File

@ -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) { function deleteEntry(id) {
$.ajax({ $.ajax({
type: 'delete', type: 'delete',