eiru_pos/src/App.vue

<template lang="pug">
    .app
        form-wizard(title="" subtitle="" nextButtonText="Continuar" backButtonText="Volver" finishButtonText="Finalizar" color="#7c7bad")
            tab-content(title="Agregue productos al carrito" :before-change="checkCart")
                .pos
                    .products-container
                        products-searcher
                        products-grid(:symbol="currency.symbol")
                    .cart-container
                        cart-total(:total="total" :symbol="currency.symbol")
                        cart-items(:symbol="currency.symbol")
            tab-content(title="Seleccione un cliente" :before-change="checkCustomer")
                customer-searcher
                customers-grid
            tab-content(title="Vea un resumen de su operación")
                summary-display
        loader
</template>

<script>
    import { FormWizard, TabContent } from 'vue-form-wizard'
    import 'vue-form-wizard/dist/vue-form-wizard.min.css'

    import Loader from '@/components/Loader'
    import ProductsSearcher from '@/components/ProductsSearcher'
    import ProductsGrid from '@/components/ProductsGrid'
    import CartTotal from '@/components/CartTotal'
    import CartItems from '@/components/CartItems'
    import CartItem from '@/components/CartItem'
    import CustomerSearcher from '@/components/CustomerSearcher'
    import CustomersGrid from '@/components/CustomersGrid'
    import SummaryDisplay from '@/components/SummaryDisplay'

    import { mapActions, mapGetters } from 'vuex'
    import Vuex from 'vuex'

    export default {
        components: {
            'form-wizard': FormWizard,
            'tab-content': TabContent,
            'loader': Loader,
            'products-searcher': ProductsSearcher,
            'products-grid': ProductsGrid,
            'cart-total': CartTotal,
            'cart-items': CartItems,
            'cart-item': CartItem,
            'customer-searcher': CustomerSearcher,
            'customers-grid': CustomersGrid,
            'summary-display': SummaryDisplay
        },
        computed: mapGetters({
            total: 'getTotal',
            currency: 'getCurrency',
            cartIsEmpty: 'cartIsEmpty',
            hasSelectedCustomer: 'hasSelectedCustomer'
        }),
        methods: {
            checkCart() {
                if (!this.cartIsEmpty) {
                    this.notify('Necesitas agregar productos al carrito para continuar')
                }

                return this.cartIsEmpty
            },
            checkCustomer() {
                if (!this.hasSelectedCustomer) {
                    this.notify('Necesitas seleccionar un cliente para continuar')
                }

                return this.hasSelectedCustomer
            },
            ...mapActions([
                'fetchData',
                'notify'
            ])
        },
        mounted() {
            this.fetchData()
        }
    }
</script>

<style lang="sass">
    .vue-form-wizard
        width: 100%
        height: 100%
        padding-bottom: 0
        display: flex
        flex-direction: column
        .wizard-header
            display: none
        .wizard-navigation
            width: 100%
            flex-grow: 1
            .wizard-progress-with-circle
                top: 35px
            .wizard-icon-circle
                width: 60px
                height: 60px
            .wizard-tab-content
                padding: 0
                .pos
                    width: 100%
                    height: 100%
                    padding: 10px
                    display: block
                    background: #fff
                    .products-container
                        width: calc(100% - 300px)
                        height: 100%
                        padding-right: 5px
                        display: inline-block
                    .cart-container
                        width: 300px
                        height: 100%
                        border-left: 1px solid #d3d3d3
                        padding-left: 10px
                        display: inline-block
                        vertical-align: top
        .wizard-card-footer
            padding-bottom: 15px
            .wizard-btn
                width: 160px
                height: 40px
                border-radius: 0
                box-shadow: none
                border: none
                &:hover, &:focus
                    background: #7c7bad
</style>