eiru_purchases/src/components/steps/ProductStep.vue

<template lang="pug">
    .purchase-step
        .products-selector
            searcher(:items='variants' :keys="['name', 'displayName', 'ean13']" @onSearch='filterProducts')
            card-grid(:items='visibleProducts' :details="['price:c']" :options='selectedCurrency' @onSelect='selectProduct')
            variant-modal(:items='productWithVariant && productWithVariant.variants' :show='!!productWithVariant' @onSelect='selectProduct' @onClose='selectProduct')
            price-modal(:item='itemPriced' :options='selectedCurrency' :show='!!itemPriced' @onAccept='changePrice' @onCancel='changePrice')
        cart(:items='cartItems' @onIncrementQty='addToCart' @onChangePrice='changePrice' @onUndoPrice='undoPrice' @onDecrementQty='decreaseFromCart' @onDeleteItem='removeFromCart' @onTotalComputed='updateCartTotal' :options='selectedCurrency')
</template>

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

    export default {
        components: {
            Searcher,
            CardGrid,
            Cart,
            VariantModal,
            PriceModal
        },
        computed: mapGetters([
            'products',
            'variants',
            'visibleProducts',
            'loadingProducts',
            'cartItems',
            'selectedCurrency',
            'productWithVariant',
            'itemPriced'
        ]),
        methods: mapActions([
            'filterProducts',
            'selectProduct',
            'addToCart',
            'decreaseFromCart',
            'changePrice',
            'undoPrice',
            'removeFromCart',
            'updateCartTotal'
        ])
    }
</script>

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