[IMP] customer details and form

src/components/forms/CustomerForm.vue

@@ -1,33 +1,34 @@
 <template lang="pug">
-    .customer-form
+    .customer-form(:class="'customer-form-' + type")
         .form-header(v-if='!!title')
             h2 {{ title }}
             hr
-        form.form-display(:style='{ width, height }')
+        form.form-display(:class="'form-display-' + type")
             .form-separator
                 h3 Detalles Generales
                 hr
-            .form-item
-                label.form-label Nombre
-                input.form-input(:value="customer.name || ''" readonly)
-            .form-item
-                label.form-label R.U.C/C.I.Nº
-                input.form-input(:value="customer.ruc || ''" readonly)
-            .form-item
-                label.form-label Celular
-                input.form-input(:value="customer.phone || ''" readonly)
-            .form-item
-                label.form-label Teléfono
-                input.form-input(:value="customer.mobile || ''" readonly)
-            .form-item
-                label.form-label Email
-                input.form-input(:value="customer.email || ''" readonly)
-            .form-separator
-                h3 Créditos
-                hr
-            .form-item
-                label.form-label Créditos
-                input.form-input(:value="customer.credit || 0" readonly)
+            .form-item(:class="'form-item-' + type")
+                label.form-label(:class="'form-label-' + type") Nombre
+                input.form-input(:class="'form-input-' + type" :value="customer.name || ''" readonly)
+            .form-item(:class="'form-item-' + type")
+                label.form-label(:class="'form-label-' + type") R.U.C/C.I.Nº
+                input.form-input(:class="'form-input-' + type" :value="customer.ruc || ''" readonly)
+            .form-item(:class="'form-item-' + type")
+                label.form-label(:class="'form-label-' + type") Celular
+                input.form-input(:class="'form-input-' + type" :value="customer.phone || ''" readonly)
+            div(v-if="mode === 'details'")
+                .form-item(:class="'form-item-' + type")
+                    label.form-label(:class="'form-label-' + type") Teléfono
+                    input.form-input(:class="'form-input-' + type" :value="customer.mobile || ''" readonly)
+                .form-item(:class="'form-item-' + type")
+                    label.form-label(:class="'form-label-' + type") Email
+                    input.form-input(:class="'form-input-' + type" :value="customer.email || ''" readonly)
+                .form-separator
+                    h3 Créditos
+                    hr
+                .form-item(:class="'form-item-' + type")
+                    label.form-label(:class="'form-label-' + type") Créditos
+                    input.form-input(:class="'form-input-' + type" :value="customer.credit || 0" readonly)
             .form-actions(v-if="mode === 'form'")
                 button.form-action(@click='onAccept') Aceptar
                 button.form-action(@click='onCancel') Cancelar
@@ -40,6 +41,10 @@
                 type: String,
                 default: ''
             },
