Init project

templates/factures/form.html

@@ -0,0 +1,139 @@
+{% extends "base.html" %}
+{% block title %}{{ titre }}{% endblock %}
+{% block content %}
+<div class="page-header">
+    <h1>{{ titre }}</h1>
+    <a href="/factures/" class="btn">← Retour</a>
+</div>
+
+<form method="post" class="form-card" id="form-facture">
+    <div class="form-grid">
+        <div class="form-group">
+            <label>Client *</label>
+            <select name="client_id" required>
+                <option value="">— Sélectionner —</option>
+                {% for c in clients %}
+                <option value="{{ c.id }}" {% if facture and facture.client_id == c.id %}selected{% endif %}>
+                    {{ c.nom }} — {{ c.ville }}
+                </option>
+                {% endfor %}
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Date d'émission *</label>
+            <input type="date" name="date_emission" required value="{{ date_aujourd_hui }}">
+        </div>
+        <div class="form-group">
+            <label>Date d'échéance *</label>
+            <input type="date" name="date_echeance" required value="{{ date_echeance_defaut }}">
+        </div>
+        <div class="form-group full">
+            <label>Conditions de règlement</label>
+            <input type="text" name="conditions_reglement"
+                value="{{ facture.conditions_reglement if facture else 'Paiement à réception de facture.' }}">
+        </div>
+        <div class="form-group full">
+            <label>Notes internes</label>
+            <textarea name="notes" rows="2">{{ facture.notes if facture else '' }}</textarea>
+        </div>
+    </div>
+
+    <h2>Lignes</h2>
+    <div id="lignes-container">
+        <table id="table-lignes">
+            <thead>
+                <tr>
+                    <th>Description</th>
+                    <th>Qté</th>
+                    <th>PU HT (€)</th>
+                    <th>Total HT</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody id="lignes-body">
+                {% if facture and facture.lignes %}
+                {% for l in facture.lignes %}
+                <tr class="ligne-row">
+                    <td><input type="text" class="ligne-desc" placeholder="Description" value="{{ l.description }}" required></td>
+                    <td><input type="number" class="ligne-qte" step="0.01" min="0.01" value="{{ l.quantite }}" required></td>
+                    <td><input type="number" class="ligne-pu" step="0.01" min="0" value="{{ l.prix_unitaire_ht }}" required></td>
+                    <td class="ligne-total">{{ (l.quantite * l.prix_unitaire_ht) | round(2) }} €</td>
+                    <td><button type="button" class="btn btn-sm btn-danger btn-suppr-ligne">✕</button></td>
+                </tr>
+                {% endfor %}
+                {% endif %}
+            </tbody>
+        </table>
+        <button type="button" id="btn-ajouter-ligne" class="btn">+ Ajouter une ligne</button>
+    </div>
+
+    <div class="total-bloc">
+        <strong>Total HT : <span id="total-ht">0,00 €</span></strong>
+        <br><small>TVA non applicable — art. 293B du CGI</small>
+    </div>
+
+    <input type="hidden" name="lignes_json" id="lignes_json">
+
+    <div class="form-actions">
+        <button type="submit" class="btn btn-primary">Enregistrer</button>
+        <a href="/factures/" class="btn">Annuler</a>
+    </div>
+</form>
+
+<script>
+function recalculer() {
+    let total = 0;
+    document.querySelectorAll('.ligne-row').forEach(row => {
+        const qte = parseFloat(row.querySelector('.ligne-qte').value) || 0;
+        const pu = parseFloat(row.querySelector('.ligne-pu').value) || 0;
+        const t = qte * pu;
+        row.querySelector('.ligne-total').textContent = t.toFixed(2).replace('.', ',') + ' €';
+        total += t;
+    });
+    document.getElementById('total-ht').textContent = total.toFixed(2).replace('.', ',') + ' €';
+}
+
+function ajouterLigne() {
+    const tbody = document.getElementById('lignes-body');
+    const tr = document.createElement('tr');
+    tr.className = 'ligne-row';
+    tr.innerHTML = `
+        <td><input type="text" class="ligne-desc" placeholder="Description" required></td>
+        <td><input type="number" class="ligne-qte" step="0.01" min="0.01" value="1" required></td>
+        <td><input type="number" class="ligne-pu" step="0.01" min="0" value="0" required></td>
+        <td class="ligne-total">0,00 €</td>
+        <td><button type="button" class="btn btn-sm btn-danger btn-suppr-ligne">✕</button></td>
+    `;
+    tbody.appendChild(tr);
+    tr.querySelectorAll('input').forEach(i => i.addEventListener('input', recalculer));
+    tr.querySelector('.btn-suppr-ligne').addEventListener('click', () => { tr.remove(); recalculer(); });
+}
+
+document.getElementById('btn-ajouter-ligne').addEventListener('click', ajouterLigne);
+
+document.querySelectorAll('.ligne-row').forEach(row => {
+    row.querySelectorAll('input').forEach(i => i.addEventListener('input', recalculer));
+    row.querySelector('.btn-suppr-ligne').addEventListener('click', () => { row.remove(); recalculer(); });
+});
+
+document.getElementById('form-facture').addEventListener('submit', function(e) {
+    const lignes = [];
+    let valide = true;
+    document.querySelectorAll('.ligne-row').forEach(row => {
+        const desc = row.querySelector('.ligne-desc').value.trim();
+        const qte = parseFloat(row.querySelector('.ligne-qte').value);
+        const pu = parseFloat(row.querySelector('.ligne-pu').value);
+        if (!desc || isNaN(qte) || isNaN(pu)) { valide = false; return; }
+        lignes.push({ description: desc, quantite: qte, prix_unitaire_ht: pu });
+    });
+    if (!valide || lignes.length === 0) {
+        e.preventDefault();
+        alert('Veuillez saisir au moins une ligne valide.');
+        return;
+    }
+    document.getElementById('lignes_json').value = JSON.stringify(lignes);
+});
+
+recalculer();
+</script>
+{% endblock %}