eiru_purchases/src/App.vue

<template lang="pug">
    .purchases
        form-wizard(title='' subtitle='' color='#7c7bad' ref='wizard')
            template(v-if='isPurchase || isExpense')
                tab-content(title='Cuál es su proveedor?' :beforeChange='checkSupplier')
                    supplier-step
                tab-content(title="mode === 'purchase' ? 'Qué productos comprarás?' : 'En que gastarás?'" :beforeChange='checkCart')
                    product-step
                tab-content(title='Cómo quieres pagar?' :beforeChange='checkAmountReceived')
                    payment-step
            template(v-else-if='isPurchasePicking')
                tab-content(title='Cuál es su proveedor?' :beforeChange='checkSupplier')
                    supplier-step
                tab-content(title='Qué productos comprarás?' :beforeChange='checkCart')
                    product-step
            template(v-else-if='isPurchasePayment')
                tab-content(title='Qué presupuesto es?')
                    budget-step
                tab-content(title='Cómo quieres pagar?')
                    payment-step
            template(v-else='isPurchaseTaking')
                tab-content(title='Qué compra es?')
                    delivery-step
                tab-content(title='Confirmar entrega?')
                    delivery-confirm-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-right
                    wizard-button(v-if='!props.isLastStep' class='wizard-footer-right' @click.native='goNext' :style='props.fillButtonStyle') Continuar
                    wizard-button(v-else class='wizard-footer-right finish-button' @click.native='endProcess' :style='props.fillButtonStyle') {{ props.isLastStep ? 'Finalizar' : 'Continuar' }}
        loading-overlay(:show='isLoading')
</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 SupplierStep from './components/steps/SupplierStep'
    import ProductStep from './components/steps/ProductStep'
    import PaymentStep from './components/steps/PaymentStep'
    import BudgetStep from './components/steps/BudgetStep'
    import DeliveryStep from './components/steps/DeliveryStep'
    import DeliveryConfirmStep from './components/steps/DeliveryConfirmStep'

    import { LoadingOverlay } from './components/common'

    export default {
        components: {
            FormWizard,
            TabContent,
            WizardButton,
            SupplierStep,
            ProductStep,
            PaymentStep,
            BudgetStep,
            DeliveryStep,
            DeliveryConfirmStep,
            LoadingOverlay
        },
        computed: mapGetters([
            'isLoading',
            'isCompleted',
            'isPurchase',
            'isExpense',
            'isPurchasePicking',
            'isPurchasePayment',
            'isPurchaseTaking',
            'isProcessing',
            'state',
            'mode'
        ]),
        methods: {
            goNext() {
                this.$refs.wizard.nextTab()

                if (this.$refs.wizard.activeTabIndex >= 1) {
                    // this.changeInitialPayment(this.initialPayment)
                }
            },
            goBack() {
                this.$refs.wizard.prevTab()
            },
            ...mapActions([
                'initProcess',
                'checkCart',
                'checkSupplier',
                'checkAmountReceived',
                'endProcess',
                'resetProcess'
            ])
        },
        watch: {
            isCompleted(value) {
                if (!value) {
                    return
                }

                this.$refs.wizard.changeTab(2, 0, false)
                this.resetProcess()
            }
        },
        mounted() {
            this.initProcess(this.$root.mode)
        }
    }
</script>

<style lang="sass">
    @import './assets/variables'
    
    .purchases
        width: 100%
        height: 100%
        position: absolute
        .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
                        .purchase-step
                            width: 100%
                            height: 100%
                            background: $app-bg-color
            .wizard-card-footer
                width: 100%
                height: 50px
                position: absolute
                bottom: 10px
                .wizard-btn
                    width: 160px
                    height: 40px
                    border-radius: 0
                    box-shadow: none
                    border: none
                    &:hover, &:focus
                        background: $app-main-color
</style>