Stupid vocab term update

templates/vocab_func_context/index.html.twig

@@ -48,6 +48,12 @@
                 {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
                 <td>
                     <div class="buttons">
+                        <button class="button is-primary is-hidden" data-id-save="{{ term.id }}">
+                            Save
+                            <span class="icon ml-2">
+                                <i class="fa fa-save"></i>
+                            </span>
+                        </button>
                         <button class="button is-link" data-id-edit="{{ term.id }}">
                             Edit
                             <span class="icon ml-2">
@@ -105,6 +111,34 @@
                 row.remove();
             }
         }
+
+        if (clicked.classList.contains('is-link')) {
+            const termId = clicked.getAttribute('data-id-edit');
+            const saveBtn = document.querySelector(`button[data-id-save="${termId}"]`);
+            const input = document.querySelector(`input[data-term-id="${termId}"]`);
+            input.disabled = input.disabled ? false : true;
+            saveBtn.classList.toggle('is-hidden');
+
+            const data = new FormData;
+            data.append("_id", termId);
+            saveBtn.addEventListener('click', async () => {
+                data.append("_new_term", input.value);
+                const res = await fetch("{{ path('app_vocab_func_context_upd') }}", {
+                    method: "POST",
+                    body: data,
+                });
+
+                const notice = document.querySelector('#ajax-success');
+
+                if (res.status === 200) {
+                    notice.innerHTML += 'Term updated successfully';
+                    notice.classList.remove('is-hidden');
+                    notice.querySelector('.delete').addEventListener('click', () => {
+                        notice.classList.add('is-hidden');
+                    });
+                }
+            });
+        }
     });
 </script>
 {% endblock %}