Feat: issue #26

tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue

@@ -1,94 +1,102 @@
 <template>
-  <v-container>
-      <v-form ref="form" v-model="valid">
+<v-container>
+  <v-form ref="form" v-model="valid">
+    <v-row>
+      <v-col>
+        <v-autocomplete
+          v-model="purchase.customer"
+          :items="filteredClients"
+          :search="client_search"
+          no-data-text="No se hallaron clientes"
+          item-title="name"
+          item-value="id"
+          label="Cliente"
+          :rules="[rules.required]"
+          required
+          class="mr-4"
+          ></v-autocomplete>
+        <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
+        <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
+      </v-col>
+      <v-col
+        lg="2"
+        >
+        <v-text-field
+          v-model="purchase.date"
+          label="Fecha"
+          type="date"
+          :rules="[rules.required]"
+          required
+          ></v-text-field>
+      </v-col>
+    </v-row>
+
+    <v-textarea
+      v-model="purchase.notes"
+      label="Notas"
+      rows="2"
+      ></v-textarea>
+    <v-divider></v-divider>
+    <v-container>
+      <v-toolbar>
+        <v-toolbar-title secondary>Productos</v-toolbar-title>
+      </v-toolbar>
+      <v-container v-for="(line, index) in purchase.saleline_set" :key="line.id">
         <v-row>
           <v-col>
             <v-autocomplete
-              v-model="purchase.customer"
-              :items="filteredClients"
-              :search="client_search"
-              no-data-text="No se hallaron clientes"
+              v-model="line.product"
+              :items="filteredProducts"
+              :search="product_search"
+              @update:modelValue="onProductChange(index)"
+              no-data-text="No se hallaron productos"
               item-title="name"
               item-value="id"
-              label="Cliente"
+              item-subtitle="Price"
+              label="Producto"
               :rules="[rules.required]"
               required
-              class="mr-4"
-            ></v-autocomplete>
-            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
-            <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
-          </v-col>
-          <v-col
-            lg="2"
-          >
-          <v-text-field
-            v-model="purchase.date"
-            label="Fecha"
-            type="date"
-            :rules="[rules.required]"
-            required
-            ></v-text-field>
-          </v-col>
-          </v-row>
-
-        <v-textarea
-          v-model="purchase.notes"
-          label="Notas"
-          rows="2"
-        ></v-textarea>
-        <v-divider></v-divider>
-        <v-container>
-          <v-toolbar>
-            <v-toolbar-title secondary>Productos</v-toolbar-title>
-          </v-toolbar>
-        <v-container v-for="(line, index) in purchase.saleline_set" :key="line.id">
-          <v-row>
-            <v-col>
-              <v-autocomplete
-                v-model="line.product"
-                :items="filteredProducts"
-                :search="product_search"
-                @update:modelValue="onProductChange(index)"
-                no-data-text="No se hallaron productos"
-                item-title="name"
-                item-value="id"
-                item-subtitle="Price"
-                label="Producto"
-                :rules="[rules.required]"
-                required
               >
-                <template v-slot:item="{ props, item }">
-                  <v-list-item v-bind="props" :title="item.raw.name" :subtitle="formatPrice(item.raw.price)"></v-list-item>
-                </template>
-              </v-autocomplete>
-            </v-col>
-            <v-col>
-              <v-text-field
-                v-model.number="line.unit_price"
-                label="Precio"
-                type="number"
-                :rules="[rules.required]"
-                prefix="$"
-                required
-                readonly
+              <template v-slot:item="{ props, item }">
+                <v-list-item v-bind="props" :title="item.raw.name" :subtitle="formatPrice(item.raw.price)"></v-list-item>
+              </template>
+            </v-autocomplete>
+          </v-col>
+          <v-col>
+            <v-text-field
+              v-model.number="line.unit_price"
+              label="Precio"
+              type="number"
+              :rules="[rules.required]"
+              prefix="$"
+              required
+              readonly
               ></v-text-field>
-            </v-col>
-            <v-col>
-              <v-text-field
-                v-model.number="line.quantity"
-                label="Cantidad"
-                type="number"
-                :rules="[rules.required]"
-                required
+          </v-col>
+          <v-col>
+            <v-text-field
+              v-model.number="line.quantity"
+              label="Cantidad"
+              type="number"
+              :rules="[rules.required]"
+              required
               ></v-text-field>
-            </v-col>
-            <v-col>
-              <v-text-field
-                type="number"
-                :value="calculateSubtotal(line)"
-                label="Subtotal"
-                prefix="$"
-                readonly
+          </v-col>
+          <v-col>
+            <v-text-field
+              v-model="line.measuring_unit"
+              label="UdM"
+              persistent-placeholder="true"
+              readonly
+              ></v-text-field>
+          </v-col>
+          <v-col>
+            <v-text-field
+              type="number"
+              :value="calculateSubtotal(line)"
+              label="Subtotal"
+              prefix="$"
+              readonly
                 disable
                 persistent-placeholder="true"
               ></v-text-field>
@@ -133,7 +141,7 @@
          date: this.getCurrentDate(),
          customer: null,
          notes: '',
-         saleline_set: [{product:'', unit_price: 0, quantity: 0}],
+         saleline_set: [{product:'', unit_price: 0, quantity: 0, unit: ''}],
        },
        rules: {
          required: value => !!value || 'Requerido.',
@@ -195,7 +203,9 @@
      onProductChange(index) {
        const selectedProductId = this.purchase.saleline_set[index].product;
        const selectedProduct = this.products.find(p => p.id == selectedProductId);
-       this.purchase.saleline_set[index].unit_price = selectedProduct.price;
+         this.purchase.saleline_set[index].unit_price = selectedProduct.price;
+         console.log(selectedProduct.measuring_unit);
+         this.purchase.saleline_set[index].measuring_unit = selectedProduct.measuring_unit;
      },
      fetchClients() {
        fetch('/don_confiao/api/customers/')
@@ -223,7 +233,7 @@
          });
      },
      addLine() {
-       this.purchase.saleline_set.push({ product: '', unit_price: 0, quantity:0 });
+       this.purchase.saleline_set.push({ product: '', unit_price: 0, quantity:0, measuring_unit: ''});
      },
      removeLine(index) {
          // Solo elimina si hay más de una línea