eiru_pos/src/components/steps/Customer.vue

<template lang="pug">
    .pos-step
        .customer-selection-step
            .customer-selector
                searcher(
                    mode='normal'
                    :items='customers'
                    :keys="['name', 'phone', 'mobile', 'email']"
                    @onSearch='filterCustomers'
                )
                card-grid(
                    :canAdd='isWired'
                    :items='visibleCustomers'
                    :loading='loadingCustomers'
                    @onAdd='showCustomerForm'
                    @onSelect='selectCustomer'
                )
                customer-modal(
                    :show='showingCustomerForm'
                    @onAccept='submitCustomer'
                    @onCancel='hideCustomerForm'
                )
            transition(name='slide-fade')
                customer-form(
                    type='small'
                    mode='details'
                    v-if='!!selectedCustomer'
                    :customer='selectedCustomer'
                )
</template>

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

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

    export default {
        components: {
            Searcher,
            CardGrid,
            CustomerModal,
            CustomerForm
        },
        computed: mapGetters([
            'customers',
            'visibleCustomers',
            'loadingCustomers',
            'showingCustomerForm',
            'selectedCustomer',
            'isWired'
        ]),
        methods: mapActions([
            'filterCustomers',
            'showCustomerForm',
            'showCustomerForm',
            'submitCustomer',
            'hideCustomerForm',
            'selectCustomer'
        ])
    }
</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>