Feat(WIP): Calculo Total en Linea

tienda_ilusion/don_confiao/forms.py

@@ -30,6 +30,7 @@ class PurchaseLineForm(forms.ModelForm):
             "quantity",
             "unit_price",
             "description",
+            "total",
         ]
 
 

tienda_ilusion/don_confiao/migrations/0012_saleline_total.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.6 on 2024-07-27 15:07
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('don_confiao', '0011_alter_product_name'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='saleline',
+            name='total',
+            field=models.IntegerField(null=True),
+        ),
+    ]

tienda_ilusion/don_confiao/migrations/0013_alter_saleline_total.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.6 on 2024-07-27 16:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('don_confiao', '0012_saleline_total'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='saleline',
+            name='total',
+            field=models.FloatField(null=True),
+        ),
+    ]

tienda_ilusion/don_confiao/models.py

@@ -14,12 +14,12 @@ class Sale(models.Model):
 
 
 class SaleLine(models.Model):
-
     sale = models.ForeignKey(Sale, on_delete=models.CASCADE)
     product = models.CharField(max_length=100)
     quantity = models.IntegerField(null=True)
     unit_price = models.DecimalField(max_digits=9, decimal_places=2)
     description = models.CharField(max_length=255, null=True, blank=True)
+    total = models.DecimalField(max_digits=9, decimal_places=2)
 
     def __str__(self):
         return f"{self.sale} - {self.product}"

tienda_ilusion/don_confiao/static/js/calculate_total_amount_line.js

@@ -0,0 +1,28 @@
+// const quantityInput=document.getElementById('id_saleline_set-0-quantity');
+// const unitPriceInput=document.getElementById('id_saleline_set-0-unit_price');
+// const totalOutput = document.getElementById('id_saleline_set-0-total');
+// quantityInput.addEventListener('input', calculateTotal);
+
+// function calculateTotal(){
+//   const quantity = parseFloat(quantityInput.value);
+//   const unitPrice = parseFloat(unitPriceInput.value);
+//   const total = quantity * unitPrice;
+
+//   totalOutput.value = total.toFixed(2);
+// }
+
+document.addEventListener('DOMContentLoaded', function() {
+    const cantidadInput = document.getElementById('id_saleline_set-0-quantity');;
+    const precioUnitarioInput = document.getElementById('id_saleline_set-0-unit_price');
+    const totalSpan = document.getElementById('id_saleline_set-0-total');
+
+    function updateTotal() {
+        const cantidad = parseFloat(cantidadInput.value) || 0;
+        const precioUnitario = parseFloat(precioUnitarioInput.value) || 0;
+        const total = cantidad * precioUnitario;
+        totalSpan.textContent = total.toFixed(2);
+    }
+
+    cantidadInput.addEventListener('input', updateTotal);
+    precioUnitarioInput.addEventListener('input', updateTotal);
+});

tienda_ilusion/don_confiao/templates/don_confiao/purchase.html

@@ -9,6 +9,7 @@
       <div class="form-container">
         <table style="border: solid 1px blue; margin: 10px">
           {{ form.as_table }}
+          <p>Total: <span id="total">0</span></p>
         </table>
       </div>
     {% endfor %}
@@ -16,4 +17,5 @@
   <button id="add_line" type="button" onclick="add_line">Añadir Linea</button>
   <br/><button name="form" type="submit" >Comprar</button>
   <script src="{% static 'js/add_line.js' %}"></script>
+  <script src="{% static 'js/calculate_total_amount_line.js' %}"></script>
 </form>