Project-Name-Here/assetflow
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Unified deletion modal in frontend

Browse Source
This commit is contained in:
Sören Oesterwind 2023-05-17 19:06:38 +02:00
parent e98e46e1a2
commit e6238e80e8
5 changed files with 86 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/manage/categoryManager.eta.html
View File

@ -59,7 +59,7 @@
<td><%= user.description %></td>
<td>
<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="preFillDeleteModalNxt('<%= user.name %>','categories','Category', 'name')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
</td>
</tr>
<% }) %>

4
src/frontend/manage/storageManager.eta.html
View File

@ -173,7 +173,7 @@
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageLocationModal" onclick="primeEdit(); getDataForEditLoc('<%= locations.id %>')">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-danger" onclick="preFillDeleteModalLoc('<%= locations.id %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
<button class="btn btn-danger" onclick="preFillDeleteModalNxt('<%= locations.id %>','storageLocations','Storage Location')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
</td>
</tr>
<% }) %>
@ -216,7 +216,7 @@
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeEdit(); getDataForEdit('<%= units.id %>')">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-danger" onclick="preFillDeleteModal('<%= units.id %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
<button class="btn btn-danger" onclick="preFillDeleteModalNxt('<%= units.id %>', 'storageUnits', 'Storage Unit')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
</td>
</tr>
<% }) %>

62
static/js/editCategory.js
View File

@ -39,65 +39,3 @@ function primeEdit() {
form.setAttribute('method', 'PATCH');
return true;
}
function deleteEntry(id) {
$.ajax({
type: 'delete',
url: `/api/v1/categories`,
data: { id: id },
success: function (data) {
$('#staticBackdrop').modal('hide');
createNewToast('<i class="bi bi-check2"></i> Category deleted successfully.', "text-bg-success")
confetti({
spread: 360,
ticks: 100,
gravity: 0.1,
decay: 0.94,
startVelocity: 30,
particleCount: 20,
scalar: 2,
shapes: ['text'],
shapeOptions: {
text: {
value: ['❌', '🗑️', '🚫']
}
}
});
},
error: function (data) {
// hide the staticBackdrop modal
$('#staticBackdrop').modal('hide');
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false)
}
});
}
function preFillDeleteModal(name) {
$.ajax({
type: 'get',
url: `/api/v1/categories?name=${name}`,
success: function (data) {
const result = JSON.parse(data);
// Get elements inside the editCategoryModal
const modal_categoryName = document.getElementById('deleteNamePlaceholder');
const modal_deleteButton = document.getElementById('deleteActionBtn');
//const modal_categoryDescription = document.getElementById('editCategoryModalDescription');
//const modal_categoryid = document.getElementById('editCategoryModalId');
modal_categoryName.innerText = result.name;
modal_deleteButton.setAttribute('onclick', `deleteEntry(${result.id})`);
//modal_categoryDescription.value = result.description;
//modal_categoryid.value = result.id;
},
error: function (data) {
console.log('!!!! ERROR !!!!', data);
document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
$('#staticBackdrop').modal('hide');
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.', "text-bg-danger")
}
});
}

128
static/js/editStorages.js
View File

