#69 feat(Reconciliation): improve form.

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

@@ -0,0 +1,27 @@
+<template>
+  <span>{{ formattedValue }}</span>
+</template>
+<script>
+  export default {
+    props: {
+      value: {
+        type: Number,
+        required: true
+      },
+      locale: {
+        type: String,
+        default: 'es-CO',
+      },
+      currency: {
+        type: String,
+        default: 'COP',
+      },
+    },
+    computed: {
+      formattedValue() {
+        return new Intl.NumberFormat(this.locale, { style: 'currency', currency: this.currency }).format(this.value);
+        /* return Intl.NumberFormat(this.value, this.locale, this.currency).toString(); */
+      },
+    },
+  }
+</script>

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

@@ -22,16 +22,23 @@
           v-model="reconciliation.total_cash_purchases"
           label="Total Ventas en efectivo"
           :rules="[rules.required]"
+          prefix="$"
+          type="number"
+          readonly
         ></v-text-field>
         <v-text-field
           v-model="reconciliation.cash_taken"
           label="Dinero Recogido"
           :rules="[rules.required]"
+          prefix="$"
+          type="number"
         ></v-text-field>
         <v-text-field
           v-model="reconciliation.cash_discrepancy"
           label="Descuadre"
-          :rules="[rules.required]"
+          :rules="[rules.integer]"
+          prefix="$"
+          type="number"
         ></v-text-field>
       </v-card-text>
     </v-card>
@@ -41,7 +48,7 @@
         :key="payment_method"
         :value="payment_method"
       >
-        {{ payment_method }} {{ totalByMethod(payment_method) }}
+        {{ payment_method }}&nbsp; <CurrencyText :value="totalByMethod(payment_method)"</CurrencyText>
       </v-tab>
     </v-tabs>
 
@@ -65,6 +72,7 @@
   </v-container>
 </template>
 <script>
+  import CurrencyText from './CurrencyText.vue';
   export default {
     name: 'ReconciliationJar',
     props: {
@@ -75,7 +83,7 @@
         selectedTab: null,
         reconciliation: {
           datetime: '',
-          total_cash_purchase: 0,
+          total_cash_purchases: 0,
           cash_taken: 0,
           cash_discrepancy: 0,
           other_totals: {
@@ -101,14 +109,28 @@
         },
         rules: {
           required: value => !!value || 'Requerido.',
+          integer: value => !!value || value === 0 || 'Requerido.',
         },
       };
     },
-
+    mounted() {
+      this.reconciliation.total_cash_purchases = this.totalByMethod('cash');
+    },
+    watch: {
+      'reconciliation.cash_taken'() {
+        this.updateDiscrepancy();
+      },
+    },
     methods: {
       totalByMethod(method) {
-        return this.summary.purchases[method].reduce((a, b) => a + b.total, 0);
+        if (method in this.summary.purchases) {
+          return this.summary.purchases[method].reduce((a, b) => a + b.total, 0);
+        }
+        return 0;
       },
+      updateDiscrepancy() {
+        this.reconciliation.cash_discrepancy = (this.reconciliation.total_cash_purchases || 0 ) - (this.reconciliation.cash_taken || 0);
+      }
     },
   }
 </script>