Implement vocab delete in Stimulus

TODO: show modal warning before deleting

assets/controllers/vocabs_controller.js

@@ -18,10 +18,10 @@ export default class extends Controller {
      * @todo Simpler way? 
      */
     edit(event) {
-        const id = event.currentTarget.getAttribute('data-vocabs-id-value');
+        const id = event.currentTarget.getAttribute('data-id');
 
         this.saveTargets.forEach((btn, index) => {
-            if (btn.getAttribute('data-vocabs-id-value') === id) {
+            if (btn.getAttribute('data-id') === id) {
                 btn.classList.toggle('is-hidden');
                 this.inputTargets[index].disabled = false;
                 this.cancelTargets[index].classList.toggle('is-hidden');
@@ -32,11 +32,11 @@ export default class extends Controller {
     }
 
     async save(event) {
-        const id = event.currentTarget.getAttribute('data-vocabs-id-value');
+        const id = event.currentTarget.getAttribute('data-id');
         let term = '';
 
         for (let input of this.inputTargets) {
-            if (input.getAttribute('data-vocabs-id-value') === id) {
+            if (input.getAttribute('data-id') === id) {
                 term = input.value;
             }
         }
@@ -45,25 +45,62 @@ export default class extends Controller {
         data.append("_id", id);
         data.append("_new_term", term);
 
-        const res = await fetch(this.saveUrlValue, {
+        const url = event.currentTarget.getAttribute('data-url');
+
+        const res = await fetch(url, {
             method: "POST",
             body: data,
         });
 
-        // TODO: show notification
         if (res.status === 200) {
-            console.log('Saved...');
+            let notif = document.getElementById('ajax-saved');
+            notif.classList.toggle('is-hidden');
         };
-    }
 
-    delete() {
+        this.cancelTargets.find(btn => btn.getAttribute('data-id') === id)
+            .classList.toggle('is-hidden');
+
+        this.editTargets.find(btn => btn.getAttribute('data-id') === id)
+            .classList.toggle('is-hidden');
+        const input = this.inputTargets.find(input => input.getAttribute('data-id') === id)
+        input.disabled = true;
+        event.target.classList.toggle('is-hidden');
+
+    }
+    /**
+     * 
+     * @todo Show modal before deleting! Show delete error (500)!
+     */
+    async delete(event) {
+        const id = event.currentTarget.getAttribute('data-id');
+        const url = event.currentTarget.getAttribute('data-url');
+
+        let data = new FormData;
+        data.append("_id", id);
+
+        const res = await fetch(url, {
+            method: "POST",
+            body: data,
+        });
+
+        if (res.status === 200) {
+            let notif = document.getElementById('ajax-deleted');
+            notif.classList.toggle('is-hidden');
+            this.rowTargets.find(row => row.getAttribute('data-id') === id)
+                .classList.add('is-hidden');
+        };
+
+        if (res.status === 500) {
+            let notif = document.getElementById('ajax-error');
+            notif.classList.toggle('is-hidden');
+        }
     }
 
     cancel(event) {
-        const id = event.currentTarget.getAttribute('data-vocabs-id-value');
+        const id = event.currentTarget.getAttribute('data-id');
 
         this.editTargets.forEach((btn, index) => {
-            if (btn.getAttribute('data-vocabs-id-value') === id) {
+            if (btn.getAttribute('data-id') === id) {
                 btn.classList.toggle('is-hidden');
                 this.inputTargets[index].disabled = true;
                 this.saveTargets[index].classList.toggle('is-hidden');

templates/vocab_func_context/index.html.twig

@@ -3,7 +3,7 @@
 {% block title %}Vocab - Functional context | ArCOA{% endblock %}
 
 {% block rightpanel %}
-<div class="container" style="max-width: 50vw">
+<div class="container" style="max-width: 50vw" data-controller="vocabs">
     <h1 class="is-size-1 mt-0 has-text-centered">Vocabulary</h1>
     <h2 class="is-size-3 mt-4 has-text-centered">Functional context</h2>
 
@@ -30,8 +30,24 @@
 
         <div class="notification is-success is-hidden mt-5"
             data-controller="notification"
-            data-notification-target=""="notif">
+            data-notification-target="notif"
+            id="ajax-saved">
             <button class="delete" data-action="click->notification#close"></button>
+            Term saved successfully
+        </div>
+        <div class="notification is-success is-hidden mt-5"
+            data-controller="notification"
+            data-notification-target="notif"
+            id="ajax-deleted">
+            <button class="delete" data-action="click->notification#close"></button>
+            Term deleted successfully
+        </div>
+        <div class="notification is-danger is-light is-hidden mt-5"
+            data-controller="notification"
+            data-notification-target="notif"
+            id="ajax-error">
+            <button class="delete" data-action="click->notification#close"></button>
+            The term could not be deleted because it's related to existing records
         </div>
         {% for message in app.flashes('notice') %}
             <div class="notification is-success mt-5" data-controller="notification"
@@ -41,14 +57,14 @@
             </div>
         {% endfor %}
         <h3 class="mt-6 mb-5 is-size-5"><strong>Terms in vocabulary</strong></h3>
-        <table class="table is-fullwidth" id="terms" data-controller="vocabs">
+        <table class="table is-fullwidth" id="terms">
             <tr><th>Term</th>{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}<th>Actions</th>{% endif %}</tr>
         {% for term in terms %}
             <tr data-vocabs-target="row"
-                data-vocabs-id-value="{{ term.id }}">
+                data-id="{{ term.id }}">
                 <td>
                     <input class="input" type="text" value="{{ term.term }}" disabled
-                    data-vocabs-id-value="{{ term.id }}" data-vocabs-target="input" />
+                    data-id="{{ term.id }}" data-vocabs-target="input" />
                 </td>
                 {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
                 <td>
@@ -56,15 +72,15 @@
                         <button class="button is-primary is-hidden"
                             data-vocabs-target="save"
                             data-action="click->vocabs#save"
-                            data-vocabs-saveUrl-value="{{ path('app_vocab_func_context_upd') }}"
+                            data-url="{{ path('app_vocab_func_context_upd') }}"
-                            data-vocabs-id-value="{{ term.id }}">
+                            data-id="{{ term.id }}">
                             Save
                             <span class="icon ml-2">
                                 <i class="fa fa-save"></i>
                             </span>
                         </button>
                         <button class="button is-hidden"
-                            data-vocabs-id-value="{{ term.id }}"
+                            data-id="{{ term.id }}"
                             data-vocabs-target="cancel"
                             data-action="click->vocabs#cancel">
                             Cancel
@@ -74,7 +90,7 @@
                         </button>
                         <button class="button is-link"
                             data-vocabs-target="edit"
-                            data-vocabs-id-value="{{ term.id }}"
+                            data-id="{{ term.id }}"
                             data-action="click->vocabs#edit">
                             Edit
                             <span class="icon ml-2">
@@ -82,9 +98,9 @@
                             </span>
                         </button>
                         <button class="button is-danger"
-                            data-vocabs-id-value="{{ term.id }}"
+                            data-id="{{ term.id }}"
                             data-action="click->vocabs#delete"
-                            data-vocabs-delUrl-value="{{ path('app_vocab_func_context_del') }}">
+                            data-url="{{ path('app_vocab_func_context_del') }}">
                             Delete
                             <span class="icon ml-2">
                                 <i class="fa fa-trash"></i>
@@ -96,8 +112,27 @@
             </tr>
         {% endfor %}
         </table>
-
+    </div>
+    <div class="modal" data-vocabs-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 term?</strong></p>
+            <button class="delete" aria-label="close"></button>
+            </header>
+            <section class="modal-card-body">
+                <p class="is-size-5">This term 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->vocabs#delete">Confirm</button>
+                    <button class="button is-light" id="cancel">Cancel</button>
+                </div>
+            </footer>
+        </div>
     </div>
 </div>
-<script type="text/javascript" defer></script>
 {% endblock %}