Stimulus controller to delete record

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;
+    }
+}
+

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,9 +65,7 @@
             Some stuff...
         </div>
     </div>
-</div>
+    <div class="modal" data-delete-record-target="modal">
-
-<div class="modal">
         <div class="modal-background"></div>
         <div class="modal-card">
             <header class="modal-card-head">
@@ -80,38 +80,11 @@
             </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-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>
-    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 %}

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>
 
@@ -33,12 +33,14 @@
                         <i class="fa fa-copy"></i>
                     </span>
                 </button>
-                    <button class="button is-danger">
+                <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>
-                    </button>
+                </a>
             </div>
         </div>
         {% endif %}
@@ -84,6 +86,26 @@
             {% 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 %}

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 %}
@@ -84,6 +86,27 @@
             {% 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 %}