This commit is contained in:
Charles 2025-11-05 15:02:21 +01:00
parent f6ce0e6229
commit a6fdb59521
4 changed files with 128 additions and 103 deletions

View File

@ -23,26 +23,4 @@ import './js/cookies.js';
import 'choices.js';
import 'quill'
import 'tabulator-tables'
export const TABULATOR_FR_LANG = {
fr: {
ajax: {loading: "Chargement...", error: "Erreur"},
pagination: {
page_size: "Taille de page",
page_title: "Afficher la page",
first: "Premier",
first_title: "Première page",
last: "Dernier",
last_title: "Dernière page",
prev: "Précédent",
prev_title: "Page précédente",
next: "Suivant",
next_title: "Page suivante",
all: "Tout",
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"},
},
};
import './js/global.js'

View File

@ -1,7 +1,7 @@
import {Controller} from '@hotwired/stimulus'
// Important: include a build with Ajax + pagination (TabulatorFull is simplest)
import {TabulatorFull as Tabulator} from 'tabulator-tables';
import {TABULATOR_FR_LANG} from "../app.js";
import {eyeIconLink, TABULATOR_FR_LANG} from "../js/global.js";
export default class extends Controller {
static values = {aws: String};
@ -40,7 +40,7 @@ export default class extends Controller {
formatterParams: {
height: "50px",
width: "50px",
urlPrefix: this.awsValue,
urlPrefix: "",
urlSuffix: "",
},
width: 100,
@ -59,16 +59,7 @@ export default class extends Controller {
formatter: (cell) => {
const url = cell.getValue();
if (url) {
return `
<a href="${url}" class="p-3 align-middle color-primary" title="Voir">
<svg xmlns="http://www.w3.org/2000/svg"
width="35px"
height="35px"
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>
`;
return eyeIconLink(url);
}
return '';
}

View File

@ -1,8 +1,7 @@
import {Controller} from '@hotwired/stimulus';
import Choices from 'choices.js';
import {TabulatorFull as Tabulator} from 'tabulator-tables';
import {TABULATOR_FR_LANG} from "../app.js";
import {activateUserIcon, deactivateUserIcon, eyeIconLink, sendEmailIcon, TABULATOR_FR_LANG} from "../js/global.js";
export default class extends Controller {
@ -10,7 +9,6 @@ export default class extends Controller {
rolesArray: Array,
selectedRoleIds: Array,
id: Number,
aws: String,
list: Boolean,
listOrganization: Boolean,
new: Boolean,
@ -28,7 +26,7 @@ export default class extends Controller {
this.table();
}
if (this.newValue) {
this.tableSmall();
this.tableNew();
}
if (this.adminValue) {
this.tableSmallAdmin();
@ -177,27 +175,17 @@ export default class extends Controller {
const actionColorClass = isActive ? 'color-secondary' : 'color-primary';
// SVGs
const deactivateSvg = `
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 640 512">
<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>`;
const activateSvg = `
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 640 512">
<path fill="currentColor" d="M96 128a128 128 0 1 1 256 0a128 128 0 1 1-256 0M0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3M625 177L497 305c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L591 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>`;
const deactivateSvg = deactivateUserIcon();
const activateSvg = activateUserIcon();
const actionSvg = isActive ? deactivateSvg : activateSvg;
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="35" height="35" viewBox="0 0 640 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>
${eyeIconLink(url)}
<a href="#"
class="${actionColorClass} ${actionClass}"
class="${actionColorClass} ${actionClass} pt-3"
data-id="${userId}"
title="${actionTitle}">
${actionSvg}
@ -303,12 +291,11 @@ export default class extends Controller {
onSelectChange(row, newValue) {
const data = row.getData();
console.log("Change select" + data);
};
tableSmall() {
tableNew() {
const columns = [
{
title: "Profil",
@ -381,16 +368,7 @@ export default class extends Controller {
formatter: (cell) => {
const url = cell.getValue();
if (url) {
return `
<a href="${url}" class="p-3 align-middle color-primary" title="Voir">
<svg xmlns="http://www.w3.org/2000/svg"
width="35px"
height="35px"
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>
`;
return eyeIconLink(url);
}
return '';
}
@ -495,16 +473,7 @@ export default class extends Controller {
formatter: (cell) => {
const url = cell.getValue();
if (url) {
return `
<a href="${url}" class="p-3 align-middle color-primary" title="Voir">
<svg xmlns="http://www.w3.org/2000/svg"
width="35px"
height="35px"
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>
`;
eyeIconLink(url);
}
return '';
}
@ -628,12 +597,13 @@ export default class extends Controller {
title: "<b>Statut</b>", field: "statut", vertAlign: "middle",
formatter: (cell) => {
const statut = cell.getValue();
console.log("Statut value:", statut);
if (statut === "INVITED") {
return `<span class="badge bg-primary">Invité</span>`
} else if (statut === "ACTIVE") {
return `<span class="badge bg-success">Actif</span>`
}else{
}else if( statut === "EXPIRED"){
return `<span class="badge bg-warning text-dark">Expiré</span>`
} else{
return `<span class="badge bg-secondary">Inactif</span>`
}
}
@ -652,48 +622,85 @@ export default class extends Controller {
const statut = rowData.statut;
const orgId = this.orgIdValue;
// Decide which action (deactivate vs activate)
const isActive = Boolean(statut);
// Check if user is expired
if (statut === "EXPIRED") {
return `
<div class="d-flex gap-2 align-content-center">
${eyeIconLink(url)}
${sendEmailIcon(userId, orgId)}
</div>
`;
}
// Decide which action (deactivate vs activate) for non-expired users
const isActive = (statut === "ACTIVE");
const actionClass = isActive ? 'deactivate-user' : 'activate-user';
const actionTitle = isActive ? 'Désactiver' : 'Réactiver';
const actionColorClass = isActive ? 'color-secondary' : 'color-primary';
// SVGs
const deactivateSvg = `
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 640 512">
<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>`;
const deactivateSvg = deactivateUserIcon();
const activateSvg = `
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 640 512">
<path fill="currentColor" d="M96 128a128 128 0 1 1 256 0a128 128 0 1 1-256 0M0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3M625 177L497 305c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L591 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>`;
const activateSvg = activateUserIcon();
const actionSvg = isActive ? deactivateSvg : activateSvg;
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="35" height="35" viewBox="0 0 640 512">
<path fill="currentColor"
<div class="d-flex gap-2 align-content-center">
<a href="${url}" class="p-3 align-middle color-primary" title="Voir">
<svg xmlns="http://www.w3.org/2000/svg"
width="35px"
height="35px"
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="${actionColorClass} ${actionClass}"
data-id="${userId}"
data-org-id="${orgId}"
title="${actionTitle}">
${actionSvg}
</a>
</div>
`;
<a href="#"
class="${actionColorClass} ${actionClass} pt-3"
data-id="${userId}"
data-org-id="${orgId}"
title="${actionTitle}">
${actionSvg}
</a>
</div>
`;
},
cellClick: function (e, cell) {
const target = e.target.closest('a');
if (!target) return;
// Handle resend invitation for expired users
if (target.classList.contains('resend-invitation')) {
e.preventDefault();
const userId = target.getAttribute('data-id');
if (confirm('Voulez-vous renvoyer l\'invitation à cet utilisateur ?')) {
const formData = new FormData();
formData.append('organizationId', target.getAttribute('data-org-id'));
fetch(`/user/organization/resend-invitation/${userId}`, {
method: 'POST',
body: formData,
headers: {'X-Requested-With': 'XMLHttpRequest'}
})
.then(async (response) => {
if (response.ok) {
const data = cell.getRow().getData();
data.statut = "INVITED";
cell.getRow().reformat();
alert('Invitation renvoyée avec succès');
} else {
const text = await response.text();
alert('Erreur lors de l\'envoi : ' + text);
}
})
.catch(() => alert('Erreur lors de l\'envoi'));
}
}
// Deactivate
if (target.classList.contains('deactivate-user')) {
e.preventDefault();
@ -709,9 +716,8 @@ export default class extends Controller {
})
.then(async (response) => {
if (response.ok) {
// Option 1: update row status and re-render to switch icon
const data = cell.getRow().getData();
data.statut = false;
data.statut = "INACTIVE";
cell.getRow().reformat();
} else {
const text = await response.text();
@ -737,9 +743,8 @@ export default class extends Controller {
})
.then(async (response) => {
if (response.ok) {
// Switch status back to active and re-render row
const data = cell.getRow().getData();
data.statut = true;
data.statut = "ACTIVE";
cell.getRow().reformat();
} else {
const text = await response.text();

51
assets/js/global.js Normal file
View File

@ -0,0 +1,51 @@
export const TABULATOR_FR_LANG = {
fr: {
ajax: {loading: "Chargement...", error: "Erreur"},
pagination: {
page_size: "Taille de page",
page_title: "Afficher la page",
first: "Premier",
first_title: "Première page",
last: "Dernier",
last_title: "Dernière page",
prev: "Précédent",
prev_title: "Page précédente",
next: "Suivant",
next_title: "Page suivante",
all: "Tout",
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"},
},
};
export function eyeIconLink(url) {
return `<a href="${url}" class="p-3 align-middle color-primary" title="Voir">
<svg xmlns="http://www.w3.org/2000/svg"
width="35px"
height="35px"
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>`;
}
export function deactivateUserIcon() {
return `<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 640 512">
<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>`
}
export function activateUserIcon() {
return `<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 640 512">
<path fill="currentColor" d="M96 128a128 128 0 1 1 256 0a128 128 0 1 1-256 0M0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3M625 177L497 305c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L591 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/>
</svg>`
}
export function sendEmailIcon(userId, orgId) {
return `<a href="#" class="color-primary resend-invitation pt-3" data-id="${userId}" data-org-id="${orgId}" title="Renvoyer l'invitation" >
<svg xmlns="http://www.w3.org/2000/svg" width="35px" height="35px" viewBox="0 0 24 24"><path fill="currentColor" d="M18.175 17H15q-.425 0-.712-.288T14 16t.288-.712T15 15h3.175l-.9-.9Q17 13.825 17 13.413t.3-.713q.275-.275.7-.275t.7.275l2.6 2.6q.125.125.2.312t.075.388t-.075.387t-.2.313l-2.6 2.6q-.275.275-.687.288T17.3 19.3q-.275-.275-.275-.7t.275-.7zM4 17q-.825 0-1.412-.587T2 15V5q0-.825.588-1.412T4 3h13q.825 0 1.413.588T19 5v4.075q0 .4-.3.7t-.7.3q-.425 0-.712-.288T17 9.076V6.4L10.4 11L4 6.425V15h7.075q.425 0 .713.288t.287.712t-.287.713t-.713.287zM5.45 5l4.95 3.55L15.5 5zM4 15V5z"/></svg>
</a>`
}