From 83da6d0be43b7d8c0538c06b22279ce9d00ac3c8 Mon Sep 17 00:00:00 2001 From: Charles Date: Mon, 27 Oct 2025 14:56:45 +0100 Subject: [PATCH] refresh row on activate/deactivate user --- assets/controllers/user_controller.js | 143 +++++++++++++++++--------- 1 file changed, 93 insertions(+), 50 deletions(-) diff --git a/assets/controllers/user_controller.js b/assets/controllers/user_controller.js index 2fdb750..3fef33c 100644 --- a/assets/controllers/user_controller.js +++ b/assets/controllers/user_controller.js @@ -4,7 +4,7 @@ import {TabulatorFull as Tabulator} from 'tabulator-tables'; const TABULATOR_FR_LANG = { fr: { - ajax: { loading: "Chargement...", error: "Erreur" }, + ajax: {loading: "Chargement...", error: "Erreur"}, pagination: { page_size: "Taille de page", page_title: "Afficher la page", @@ -17,11 +17,11 @@ const TABULATOR_FR_LANG = { next: "Suivant", next_title: "Page suivante", all: "Tout", - counter: { showing: "Affiche", of: "de", rows: "lignes", pages: "pages" }, + counter: {showing: "Affiche", of: "de", rows: "lignes", pages: "pages"}, }, - headerFilters: { default: "Filtrer la colonne...", columns: {} }, - data: { loading: "Chargement des données...", error: "Erreur de chargement des données" }, - groups: { item: "élément", items: "éléments" }, + headerFilters: {default: "Filtrer la colonne...", columns: {}}, + data: {loading: "Chargement des données...", error: "Erreur de chargement des données"}, + groups: {item: "élément", items: "éléments"}, }, }; @@ -583,65 +583,77 @@ export default class extends Controller { {title: "Nom", field: "name", headerFilter: "input", widthGrow: 2, vertAlign: "middle"}, {title: "Prénom", field: "prenom", headerFilter: "input", widthGrow: 2, vertAlign: "middle"}, {title: "Email", field: "email", headerFilter: "input", widthGrow: 3, vertAlign: "middle"}, - {title: "Statut", field: "statut", vertAlign: "middle", - formatter: (cell) => { - const statut = cell.getValue(); - if (statut) { - return `Actif` - }else{ - return `Inactif` - } - } + { + title: "Statut", field: "statut", vertAlign: "middle", + formatter: (cell) => { + const statut = cell.getValue(); + if (statut) { + return `Actif` + } else { + return `Inactif` + } + } }, { title: "Actions", field: "showUrl", - width: 130, vertAlign: "middle", headerSort: false, formatter: (cell) => { const url = cell.getValue(); - if (!url) return ''; - // 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 ` -
- - - - + const userId = rowData.id; + const statut = rowData.statut; + const orgId = this.orgIdValue; - - - - -
- `; + // Decide which action (deactivate vs activate) + const isActive = Boolean(statut); + + const actionClass = isActive ? 'deactivate-user' : 'activate-user'; + const actionTitle = isActive ? 'Désactiver' : 'Réactiver'; + const actionColorClass = isActive ? 'color-secondary' : 'color-primary'; + + // SVGs + const deactivateSvg = ` + + + `; + + const activateSvg = ` + + `; + + const actionSvg = isActive ? deactivateSvg : activateSvg; + + return ` +
+ + + + + + + ${actionSvg} + +
+ `; }, + cellClick: function (e, cell) { const target = e.target.closest('a'); - if (target?.classList.contains('delete-user')) { + if (!target) return; + + // Deactivate + if (target.classList.contains('deactivate-user')) { e.preventDefault(); const userId = target.getAttribute('data-id'); - if (confirm('Voulez-vous vraiment désactiver cet utilisateur ?')) { const formData = new FormData(); formData.append('organizationId', target.getAttribute('data-org-id')); @@ -653,13 +665,44 @@ export default class extends Controller { }) .then(async (response) => { if (response.ok) { - cell.getRow().delete(); + // Option 1: update row status and re-render to switch icon + const data = cell.getRow().getData(); + data.statut = false; + cell.getRow().reformat(); } else { const text = await response.text(); - alert('Erreur lors de la suppression: ' + text); + alert('Erreur lors de la désactivation: ' + text); } }) - .catch(() => alert('Erreur lors de la suppression')); + .catch(() => alert('Erreur lors de la désactivation')); + } + } + + // Activate + if (target.classList.contains('activate-user')) { + e.preventDefault(); + const userId = target.getAttribute('data-id'); + if (confirm('Voulez-vous réactiver cet utilisateur ?')) { + const formData = new FormData(); + formData.append('organizationId', target.getAttribute('data-org-id')); + + fetch(`/user/organization/activate/${userId}`, { + method: 'POST', + body: formData, + headers: {'X-Requested-With': 'XMLHttpRequest'} + }) + .then(async (response) => { + if (response.ok) { + // Switch status back to active and re-render row + const data = cell.getRow().getData(); + data.statut = true; + cell.getRow().reformat(); + } else { + const text = await response.text(); + alert('Erreur lors de la réactivation: ' + text); + } + }) + .catch(() => alert('Erreur lors de la réactivation')); } } }