added deleted button in tables

assets/controllers/user_controller.js

@@ -21,13 +21,13 @@ export default class extends Controller {
 
     connect() {
         this.roleSelect();
-        if(this.listValue){
+        if (this.listValue) {
             this.table();
         }
-        if(this.newValue){
+        if (this.newValue) {
             this.tableSmall();
         }
-        if(this.adminValue){
+        if (this.adminValue) {
             this.tableSmallAdmin();
         }
         if (this.listOrganizationValue) {
@@ -143,25 +143,74 @@ export default class extends Controller {
             {
                 title: "<b>Actions</b>",
                 field: "showUrl",
-                hozAlign: "center",
+                width: 130,
-                width: 100,
                 vertAlign: "middle",
                 headerSort: false,
                 formatter: (cell) => {
                     const url = cell.getValue();
-                    if (url) {
+
-                        return `
+                    if (!url) return '';
-                <a href="${url}" class="p-3 align-middle color-primary" title="Voir">
+
+                    // You can get other row data like ID for delete endpoint if needed
+                    const rowData = cell.getRow().getData();
+                    const deleteId = rowData.id;
+
+                    return `
+            <div 
+            class="d-flex gap-2 align-content-center">
+                <a href="${url}" 
+                   class=" color-primary" 
+                   title="Voir">
                     <svg xmlns="http://www.w3.org/2000/svg" 
-                    width="35px" 
+                         width="25px" 
-                    height="35px" 
+                         height="25px" 
-                    viewBox="0 0 576 512">
+                         viewBox="0 0 576 512">
-                    <path fill="currentColor" 
+                        <path fill="currentColor" 
                     d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256C63 286 89.6 328.5 128 364.3c41.2 38.1 94.8 67.7 160 67.7s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80M95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6M288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80h-2c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2v2c0 44.2 35.8 80 80 80m0-208a128 128 0 1 1 0 256a128 128 0 1 1 0-256"/></svg>
                 </a>
-            `;
+
+                <a href="#" 
+                   class="text-danger delete-user" 
+                   data-id="${deleteId}" 
+                   title="Supprimer">
+                    <svg xmlns="http://www.w3.org/2000/svg" 
+                         width="25px" 
+                         height="25px" 
+                         viewBox="0 0 448 512">
+                        <path fill="currentColor" 
+                              d="M135.2 17.7L121 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 
+                              32-32s-14.3-32-32-32h-89L312.8 
+                              17.7C307.3 12.2 299.7 9 291.7 9H156.3c-8 
+                              0-15.6 3.2-21.1 8.7zM32 
+                              128L53.2 467.2C54.6 491 74.2 512 98 512H350c23.8 
+                              0 43.4-21 44.8-44.8L416 128H32z"/>
+                    </svg>
+                </a>
+            </div>
+        `;
+                },
+                cellClick: function (e, cell) {
+                    const target = e.target.closest('a');
+                    if (target && target.classList.contains('delete-user')) {
+                        e.preventDefault();
+                        const userId = target.getAttribute('data-id');
+
+                        if (confirm('Voulez-vous vraiment supprimer cet utilisateur ?')) {
+                            // Example delete call (replace URL as needed)
+                            fetch(`/user/delete/${userId}`, {
+                                method: 'POST',
+                            })
+                                .then(response => {
+                                    if (response.ok) {
+                                        alert('Utilisateur supprimé');
+                                        cell.getRow().delete(); // Remove row from table
+                                    } else {
+                                        alert('Erreur lors de la suppression');
+                                    }
+                                })
+                                .catch(() => alert('Erreur lors de la suppression'));
+                        }
                     }
-                    return '';
                 }
             }];
         const tabulator = new Tabulator("#tabulator-userList", {
@@ -329,7 +378,7 @@ export default class extends Controller {
             pagination: false,
             paginationMode: "remote",
             // paginationSize: 5,
-            ajaxParams: { orgId: this.orgIdValue },
+            ajaxParams: {orgId: this.orgIdValue},
             langs: {
                 fr: {
                     ajax: {
@@ -379,6 +428,7 @@ export default class extends Controller {
             columns
         });
     }
+
     tableSmallAdmin() {
         const columns = [
             {
@@ -469,8 +519,6 @@ export default class extends Controller {
         ];
 
 
-
-
         const tabulator = new Tabulator("#tabulator-userListSmallAdmin", {
 
             locale: "fr", //'en' for English, 'fr' for French (en is default, no need to include it)
@@ -480,7 +528,7 @@ export default class extends Controller {
             pagination: false,
             paginationMode: "remote",
             // paginationSize: 5,
-            ajaxParams: { orgId: this.orgIdValue },
+            ajaxParams: {orgId: this.orgIdValue},
             langs: {
                 fr: {
                     ajax: {
@@ -622,25 +670,73 @@ export default class extends Controller {
             {
                 title: "<b>Actions</b>",
                 field: "showUrl",
-                hozAlign: "center",
+                width: 130,
-                width: 100,
                 vertAlign: "middle",
                 headerSort: false,
                 formatter: (cell) => {
                     const url = cell.getValue();
-                    if (url) {
+
-                        return `
+                    if (!url) return '';
-                <a href="${url}" class="p-3 align-middle color-primary" title="Voir">
+
+                    // You can get other row data like ID for delete endpoint if needed
+                    const rowData = cell.getRow().getData();
+                    const deleteId = rowData.id;
+
+                    return `
+            <div 
+            class="d-flex gap-2 align-content-center">
+                <a href="${url}" 
+                   class=" color-primary" 
+                   title="Voir">
                     <svg xmlns="http://www.w3.org/2000/svg" 
-                    width="35px" 
+                         width="25px" 
-                    height="35px" 
+                         height="25px" 
-                    viewBox="0 0 576 512">
+                         viewBox="0 0 576 512">
-                    <path fill="currentColor" 
+                        <path fill="currentColor" 
                     d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256C63 286 89.6 328.5 128 364.3c41.2 38.1 94.8 67.7 160 67.7s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80M95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6M288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80h-2c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2v2c0 44.2 35.8 80 80 80m0-208a128 128 0 1 1 0 256a128 128 0 1 1 0-256"/></svg>
                 </a>
-            `;
+
+                <a href="#" 
+                   class="text-danger delete-user" 
+                   data-id="${deleteId}" 
+                   title="Supprimer">
+                    <svg xmlns="http://www.w3.org/2000/svg" 
+                         width="25px" 
+                         height="25px" 
+                         viewBox="0 0 448 512">
+                        <path fill="currentColor" 
+                              d="M135.2 17.7L121 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 
+                              32-32s-14.3-32-32-32h-89L312.8 
+                              17.7C307.3 12.2 299.7 9 291.7 9H156.3c-8 
+                              0-15.6 3.2-21.1 8.7zM32 
+                              128L53.2 467.2C54.6 491 74.2 512 98 512H350c23.8 
+                              0 43.4-21 44.8-44.8L416 128H32z"/>
+                    </svg>
+                </a>
+            </div>
+        `;
+                },
+                cellClick: function (e, cell) {
+                    const target = e.target.closest('a');
+                    if (target && target.classList.contains('delete-user')) {
+                        e.preventDefault();
+                        const userId = target.getAttribute('data-id');
+
+                        if (confirm('Voulez-vous vraiment supprimer cet utilisateur ?')) {
+                            fetch(`/user/organization/deactivate/${userId}`, {
+                                method: 'POST',
+                            })
+                                .then(response => {
+                                    if (response.ok) {
+                                        alert('Utilisateur supprimé');
+                                        cell.getRow().delete(); // Remove row from table
+                                    } else {
+                                        alert('Erreur lors de la suppression');
+                                    }
+                                })
+                                .catch(() => alert('Erreur lors de la suppression'));
+                        }
                     }
-                    return '';
                 }
             }];
         // if (this.statutValue) {
@@ -725,15 +821,15 @@ export default class extends Controller {
             locale: "fr",
             ajaxURL: "/user/data/organization",
             ajaxConfig: "GET",
-            ajaxParams: { orgId: this.orgIdValue },
+            ajaxParams: {orgId: this.orgIdValue},
 
             pagination: true,
             paginationMode: "remote",
             paginationSize: 10,
 
             ajaxResponse: (url, params, response) => response,
-            paginationDataSent: { page: "page", size: "size" },
+            paginationDataSent: {page: "page", size: "size"},
-            paginationDataReceived: { last_page: "last_page" },
+            paginationDataReceived: {last_page: "last_page"},
 
             ajaxSorting: true,
             ajaxFiltering: true,

src/Controller/UserController.php

@@ -312,7 +312,7 @@ class UserController extends AbstractController
         throw $this->createAccessDeniedException(self::ACCESS_DENIED);
     }
 
-    #[Route('/delete/{id}', name: 'delete', methods: ['GET'])]
+    #[Route('/delete/{id}', name: 'delete', methods: ['GET', 'POST'])]
     public function delete(int $id, Request $request): Response
     {
         $this->denyAccessUnlessGranted("ROLE_SUPER_ADMIN");
@@ -401,6 +401,7 @@ class UserController extends AbstractController
         // Map to array (keep isConnected)
         $data = array_map(function (User $user) {
             return [
+                'id' => $user->getId(),
                 'pictureUrl' => $user->getPictureUrl(),
                 'name' => $user->getSurname(),
                 'prenom' => $user->getName(),