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')
                customer-modal(:show='showingCustomerForm' @onAccept='submitCustomer')
</template>

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

    import CustomerModal from '@/components/modals/CustomerModal'

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

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

<style lang="sass">
    .pos-step
        .customer-selection-step
            width: 100%
            height: 100%
            display: flex
</style>