ajax submit edit modal #2168

MTES-MCT · Feb 13, 2024 · 3bb7bd9 · 3bb7bd9
1 parent 04fec89
commit 3bb7bd9
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 19 deletions.
diff --git a/assets/app.ts b/assets/app.ts
@@ -28,4 +28,4 @@ import './controllers/view_signalement';
 import './controllers/cookie_banner';
 import './controllers/maintenance_banner';
 import './controllers/activate_account/activate_account';
-
+import './controllers/back_signalement_view/form_edit_modal';
diff --git a/assets/controllers/back_signalement_view/form_edit_modal.js b/assets/controllers/back_signalement_view/form_edit_modal.js
@@ -0,0 +1,36 @@
+const elements = document.querySelectorAll('[data-ajax-form]');
+
+function handleEditSignalementModalForm(element) {
+    element.addEventListener('submit', (event) => {
+        event.preventDefault();
+        const formElement = document.getElementById(event.target.id)
+        submitPayload(formElement);
+    });
+}
+
+async function submitPayload(formElement) {
+    try {
+        const formData = new FormData(formElement);
+        const payload = {};
+        formData.forEach((value, key) => {
+            payload[key] = value;
+        });
+        console.log(payload, formElement.action)
+        const response = await fetch(formElement.action, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+
+        if (response.ok) {
+            location.reload()
+        }
+
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+elements.forEach(element => handleEditSignalementModalForm(element));
diff --git a/src/Controller/Back/SignalementEditController.php b/src/Controller/Back/SignalementEditController.php
@@ -19,6 +19,7 @@
 use App\Serializer\SignalementDraftRequestSerializer;
 use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
@@ -47,10 +48,11 @@ public function editAddress(
         SignalementUpdatedListener $listener
     ): Response {
         $this->denyAccessUnlessGranted('SIGN_EDIT', $signalement);
-        if ($this->isCsrfTokenValid('signalement_edit_address_'.$signalement->getId(), $request->get('_token'))) {
+        $payload = $request->getPayload()->all();
+        if ($this->isCsrfTokenValid('signalement_edit_address_'.$signalement->getId(), $payload['_token'])) {
             /** @var AdresseOccupantRequest $adresseOccupantRequest */
             $adresseOccupantRequest = $serializer->deserialize(
-                json_encode($request->getPayload()->all()),
+                json_encode($payload),
                 AdresseOccupantRequest::class,
                 'json'
             );
@@ -64,15 +66,16 @@ public function editAddress(
                     signalement: $signalement,
                     description: 'L\'adresse du logement a été modifiée par ',
                 );
+                $response = ['success' => true];
                 $this->addFlash('success', 'L\'adresse du logement a bien été modifiée.');
             } else {
-                $this->addFlash('error', self::INPUT_ERROR_MSG.$errorMessage);
+                $response = ['success' => false, 'message' => 'erreur'];
             }
         } else {
-            $this->addFlash('error', self::ERROR_MSG);
+            $response = ['success' => false, 'message' => 'erreur'];
         }
 
-        return $this->redirectToRoute('back_signalement_view', ['uuid' => $signalement->getUuid()]);
+        return $this->json($response);
     }
 
     #[Route('/{uuid}/edit-coordonnees-tiers', name: 'back_signalement_edit_coordonnees_tiers', methods: 'POST')]
@@ -124,15 +127,16 @@ public function editCoordonneesFoyer(
         SerializerInterface $serializer,
         ValidatorInterface $validator,
         SignalementUpdatedListener $listener
-    ): Response {
+    ): JsonResponse {
+        $payload = $request->getPayload()->all();
         $this->denyAccessUnlessGranted('SIGN_EDIT', $signalement);
         if ($this->isCsrfTokenValid(
             'signalement_edit_coordonnees_foyer_'.$signalement->getId(),
-            $request->get('_token')
+            $payload['_token']
         )) {
             /** @var CoordonneesFoyerRequest $coordonneesFoyerRequest */
             $coordonneesFoyerRequest = $serializer->deserialize(
-                json_encode($request->getPayload()->all()),
+                json_encode($payload),
                 CoordonneesFoyerRequest::class,
                 'json'
             );
@@ -150,15 +154,14 @@ public function editCoordonneesFoyer(
                     signalement: $signalement,
                     description: 'Les coordonnées du foyer ont été modifiées par ',
                 );
-                $this->addFlash('success', 'Les coordonnées du foyer ont bien été modifiées.');
             } else {
-                $this->addFlash('error', self::INPUT_ERROR_MSG.$errorMessage);
+                $this->json(['error' => self::INPUT_ERROR_MSG.$errorMessage]);
             }
         } else {
-            $this->addFlash('error', self::ERROR_MSG);
+            $this->json(['error'=> self::ERROR_MSG]);
         }
 
-        return $this->redirectToRoute('back_signalement_view', ['uuid' => $signalement->getUuid()]);
+        return $this->json(['uuid' => $signalement->getUuid()]);
     }
 
     #[Route('/{uuid}/edit-coordonnees-bailleur', name: 'back_signalement_edit_coordonnees_bailleur', methods: 'POST')]

diff --git a/templates/back/signalement/view/address-qualifications.html.twig b/templates/back/signalement/view/address-qualifications.html.twig
@@ -1,5 +1,5 @@
 <div class="fr-grid-row fr-mt-3w">
-    <div class="fr-col-12 fr-col-md-6">
+    <div class="fr-col-12 fr-col-md-6" data-ajax-form>
         {% if isNewFormEnabled and canEditSignalement %}
             {% include 'back/signalement/view/edit-modals/edit-address.html.twig' %}
         {% endif %}
@@ -49,4 +49,4 @@
         </div>
         {% endif %}
     </div>
-</div>
+</div>
diff --git a/templates/back/signalement/view/edit-modals/edit-coordonnees-foyer.html.twig b/templates/back/signalement/view/edit-modals/edit-coordonnees-foyer.html.twig
@@ -2,7 +2,10 @@
     <div class="fr-container fr-container--fluid fr-container-md">
         <div class="fr-grid-row fr-grid-row--center">
             <div class="fr-col-12 fr-col-md-8">
-                <form method="POST" id="form-edit-coordonnees-foyer" enctype="application/json" action="{{ path('back_signalement_edit_coordonnees_foyer',{uuid:signalement.uuid}) }}">
+                <form method="POST"
+                      id="form-edit-coordonnees-foyer"
+                      enctype="application/json"
+                      action="{{ path('back_signalement_edit_coordonnees_foyer',{uuid:signalement.uuid}) }}">
                     <div class="fr-modal__body">
                         <div class="fr-modal__header">
                             <button type="button" class="fr-btn--close fr-btn" aria-controls="fr-modal-edit-coordonnees-foyer">Fermer</button>
@@ -84,4 +87,4 @@
             </div>
         </div>
     </div>
-</dialog>
+</dialog>
diff --git a/templates/back/signalement/view/information.html.twig b/templates/back/signalement/view/information.html.twig
@@ -16,7 +16,7 @@
     </div>
 </div>
 
-<div class="bloc-list fr-container--fluid text-word-break-all">
+<div class="bloc-list fr-container--fluid text-word-break-all" data-ajax-form>
     <div class="fr-grid-row fr-grid-row--gutters">
         {% if signalement.isNotOccupant %}
             {% if isNewFormEnabled and canEditSignalement %}
@@ -696,4 +696,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>