boutons delete: l'action, la route, la fonction ajax

src/APIBundle/Resources/config/routing.yml

@@ -14,14 +14,6 @@ api_owner_read_one:
         _controller: APIBundle:Owner:readOne
     methods: [ GET ]
 
-api_image_update:
-    path:   /image/{id}
-    requirements:
-        id: \d+
-    defaults:
-        _controller: APIBundle:Image:update
-    methods: [ POST ]
-
 api_owner_create:
     path:   /owner/add
     defaults:
@@ -36,6 +28,23 @@ api_owner_update:
         id: \d+
     methods: [ POST ]
 
+api_owner_delete_one:
+    path:   /owner/{id}
+    defaults:
+        _controller: APIBundle:Owner:deleteOne
+    requirements:
+        id: \d+
+    methods: [ DELETE ]
+
+
+api_image_update:
+    path:   /image/{id}
+    requirements:
+        id: \d+
+    defaults:
+        _controller: APIBundle:Image:update
+    methods: [ POST ]
+
 ##
 ## Note:
 ##
@@ -43,5 +52,5 @@ api_owner_update:
 ## Pour l'interroger de l'extérieur, depuis un autre domaine, il faut installer un Bundle :
 ##  NelmioBundle,  avec composer.phar require ...
 ## Sinon il se produit un blocage cross-origin.
-## Recherche:  cross origin symfony 
+## Recherche:  cross origin symfony
 ##

src/TechnoBundle/Resources/views/Ajax/Owner/mainDisplay.html.twig

@@ -96,19 +96,16 @@
                     tr.appendChild(td3);
 
                     let td4 = document.createElement('td');
-                    let editBtn = document.createElement('button');
 
-                    // W3C cette notation est conseillée pour un attr custom :
+                    // Boutons edit
+                    let editBtn = document.createElement('button');
                     editBtn.dataset.ownerId = json[i].id;
                     editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
                     editBtn.classList.add('btn', 'btn-primary');
-
-                    // Evénement sur les boutons
                     editBtn.addEventListener('click', function()
                     {
                         let ownerId = this.dataset.ownerId;
                         submitURL = Routing.generate('api_owner_update', {'id': ownerId});
-
                         getAJAX(submitURL, function()
                         {
                             if (this.readyState === 4 && this.status === 200)
@@ -119,15 +116,37 @@
                                 form.parentNode.classList.remove('hidden');
                             }
                         });
-
                     });
                     td4. appendChild(editBtn);
-                    tr.appendChild(td4);
 
-                    // '<a class="btn btn-danger" href="#">
-                    //    <i class="fas fa-trash fa-fw"></i> Supprimer
-                    //  </a>';
+                    // Boutons delete
+                    let deleteBtn = document.createElement('button');
+                    deleteBtn.dataset.ownerId = json[i].id;
+                    deleteBtn.innerHTML = '<i class="fas fa-trash fa-fw"></i> Supprimer';
+                    deleteBtn.classList.add('btn', 'btn-danger');
+                    deleteBtn.addEventListener('click', function()
+                    {
+                        let ownerId = this.dataset.ownerId;
+                        let r = confirm('Are you sure ?');
+                        if (r === true) {
+                            submitURL = Routing.generate('api_owner_delete_one', {'id': ownerId});
+                            deleteAJAX(submitURL, function()
+                            {
+                                if (this.readyState === 4) {
+                                    if (this.status === 200)
+                                    {
+                                        reloadTableOwner();
+                                    }
+                                    else if (this.status === 400) {
+                                        console.log('BAD REQUEST. DISPLAY ERRORS');
+                                    }
+                                }
+                            });
+                        }
+                    });
+                    td4. appendChild(deleteBtn);
 
+                    tr.appendChild(td4);
                     tbody.appendChild(tr);
                 }
 

web/js/script.js

@@ -24,6 +24,14 @@ function postAJAX(url, callback, post)
     xhr.send(new FormData(post));
 }
 
+function deleteAJAX(url, callback)
+{
+    let xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = callback;
+    xhr.open("DELETE", url, true);
+    xhr.send(null);
+}
+
 /*  // pour info
     function getAJAX_v2(url, callback)
     {