Stupid vocab term update

src/Controller/VocabFuncContextController.php

@@ -54,6 +54,23 @@ class VocabFuncContextController extends AbstractController
         return $this->redirectToRoute('app_vocab_func_context');
     }
 
+    #[Route('/vocabs/functional_context/update', name: 'app_vocab_func_context_upd')]
+    public function updateTerm(Request $request, EntityManagerInterface $em): Response
+    {
+        $id = $request->getPayload()->get('_id');
+        $newTerm = $request->getPayload()->get('_new_term');
+
+        $repo = $em->getRepository(VocabFuncContext::class);
+        $vocab = $repo->find($id);
+        $vocab->setTerm($newTerm);
+        $em->flush();
+
+        $this->addFlash('notice', 'Term updated successfully');
+
+        return $this->redirectToRoute('app_vocab_func_context');
+    }
+
+
     #[Route('/vocabs/functional_context/del', name: 'app_vocab_func_context_del')]
     public function deleteTerm(Request $request, EntityManagerInterface $em): Response
     {

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 %}