[ADD] payment form

src/App.vue

@@ -2,7 +2,7 @@
     .pos
         form-wizard(title='' subtitle='' finishButtonText='Finalizar' :hideButtons='processing' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver' @on-complete='createSale' ref='wizard')
             tab-content(title="Qué productos necesita?" :beforeChange="checkCart")
-                input-dropdown(format='number')
+                payment-step
             tab-content(title="Quién es el cliente?" :beforeChange="checkCustomer")
                 customer-step
             tab-content(v-if='isSale' title="Cómo quieres pagar?" :beforeChange="checkPaymentMethod")
@@ -23,6 +23,7 @@
     import PaymentAmountStep from '@@/steps/PaymentAmount'
 
     import InputDropdown from '@@/common/InputDropdown'
+    import PaymentStep from '@@/steps/Payment'
 
     export default {
         components: {
@@ -32,7 +33,8 @@
             CustomerStep,
             PaymentMethodStep,
             PaymentAmountStep,
-            InputDropdown
+            InputDropdown,
+            PaymentStep
         },
         computed: mapGetters([
             'isSale',
@@ -69,6 +71,28 @@
         },
         mounted() {
             this.initSale(this.$root.mode)
+        },
+        data() {
+            return {
+                options: [
+                    {
+                        id: '1',
+                        name: 'Option 1'  
+                    },
+                    {
+                        id: '2',
+                        name: 'Option 2'  
+                    },
+                    {
+                        id: '3',
+                        name: 'Option 3'  
+                    },
+                    {
+                        id: '4',
+                        name: 'Option 4'  
+                    }
+                ]
+            }
         }
     }
 </script>

src/components/common/InputDropdown.vue

@@ -1,12 +1,14 @@
 <template lang="pug">
     .input-group
+        .input-group-button(v-if='withPrefix')
+            button(type='button') {{ prefix }}
         input(type='text' v-model='formattedValue')
-        .input-group-button
-            button(type='button' @click='onShowOptions' :disabled='isDisabledOptions()' ref='button') {{ text }}
+        .input-group-button(v-if='withSuffix')
+            button(type='button' @click='onShowSuffixOptions' :disabled='withSuffixOptions()' ref='suffixButton') {{ suffix }}
                 span.caret
-            ul.dropdown(:style="{ 'display': isShowOptions ? 'block' : 'none' }" ref='dropdown')
-                li(v-for='option in options' :key='option.id')
-                    a(@click='onClickOption(option)') {{ option.name }}
+            ul.dropdown(:style="{ 'display': isShowSuffixOptions ? 'block' : 'none' }" ref='suffixDropdown')
+                li(v-for='option in suffixOptions' :key='option.id')
+                    a(@click='onClickSuffixOption(option)') {{ option.name }}
 </template>
 
 <script>
@@ -16,33 +18,46 @@
                 type: String,
                 default: ''
             },
-            text: {
+            format: {
                 type: String,
-                default: 'Dropdown'
+                default: 'text'
             },
-            options: {
+            withPrefix: {
+                type: Boolean,
+                default: false
+            },
+            prefix: {
+                type: String,
+                default: ''
+            },
+            prefixOptions: {
                 type: Array,
                 default: []
             },
-            format: {
-                type: String,
-                default: 'text'
+            withSuffix: {
+                type: Boolean,
+                default: false
             },
-            prefix: {
+            suffix: {
                 type: String,
                 default: ''
+            },
+            suffixOptions: {
+                type: Array,
+                default: []
             }
         },
         computed: {
             formattedValue: {
                 get() {
-                    let value = 0
+                    let value = ''
 
                     if (this.format === 'number') {
                         value = this.formatValue(this.value)
+                        value = !!this.value ? value : value.replace(/\d/, '')
                     }
 
-                    return !!this.value ? value : value.replace(/\d/, '')
+                    return value
                 },
                 set(value) {
                     if (this.format === 'number') {
@@ -50,6 +65,8 @@
                     }
 
                     this.value = value
+
+                    this.onChange(value)
                 }
             }
         },
@@ -97,32 +114,40 @@
             onChange(data) {
                 this.$emit('onChange', data)
             },
-            hideOptions() {
-                this.isShowOptions = false
+            hideSuffixOptions() {
+                this.isShowSuffixOptions = false
+            },
+            withPrefixOptions() {
+                return this.prefixOptions.length == 0
             },
-            isDisabledOptions() {
-                return this.options.length == 0
+            withSuffixOptions() {
+                return this.suffixOptions.length == 0
             },
-            onShowOptions() {
-                this.isShowOptions = !this.isShowOptions
+            onShowSuffixOptions() {
+                this.isShowSuffixOptions = !this.isShowSuffixOptions
             },
             onClickOutside(e) {
+                let suffixButton = this.$refs.suffixButton
+
+                if (!suffixButton) {
+                    return
+                }
+
                 let target = e.target
-                let button = this.$refs.button
 
-                if (target === button) {
+                if (target === suffixButton) {
                     return
                 }
 
-                let el = this.$refs.dropdown
+                let el = this.$refs.suffixDropdown
                 
                 if (el !== target && !el.contains(target)) {
-                    this.hideOptions()
+                    this.hideSuffixOptions()
                 }
             },
-            onClickOption(option) {
-                this.hideOptions()
-                this.$emit('onOption', option)
+            onClickSuffixOption(suffixOption) {
+                this.hideSuffixOptions()
+                this.$emit('onSuffix', suffixOption)
             }
         },
         created() {
@@ -134,7 +159,7 @@
         data() {
             return {
                 value: '',
-                isShowOptions: false
+                isShowSuffixOptions: false
             }
         }
     }
@@ -154,13 +179,21 @@
             border-radius: 0
             margin-bottom: 0
             z-index: 2
+            font-size: 12pt
             &:focus
                 z-index: 3
         .input-group-button
+            position: relative
             display: table-cell
             width: 1%
             white-space: nowrap
             vertical-align: middle
+            &:first-child
+                & > button
+                    margin-right: -1px
+            &:last-child
+                & > button
+                    margin-left: -1px
             button
                 height: 35px
                 display: inline-block
@@ -171,7 +204,6 @@
                 border: 1px solid #ccc
                 border-radius: 0
                 box-shadow: none
-                margin-left: -1px
                 background: #e0e0e0
                 &:focus
                     outline: 0 !important

src/components/steps/Payment.vue

@@ -0,0 +1,80 @@
+<template lang="pug">
+    .pos-step
+        ticket
+        form
+            .form-item
+                label.form-label Forma de Pago
+                .form-item-option
+                    input.form-input(type='radio')
+                    label(for='cash') Contado
+                .form-item-option
+                    input.form-input(type='radio')
+                    label(for='credit') Crédito
+            .form-item
+                label.form-label Monto a Pagar
+                input-dropdown.form-input(withPrefix='true' prefix='$')
+            .form-item
+                label.form-label Monto Recibido
+                input-dropdown.form-input
+            hr
+            .form-item
+                label.form-label Vuelto
+                input-dropdown.form-input
+</template>
+
+<script>
+    import { mapGetters, mapAction } from 'vuex'
+
+    import Ticket from '@@/common/Ticket'
+    import InputDropdown from '@@/common/InputDropdown'
+
+    export default {
+        components: {
+            Ticket,
+            InputDropdown
+        }
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+    .pos-step
+        width: 100%
+        height: calc(100% - 50px)
+        padding-bottom: 50px
+        display: flex
+        form
+            width: calc(100% - 450px)
+            height: 100%
+            margin-right: 50px
+            padding: 35px
+            background: $app-light-color
+            .form-item
+                width: 100%
+                height: 35px
+                margin-bottom: 15px
+                & > .form-label, > .form-input
+                    display: inline-block
+                    vertical-align: top
+                .form-label
+                    width: 250px
+                    height: 35px
+                    font-size: 13pt
+                    line-height: 30px
+                .form-input
+                    width: 350px
+                    height: 35px
+                    font-size: 12pt
+                    border-radius: 0
+                    &.input-only
+                        margin-left: 250px
+                        margin-bottom: 15px
+                .form-item-option
+                    display: inline-block
+                    input
+                        width: 20px
+                        height: 20px
+                    label
+                        font-size: 12pt
+                        margin: 0 35px 15px 5px
+</style>