[ADD] Selected supolier

src/App.vue

@@ -2,6 +2,7 @@
     .payments-purchase
         form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#7c7bad" backButtonText="Volver" nextButtonText="Continuar" transition="fade" ref='wizard')
             tab-content(title="Quien es el proveedor ?")
+                supplier
             tab-content(title="Cual es la factura ?")
             tab-content(title="Que cuota es ?")
             tab-content(title="Como vas a pagar ?")
@@ -18,6 +19,7 @@
         components: {
             TabContent,
             FormWizard,
+            Supplier
         },
         methods: mapActions([
             INIT_PAYMENTS_PURCHASES

src/components/common/Card.vue

@@ -2,8 +2,8 @@
     .card(@click='onClick' :class="{ 'selected-card': isSelected }")
         h2.card-title {{ title }}
         img.card-image(:src="'data:image/png;base64,' + (image || 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAACXZwQWcAAABAAAAAQADq8/hgAAAEWklEQVRYw9WX6XKjRhCAef8HiySQvGt5vfZuEselOUAcEpe4GdI9MAgQOjb5k3SVyzY1801PX9OtNf9StP80QJR5miRpXtb/AFCnvmMySgmhlJn2Mal+BSBSj1NCGeNSGAMOd0/iQYCI95TAXnm+FCr/I2ZYPwJILEJhPaGm7flBFIW+Z5sUvwEivguovG7pMR0cV2e+BbYArF3cBqQclKfEvryvSB2KaHa6BYhgDSP7ZN7gmUNQCf86wCdgcBaKq04/cTzAuwbA/czKb8VdZYMSI8IAEOJ+XjTiFkF4SDjOARIIHLiBK+4E/xHOIdEloMSAAwZx7hEOBKIquwA4lFPbR/3uEhzCqSUmgBiwrGgeIlQm5b0zO0CN3yKw34QgQC4JKZqrGAFC0MpWvuwJ3V6hWD3BI5wchoDaBAumzYQgmsrd7ewZx5bosHIAAAtQp4+nXUuA+2yXy9Xyi4OsIorjauBLZQWtd0Gqrt3EvCXQlb4BMZYfsPP7cr0gvS4FaNw6Qus0ovtez8DZcYyHt8Wmk9XWdF+Mjf570Ke4q46UgAgUCtX55mKl/wSbsD83hrEE0VGJ1RrEWHz2aaXuIAEe7b3SNG/601oSzL/W20/T2r2uDNACARvjWelZQTTaCiCg2vSR1bzrsFgSQMk8SbPi8FWX+0GFbX2OXMarDoAmOGfo+wpXt7cwj4Hv+1n+rSMYW3HOfS4TAgHZIDIVYG38wNzchyB+kj4ZUwB4npw6ABokmgA2qz9kfbIkoWDLzQSQ0tbw2gA20kA/nmyqCHG8nmqQd2prbSKQZAIwnk5B5PSE/EWfACCUZGFSgHQKeE6DsCcExfc5wKEDRLMaJHBwTwA/zFzhOLBBPGODoCfEyYUb0XVBB1AGHXvho/SVDsSjF15QrtMG1xlpsDbCrCewj7UxAWAJSjsAlJOuHI0AX9Mi8IMgsJnMC2MMOJA2f7RhXI8AG/2LVxZZVlQWmKElnAFiT5nMH62L67Mb3lTmbIzVK3Uc9r6GvJAEyMa6d0KXP1oXliqbRPPzN0NvBcrBAmSpr37wlrB8GeRS6zkJECZVNRKeuLfty1C+wc/zp7TD9jVQN7DUDq2vkUEzfAymIl9uZ5iL1B0U1Rw7surmc4SE/sUBE3KaDB8Wd1QS7hJQga4Kayow2aAsXiV0L458HE/jx9UbPi33CIf+ITwDSnxM/IcIcAGIrHzaH+BX8Ky4awdq41nBZYsjG4/kEQLjg9Q5A9A1jJ7u3CJEa1OzmuvSKgubwPA24IT7WT7fJ5YmEtwbASWO2AkP94871WpPOCc8vmYHaORhv5lf75VrV3bD+9nZIrUJamhXN9v9kMlu3wonYVlGe9msU1/cGTgKpx0YmO2fsrKq66rMk8Bh7dd99sDIk+xxxsE5icqhqfsLflkz1pkbukSCBzI5bqG0EGrPGvfK2FeGDseRi1I5eVFuB8WvDp51FvsH13Fcz4+y6n86Oz8kfwPMD02INEiadQAAAABJRU5ErkJggg==')")
-        .card-details(v-if='details.length > 0')
-            span(v-for='detail in details') {{ computeDetail(detail) }}
+        .card-description(v-if='!!description')
+            span {{ description }}
 </template>
 
 <script>
@@ -17,31 +17,20 @@
                 type: String,
                 default: 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAACXZwQWcAAABAAAAAQADq8/hgAAAEWklEQVRYw9WX6XKjRhCAef8HiySQvGt5vfZuEselOUAcEpe4GdI9MAgQOjb5k3SVyzY1801PX9OtNf9StP80QJR5miRpXtb/AFCnvmMySgmhlJn2Mal+BSBSj1NCGeNSGAMOd0/iQYCI95TAXnm+FCr/I2ZYPwJILEJhPaGm7flBFIW+Z5sUvwEivguovG7pMR0cV2e+BbYArF3cBqQclKfEvryvSB2KaHa6BYhgDSP7ZN7gmUNQCf86wCdgcBaKq04/cTzAuwbA/czKb8VdZYMSI8IAEOJ+XjTiFkF4SDjOARIIHLiBK+4E/xHOIdEloMSAAwZx7hEOBKIquwA4lFPbR/3uEhzCqSUmgBiwrGgeIlQm5b0zO0CN3yKw34QgQC4JKZqrGAFC0MpWvuwJ3V6hWD3BI5wchoDaBAumzYQgmsrd7ewZx5bosHIAAAtQp4+nXUuA+2yXy9Xyi4OsIorjauBLZQWtd0Gqrt3EvCXQlb4BMZYfsPP7cr0gvS4FaNw6Qus0ovtez8DZcYyHt8Wmk9XWdF+Mjf570Ke4q46UgAgUCtX55mKl/wSbsD83hrEE0VGJ1RrEWHz2aaXuIAEe7b3SNG/601oSzL/W20/T2r2uDNACARvjWelZQTTaCiCg2vSR1bzrsFgSQMk8SbPi8FWX+0GFbX2OXMarDoAmOGfo+wpXt7cwj4Hv+1n+rSMYW3HOfS4TAgHZIDIVYG38wNzchyB+kj4ZUwB4npw6ABokmgA2qz9kfbIkoWDLzQSQ0tbw2gA20kA/nmyqCHG8nmqQd2prbSKQZAIwnk5B5PSE/EWfACCUZGFSgHQKeE6DsCcExfc5wKEDRLMaJHBwTwA/zFzhOLBBPGODoCfEyYUb0XVBB1AGHXvho/SVDsSjF15QrtMG1xlpsDbCrCewj7UxAWAJSjsAlJOuHI0AX9Mi8IMgsJnMC2MMOJA2f7RhXI8AG/2LVxZZVlQWmKElnAFiT5nMH62L67Mb3lTmbIzVK3Uc9r6GvJAEyMa6d0KXP1oXliqbRPPzN0NvBcrBAmSpr37wlrB8GeRS6zkJECZVNRKeuLfty1C+wc/zp7TD9jVQN7DUDq2vkUEzfAymIl9uZ5iL1B0U1Rw7surmc4SE/sUBE3KaDB8Wd1QS7hJQga4Kayow2aAsXiV0L458HE/jx9UbPi33CIf+ITwDSnxM/IcIcAGIrHzaH+BX8Ky4awdq41nBZYsjG4/kEQLjg9Q5A9A1jJ7u3CJEa1OzmuvSKgubwPA24IT7WT7fJ5YmEtwbASWO2AkP94871WpPOCc8vmYHaORhv5lf75VrV3bD+9nZIrUJamhXN9v9kMlu3wonYVlGe9msU1/cGTgKpx0YmO2fsrKq66rMk8Bh7dd99sDIk+xxxsE5icqhqfsLflkz1pkbukSCBzI5bqG0EGrPGvfK2FeGDseRi1I5eVFuB8WvDp51FvsH13Fcz4+y6n86Oz8kfwPMD02INEiadQAAAABJRU5ErkJggg=='
             },
-            details: {
-                type: Array,
-                default: []
+            description: {
+                type: String,
+                default: ''
             },
             isSelected: {
                 type: Boolean,
                 default: true
-            },
-            options: {
-                type: Object,
-                default: {}
             }
         },
         methods: {
-            computeDetail(detail) {
-                if (detail.format === 'currency') {
-                    return this.$options.filters.currency(detail.value, {...this.options})
-                }
-
-                return detail.value
-            },
             onClick() {
                 this.$emit('onClick')
             }
-        } 
+        }
     }
 </script>
 
