eiru_pos/src/components/steps/Product.vue

<template lang="pug">
    .pos-step
        .products-selector
            searcher(:items='products' :keys="['name', 'displayName']")
            card-grid(:items='products' :loading='loadingProducts' canAdd @onAdd='showProductForm' @onSelect='selectProduct')
            product-modal(:show='showingProductForm' @onAccept='submitProduct' @onCancel='hideProductForm')
        cart(:items='cartItems' @onTotalComputed='changeCartTotal' @onIncrementQty='addToCart' @onDecrementQty='decreaseFromCart' @onDeleteItem='removeFromCart')
</template>

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

    import { SELECT_PRODUCT, SHOW_PRODUCT_FORM, HIDE_PRODUCT_FORM, SUBMIT_PRODUCT, CHANGE_CART_TOTAL, ADD_TO_CART, DECREASE_FROM_CART, REMOVE_FROM_CART } from '@/constants/actionTypes'

    export default {
        components: {
            Searcher,
            CardGrid,
            Cart,
            ProductModal
        },
        computed: mapGetters([
            'products',
            'loadingProducts',
            'showingProductForm',
            'cartItems'
        ]),
        methods: mapActions([
            SELECT_PRODUCT,
            SHOW_PRODUCT_FORM,
            HIDE_PRODUCT_FORM,
            SUBMIT_PRODUCT,
            CHANGE_CART_TOTAL,
            ADD_TO_CART,
            DECREASE_FROM_CART,
            REMOVE_FROM_CART
        ])
    }
</script>

<style lang="sass">
    .pos-step
        .products-selector
            width: calc(100% - 300px)
            height: 100%
            padding-right: 5px
            display: inline-block
</style>