@ -64,134 +64,6 @@ function handleSelector(){
}
}
function preFillDeleteModal(id) {
$.ajax({
type: 'get',
url: `/api/v1/storageUnits?id=${id}`,
success: function (data) {
const result = JSON.parse(data);
// Get elements inside the editCategoryModal
const modal_categoryName = document.getElementById('deleteNamePlaceholder');
const modal_deleteButton = document.getElementById('deleteActionBtn');
//const modal_categoryDescription = document.getElementById('editCategoryModalDescription');
//const modal_categoryid = document.getElementById('editCategoryModalId');
modal_categoryName.innerText = result.name;
modal_deleteButton.setAttribute('onclick', `deleteEntry(${result.id})`);
//modal_categoryDescription.value = result.description;
//modal_categoryid.value = result.id;
},
error: function (data) {
console.log('!!!! ERROR !!!!', data);
document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
$('#staticBackdrop').modal('hide');
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storageUnit does no longer exist.', "text-bg-danger")
}
});
}
function preFillDeleteModalLoc(id) {
$.ajax({
type: 'get',
url: `/api/v1/storageLocations?id=${id}`,
success: function (data) {
const result = JSON.parse(data);
// Get elements inside the editCategoryModal
const modal_categoryName = document.getElementById('deleteNamePlaceholder');
const modal_deleteButton = document.getElementById('deleteActionBtn');
//const modal_categoryDescription = document.getElementById('editCategoryModalDescription');
//const modal_categoryid = document.getElementById('editCategoryModalId');
modal_categoryName.innerText = result.name;
modal_deleteButton.setAttribute('onclick', `deleteEntryLoc(${result.id})`);
//modal_categoryDescription.value = result.description;
//modal_categoryid.value = result.id;
},
error: function (data) {
console.log('!!!! ERROR !!!!', data);
document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
$('#staticBackdrop').modal('hide');
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage location does no longer exist.', "text-bg-danger")
}
});
}
function deleteEntry(id) {
$.ajax({
type: 'delete',
url: `/api/v1/storageUnits`,
data: { id: id },
success: function (data) {
$('#staticBackdrop').modal('hide');
createNewToast('<i class="bi bi-check2"></i> Storage Unit deleted successfully.', "text-bg-success")
confetti({
spread: 360,
ticks: 100,
gravity: 0.1,
decay: 0.94,
startVelocity: 30,
particleCount: 20,
scalar: 2,
shapes: ['text'],
shapeOptions: {
text: {
value: ['❌', '🗑️', '🚫']
}
}
});
},
error: function (data) {
// hide the staticBackdrop modal
$('#staticBackdrop').modal('hide');
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false)
}
});
}
function deleteEntryLoc(id) {
$.ajax({
type: 'delete',
url: `/api/v1/storageLocations`,
data: { id: id },
success: function (data) {
$('#staticBackdrop').modal('hide');
createNewToast('<i class="bi bi-check2"></i> Storage Unit deleted successfully.', "text-bg-success")
confetti({
spread: 360,
ticks: 100,
gravity: 0.1,
decay: 0.94,
startVelocity: 30,
particleCount: 20,
scalar: 2,
shapes: ['text'],
shapeOptions: {
text: {
value: ['❌', '🗑️', '🚫']
}
}
});
},
error: function (data) {
// hide the staticBackdrop modal
$('#staticBackdrop').modal('hide');
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false)
}
});
}
function getDataForEdit(id) {
$.ajax({
type: 'get',

96
static/js/formHandler.js
View File

@ -1,22 +1,22 @@
var amountOfForms = $('.frontendForm').length;
$('.frontendForm').each(function() {
$(this).on('submit', function(e) {
e.preventDefault();
$('.frontendForm').each(function () {
$(this).on('submit', function (e) {
e.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
var form = $(this); // Get the form
// Show overlay with spinner
$('.loader-overlay').addClass('loaderActive');
// Get the form data
formData = form.serializeArray();
console.log('submitting form');
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('data-target'),
data: formData,
dataType: 'json',
success: function(data) {
success: function (data) {
console.log('success');
// Hide overlay with spinner
$('.loader-overlay').removeClass('loaderActive');
@ -25,22 +25,92 @@ $('.frontendForm').each(function() {
// Clear all fields
form.find('input, textarea').val('');
// Create toast
createNewToast('<i class="bi bi-check2"></i> Changes saved successfully.', "text-bg-success")
createNewToast('<i class="bi bi-check2"></i> Changes saved successfully.', "text-bg-success")
},
error: function(data) {
error: function (data) {
console.log('error');
// Hide overlay with spinner
$('.loader-overlay').removeClass('loaderActive');
// Check for response code 409
// Check for response code 409 (duplicate entry)
if (data.status == 409) {
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> The element you tried to create already exists.', "text-bg-danger", 3000, false)
}else {
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false)
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> The element you tried to create already exists.', "text-bg-danger", 3000, false)
} else {
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false)
}
}
});
})
});
/**
* Generic function to handle the result of a deletion prompt
* @param {Number} id ID of the entry to delete
* @param {String} route Route to send the delete request to will be templated as /api/v1/{route}
* @param {String} name Type of entry to delete, will be templated as {name} deleted successfully.
*/
function deleteEntryNxt(id, route, name) {
$.ajax({
type: 'delete',
url: `/api/v1/` + route,
data: { id: id },
success: function (data) {
$('#staticBackdrop').modal('hide');
createNewToast(`<i class="bi bi-check2"></i> ${name} deleted successfully.`, "text-bg-success")
confetti({
spread: 360,
ticks: 100,
gravity: 0.1,
decay: 0.94,
startVelocity: 30,
particleCount: 20,
scalar: 2,
shapes: ['text'],
shapeOptions: {
text: {
value: ['❌', '🗑️', '🚫']
}
}
});
},
error: function (data) {
// hide the staticBackdrop modal
$('#staticBackdrop').modal('hide');
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false)
}
});
}
/**
* Generic route to trigger a prefill of the delete modal
* @param {Number} id The ID of the entry to delete
* @param {String} route The endpoint to send the delete request to, will be templated as /api/v1/{route}
* @param {String} name The name of the entry to delete, will be templated as {name} deleted successfully.
*/
function preFillDeleteModalNxt(id, route, name, requestIdent='id') {
$.ajax({
type: 'get',
url: `/api/v1/${route}?${requestIdent}=${id}`,
success: function (data) {
const result = JSON.parse(data);
// Get elements inside the editCategoryModal
const modal_categoryName = document.getElementById('deleteNamePlaceholder');
const modal_deleteButton = document.getElementById('deleteActionBtn');
modal_categoryName.innerText = result.name;
modal_deleteButton.setAttribute('onclick', `deleteEntryNxt(${result.id},'${route}','${name}')`);
},
error: function (data) {
console.log('!!!! ERROR !!!!', data);
document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
$('#staticBackdrop').modal('hide');
createNewToast(`<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The ${name} does no longer exist.', "text-bg-danger`)
}
});
}
console.info("Found " + amountOfForms + " forms on this page.")