@@ -78,7 +67,7 @@
             left: 50%
             margin-right: -50%
             transform: translate(-50%, -50%)
-        .card-details
+        .card-description
             width: 100%
             height: 30px
             padding-top: 5px

src/components/common/CardGrid.vue

@@ -4,13 +4,13 @@
             spinner(type='wave')
         .card-grid(v-else)
             add-card(v-if='canAdd' @onClickAdd='onClickAdd')
-            card(v-for='item in items' :key='item.id' :title='item.name' :image='item.imageMedium' :isSelected='item.id === selectedId' :details='computeDetails(item)' :options='defaultOptions.currency' @onClick='onClickCard(item)')
+            card(v-for='item in items' :key='item.id' :title='item.name' :image='item.imageMedium' :isSelected='item.id === selectedId' :description='getDescription(item)' @onClick='onClickCard(item)')
 </template>
 
 <script>
-    import AddCard from '@/components/common/AddCard'
-    import Card from '@/components/common/Card'
-    import Spinner from '@/components/common/Spinner'
+    import AddCard from '@@/common/AddCard'
+    import Card from '@@/common/Card'
+    import Spinner from '@@/common/Spinner'
 
     export default {
         props: {
@@ -22,17 +22,13 @@
                 type: Boolean,
                 default: false
             },
-            details: {
-                type: Array,
-                default: []
+            description: {
+                type: String,
+                default: ''
             },
             loading: {
                 type: Boolean,
                 default: false
-            },
-            options: {
-                type: Object,
-                default: {}
             }
         },
         components: {
@@ -40,65 +36,9 @@
             Card,
             Spinner
         },
-        watch: {
-            options(value) {
-                this.computeOptions(value)
-            }
-        },
         methods: {
-            computeDetails(item) {
-                if (!this.details) {
-                    return []
-                }
-
-                if (this.details.length === 0) {
-                    return []
-                }
-
-                let results = []
-                let computableDetails = this.details.map(item => item.split(/:/))
-
-                for (let detail of computableDetails) {
-                    for (let field in item) {
-                        if (field === detail[0]) {
-                            results.push({
-                                value: item[field],
-                                format: (() => {
-                                    if (!detail[1] || detail[1] === 's') {
-                                        return 'string'
-                                    }
-                                    
-                                    if (detail[1] === 'c') {
-                                        return 'currency'
-                                    }
-
-                                    if (detail[1] === 'd') {
-                                        return 'date'
-                                    }
-
-                                    return 'string'
-                                })()
-                            })
-
-                            break
-                        }
-                    }
-                }
-
-                return results
-            },
-            computeOptions(value) {
-                if (!value) {
-                    return
-                }
-
-                for(let key in value) {
-                    if(!this.defaultOptions.currency[key]) {
-                        continue
-                    }
-
-                    this.defaultOptions.currency[key] = value[key]
-                }
+            getDescription(item) {
+                return (!!this.description && item[this.description]) || ''
             },
             onClickAdd() {
                 this.$emit('onAdd')
@@ -110,16 +50,7 @@
         },
         data() {
             return {
-                selectedId: -1,
-                defaultOptions: {
-                    currency: {
-                        symbol: '$',
-                        position: 'before',
-                        thousandsSeparator: '.',
-                        decimalPlaces: 2,
-                        decimalSeparator: ',' 
-                    },
-                } 
+                selectedId: -1
             }
         }
     }
@@ -128,8 +59,8 @@
 <style lang="sass">
     .card-grid-wrapper
         width: 100%
-        height: calc(100% - 50px)
-        margin-top: 10px
+        height: calc(100% - 100px)
+        margin-top: 15px
         overflow-y: auto
         .card-grid-loading
             width: 100%
@@ -139,4 +70,4 @@
             justify-content: center
         .card-grid
             width: 100%
-</style>
+</style>

src/components/common/Cart.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-    .cart(:style='{ width: defaultOptions.layout.width, height: defaultOptions.layout.height }')
+    .cart(:style='{ width, height }')
         .cart-total
-            h2.currency-cart-total {{ total | currency(...defaultOptions.currency) }}
+            h2.currency-cart-total {{ totalInCurrencyFormat() }}
         .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' @onClickMoney='onChangePrice' @onClickUndo='onUndoPrice' @onClickDelete='onDeleteItem' :options='defaultOptions.currency')
+                cart-item(v-for='(item, index) in items' :key='index' :index='index' :item='item' @onChange='onItemChanged' @onClickIncrement='onIncrementQty' @onClickDecrement='onDecrementQty' @onClickDelete='onDeleteItem')
 </template>
 
 <script>
@@ -20,30 +20,48 @@
                 default: [],
                 required: true
             },
-            options: {
-                type: Object || String,
-                default: null
+            width: {
+                type: String,
+                default: '300px'
+            },
+            height: {
+                type: String,
+                default: '100%'
+            },
+            total: {
+                type: Number,
+                default: 0
+            },
+            thousandsSeparator: {
+                type: String,
+                default: '.'
+            },
+            decimalPlaces: {
+                type: Number,
+                default: 0
+            },
+            decimalSeparator: {
+                type: String,
+                default: ','
+            },
+            currencySymbol: {
+                type: String,
+                default: '$'
+            },
+            symbolPosition: {
+                type: String,
+                default: 'before'
             }
         },
         methods: {
-            computeOptions(value) {
-                if (!value) {
-                    return
-                }
-
-                for(let key in value) {
-                    if(!this.defaultOptions.currency[key]) {
-                        continue
-                    }
-
-                    this.defaultOptions.currency[key] = value[key]
-                }
+            totalInCurrencyFormat() {
+                return this.total.toFixed(this.decimalPlaces).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1.')
             },
             computeTotal() {
                 let sum = 0
 
                 for (let item of this.items) {
-                    sum = sum + ((item.price || 0) * (item.quantity || 0))
+                    sum = sum + ((item.price || 1) * (item.quantity || 1))
                 }
 
                 this.total = sum
@@ -59,40 +77,18 @@
             onDecrementQty(item) {
                 this.$emit('onDecrementQty', item)
             },
-            onChangePrice(item) {
-                this.$emit('onChangePrice', item)
-            },
-            onUndoPrice(item) {
-                this.$emit('onUndoPrice', item)
-            },
             onDeleteItem(item) {
                 this.$emit('onDeleteItem', item)
             }
         },
         watch: {
-            items() {
+            items(value) {
                 this.computeTotal()
-            },
-            options(value) {
-                this.computeOptions(value)
             }
         },
         data() {
             return {
-                total: 0,
-                defaultOptions: {
-                    currency: {
-                        symbol: '$',
-                        position: 'before',
-                        thousandsSeparator: '.',
-                        decimalPlaces: 2,
-                        decimalSeparator: ',' 
-                    },
-                    layout: {
-                        width: '300px',
-                        height: '100%'
-                    }
-                }
+                total: 0
             }
         }
     }

src/components/common/CartItem.vue

@@ -1,17 +1,15 @@
 <template lang="pug">
-    li.cart-item(:class="{'cart-item-invalid': !isValid()}")
-        h3.item-name {{ item.displayName }}
-        input.item-quantity(type='number' min='1' :value='item.quantity' readonly)
+    li.cart-item
+        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 | currency(...options) }}
+        span.item-price {{ item.price || 1 }}
         span.item-equals =
-        span.item-subtotal {{ (item.price * (item.quantity || 1)) | currency(...options) }}
+        span.item-subtotal {{ (item.price || 1) * (item.quantity || 1) }}
         .cart-item-options-wrapper
             .cart-item-options
                 .cart-item-option(class='fa fa-plus' @click='onClickIncrement')
                 .cart-item-option(class='fa fa-minus' @click='onClickDecrement')
-                .cart-item-option(class='fa fa-money' @click='onClickMoney')
-                .cart-item-option(class='fa fa-undo' @click='onClickUndo')
                 .cart-item-option(class='fa fa-trash' @click='onClickDelete')
 </template>
 
@@ -26,16 +24,6 @@
             item: {
                 type: Object,
                 default: null
-            },
-            options: {
-                type: Object,
-                default: {
-                    symbol: '$',
-                    position: 'before',
-                    thousandsSeparator: '.',
-                    decimalPlaces: 2,
-                    decimalSeparator: ',' 
-                }
             }
         },
         watch: {
@@ -57,17 +45,8 @@
             onClickDecrement() {
                 this.$emit('onClickDecrement', this.item)
             },
-            onClickMoney() {
-                this.$emit('onClickMoney', this.item)
-            },
-            onClickUndo() {
-                this.$emit('onClickUndo', this.item)
-            },
             onClickDelete() {
                 this.$emit('onClickDelete', this.item)
-            },
-            isValid() {
-                return this.item.price > 0
             }
         }
     }
