From 36185d0539588c2ae413ac401fd08e068521e3cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it> Date: Wed, 6 Nov 2024 22:02:56 +0100 Subject: [PATCH] Stimulus controller to delete record --- .../controllers/delete_record_controller.js | 36 +++++++++ templates/bibliography/index.html.twig | 77 ++++++------------- templates/collection/index.html.twig | 68 ++++++++++------ templates/collector/index.html.twig | 31 +++++++- 4 files changed, 133 insertions(+), 79 deletions(-) create mode 100644 assets/controllers/delete_record_controller.js diff --git a/assets/controllers/delete_record_controller.js b/assets/controllers/delete_record_controller.js new file mode 100644 index 0000000..9b504b9 --- /dev/null +++ b/assets/controllers/delete_record_controller.js @@ -0,0 +1,36 @@ +import { Controller } from '@hotwired/stimulus'; + +/** + * Show warning before deleting record + * [template: {entity}/index.html.twig] + */ +export default class extends Controller { + static targets = ['modal', 'path']; + + /** + * @todo Refactor with actions for modal + * @param {object} event + */ + show(event) { + event.preventDefault(); + const modal = this.modalTarget; + + 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... + delete(event) { + const delPath = this.pathTarget.href; + location.href = delPath; + } +} + diff --git a/templates/bibliography/index.html.twig b/templates/bibliography/index.html.twig index effa97c..403df21 100644 --- a/templates/bibliography/index.html.twig +++ b/templates/bibliography/index.html.twig @@ -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 %} \ No newline at end of file diff --git a/templates/collection/index.html.twig b/templates/collection/index.html.twig index 28035ea..b1ec457 100644 --- a/templates/collection/index.html.twig +++ b/templates/collection/index.html.twig @@ -3,7 +3,7 @@ {% block title %}Collection - {{ record.title }} | 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">Collection</h1> <h2 class="is-size-3 mt-3 has-text-centered">{{ record.title }}</h2> @@ -19,27 +19,29 @@ <div class="card p-5"> {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %} <div class="columns"> - <div class="column is-half"></div> - <div class="column has-text-right"> - <button class="button is-link"> - Edit - <span class="icon ml-2"> - <i class="fa fa-edit"></i> - </span> - </button> - <button class="button is-link"> - Copy - <span class="icon ml-2"> - <i class="fa fa-copy"></i> - </span> - </button> - <button class="button is-danger"> - Delete - <span class="icon ml-2"> - <i class="fa fa-trash"></i> - </span> - </button> - </div> + <div class="column is-half"></div> + <div class="column has-text-right"> + <button class="button is-link"> + Edit + <span class="icon ml-2"> + <i class="fa fa-edit"></i> + </span> + </button> + <button class="button is-link"> + Copy + <span class="icon ml-2"> + <i class="fa fa-copy"></i> + </span> + </button> + <a href="{{ path('app_collection_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> + </span> + </a> + </div> </div> {% endif %} <div class="tabs is-boxed is-fullwidth"> @@ -83,7 +85,27 @@ </table> {% endif %} </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> -<script type="text/javascript" defer></script> {% endblock %} \ No newline at end of file diff --git a/templates/collector/index.html.twig b/templates/collector/index.html.twig index 531eff1..d1a1f7e 100644 --- a/templates/collector/index.html.twig +++ b/templates/collector/index.html.twig @@ -3,7 +3,7 @@ {% block title %}Collector - {{ record.name }} | 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">Collector</h1> <h2 class="is-size-3 mt-3 has-text-centered">{{ record.name }}</h2> @@ -33,12 +33,14 @@ <i class="fa fa-copy"></i> </span> </button> - <button class="button is-danger"> + <a href="" + 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> </span> - </button> + </a> </div> </div> {% endif %} @@ -83,7 +85,28 @@ </table> {% endif %} </div> - </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> <script type="text/javascript" defer></script> {% endblock %} \ No newline at end of file