+            type: {
+                type: String,
+                default: 'medium'
+            },
             customer: {
                 type: Object,
                 default: {
@@ -78,6 +83,15 @@
 <style lang="sass">
     @import '../../assets/variables' 
     .customer-form
+        &.customer-form-small
+            width: 320px
+            height: 100%
+        &.customer-form-medium
+            width: 600px
+            height: 100%
+        &.customer-form-big
+            width: 800px
+            height: 100%
         .form-header
             h2
                 font-size: 10pt
@@ -87,6 +101,15 @@
                 margin: 0 15px
         .form-display
             padding: 15px
+            &.form-display-small
+                width: 320px
+                height: 100%
+            &.form-display-medium
+                width: 600px
+                height: 100%
+            &.form-display-big
+                width: 800%
+                height: 100%
             .form-separator
                 h3
                     color: $app-separator-color
@@ -96,27 +119,35 @@
             .form-item
                 width: 100%
                 margin-bottom: 10px
-                @media (min-width='300px')
-                    height: 45px
-                @media (max-width='300px')
+                &.form-item-small
                     height: 35px
+                &.form-item-medium
+                    height: 45px
+                &.form-item-big
+                    height: 55px
                 .form-label
                     width: 30%
-                    @media (min-width='300px')
-                        height: 35px
-                        font-size: 14pt
-                    @media (max-width='300px')
+                    &.form-label-small
                         height: 35px
                         font-size: 10pt
+                    &.form-label-medium
+                        height: 45px
+                        font-size: 18pt
+                    &.form-label-big
+                        height: 35px
+                        font-size: 24pt
                 .form-input
                     width: 70%
                     border-radius: 0
-                    @media (min-width='300px')
+                    &.form-input-small
+                        height: 35px
+                        font-size: 10pt
+                    &.form-input-medium
                         height: 45px
                         font-size: 18pt
-                    @media (max-width='300px')
-                        height: 35px
-                        font-size: 12pt
+                    &.form-input-big
+                        height: 55px
+                        font-size: 24pt
             .form-actions
                 float: right
                 .form-action

src/components/modals/CustomerModal.vue

@@ -1,9 +1,15 @@
 <template lang="pug">
-    modal(name='customer-modal' transition='nide-modal-fade' @before-close='beforeClose' :classes="['v--modal', 'customer-modal']")
+    modal(name='customer-modal' transition='nice-modal-fade' @before-close='beforeClose' :classes="['v--modal', 'customer-modal']")
+        customer-form(:type='medium' @onAccept='onAccept' @onCancel='onCancel')
 </template>
 
 <script>
+    import CustomerForm from '@@/forms/CustomerForm'
+
     export default {
+        components: {
+            CustomerForm
+        },
         props: {
             title: {
                 type: String,
@@ -14,15 +20,28 @@
                 default: false
             }
         },
+        watch: {
+            show(value) {
+                if (!value) {
+                    this.$modal.hide('customer-modal')
+                    return
+                }
+
+                this.$modal.show('customer-modal')
+            }
+        },
         methods: {
             beforeClose(e) {
                 if (this.show) {
                     e.stop()
                 }
+            },
+            onAccept() {
+                this.$emit('onAccept')
+            },
+            onCancel() {
+                this.$emit('onCancel')
             }
-        },
-        mounted() {
-            console.log(this)
         }
     }
 </script>

src/components/steps/Customer.vue

@@ -4,9 +4,9 @@
             .customer-selector
                 searcher(:items='customers' :keys="['name', 'displayName']")
                 card-grid(:items='customers' :loading='loadingCustomers' canAdd @onAdd='showCustomerForm' @onSelect='selectCustomer')
-                customer-modal(:show='showingCustomerForm' @onAccept='submitCustomer')
+                customer-modal(:show='showingCustomerForm' @onAccept='submitCustomer' @onCancel='hideCustomerForm')
             transition(name='slide-fade')
-                customer-form(v-if='!!selectedCustomer' :customer='selectedCustomer' mode='details')
+                customer-form(v-if='!!selectedCustomer' :customer='selectedCustomer' mode='details' type='small')
 </template>
 
 <script>
@@ -16,12 +16,13 @@
     import CustomerModal from '@/components/modals/CustomerModal'
     import CustomerForm from '@/components/forms/CustomerForm'
 
-    import { SHOW_CUSTOMER_FORM, SUBMIT_CUSTOMER, SELECT_CUSTOMER } from '@/constants/actionTypes'
+    import { SHOW_CUSTOMER_FORM, SUBMIT_CUSTOMER, HIDE_CUSTOMER_FORM, SELECT_CUSTOMER } from '@/constants/actionTypes'
 
     export default {
         components: {
             Searcher,
             CardGrid,
+            CustomerModal,
             CustomerForm
         },
         computed: mapGetters([
@@ -33,6 +34,7 @@
         methods: mapActions([
             SHOW_CUSTOMER_FORM,
             SUBMIT_CUSTOMER,
+            HIDE_CUSTOMER_FORM,
             SELECT_CUSTOMER
         ])
     }

src/constants/mutationTypes.js

@@ -44,6 +44,7 @@ export {
     SET_PRODUCTS,
     SET_LOADING_PRODUCTS,
     SELECT_PRODUCT,
+    SET_PRODUCT_WITH_VARIANT,
     SET_PAYMENT_TERMS,
     SET_LOADING_PAYMENT_TERMS,
     SET_JOURNALS,

webpack.config.js

@@ -14,7 +14,8 @@ module.exports = {
         extensions: ['.js', '.vue', '.json'],
         alias: {
             'vue$': 'vue/dist/vue.esm.js',
-            '@': Path.resolve('src')
+            '@': Path.resolve('src'),
+            '@@': Path.resolve('src/components')
         }
     },
     plugins: [