eiru_pos/src/components/steps/Customer.vue

<template lang="pug">
    .pos-step
        .customer-selection-step
            .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' @onCancel='hideCustomerForm')
            transition(name='slide-fade')
                customer-form(v-if='!!selectedCustomer' :customer='selectedCustomer' mode='details' type='small')
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import { Searcher, CardGrid } from '@@/common'

    import CustomerModal from '@@/modals/CustomerModal'
    import CustomerForm from '@@/forms/CustomerForm'

    import { SHOW_CUSTOMER_FORM, SUBMIT_CUSTOMER, HIDE_CUSTOMER_FORM, SELECT_CUSTOMER } from '@/constants/actionTypes'

    export default {
        components: {
            Searcher,
            CardGrid,
            CustomerModal,
            CustomerForm
        },
        computed: mapGetters([
            'customers',
            'loadingCustomers',
            'showingCustomerForm',
            'selectedCustomer'
        ]),
        methods: mapActions([
            SHOW_CUSTOMER_FORM,
            SUBMIT_CUSTOMER,
            HIDE_CUSTOMER_FORM,
            SELECT_CUSTOMER
        ])
    }
</script>

<style lang="sass">
    .pos-step
        .customer-selection-step
            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>