eiru_pos/src/components/steps/Product.vue

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

    export default {
        components: {
            Searcher,
            CardGrid,
            Cart,
            ProductModal,
            VariantModal,
            DiscountModal
        },
        computed: {
            ...mapGetters([
                'products',
                'visibleProducts',
                'loadingProducts',
                'showingProductForm',
                'cartItems',
                'itemToDiscount',
                'currency'
            ])
        },
        methods: mapActions([
            'filterProducts',
            'selectProduct',
            'showProductForm',
            'hideProductForm',
            'submitProduct',
            'changeCartTotal',
            'addToCart',
            'decreaseFromCart',
            'undoPrice',
            'changePrice',
            'applyPrice',
            'removeFromCart'
        ])
    }
</script>

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