eiru_pos/src/App.vue

<template lang="pug">
    .pos
        form-wizard(
            title=''
            subtitle=''
            color='#7c7bad'
            ref='wizard'
        )
            tab-content(
                title='Qué productos necesita?'
                :beforeChange='checkCart'
            )
                product-step
            tab-content(
                title='Quién es el cliente?'
                :beforeChange='checkCustomer'
            )
                customer-step
            tab-content(
                v-if='isSale'
                title='Cómo quieres pagar?'
            )
                payment-step
            template(
                slot='footer'
                slot-scope='props'
            )
                .wizard-footer-left
                    wizard-button(
                        v-if='props.activeTabIndex > 0'
                        @click.native='goBack'
                        :style='props.fillButtonStyle'
                    ) Volver
                .wizard-footer-center(v-show='showStoreSelector')
                    .store-selector
                        span
                            strong Sucursal
                        input-select(
                            :options='stores.map(s => ({ id: s.id, name: s.name }))'
                            :selected='selectedStore'
                            @onSelect='selectStore'
                        )
                connection-status(@onChangeNet='changeNetStatus')
                .wizard-footer-right
                    wizard-button(
                        v-if='!props.isLastStep'
                        class='wizard-footer-right'
                        :style='props.fillButtonStyle'
                        @click.native='goNext'
                    ) Continuar
                    wizard-button(
                        v-else
                        class='wizard-footer-right finish-button'
                        :style='props.fillButtonStyle'
                        @click.native='endProcess'
                    ) {{ props.isLastStep ? 'Finalizar' : 'Continuar' }}
        settings-button(
            v-show='!loading && isManager && isWired'
            @onClick='toggleSettingsVisibility'
        )
        settings-modal(
            :show='settingsVisibility'
            :settings='settings'
            @onClose='toggleSettingsVisibility'
            @onChangeSetting='changeSetting'
        )
        loading-overlay(:show='loading')
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

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

    import SettingsModal from './components/modals/SettingsModal'
    import {Product as ProductStep, Customer as CustomerStep, Payment as PaymentStep} from './components/steps'
    import { LoadingOverlay, SettingsButton, InputSelect, ConnectionStatus } from './components/common'

    export default {
        components: {
            FormWizard,
            TabContent,
            WizardButton,
            ProductStep,
            CustomerStep,
            PaymentStep,
            LoadingOverlay,
            SettingsButton,
            SettingsModal,
            InputSelect,
            ConnectionStatus
        },
        computed: mapGetters([
            'isSale',
            'footerButtonsVisibility',
            'settingsVisibility',
            'settings',
            'stores',
            'initialPayment',
            'selectedStore',
            'showStoreSelector',
            'isManager',
            'loading',
            'completed',
            'isWired'
        ]),
        methods: {
            goNext() {
                this.$refs.wizard.nextTab()

                if (this.$refs.wizard.activeTabIndex >= 1) {
                    this.changeInitialPayment(this.initialPayment)
                }
            },
            goBack() {
                // if (this.$refs.wizard.activeTabIndex === 2) {
                //     this.changeInitialPayment(0)
                // }

                this.$refs.wizard.prevTab()
            },
            handleKeyboard({key}) {
               this.handleNavigation(key)
            },
            // TODO: Improve navigation
            handleNavigation(key) {
                if (key === 'ArrowRight') {
                    // this.goNext()
                    return
                }

                if (key === 'ArrowLeft') {
                    // this.goBack()
                }
            },
            ...mapActions([
                'initProcess',
                'checkCart',
                'checkCustomer',
                'toggleSettingsVisibility',
                'changeSetting',
                'changeInitialPayment',
                'changeNetStatus',
                'selectStore',
                'endProcess',
                'resetProcess'
            ])
        },
        watch: {
            completed(value) {
                if (!value) {
                    return
                }
                
                this.$refs.wizard.changeTab(2, 0, false)
                this.resetProcess()
            }
        },
        created() {
            document.addEventListener('keyup', this.handleKeyboard)
        },
        destroyed() {
            document.removeEventListener('keyup', this.handleKeyboard)
        },
        mounted() {
            this.initProcess(this.$root.mode)
        }
    }
</script>

<style lang="sass">
    @import './assets/variables'
    .pos
        width: 100%
        height: 100%
        position: absolute
        .v--modal-overlay
            background: rgba(0, 0, 0, 0.7)
            z-index: 1001
        .vue-form-wizard
            width: 100%
            height: 100%
            padding-bottom: 0
            .wizard-header
                display: none
            .wizard-navigation
                width: 100%
                height: 100%
                .wizard-progress-with-circle
                    top: 35px
                .wizard-icon-circle
                    width: 60px
                    height: 60px
                .wizard-tab-content
                    width: 100%
                    height: calc(100% - 82px)
                    padding: 0
                    overflow: hidden
                    .wizard-tab-container
                        width: calc(100% - 20px)
                        height: calc(100% - 20px)
                        margin: 10px
                        .pos-step
                            width: 100%
                            height: 100%
                            background: $app-bg-color
            .wizard-card-footer
                width: 100%
                height: 50px
                position: absolute
                bottom: 0
                text-align: center
                box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.26)
                .wizard-footer-center
                    width: 270px
                    display: inline-block
                    .store-selector
                        span
                            display: inline-block
                        div
                            width: 200px
                            margin-left: 15px
                            display: inline-block
                .wizard-footer-left, .wizard-footer-right
                    margin-top: 3px
                    .wizard-btn
                        width: 160px
                        height: 40px
                        border-radius: 0
                        box-shadow: none
                        border: none
                        &:hover, &:focus
                            background: $app-main-color
</style>