eiru_pos/src/components/steps/Product.vue

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

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

    import { FILTER_PRODUCTS, 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',
                'visibleProducts',
                'loadingProducts',
                'showingProductForm',
                'cartItems',
                'selectedCurrency'
            ])
        },
        methods: mapActions([
            FILTER_PRODUCTS,
            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>