Dynamic display of activation status

assets/controllers/user_controller.js

@@ -18,7 +18,7 @@ export default class extends Controller {
         orgId: Number
     }
 
-    static targets = ["select"];
+    static targets = ["select", "statusButton"];
 
     connect() {
         this.roleSelect();
@@ -875,71 +875,47 @@ export default class extends Controller {
         });
     };
 
-    async deactivateUser(event) {
+    async toggleStatus(event) {
         event.preventDefault();
-        const userId = this.idValue;
 
-        if (!userId) {
+        const button = this.statusButtonTarget;
-            console.error(`User ID not found!`);
+        const isActive = button.dataset.active === "true";
-            return;
+        const newStatus = isActive ? 'deactivate' : 'activate';
-        }
+        const confirmMsg = isActive ? "Désactiver cet utilisateur ?" : "Réactiver cet utilisateur ?";
+
+        if (!confirm(confirmMsg)) return;
 
-        if (confirm(`Voulez-vous vraiment désactiver cet utilisateur ?`)) {
         try {
             const formData = new FormData();
-                formData.append('status', 'deactivate');
+            formData.append('status', newStatus);
 
-                const response = await fetch(`/user/activeStatus/${userId}`, {
+            const response = await fetch(`/user/activeStatus/${this.idValue}`, {
                 method: 'POST',
                 body: formData,
                 headers: {'X-Requested-With': 'XMLHttpRequest'}
             });
 
             if (response.ok) {
-                    alert('Utilisateur désactivé avec succès');
+                this.updateButtonUI(!isActive);
-                    // If you need to refresh the UI, do it here
-                    // e.g., window.location.reload();
             } else {
-                    const text = await response.text();
+                alert('Erreur lors de la mise à jour');
-                    alert('Erreur: ' + text);
             }
         } catch (err) {
-                alert('Erreur lors de la communication avec le serveur');
+            alert('Erreur de connexion');
-            }
         }
     }
 
-    async activateUser(event) {
+    updateButtonUI(nowActive) {
-        event.preventDefault();
+        const btn = this.statusButtonTarget;
-        const userId = this.idValue;
 
-        if (!userId) {
+        if (nowActive) {
-            console.error(`User ID not found!`);
+            btn.textContent = "Désactiver";
-            return;
+            btn.classList.replace("btn-success", "btn-secondary");
-        }
+            btn.dataset.active = "true";
-
-        if (confirm(`Voulez-vous vraiment activer cet utilisateur ?`)) {
-            try {
-                const formData = new FormData();
-                formData.append('status', 'activate');
-
-                const response = await fetch(`/user/activeStatus/${userId}`, {
-                    method: 'POST',
-                    body: formData,
-                    headers: {'X-Requested-With': 'XMLHttpRequest'}
-                });
-
-                if (response.ok) {
-                    alert('Utilisateur activé avec succès');
-                    // If you need to refresh the UI, do it here
-                    // e.g., window.location.reload();
         } else {
-                    const text = await response.text();
+            btn.textContent = "Réactiver";
-                    alert('Erreur: ' + text);
+            btn.classList.replace("btn-secondary", "btn-success");
-                }
+            btn.dataset.active = "false";
-            } catch (err) {
-                alert('Erreur lors de la communication avec le serveur');
-            }
         }
     }
 }

templates/user/show.html.twig

@@ -12,22 +12,18 @@
                 {% endfor %}
             {% endfor %}
                 <div class="card-header border-0 d-flex justify-content-between align-items-center ">
-                    <div class="card-title">
+                    <div class="card-title"><h1>Gestion Utilisateur</h1></div>
-                        <h1>Gestion Utilisateur</h1>
-                    </div>
                     <div class="d-flex gap-2">
                         {% if is_granted("ROLE_ADMIN") %}
-                            {% if user.active %}
+                            <button
-                                <button class="btn btn-secondary" data-action="click->user#deactivateUser">Désactiver</button>
+                                    class="btn {{ user.active ? 'btn-secondary' : 'btn-success' }}"
-{#                                <a href="{{ path('user_active_status', {'id': user.id, 'status':'deactivate'}) }}"#}
+                                    data-user-target="statusButton"
-{#                                   class="btn btn-secondary">Désactiver</a>#}
+                                    data-action="click->user#toggleStatus"
-                            {% else %}
+                                    data-active="{{ user.active ? 'true' : 'false' }}">
-                                <button class="btn btn-success" data-action="click->user#activateUser">Réactiver</button>
+                                {{ user.active ? 'Désactiver' : 'Réactiver' }}
-{#                                <a href="{{ path('user_active_status', {'id': user.id, 'status':'activate'}) }}"#}
+                            </button>
-{#                                   class="btn btn-success">Réactiver</a>#}
+
-                            {% endif %}
+                            <a href="{{ path('user_delete', {'id': user.id}) }}" class="btn btn-warning">Supprimer</a>
-                            <a href="{{ path('user_delete', {'id': user.id}) }}"
-                               class="btn btn-warning">Supprimer</a>
                         {% endif %}
                     </div>
                 </div>