[ADD] automatic currency formatting

src/components/common/Cart.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
     .cart(:style='{ width, height }')
         .cart-total
-            h2.currency-cart-total {{ totalInCurrencyFormat() }}
+            h2.currency-cart-total {{ total | currency }}
         .cart-items-wrapper
             transition-group(name='list' tag='ul' class='cart-items')
                 cart-item(v-for='(item, index) in items' :key='index' :index='index' :item='item' @onChange='onItemChanged' @onClickIncrement='onIncrementQty' @onClickDecrement='onDecrementQty' @onClickDelete='onDeleteItem')

src/components/common/CartItem.vue

@@ -3,9 +3,9 @@
         h3.item-name {{ item.name || 'Sin Nombre' }}
         input.item-quantity(type='number' min='1' :value='item.quantity')
         span.item-x x
-        span.item-price {{ item.price || 1 }}
+        span.item-price {{ (item.price || 1) | currency }}
         span.item-equals =
-        span.item-subtotal {{ (item.price || 1) * (item.quantity || 1) }}
+        span.item-subtotal {{ ((item.price || 1) * (item.quantity || 1)) | currency }}
         .cart-item-options-wrapper
             .cart-item-options
                 .cart-item-option(class='fa fa-plus' @click='onClickIncrement')

src/components/common/Ticket.vue

@@ -14,16 +14,16 @@
                 table
                     tbody
                         tr(v-for='item in items' :key='item.id')
-                            td {{ item.name || 'no data' }}
-                            td {{ item.price || 'no data' }}
-                            td {{ item.quantity || 'no data' }}
-                            td {{ ((item.price || 0) * (item.quantity || 0)) || 'no data'  }}
+                            td {{ item.name }}
+                            td {{ item.price }}
+                            td {{ item.quantity }}
+                            td {{ (item.price || 0) * (item.quantity || 0) }}
             .ticket-summary-footer
                 table
                     tbody
                         tr
                             td Total:
-                            td {{ total || 'no data' }}
+                            td {{ total | currency }}
                         tr
                             td Cliente:
                             td {{ customerName || 'no data' }}

src/components/filters/currency.js

@@ -0,0 +1,19 @@
+const currency = (value = '0', symbol = '$', symbolPosition = 'before', thousandsSeparator = '.', decimalPlaces = 2, decimalSeparator = ',') => {
+    if (!(value instanceof String)) {
+        value = value.toString()
+    }
+
+    value = value.split('.')
+
+    value[0] = value[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, `$1${thousandsSeparator}`)
+
+    if (!!value[1]) {
+        value[1] = Number.parseFloat(`0.${value[1]}`).toFixed(decimalPlaces).replace(/0./g, '')
+    }
+
+    value = value.join(decimalSeparator)
+
+    return symbolPosition === 'before' ? `${symbol} ${value}` : `${value} ${symbol}`
+}
+
+export default currency

src/components/steps/PaymentAmount.vue

@@ -7,14 +7,14 @@
                 hr
             .form-item(v-show="paymentType === 'cash'")
                 label.form-label Monto a Pagar
-                input.form-input(:value='cartTotal' readonly)
+                input.form-input(:value='cartTotal | currency' readonly)
             .form-item
                 label.form-label Monto Recibido
-                input.form-input(:value='initialPayment' v-model='amountReceived' autofocus)
+                input.form-input(v-model='amountReceived' autofocus)
             .form-item(v-show="paymentType === 'cash'")
                 hr
                 label.form-label Monto a Devolver
-                input.form-input(:value='paymentResidual' readonly)
+                input.form-input(:value='paymentResidual | currency' readonly)
             .form-item-table(v-show="paymentType === 'credit'")
                 table
                     thead
@@ -41,18 +41,17 @@
         computed: {
             amountReceived: {
                 get() {
-                    return this.initialPayment
+                    return this.$options.filters.currency(this.initialPayment)
                 },
                 set(value) {
-                    value = parseFloat(value)
-                    value = Number.isNaN(value) ? 0 : value
+                    // value = Number.isNaN(value) ? 0 : value
 
-                    this.changeInitialPayment(value)
-                    this.computePaymentResidual(value)
+                    // this.changeInitialPayment(value)
+                    // this.computePaymentResidual(value)
 
-                    if (this.paymentType === 'credit') {
-                        this.computePaymentLines()
-                    }
+                    // if (this.paymentType === 'credit') {
+                    //     this.computePaymentLines()
+                    // }
                 }
             },
             ...mapGetters([
@@ -79,6 +78,9 @@
             return {
                 paymentResidual: 0
             }
+        },
+        mounted() {
+            console.log()
         }
     }
 </script>

src/components/steps/PaymentMethod.vue

@@ -47,7 +47,6 @@
         computed: {
             paymentTermId: {
                 get() {
-                    console.log((this.selectedPaymentTerm && this.selectedPaymentTerm.id) || -1)
                     return (this.selectedPaymentTerm && this.selectedPaymentTerm.id) || -1
                 },
                 set(value) {
@@ -56,7 +55,6 @@
             },
             journalId: {
                 get() {
-                    console.log((this.selectedJournal && this.selectedJournal.id) || -1)
                     return (this.selectedJournal && this.selectedJournal.id) || -1
                 },
                 set(value) {

src/index.js

@@ -3,6 +3,10 @@ import App from '@/App'
 import VueModal from 'vue-js-modal'
 import store from '@/store'
 
+import currency from '@@/filters/currency'
+
+Vue.filter('currency', currency)
+
 Vue.use(VueModal)
 
 Vue.config.productionTip = false