[ADD] customer form details

src/components/forms/CustomerForm.vue

@@ -1,18 +1,114 @@
 <template lang="pug">
-    .customer-form
+    .customer-form(:style='{ width, height }')
+        .form-header(v-if='!!title')
+            h2 {{ title }}
+            hr
+        form.form-display
+            .form-separator
+                h3 Detalles Generales
+                hr
+            .form-item
+                label.form-label Nombre
+                input.form-input(readonly)
+            .form-item
+                label.form-label R.U.C/C.I.Nº
+                input.form-input(readonly)
+            .form-item
+                label.form-label Celular
+                input.form-input(readonly)
+            .form-item
+                label.form-label Teléfono
+                input.form-input(readonly)
+            .form-item
+                label.form-label Email
+                input.form-input(readonly)
+            .form-separator
+                h3 Créditos
+                hr
+            .form-item
+                label.form-label Créditos
+                input.form-input(readonly)
+            .form-actions(v-if="mode === 'form'")
+                button.form-action(@click='onAccept') Aceptar
+                button.form-action(@click='onCancel') Cancelar
 </template>
 
 <script>
     export default {
         props: {
+            title: {
+                type: String,
+                default: ''
+            },
             mode: {
                 type: String,
                 default: 'form'
+            },
+            width: {
+                type: String,
+                default: '350px'
+            },
+            height: {
+                type: String,
+                default: '100%'
+            }
+        },
+        methods: {
+            onAccept() {
+                this.$emit('onAccept')
+            },
+            onCancel() {
+                this.$emit('onCancel')
             }
         }
     }
 </script>
 
 <style lang="sass">
+    @import '../../assets/variables' 
     .customer-form
+        .form-header
+            h2
+                font-size: 10pt
+                color: $app-border-color
+                margin-left: 15px
+            hr
+                margin: 0 15px
+        .form-display
+            padding: 15px
+            .form-item
+                width: 100%
+                margin-bottom: 10px
+                @media (min-width='300px')
+                    height: 45px
+                @media (max-width='300px')
+                    height: 35px
+                .form-label
+                    width: 30%
+                    @media (min-width='300px')
+                        height: 35px
+                        font-size: 14pt
+                    @media (max-width='300px')
+                        height: 35px
+                        font-size: 10pt
+                .form-input
+                    width: 70%
+                    border-radius: 0
+                    @media (min-width='300px')
+                        height: 45px
+                        font-size: 18pt
+                    @media (max-width='300px')
+                        height: 35px
+                        font-size: 12pt
+            .form-actions
+                float: right
+                .form-action
+                    width: 150px
+                    height: 40px
+                    border: none
+                    box-shadow: none
+                    border-radius: 0
+                    margin-right: 5px
+                    background: $app-main-color
+                    color: $app-bg-color
 </style>

src/components/steps/Customer.vue

@@ -3,8 +3,10 @@
         .customer-selection-step
             .customer-selector
                 searcher(:items='customers' :keys="['name', 'displayName']")
-                card-grid(:items='customers' :loading='loadingCustomers' canAdd @onAdd='showCustomerForm')
+                card-grid(:items='customers' :loading='loadingCustomers' canAdd @onAdd='showCustomerForm' @onSelect='selectCustomer')
                 customer-modal(:show='showingCustomerForm' @onAccept='submitCustomer')
+            transition(name='slide-fade')
+                customer-form(v-if='!!selectedCustomer' mode='details')
 </template>
 
 <script>
@@ -12,22 +14,26 @@
     import { Searcher, CardGrid } from '@/components/common'
 
     import CustomerModal from '@/components/modals/CustomerModal'
+    import CustomerForm from '@/components/forms/CustomerForm'
 
-    import { SHOW_CUSTOMER_FORM, SUBMIT_CUSTOMER } from '@/constants/actionTypes'
+    import { SHOW_CUSTOMER_FORM, SUBMIT_CUSTOMER, SELECT_CUSTOMER } from '@/constants/actionTypes'
 
     export default {
         components: {
             Searcher,
-            CardGrid
+            CardGrid,
+            CustomerForm
         },
         computed: mapGetters([
             'customers',
             'loadingCustomers',
-            'showingCustomerForm'
+            'showingCustomerForm',
+            'selectedCustomer'
         ]),
         methods: mapActions([
             SHOW_CUSTOMER_FORM,
-            SUBMIT_CUSTOMER
+            SUBMIT_CUSTOMER,
+            SELECT_CUSTOMER
         ])
     }
 </script>
