- added some (non-working) category edit

This commit is contained in:
Sören Oesterwind 2023-05-10 21:28:11 +02:00
parent 7cfca9abac
commit c6fb84759f
4 changed files with 75 additions and 4 deletions

View File

@ -40,6 +40,39 @@
</div> </div>
</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 with all categories -->
<table class="table"> <table class="table">
<thead> <thead>
@ -47,18 +80,21 @@
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">Name</th> <th scope="col">Name</th>
<th scope="col">Description</th> <th scope="col">Description</th>
<th scope="col">Action</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<% it.items.forEach(function(user){ %> <% it.items.forEach(function(user){ %>
<tr> <tr id="listEntry-<%= user.id %>">
<th scope="row"><%= user.id %></th> <th scope="row"><%= user.id %></th>
<td><%= user.name %></td> <td><%= user.name %></td>
<td><%= user.description %></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> </tr>
<% }) %> <% }) %>
</tbody> </tbody>
</table> </table>
</div> </div>
<script src="/js/editCategory.js"></script>
<%~ E.includeFile("partials/controlsFoot.eta.html") %> <%~ E.includeFile("partials/foot.eta.html") %> <%~ E.includeFile("partials/controlsFoot.eta.html") %> <%~ E.includeFile("partials/foot.eta.html") %>

View File

@ -7,7 +7,7 @@
</p> </p>
<div class="collapse" id="collapseExample"> <div class="collapse" id="collapseExample">
<div class="card card-body"> <div class="card card-body">
<pre><code><%= error %></code></pre> <pre><code><%= it.error %></code></pre>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,5 +1,5 @@
import express, { Request, Response } from 'express'; 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) => { export default (req: Request, res: Response) => {
// If method is get, render the page // 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'); res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
return; return;
} }
if(!req.body.editCategoryModalIsEdit) {
console.log('is not edit');
// Save data to category table // Save data to category table
prisma.category.create({ prisma.category.create({
data: { data: {
@ -34,9 +37,29 @@ export default (req: Request, res: Response) => {
}) })
.catch((err) => { .catch((err) => {
// TODO Catch if is a duplicate error and show a message to the user // 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 }); res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
}); });
} }
}
}; };

12
static/js/editCategory.js Normal file
View File

@ -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;
}