added deactivate button in organization dashboard

assets/controllers/user_controller.js

@@ -2,6 +2,7 @@ import {Controller} from '@hotwired/stimulus';
 import Choices from 'choices.js';
 import {TabulatorFull as Tabulator} from 'tabulator-tables';
 
+// TODO: REFACTOR (doublon de langue )
 export default class extends Controller {
     static values = {
         rolesArray: Array,
@@ -53,6 +54,7 @@ export default class extends Controller {
         }
     }
 
+    // TODO: vérifier le style des header filter et vertAlign/hozalign
     table() {
         const columns = [
             {
@@ -681,57 +683,56 @@ export default class extends Controller {
                     // You can get other row data like ID for delete endpoint if needed
                     const rowData = cell.getRow().getData();
                     const deleteId = rowData.id;
-
+                    const orgId = this.orgIdValue
                     return `
             <div 
             class="d-flex gap-2 align-content-center">
                 <a href="${url}" 
-                   class=" color-primary" 
+                   class="color-primary" 
                    title="Voir">
                     <svg xmlns="http://www.w3.org/2000/svg" 
-                         width="25px" 
+                         width="35px" 
-                         height="25px" 
+                         height="35" 
                          viewBox="0 0 576 512">
                         <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" 
+                   class="color-secondary delete-user" 
                    data-id="${deleteId}" 
+                   data-org-id="${orgId}"
                    title="Supprimer">
                     <svg xmlns="http://www.w3.org/2000/svg" 
-                         width="25px" 
+                         width="35px" 
-                         height="25px" 
+                         height="35px" 
                          viewBox="0 0 448 512">
-                        <path fill="currentColor" 
+                        <path fill="currentColor" d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2s-6.3 25.5 4.1 33.7l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L353.3 251.6C407.9 237 448 187.2 448 128C448 57.3 390.7 0 320 0c-69.8 0-126.5 55.8-128 125.2zm225.5 299.2C170.5 309.4 96 387.2 96 482.3c0 16.4 13.3 29.7 29.7 29.7h388.6c3.9 0 7.6-.7 11-2.1z"/></svg>
-                              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')) {
+                    if (target?.classList.contains('delete-user')) {
                         e.preventDefault();
                         const userId = target.getAttribute('data-id');
 
-                        if (confirm('Voulez-vous vraiment supprimer cet utilisateur ?')) {
+                        if (confirm('Voulez-vous vraiment désactiver cet utilisateur ?')) {
+                            const formData = new FormData();
+                            formData.append('organizationId', target.getAttribute('data-org-id'));
+
                             fetch(`/user/organization/deactivate/${userId}`, {
                                 method: 'POST',
+                                body: formData,
+                                headers: {'X-Requested-With': 'XMLHttpRequest'}
                             })
-                                .then(response => {
+                                .then(async (response) => {
                                     if (response.ok) {
-                                        alert('Utilisateur supprimé');
+                                        cell.getRow().delete();
-                                        cell.getRow().delete(); // Remove row from table
                                     } else {
-                                        alert('Erreur lors de la suppression');
+                                        const text = await response.text();
+                                        alert('Erreur lors de la suppression: ' + text);
                                     }
                                 })
                                 .catch(() => alert('Erreur lors de la suppression'));

assets/styles/app.css

@@ -133,3 +133,7 @@ body {
 .btn-warning{
     border-radius: 1rem;
 }
+
+.color-secondary{
+    color: var(--secondary);
+}

src/Controller/UserController.php

@@ -556,6 +556,7 @@ class UserController extends AbstractController
                         'id' => $user->getId(),
                         'organizationId' => $uo->getOrganization()->getId(),
                     ]),
+                    'id' => $user->getId(),
                 ];
             }, $rows);