Skip to main content

services.js

📘 Documentation : services.js

Dernière mise à jour : 22/05/2025

🔁 1. Activation / Désactivation d’un service

Fonctionnement :

  • Chaque case à cocher (.toggle-active) représente l'état actif d'un service.
  • Lorsqu’elle est cochée/décochée, un appel AJAX POST est envoyé vers /Assets/Ajax/services/toggle_active.php.
document.querySelectorAll('.toggle-active').forEach(checkbox => {
    checkbox.addEventListener('change', () => {
        const id = checkbox.dataset.id;
        const actif = checkbox.checked ? 1 : 0;

        fetch('/Assets/Ajax/services/toggle_active.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({ id, actif })
        });
    });
});

✏️ 2. Modification en ligne d’un service existant

Déclencheur : Clic sur l'icône fa-edit

Comportement :

  • Les cellules td[data-editable] deviennent éditables via un champ <input>.
  • Les boutons Valider (fa-check-circle) et Annuler (fa-times-circle) apparaissent.

Touches rapides :

  • Entrée → Valider
  • Échap → Annuler

✅ 3. Validation des modifications

Déclencheur : Clic sur fa-check-circle ou touche Entrée.

  • Envoie les champs modifiés (nom et code) via AJAX POST à /Assets/Ajax/services/update_service.php.
fetch('/Assets/Ajax/services/update_service.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: `id=...&nom=...&code=...`
});

❌ 4. Annulation des modifications

Déclencheur : Clic sur fa-times-circle ou touche Échap.

  • Restaure le texte original depuis data-original-value.

➕ 5. Ajout d’un nouveau service

Déclencheur : Clic sur le bouton #add-service.

  • Ajoute une ligne editable.
  • Désactive par défaut l’état actif (–).
  • Envoie une requête à /Assets/Ajax/services/create_service.php.
fetch('/Assets/Ajax/services/create_service.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: `nom=${nom}&code=${code}`
});

🧩 Structure HTML attendue

<td data-editable="nom">Comptabilité</td>
<td data-editable="code">COMPTA</td>
<td>
  <input type="checkbox" class="toggle-active" data-id="3" checked>
</td>
<td>
  <div class="table-actions">
    <i class="fas fa-edit edit-btn"></i>
    <i class="fas fa-check-circle validate-btn"></i>
    <i class="fas fa-times-circle cancel-btn"></i>
  </div>
</td>

🛠️ À étendre

  • Suppression d’un service avec confirmation
  • Notification visuelle après ajout/modification
  • Meilleure gestion des erreurs serveur
Back to top