@@ -38,4 +44,12 @@
             width: 100%
             height: 100%
             display: flex
+            .customer-selector
+                width: 100%
+                height: 100%
+            .slide-fade-enter-active
+                transition: all 300ms ease;
+            .slide-fade-enter
+                transform: translateX(300px)
+                opacity: 0
 </style>

src/constants/actionTypes.js

@@ -18,6 +18,8 @@ const HIDE_CUSTOMER_FORM = 'hideCustomerForm'
 
 const SUBMIT_CUSTOMER = 'submitCustomer'
 
+const SELECT_CUSTOMER = 'selectCustomer'
+
 const INIT_CURRENCIES = 'initCurrencies'
 
 const ADD_TO_CART = 'addToCart'
@@ -35,6 +37,7 @@ export {
     SHOW_CUSTOMER_FORM,
     HIDE_CUSTOMER_FORM,
     SUBMIT_CUSTOMER,
+    SELECT_CUSTOMER,
     INIT_CURRENCIES,
     ADD_TO_CART,
     CHANGE_CART_TOTAL

src/constants/mutationTypes.js

@@ -28,6 +28,8 @@ const SET_LOADING_CUSTOMERS = 'setLoadingCustomers'
 
 const SET_SHOW_CUSTOMER_FORM = 'setShowCustomerForm'
 
+const SET_SELECTED_CUSTOMER = 'setSelectedCustomer'
+
 const SET_CURRENCIES = 'setCurrencies'
 
 const SET_LOADING_CURRENCIES = 'setLoadingCurrencies'
@@ -51,6 +53,7 @@ export {
     SET_CUSTOMERS,
     SET_LOADING_CUSTOMERS,
     SET_SHOW_CUSTOMER_FORM,
+    SET_SELECTED_CUSTOMER,
     SET_CURRENCIES,
     SET_LOADING_CURRENCIES,
     PUSH_TO_CART,

src/store/modules/customer.js

@@ -1,16 +1,18 @@
-import { SET_CUSTOMERS, SET_LOADING_CUSTOMERS, SET_SHOW_CUSTOMER_FORM } from '@/constants/mutationTypes'
-import { INIT_CUSTOMERS, SHOW_CUSTOMER_FORM, HIDE_CUSTOMER_FORM, SUBMIT_CUSTOMER } from '@/constants/actionTypes'
+import { SET_CUSTOMERS, SET_LOADING_CUSTOMERS, SET_SHOW_CUSTOMER_FORM, SET_SELECTED_CUSTOMER } from '@/constants/mutationTypes'
+import { INIT_CUSTOMERS, SHOW_CUSTOMER_FORM, HIDE_CUSTOMER_FORM, SUBMIT_CUSTOMER, SELECT_CUSTOMER } from '@/constants/actionTypes'
 
 const initialState = {
     customers: [],
     loadingCustomers: false,
-    showingCustomerForm: false
+    showingCustomerForm: false,
+    selectedCustomer: null
 }
 
 const state = {
     customers: initialState.customers,
     loadingCustomers: !initialState.loadingCustomers,
-    showingCustomerForm: initialState.showingCustomerForm
+    showingCustomerForm: initialState.showingCustomerForm,
+    selectedCustomer: initialState.selectedCustomer
 }
 
 const getters = {
@@ -34,6 +36,13 @@ const getters = {
      */
     showingCustomerForm(state) {
         return state.showingCustomerForm
+    },
+    /**
+     * 
+     * @param {*} state 
+     */
+    selectedCustomer(state) {
+        return state.selectedCustomer
     }
 }
 
@@ -61,6 +70,14 @@ const mutations = {
      */
     [SET_SHOW_CUSTOMER_FORM] (state, payload) {
         state.showingCustomerForm = !!payload
+    },
+    /**
+     * 
+     * @param {*} state 
+     * @param {*} payload 
+     */
+    [SET_SELECTED_CUSTOMER] (state, payload) {
+        state.selectedCustomer = payload
     }
 }
 
@@ -95,6 +112,13 @@ const actions = {
      */
     [SUBMIT_CUSTOMER] ({ commit }) {
         console.log('submit')
+    },
+    /**
+     * 
+     * @param {*} param0 
+     */
+    [SELECT_CUSTOMER] ({ commit }, payload) {
+        commit(SET_SELECTED_CUSTOMER, payload)
     }
 }