@@ -82,8 +61,6 @@
         border-bottom: 1px solid $app-border-color
         box-sizing: border-box
         position: relative
-        &.cart-item-invalid
-            border-bottom: 2px solid $app-error-color
         &:nth-child(1)
             border-top: 1px solid $app-border-color
         &:hover
@@ -139,7 +116,7 @@
             display: flex
             justify-content: center
             .cart-item-options
-                width: 120px
+                width: 90px
                 height: 20px
                 border: 1px solid #d3d3d3
                 border-bottom: none
@@ -159,10 +136,6 @@
                             color: #2196f3
                         &.fa-minus:hover
                             color: #ffc107
-                        &.fa-money:hover
-                            color: #4caf50
-                        &.fa-undo:hover
-                            color: #3f51b5
                         &.fa-trash:hover
                             color: #f44336
 </style>

src/components/common/Searcher.vue

@@ -52,18 +52,10 @@
                 type: Array,
                 default: [],
                 required: true
-            },
-            mode: {
-                type: String,
-                default: 'fuzzy'
             }
         },
         watch: {
             items(values) {
-                if (this.mode !== 'fuzzy') {
-                    return
-                }
-
                 this.fuse.setCollection(values)
             },
             search(value) {
@@ -86,33 +78,7 @@
                 })
             },
             performSearch(value) {
-                if(!value) {
-                    this.results = []
-                    return
-                }
-
-                if (this.mode === 'fuzzy') {
-                    this.results = this.fuse.search(value)
-                } else {
-                    this.results = []
-
-                    for (let item of this.items) {
-                        for (let field in item) {
-                            if (typeof item[field] !== 'string') {
-                                continue
-                            }
-
-                            if (this.keys.length !== 0 && this.keys.indexOf(field) === -1) {
-                                continue
-                            }
-
-                            if (item[field].toLowerCase().indexOf(value.toLowerCase()) !== -1) {
-                                this.results.push(item)
-                                break
-                            }
-                        }
-                    }
-                }
+                this.results = this.fuse.search(value)
             }
         },
         data() {
@@ -123,10 +89,6 @@
             }
         },
         mounted() {
-            if (this.mode !== 'fuzzy') {
-                return
-            }
-            
             this.initFuse()
         }
     }

