nicolo/arcoa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stimulus controller to delete record

Browse Source
This commit is contained in:
Nicolò P
2024-11-06 22:02:56 +01:00
parent 4e52ea48f6
commit 36185d0539
4 changed files with 133 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
templates/bibliography/index.html.twig
View File

@@ -3,7 +3,7 @@
{% block title %}Bibliography - {{ record.citation }} | ArCOA{% endblock %}
{% block rightpanel %}
<div class="container" style="max-width: 60vw">
<div class="container" style="max-width: 60vw" data-controller="delete-record">
<h1 class="is-size-1 mt-0 has-text-centered">Bibliography</h1>
<h2 class="is-size-3 mt-3 has-text-centered">{{ record.citation }}</h2>
@@ -34,7 +34,9 @@
<i class="fa fa-copy"></i>
</span>
</button>
<a href="{{ path('app_bibliography_del', {'id' : record.id}) }}" class="button is-danger" id="del-record">
<a href="{{ path('app_bibliography_del', {'id' : record.id}) }}"
class="button is-danger"
data-delete-record-target="path" data-action="click->delete-record#show">
Delete
<span class="icon ml-2">
<i class="fa fa-trash"></i>
@@ -63,55 +65,26 @@
Some stuff...
</div>
</div>
<div class="modal" data-delete-record-target="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<span class="icon is-large has-text-warning">
<i class="fa fa-warning fa-2x"></i>
</span>
<p class="modal-card-title has-text-danger pl-2"><strong>Delete record?</strong></p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="is-size-5">This record will be permanently deleted. Proceed?</p>
</section>
<footer class="modal-card-foot">
<div class="buttons is-right">
<button class="button is-link" data-action="click->delete-record#delete">Confirm</button>
<button class="button is-light" id="cancel">Cancel</button>
</div>
</footer>
</div>
</div>
</div>
<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<span class="icon is-large has-text-warning">
<i class="fa fa-warning fa-2x"></i>
</span>
<p class="modal-card-title has-text-danger pl-2"><strong>Delete record?</strong></p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="is-size-5">This record will be permanently deleted. Proceed?</p>
</section>
<footer class="modal-card-foot">
<div class="buttons is-right">
<button class="button is-link" id="confirm-del">Confirm</button>
<button class="button is-light" id="cancel">Cancel</button>
</div>
</footer>
</div>
</div>
<script type="text/javascript" defer>
const del = document.querySelector('#del-record');
const delPath = del.href;
del.addEventListener('click', event => {
event.preventDefault();
const modal = document.querySelector('.modal');
modal.classList.add('is-active');
modal.querySelector('.delete').addEventListener('click', () => {
modal.classList.remove('is-active');
});
modal.querySelector('.modal-background').addEventListener('click', () => {
modal.classList.remove('is-active');
});
modal.querySelector('#cancel').addEventListener('click', () => {
modal.classList.remove('is-active');
});
// Proceed with deletion...
modal.querySelector('#confirm-del').addEventListener('click', () => {
location.href = delPath;
});
});
</script>
{% endblock %}