169 lines
6.8 KiB
Twig
169 lines
6.8 KiB
Twig
|
{% extends 'base.html.twig' %}
|
||
|
|
|
||
|
|
{% block title %}Membres{% endblock %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
|
|
<h1>Membres</h1>
|
||
|
|
<a href="{{ path('app_membre_new') }}" class="btn btn-success">
|
||
|
|
<i class="fas fa-plus"></i> Nouveau Membre
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="alert alert-info">
|
||
|
|
<strong>Édition inline :</strong> Cliquez sur les cellules nom, prénom ou email pour les modifier directement.
|
||
|
|
<br><small>Les modifications sont enregistrées automatiquement. Vérifiez la console (F12) pour les logs.</small>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table table-striped table-hover">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Id</th>
|
||
|
|
<th>Nom</th>
|
||
|
|
<th>Prénom</th>
|
||
|
|
<th>Email</th>
|
||
|
|
<th>Contributions</th>
|
||
|
|
<th>Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{% for membre in membres %}
|
||
|
|
<tr data-membre-id="{{ membre.id }}">
|
||
|
|
<td>{{ membre.id }}</td>
|
||
|
|
<td class="editable-cell"
|
||
|
|
data-entity-type="Membre"
|
||
|
|
data-entity-id="{{ membre.id }}"
|
||
|
|
data-field="nom"
|
||
|
|
title="Cliquez pour modifier">
|
||
|
|
{{ membre.nom|default('') }}
|
||
|
|
</td>
|
||
|
|
<td class="editable-cell"
|
||
|
|
data-entity-type="Membre"
|
||
|
|
data-entity-id="{{ membre.id }}"
|
||
|
|
data-field="prenom"
|
||
|
|
title="Cliquez pour modifier">
|
||
|
|
{{ membre.prenom|default('') }}
|
||
|
|
</td>
|
||
|
|
<td class="editable-cell"
|
||
|
|
data-entity-type="Membre"
|
||
|
|
data-entity-id="{{ membre.id }}"
|
||
|
|
data-field="email"
|
||
|
|
title="Cliquez pour modifier">
|
||
|
|
{{ membre.email|default('') }}
|
||
|
|
</td>
|
||
|
|
<td>{{ membre.contributions|length }}</td>
|
||
|
|
<td>
|
||
|
|
<a href="{{ path('app_membre_show', {'id': membre.id}) }}" class="btn btn-sm btn-info">
|
||
|
|
<i class="fas fa-eye"></i> Voir
|
||
|
|
</a>
|
||
|
|
<a href="{{ path('app_membre_edit', {'id': membre.id}) }}" class="btn btn-sm btn-warning">
|
||
|
|
<i class="fas fa-edit"></i> Modifier
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
{% else %}
|
||
|
|
<tr>
|
||
|
|
<td colspan="6" class="text-center">Aucun membre trouvé</td>
|
||
|
|
</tr>
|
||
|
|
{% endfor %}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% block javascripts %}
|
||
|
|
{{ parent() }}
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const editableCells = document.querySelectorAll('.editable-cell');
|
||
|
|
|
||
|
|
editableCells.forEach(cell => {
|
||
|
|
cell.addEventListener('click', function() {
|
||
|
|
// Ne rien faire si la cellule est déjà en mode édition
|
||
|
|
if (cell.querySelector('input')) return;
|
||
|
|
|
||
|
|
const currentValue = cell.textContent.trim();
|
||
|
|
const field = cell.dataset.field;
|
||
|
|
const entityId = cell.dataset.entityId;
|
||
|
|
const entityType = cell.dataset.entityType;
|
||
|
|
|
||
|
|
// Créer un input pour l'édition
|
||
|
|
const input = document.createElement('input');
|
||
|
|
input.type = field === 'email' ? 'email' : 'text';
|
||
|
|
input.value = currentValue;
|
||
|
|
input.classList.add('form-control', 'form-control-sm');
|
||
|
|
|
||
|
|
// Style pour l'input
|
||
|
|
input.style.width = '100%';
|
||
|
|
input.style.boxSizing = 'border-box';
|
||
|
|
|
||
|
|
// Remplacer le contenu de la cellule par l'input
|
||
|
|
cell.innerHTML = '';
|
||
|
|
cell.appendChild(input);
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
// Gestion de la sauvegarde
|
||
|
|
const saveChanges = async () => {
|
||
|
|
const newValue = input.value.trim();
|
||
|
|
|
||
|
|
// Ne rien faire si la valeur n'a pas changé
|
||
|
|
if (newValue === currentValue) {
|
||
|
|
cell.textContent = currentValue;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
// Envoyer la requête AJAX
|
||
|
|
const response = await fetch('{{ path('app_membre_update_field') }}', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json',
|
||
|
|
'X-Requested-With': 'XMLHttpRequest'
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
id: entityId,
|
||
|
|
field: field,
|
||
|
|
value: newValue
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
cell.textContent = newValue;
|
||
|
|
cell.classList.add('bg-success', 'text-white');
|
||
|
|
setTimeout(() => {
|
||
|
|
cell.classList.remove('bg-success', 'text-white');
|
||
|
|
}, 1000);
|
||
|
|
} else {
|
||
|
|
throw new Error(data.message || 'Erreur lors de la mise à jour');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Erreur:', error);
|
||
|
|
cell.textContent = currentValue;
|
||
|
|
alert('Erreur lors de la sauvegarde: ' + error.message);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Sauvegarder lors de la perte de focus
|
||
|
|
input.addEventListener('blur', saveChanges);
|
||
|
|
|
||
|
|
// Sauvegarder avec la touche Entrée
|
||
|
|
input.addEventListener('keypress', function(e) {
|
||
|
|
if (e.key === 'Enter') {
|
||
|
|
input.blur();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Annuler avec la touche Échap
|
||
|
|
input.addEventListener('keydown', function(e) {
|
||
|
|
if (e.key === 'Escape') {
|
||
|
|
cell.textContent = currentValue;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|
||
|
|
{% endblock %}
|