src/components/common/Spinner.vue

@@ -1,24 +1,10 @@
 <template lang="pug">
-    .spinner
-        .spinner-wave(v-if="type === 'wave'")
-            .spinner-rect.spinner-rect-1
-            .spinner-rect.spinner-rect-2
-            .spinner-rect.spinner-rect-3
-            .spinner-rect.spinner-rect-4
-            .spinner-rect.spinner-rect-5
-        .spinner-circle(v-if="type === 'circle'")
-            .spinner-circle-1.spinner-child
-            .spinner-circle-2.spinner-child
-            .spinner-circle-3.spinner-child
-            .spinner-circle-4.spinner-child
-            .spinner-circle-5.spinner-child
-            .spinner-circle-6.spinner-child
-            .spinner-circle-7.spinner-child
-            .spinner-circle-8.spinner-child
-            .spinner-circle-9.spinner-child
-            .spinner-circle-10.spinner-child
-            .spinner-circle-11.spinner-child
-            .spinner-circle-12.spinner-child
+    .spinner(v-if="type === 'wave'")
+        .spinner-rect.spinner-rect-1
+        .spinner-rect.spinner-rect-2
+        .spinner-rect.spinner-rect-3
+        .spinner-rect.spinner-rect-4
+        .spinner-rect.spinner-rect-5
 </template>
 
 <script>
