eiru_pos/src/components/steps/Product.vue

<template lang="pug">
    .pos-step
        .products-selector
            searcher(:items='products' :keys="['name', 'displayName', 'ean13', 'defaultCode']" mode='normal' @onSearch='filterProducts')
            card-grid(:items='visibleProducts' :loading='loadingProducts' @onAdd='showProductForm' :details="['price:c']" @onSelect='selectProduct')
            product-modal(:show='showingProductForm' @onAccept='submitProduct' @onCancel='hideProductForm')
            variant-modal
            discount-modal(:item='itemToDiscount' :options='selectedCurrency' :show='!!itemToDiscount' @onAccept='applyPrice' @onCancel='applyPrice')
        cart(:items='cartItems' @onTotalComputed='changeCartTotal' @onIncrementQty='addToCart' @onUndoPrice='undoPrice' @onChangePrice='changePrice' @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 VariantModal from '@@/modals/VariantModal'
    import DiscountModal from '@@/modals/DiscountModal'

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

    export default {
        components: {
            Searcher,
            CardGrid,
            Cart,
            ProductModal,
            VariantModal,
            DiscountModal
        },
        computed: {
            ...mapGetters([
                'products',
                'visibleProducts',
                'loadingProducts',
                'showingProductForm',
                'cartItems',
                'itemToDiscount',
                'selectedCurrency'
            ])
        },
        methods: mapActions([
            FILTER_PRODUCTS,
            SELECT_PRODUCT,
            SHOW_PRODUCT_FORM,
            HIDE_PRODUCT_FORM,
            SUBMIT_PRODUCT,
            CHANGE_CART_TOTAL,
            ADD_TO_CART,
            DECREASE_FROM_CART,
            UNDO_PRICE,
            CHANGE_PRICE,
            APPLY_PRICE,
            REMOVE_FROM_CART
        ])
    }
</script>

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