confirmation modal before deleting bookmarks

This commit is contained in:
Jakob Ketterl 2021-03-28 16:51:34 +02:00
parent a86a2f31cd
commit af211739fb
4 changed files with 43 additions and 6 deletions

View File

@ -80,7 +80,7 @@ h1 {
padding-right: 15px; padding-right: 15px;
} }
table.bookmarks .frequency { .bookmarks table .frequency {
text-align: right; text-align: right;
} }

View File

@ -215,19 +215,37 @@ $.fn.bookmarktable = function() {
}; };
}); });
$table.on('click', '.bookmark-delete', function(e) { var $modal = $('#deleteModal').modal({show:false});
var $button = $(e.target);
$button.prop('disabled', true); $modal.on('hidden.bs.modal', function() {
var $row = $button.parents('tr'); var $row = $modal.data('row');
if (!$row) return;
$row.find('.bookmark-delete').prop('disabled', false);
$modal.removeData('row');
});
$modal.on('click', '.confirm', function() {
var $row = $modal.data('row');
if (!$row) return;
$.ajax(document.location.href + "/" + $row.data('id'), { $.ajax(document.location.href + "/" + $row.data('id'), {
data: "{}", data: "{}",
contentType: 'application/json', contentType: 'application/json',
method: 'DELETE' method: 'DELETE'
}).done(function(){ }).done(function(){
$row.remove(); $row.remove();
$modal.modal('hide');
}); });
}); });
$table.on('click', '.bookmark-delete', function(e) {
var $button = $(e.target);
$button.prop('disabled', true);
var $row = $button.parents('tr');
$modal.data('row', $row);
$modal.modal('show');
});
$(this).on('click', '.bookmark-add', function() { $(this).on('click', '.bookmark-add', function() {
if ($table.find('tr[data-id="new"]').length) return; if ($table.find('tr[data-id="new"]').length) return;

View File

@ -24,4 +24,23 @@ ${header}
</div> </div>
</div> </div>
</div> </div>
<div class="modal" id="deleteModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5>Please confirm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Do you really want to delete this bookmark?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger confirm">Delete</button>
</div>
</div>
</div>
</div>
</body> </body>

View File

@ -20,7 +20,7 @@ class BookmarksController(AuthorizationMixin, WebpageController):
bookmarks = Bookmarks.getSharedInstance() bookmarks = Bookmarks.getSharedInstance()
return """ return """
<table class="table bookmarks" data-modes='{modes}'> <table class="table" data-modes='{modes}'>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th class="frequency">Frequency</th> <th class="frequency">Frequency</th>