@@ -32,71 +18,32 @@
 
 <style lang="sass">
     @import '../../assets/variables'
-    .spinner
-        .spinner-wave
-            $rect-count: 5
-            $animation-duration: 1000ms
-            $delay-range: 400ms
-
-            width: 50px
-            height: 40px
-            text-align: center
-            font-size: 10px
-            margin: 40px auto
-
-            .spinner-rect
-                width: 5px
-                height: 100%
-                background: $app-main-color
-                margin: 0 3px 0 0
-                display: inline-block
-                animation: spinner-rect-wave $animation-duration infinite ease-in-out
-
-            @for $i from 1 through $rect-count
-                .spinner-rect-#{$i}
-                    animation-delay: - $animation-duration + $delay-range / ($rect-count - 1) * ($i - 1)
-
-        .spinner-circle
-            $circle-count: 12
-            $animation-duration: 1200ms
-
-            margin: 40px auto
-            width: 40px
-            height: 40px
-            position: relative
-
-            .spinner-child
-                width: 100%
-                height: 100%
-                position: absolute
-                left: 0
-                top: 0
-            
-            .spinner-child:before
-                content: ''
-                display: block
-                margin: 0 auto
-                width: 15%
-                height: 15%
-                background: $app-main-color
-                border-radius: 100%
-                animation: spinner-circle-bounce $animation-duration infinite ease-in-out both
-            
-            @for $i from 2 through $circle-count
-                .spinner-circle#{$i}
-                    transform: rotate(360deg / $circle-count * ($i - 1))
-                .spinner-circle#{$i}:before
-                    animation-delay: - $animation-duration + $animation-duration / $circle-count * ($i - 1)
-    
-    @keyframes spinner-rect-wave
-        0%, 40%, 100%
-            transform: scaleY(0.4)
-        20%
-            transform: scaleY(1.0)
-
-    @keyframes spinner-circle-bounce
-        0%, 80%, 100%
-            transform: scale(0)
-        40%
-            transform: scale(1.0)
+    .spinner 
+        $rect-count: 5
+        $animation-duration: 1000ms
+        $delay-range: 400ms
+
+        width: 50px
+        height: 40px
+        text-align: center
+        font-size: 10px
+        margin: 40px auto
+
+        .spinner-rect
+            width: 5px
+            height: 100%
+            background: $app-main-color
+            margin: 0 3px 0 0
+            display: inline-block
+            animation: spinner-wave $animation-duration infinite ease-in-out
+
+        @for $i from 1 through $rect-count
+            .spinner-rect-#{$i}
+                animation-delay: - $animation-duration + $delay-range / ($rect-count - 1) * ($i - 1)
+
+        @keyframes spinner-wave
+            0%, 40%, 100%
+                transform: scaleY(0.4)
+            20%
+                transform: scaleY(1.0)
 </style>

