eiru_pos/src/components/modals/BankPaymentModal.vue

<template lang="pug">
    modal(
        name='payment-bank-modal'
        adaptive='true'
        width='800px'
        height='auto'
        transition='nice-modal-fade'
        :classes="['v--modal', 'payment-bank-modal']"
        @before-close='beforeClose'
    )
        form-wizard(
            title='Pago Bancario'
            subtitle=''
            color='#7c7bad'
            ref='wizard'
        )
            tab-content(
                title='Qué tipo de operación es?'
                :beforeChange='checkJournalSelectionStep'
            )
                card-grid(
                    :items='journals'
                    @onSelect='selectBankJournal'
                )
            tab-content(title='Qué detalles necesita?')
                form.payment-details-form(v-if='selectedJournal')
                    .form-item(v-for='(field, index) in selectedJournal.fieldsAllowed' :key='index')
                        label.form-label {{ field.label }}
                        input.form-input(
                            v-if="field.string.typeField === 'char'"
                            v-model='values[field.name]'
                        )
                        date-picker.form-input(
                            v-else-if="field.string.typeField === 'date'"
                            v-model='values[field.name]'
                            input-class='form-input'
                            lang='es'
                            format='DD/MM/YYYY'
                            :editable='false'
                            :not-before="new Date()"
                        )
                        dropdown-searcher.form-input(
                            v-else-if="field.string.typeField === 'many2one' && field.name === 'bank_id'"
                            :items='banks'
                            @onSelect='selectedItem => onSelectInDropdown(field.name, selectedItem.id)'
                        )
                        dropdown-searcher.form-input(
                            v-else-if="field.string.typeField === 'many2one' && field.name === 'cheque_type_id'"
                            :items='chequeTypes'
                            @onSelect='selectedItem => onSelectInDropdown(field.name, selectedItem.id)'
                        )
            tab-content(title='De qué monto es la operación?')
                form.payment-details-form
                    .form-item
                        label.form-label Monto del Pago
                        //- input.form-input(v-model='amount')
                        input-dropdown.form-input(
                            format='number'
                            :value='values.amount'
                            @onChangeValue='onChangeAmount'
                        )
            template(
                slot='footer'
                slot-scope='props'
            )
                div(class='wizard-footer-left')
                    wizard-button(
                        v-if='props.activeTabIndex > 0'
                        @click.native='props.prevTab()'
                        :style='props.fillButtonStyle'
                    ) Volver
                    wizard-button(
                        v-else
                        @click.native='onCancel'
                        :style='props.fillButtonStyle'
                    ) Cancelar
                div(class='wizard-footer-right')
                    wizard-button(
                        v-if='!props.isLastStep'
                        class='wizard-footer-right'
                        :style='props.fillButtonStyle'
                        @click.native='goNext'
                    ) Siguiente
                    wizard-button(
                        v-else
                        class='wizard-footer-right finish-button'
                        :style='props.fillButtonStyle'
                        @click.native='onDone'
                    ) {{ props.isLastStep ? 'Hecho' : 'Siguiente' }}
</template>

<script>
    import { FormWizard, TabContent, WizardButton } from 'vue-form-wizard'
    import DatePicker from 'vue2-datepicker'
    import { CardGrid, DropdownSearcher, InputDropdown } from '../common'

    export default {
        props: {
            initialAmount: {
                type: Number,
                required: true
            },
            journals: {
                type: Array,
                required: true
            },
            hasSelectedJournal: {
                type: Boolean,
                required: true
            },
            selectedJournal: {
                type: Boolean,
                required: true
            },
            banks: {
                type: Array,
                required: true
            },
            chequeTypes: {
                type: Array,
                required: true
            },
            show: {
                type: Boolean,
                required: true
            }
        },
        computed: {
            amount: {
                get() {
                    return this.values.amount
                },
                set(value) {
                    this.values.amount = value
                }
            }
        },
        components: {
            FormWizard,
            TabContent,
            WizardButton,
            DropdownSearcher,
            CardGrid,
            DatePicker,
            InputDropdown
        },
        watch: {
            show(value) {
                this.values = {}
                this.values.amount = this.initialAmount

                if (!value) {
                    this.$modal.hide('payment-bank-modal')
                    return
                }

                this.$modal.show('payment-bank-modal')
            },
            initialAmount(value) {
                this.values.amount = value
            }
        },
        methods: {
            beforeClose(e) {
                if (this.show) {
                    e.stop()
                }
            },
            goNext() {
                if (this.journalStepIncomplete()) {
                    this.$emit('onNotify', 'El tipo de operación seleccionado no está configurado')
                    return
                }

                if (this.fieldsStepIncomplete()) {
                    this.$emit('onNotify', 'Algunos campos requeridos están incompletos')
                    return
                }

                if (this.amountStepIncomplete()) {
                    this.$emit('onNotify', 'El monto no es válido')
                    return
                }

                this.$refs.wizard.nextTab()
            },
            journalStepIncomplete() {
                return this.$refs.wizard.activeTabIndex == 0 && !this.selectedJournal || !this.selectedJournal.fieldsAllowed.length
            },
            fieldsStepIncomplete() {
                let completed = false;

                for (let field of this.selectedJournal.fieldsAllowed) {
                    if (field.string.required) {
                        completed = !!this.values[field.name]
                    }
                }

                return this.$refs.wizard.activeTabIndex == 1 && !completed
            },
            amountStepIncomplete() {
                return false
            },
            selectBankJournal(journal) {
                this.$emit('onSelectBankJounal', journal.id)
            },
            onSelectInDropdown(fieldName, selectedId) {
                this.values[fieldName] = selectedId
            },
            onChangeAmount(value) {
                this.values.amount = value
            },
            onDone() {
                this.$emit('onDone', this.values)
            },
            onCancel() {
                this.$emit('onCancel')
            }
        },
        data() {
            return {
                values: {}
            }
        }
    }
</script>

<style lang="sass">
    .payment-bank-modal
        padding: 0 !important
        &::before
            content: ''
            display: block
            position: absolute
            background-size: cover
            filter: blur(3px)
            z-index: -1
        .wizard-tab-content
            padding-bottom: 50px !important
            .wizard-tab-container
                justify-content: center !important
                align-items: center !important
                .payment-details-form
                    width: 100%
                    .form-input
                        color: #4c4c4c
</style>