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'
            )
            .products-grid
                store-selector(
                    :items='warehouses'
                    :selected='selectedWarehouse'
                    @onSelect='selectWarehouse'
                )
                card-grid(
                    @onAdd='showProductForm'
                    :items='visibleProducts'
                    :footerKeys="['price:c']"
                    :currencyOptions='baseCurrency'
                    :loading='loadingProducts'
                    @onSelect='selectProduct'
                )
            product-modal(
                :show='showingProductForm'
                @onAccept='submitProduct'
                @onCancel='hideProductForm'
            )
            variant-modal
            discount-modal(
                :item='itemToDiscount' 
                :options='baseCurrency'
                :show='!!itemToDiscount'
                @onAccept='applyPrice'
                @onCancel='applyPrice'
            )
        cart(
            :items='cartItems' 
            :currencyOptions='baseCurrency'
            @onTotalComputed='changeCartTotal'
            @onIncrementQty='addToCart'
            @onUndoPrice='undoPrice'
            @onChangePrice='changePrice'
            @onDecrementQty='decreaseFromCart'
            @onDeleteItem='removeFromCart' 
        )
</template>

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

    export default {
        components: {
            Searcher,
            CardGrid,
            Cart,
            StoreSelector,
            ProductModal,
            VariantModal,
            DiscountModal
        },
        computed: {
            ...mapGetters([
                'products',
                'visibleProducts',
                'stores',
                'warehouses',
                'showWarehouseSelector',
                'loadingProducts',
                'showingProductForm',
                'cartItems',
                'itemToDiscount',
                'baseCurrency'
            ])
        },
        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
            .products-grid
                width: 100%
                height: 100%
                display: flex
</style>