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