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