src/components/common/Ticket.vue

@@ -2,7 +2,7 @@
     .ticket
         .ticket-summary
             .ticket-summary-header
-                h3 {{ companyName }}
+                h3 {{ companyName || 'No company' }}
                 table
                     tbody
                         tr
@@ -14,19 +14,19 @@
                 table
                     tbody
                         tr(v-for='item in items' :key='item.id')
-                            td {{ item.name }}
-                            td {{ item.price }}
-                            td {{ item.quantity }}
-                            td {{ (item.price || 0) * (item.quantity || 0) }}
+                            td {{ item.name || 'no data' }}
+                            td {{ item.price || 'no data' }}
+                            td {{ item.quantity || 'no data' }}
+                            td {{ ((item.price || 0) * (item.quantity || 0)) || 'no data'  }}
             .ticket-summary-footer
                 table
                     tbody
                         tr
                             td Total:
-                            td {{ total | currency(...defaultCurrency) }}
+                            td {{ total || 'no data' }}
                         tr
                             td Cliente:
-                            td {{ customerName }}
+                            td {{ customerName || 'no data' }}
 </template>
 
 <script>
@@ -40,16 +40,6 @@
                 type: String,
                 default: ''
             },
-            defaultCurrency: {
-                type: Object,
-                default: {
-                    symbol: '$',
-                    position: 'before',
-                    thousandsSeparator: '.',
-                    decimalPlaces: 2,
-                    decimalSeparator: ',' 
-                }
-            },
             total: {
                 type: Number,
                 default: 0

src/components/common/index.js

@@ -1,13 +1,9 @@
 import CardGrid from './CardGrid'
 import Cart from './Cart'
 import Searcher from './Searcher'
-import Ticket from './Ticket'
-import Spinner from './Spinner'
 
 export {
     CardGrid,
     Cart,
-    Searcher,
-    Ticket,
-    Spinner
+    Searcher
 }

src/components/steps/Supplier.vue

@@ -1,11 +1,46 @@
 <template lang="pug">
-    h3 hola
+    .payments-purchase-step
+        .supplier-step
+            .supplier-selector
+                searcher(:items="supplier" :keys="['name']" @onSearch="filterPaymentsPurchasesSupplier")
+                card-grid(:items="supplierVisible" :loading="loadingSupplier" @onSelect='selectPaymentsPurchasesSupplier')
+            transition(name="slide-fade")
 </template>
 
 <script>
-export default {
-}
+    import { mapGetters, mapActions } from 'vuex'
+    import { Searcher, CardGrid } from '@@/common'
+    import { FILTER_PAYMENTS_PURCHASES_SUPPLIER, SELECT_PAYMENTS_PURCHASES_SUPPLIER } from '@/constants/actionTypes'
+
+    export default {
+        components: {
+            Searcher,
+            CardGrid
+        },
+        computed: mapGetters([
+            'supplier',
+            'supplierVisible',
+            'loadingSupplier'
+        ]),
+        methods: mapActions([
+            FILTER_PAYMENTS_PURCHASES_SUPPLIER,
+            SELECT_PAYMENTS_PURCHASES_SUPPLIER
+        ])
+    }
 </script>
 
 <style lang="sass">
+    .payments-purchase-step
+        .supplier-step
+            width: 100%
+            height: 100%
+            display: flex
+            .supplier-selector
+                width: 100%
+                height: 100%
+                .slice-fade-enter-active
+                    transition: all 300ms ease
+                .slice-fade-enter
+                    transition: translatex(300px)
+                    opacity: 0
 </style>

src/constants/actionTypes.js

@@ -16,6 +16,8 @@ const INIT_PAYMENTS_PURCHASES_USER = 'initPaymentsPurchasesUser'
  * [ supplier ]
  */
 const INIT_PAYMENTS_PURCHASES_SUPPLIER = 'initPaymentsPurchasesSupplier'
+const SELECT_PAYMENTS_PURCHASES_SUPPLIER = 'selectPaymentsPurchasesSupplier'
+const FILTER_PAYMENTS_PURCHASES_SUPPLIER = 'filterPaymentsPurchasesSupplier'
 /**
  * [ Journal]
  */
@@ -27,10 +29,19 @@ const INIT_PAYMENTS_PURCHASES_CURRENCIES = 'initPaymentsPurchasesCurrencies'
 
 
 export {
-    INIT_PAYMENTS_PURCHASES, PAYMENTS_PURCHASES_NOTIFY, EXPLODE_DATA, //INIT
-    INIT_PAYMENTS_PURCHASES_DATE, //DATE
-    INIT_PAYMENTS_PURCHASES_USER, //USER
-    INIT_PAYMENTS_PURCHASES_SUPPLIER, //SUPPLIER
-    INIT_PAYMENTS_PURCHASES_JOURNALS, //JOURNAL
-    INIT_PAYMENTS_PURCHASES_CURRENCIES //CURRENCIES
+    //INIT
+    INIT_PAYMENTS_PURCHASES,
+    PAYMENTS_PURCHASES_NOTIFY, EXPLODE_DATA,
+    //DATE
+    INIT_PAYMENTS_PURCHASES_DATE,
+    //USER
+    INIT_PAYMENTS_PURCHASES_USER,
+    //SUPPLIER
+    INIT_PAYMENTS_PURCHASES_SUPPLIER,
+    FILTER_PAYMENTS_PURCHASES_SUPPLIER,
+    SELECT_PAYMENTS_PURCHASES_SUPPLIER,
+    //JOURNAL
+    INIT_PAYMENTS_PURCHASES_JOURNALS,
+    //CURRENCIES
+    INIT_PAYMENTS_PURCHASES_CURRENCIES
 }

src/constants/mutationTypes.js

@@ -13,6 +13,8 @@ const SET_LOADING_USER = 'setLoadingUser'
  */
 const SET_SUPPLIER = 'setSupplier'
 const SET_LOADING_SUPPLIER = 'setLoadingSupplier'
+const SET_SELECTED_PAYMENTS_PURCHASES_SUPPLIER = 'setSelectedPaymentsPurchasesSupplier'
+const SET_FILTER_PAYMENTS_PURCHASES_SUPPLIER = 'setFilterPaymentsPurchasesSupplier'
 /**
  * [ Journal]
  */
@@ -26,9 +28,16 @@ const SET_LOADING_CURRENCIES = 'setLoadingCurrencies'
 
 
 export {
-    SET_DATE, SET_LOADING_DATE, //DATE
-    SET_USER,  SET_LOADING_USER, //USER
-    SET_SUPPLIER, SET_LOADING_SUPPLIER, //SUPPLIER
-    SET_JOURNALS, SET_LOADING_JOURNALS, //JOURNALS
-    SET_CURRENCIES, SET_LOADING_CURRENCIES //CURRENCIES
+    //DATE
+    SET_DATE,
+    SET_LOADING_DATE,
+    //USER
+    SET_USER,
+    SET_LOADING_USER,
+    //SUPPLIER
+    SET_SUPPLIER, SET_LOADING_SUPPLIER, SET_FILTER_PAYMENTS_PURCHASES_SUPPLIER, SET_SELECTED_PAYMENTS_PURCHASES_SUPPLIER,
+    //JOURNALS
+    SET_JOURNALS, SET_LOADING_JOURNALS,
+    //CURRENCIES
+    SET_CURRENCIES, SET_LOADING_CURRENCIES
 }

src/store/modules/PaymentsPurchasesSupplier.js

@@ -1,14 +1,30 @@
-import { INIT_PAYMENTS_PURCHASES_SUPPLIER } from '@/constants/actionTypes'
-import { SET_SUPPLIER, SET_LOADING_SUPPLIER }from '@/constants/mutationTypes'
+//Actions
+import {
+    INIT_PAYMENTS_PURCHASES_SUPPLIER,
+    FILTER_PAYMENTS_PURCHASES_SUPPLIER,
+    SELECT_PAYMENTS_PURCHASES_SUPPLIER
+
+} from '@/constants/actionTypes'
+// Mutations
+import {
+    SET_SUPPLIER,
+    SET_LOADING_SUPPLIER ,
+    SET_FILTER_PAYMENTS_PURCHASES_SUPPLIER,
+    SET_SELECTED_PAYMENTS_PURCHASES_SUPPLIER
+}from '@/constants/mutationTypes'
 
 const initialState = {
     supplier: [],
-    loadingSupplier: false
+    filterSupplier:[],
+    loadingSupplier: false,
+    selectedSupplier: null
 }
 
 const state = {
     supplier: initialState.supplier,
-    loadingSupplier: initialState.loadingSupplier
+    loadingSupplier: initialState.loadingSupplier,
+    filterSupplier: initialState.filterSupplier,
+    selectedSupplier: initialState.selectedSupplier
 }
 
 const getters = {
@@ -26,7 +42,23 @@ const getters = {
      * @return {[type]}       [description]
      */
     loadingSupplier ( state ) {
-        return state.loadingSupplier
+        return !state.loadingSupplier
+    },
+    /**
+     * [selectedSupplier description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    selectedSupplier ( state ) {
+        return state.selectedSupplier
+    },
+    /**
+     * [supplierVisible description]
+     * @param  {[type]} state [description]
+     * @return {[type]}       [description]
+     */
+    supplierVisible ( state ) {
+        return state.filterSupplier.length === 0 ? state.supplier : state.filterSupplier
     }
 }
 
@@ -44,6 +76,20 @@ const mutations = {
      */
     [SET_LOADING_SUPPLIER] (state, paylod) {
         state.loadingSupplier = paylod
+    },
+    /**
+     * [filterSupplier description]
+     * @type {[type]}
+     */
+    [SET_FILTER_PAYMENTS_PURCHASES_SUPPLIER] (state, paylod) {
+        state.filterSupplier = paylod
+    },
+    /**
+     * [selectedSupplier description]
+     * @type {[type]}
+     */
+    [SET_SELECTED_PAYMENTS_PURCHASES_SUPPLIER] ( state, paylod ) {
+        state.selectedSupplier = paylod
     }
 }
 
@@ -54,6 +100,18 @@ const actions = {
     [INIT_PAYMENTS_PURCHASES_SUPPLIER] ({ commit },paylod) {
         commit(SET_SUPPLIER, paylod)
         commit(SET_LOADING_SUPPLIER, paylod)
+    },
+    /**
+     * [ FILTER_PAYMENTS_PURCHASES_SUPPLIER ]
+     */
+    [FILTER_PAYMENTS_PURCHASES_SUPPLIER] ({ commit }, paylod) {
+        commit(SET_FILTER_PAYMENTS_PURCHASES_SUPPLIER, paylod)
+    },
+    /**
+     * [SELECT_PAYMENTS_PURCHASES_SUPPLIER]
+     */
+    [SELECT_PAYMENTS_PURCHASES_SUPPLIER] ({ commit }, paylod) {
+        commit(SET_SELECTED_PAYMENTS_PURCHASES_SUPPLIER, paylod)
     }
 }