Fix delete record JS mess

assets/controllers/delete_record_controller.js

@@ -5,17 +5,22 @@ import { Controller } from '@hotwired/stimulus';
  * [template: {entity}/index.html.twig]
  */
 export default class extends Controller {
-    static targets = ['modal', 'path'];
+    static targets = ['modal', 'path', 'name', 'message'];
 
     /**
      * @todo Refactor with actions for modal
      * @param {object} event 
      */
-    show(event) {
+    warn(event) {
         event.preventDefault();
+        const id = event.currentTarget.getAttribute('data-url').match(/\d+$/)[0];
         const modal = this.modalTarget;
+        const name = this.nameTargets.find(a => a.href.includes(id)).textContent;
+
+        const message = `The record '<strong>${name.trim()}</strong>' will be permanently deleted. Proceed?`;
 
         modal.classList.add('is-active');
+        this.messageTarget.innerHTML = message;
         modal.querySelector('.delete').addEventListener('click', () => {
             modal.classList.remove('is-active');
         });
@@ -28,8 +33,8 @@ export default class extends Controller {
 
     }
     // Proceed with deletion...
-    delete(event) {
+    delete() {
-        const delPath = this.pathTarget.href;
+        const delPath = this.pathTarget.getAttribute('data-url');
         location.href = delPath;
     }
 }

assets/controllers/map_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ */
+export default class extends Controller {
+    static targets = [ 'map',];
+    static values = {
+        state: Number,
+    };
+
+    initialize() {
+    }
+}

templates/bibliography/landing.html.twig

@@ -54,7 +54,11 @@
         {% for record in records %}
         <tr>
             <td><a href="{{ path('app_bibliography', {'id' : record.id}) }}">{{ record.id }}</a></td>
-            <td><a href="{{ path('app_bibliography', {'id' : record.id}) }}">{{ record.citation }}</a></td>
+            <td>
+                <a data-delete-record-target="name" href="{{ path('app_bibliography', {'id' : record.id}) }}">
+                    {{ record.citation }}
+                </a>
+            </td>
             <td>{{ record.status }}</td>
             <td>{{ record.owner }}</td>
             <td style="max-width: 350px;">{{ record.reference }}</td>
@@ -69,13 +73,13 @@
                             <i class="fa fa-edit"></i>
                         </span>
                     </button>
-                    <a href="{{ path('app_bibliography_del', {'id' : record.id}) }}"
+                    <button data-url="{{ path('app_bibliography_del', {'id' : record.id}) }}"
                         class="button is-small is-danger" title="Delete record"
-                        data-delete-record-target="path" data-action="click->delete-record#show">
+                        data-delete-record-target="path" data-action="click->delete-record#warn">
                         <span class="icon">
                             <i class="fa fa-trash"></i>
                         </span>
-                    </a>
+                    </button>
                 </div>
             </td>
         </tr>
@@ -92,7 +96,7 @@
             <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>
+                <p class="is-size-5" data-delete-record-target="message"></p>
             </section>
             <footer class="modal-card-foot">
                 <div class="buttons is-right">

templates/collection/landing.html.twig

@@ -53,7 +53,11 @@
         {% for record in records %}
         <tr>
             <td><a href="{{ path('app_collection', {'id' : record.id}) }}">{{ record.id }}</a></td>
-            <td><a href="{{ path('app_collection', {'id' : record.id}) }}">{{ record.title }}</a></td>
+            <td>
+                <a data-delete-record-target="name" href="{{ path('app_collection', {'id' : record.id}) }}">
+                    {{ record.title }}
+                </a>
+            </td>
             <td>{{ record.status }}</td>
             <td>{{ record.owner }}</td>
             <td style="max-width: 350px;">{{ record.chronology }}</td>
@@ -68,13 +72,13 @@
                             <i class="fa fa-edit"></i>
                         </span>
                     </button>
-                    <a href="{{ path('app_collection_del', {'id' : record.id}) }}"
+                    <button data-url="{{ path('app_collection_del', {'id' : record.id}) }}"
                         class="button is-small is-danger" title="Delete record"
-                        data-delete-record-target="path" data-action="click->delete-record#show">
+                        data-delete-record-target="path" data-action="click->delete-record#warn">
                         <span class="icon">
                             <i class="fa fa-trash"></i>
                         </span>
-                    </a>
+                    </button>
                 </div>
             </td>
         </tr>
@@ -91,7 +95,7 @@
             <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>
+                <p class="is-size-5" data-delete-record-target="message"></p>
             </section>
             <footer class="modal-card-foot">
                 <div class="buttons is-right">

templates/collector/landing.html.twig

@@ -53,7 +53,11 @@
         {% for record in records %}
         <tr>
             <td><a href="{{ path('app_collector', {'id' : record.id}) }}">{{ record.id }}</a></td>
-            <td><a href="{{ path('app_collector', {'id' : record.id}) }}">{{ record.name }}</a></td>
+            <td>
+                <a data-delete-record-target="name" href="{{ path('app_collector', {'id' : record.id}) }}">
+                {{ record.name }}
+                </a>
+            </td>
             <td>{{ record.status }}</td>
             <td>{{ record.owner }}</td>
             <td style="max-width: 350px;">{{ record.places }}</td>
@@ -68,13 +72,13 @@
                             <i class="fa fa-edit"></i>
                         </span>
                     </button>
-                    <a href="{{ path('app_collector_del', {'id' : record.id}) }}"
+                    <button data-url="{{ path('app_collector_del', {'id' : record.id}) }}"
                         class="button is-small is-danger" title="Delete record"
-                        data-delete-record-target="path" data-action="click->delete-record#show">
+                        data-delete-record-target="path" data-action="click->delete-record#warn">
                         <span class="icon">
                             <i class="fa fa-trash"></i>
                         </span>
-                    </a>
+                    </button>
                 </div>
             </td>
         </tr>
@@ -91,7 +95,7 @@
             <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>
+                <p class="is-size-5" data-delete-record-target="message"></p>
             </section>
             <footer class="modal-card-foot">
                 <div class="buttons is-right">