BankAccountSave.vue

<template>
    <div>
        <ValidationObserver ref="form">
            <form>
                <TwCard
                    shadow
                    rounded
                    no-body
                    elevated="lg"
                >
                    <div class="h-32 px-4 py-2">
                        <div class="grid grid-cols-2 gap-2">
                            <div class="col-span-2">
                                <ValidationProvider
                                    v-slot="{ errors }"
                                    name="Nome"
                                    rules="required"
                                >
                                    <TwFormInput
                                        v-model="bank.name"
                                        size="sm"
                                        placeholder="Nome do banco"
                                    />
                                    <TwHelpText
                                        v-show="!!errors[0]"
                                        theme="red"
                                    >
                                        {{ errors[0] }}
                                    </TwHelpText>
                                </ValidationProvider>
                            </div>

                            <div class="relative rounded-md shadow-sm">
                                <ValidationProvider
                                    v-slot="{ errors }"
                                    name="Tipo de Contas"
                                    rules="required"
                                >
                                    <select
                                        id="grid-state"
                                        v-model="bankTypeSelectedId"
                                        class="block px-4 py-2 text-sm leading-5 text-cool-gray-700 hover:bg-gray-100 hover:text-cool-gray-900 focus:outline-none focus:bg-gray-100 focus:text-cool-gray-900"
                                    >
                                        <option
                                            disabled
                                            value=""
                                        >
                                            Qual tipo
                                        </option>
                                        <option
                                            v-for="bankTypes in types"
                                            :key="bankTypes.id"
                                            :value="bankTypes.id"
                                        >
                                            {{ bankTypes.name }}
                                        </option>
                                    </select>
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                        <svg
                                            class="fill-current h-4 w-4"
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20"
                                        ><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
                                    </div>
                                    <TwHelpText
                                        v-show="!!errors[0]"
                                        theme="red"
                                    >
                                        {{ errors[0] }}
                                    </TwHelpText>
                                </ValidationProvider>
                            </div>

                            <ValidationProvider
                                v-slot="{ errors }"
                                name="Saldo Inicial"
                                rules="required"
                            >
                                <TwFormInput
                                    v-model="bank.start_value"
                                    size="sm"
                                    placeholder="Saldo Inicial"
                                />
                                <TwHelpText
                                    v-show="!!errors[0]"
                                    theme="red"
                                >
                                    {{ errors[0] }}
                                </TwHelpText>
                            </ValidationProvider>

                            <div class="col-span-2 flex items-center justify-between">
                                <div class="flex items-center">
                                    <!--<FontAwesomeIcon
                                            :icon="['far', 'square']"
                                            class="text-cool-gray-300 mr-2"
                                        />-->
                                    <ValidationProvider
                                        v-slot="{ errors }"
                                        name="Conta principal"
                                        rules=""
                                    >
                                        <input
                                            v-model="bank.is_primary"
                                            class="text-cool-gray-300 mr-2"
                                            type="checkbox"
                                        >
                                        <span
                                            class="text-xs "
                                            type="checkbox"
                                        >Conta principal</span>

                                        <TwHelpText
                                            v-show="!!errors[0]"
                                            theme="red"
                                        >
                                            {{ errors[0] }}
                                        </TwHelpText>
                                    </ValidationProvider>
                                </div>

                                <div>
                                    <TwButton
                                        :is-busy="spinner.save_bank"
                                        theme="blue"
                                        size="xs"
                                        type="submit"
                                        @click="emitData"
                                    >
                                        Salvar
                                    </TwButton>
                                </div>
                            </div>
                        </div>
                    </div>
                </TwCard>
            </form>
        </ValidationObserver>
    </div>
</template>

<script>
    import { mapActions } from 'vuex';
    import { ValidationProvider, ValidationObserver } from 'vee-validate';
    import TwCard from '@/TwComponents/TwCard';
    import TwButton from '@/TwComponents/TwButton';
    import TwFormInput from '@/TwComponents/TwFormInput';
    import TwHelpText from '@/TwComponents/TwHelpText';

    export default {
        name: 'BankAccountSave',
        components: {
            ValidationProvider,
            ValidationObserver,
            TwCard,
            TwButton,
            TwFormInput,
            TwHelpText,
        },

        props: {
            types: {
                type: Array,
                default() {
                    return [];
                },
            },
        },

        data() {
            return {
                bankTypeSelectedId: '',
                bank: {
                    name: '',
                    is_primary: false,
                    start_value: '',
                    company_id: '',
                    bank_account_type_id: '',
                },
                spinner: {
                    save_bank: false,
                },
            };
        },
        computed: {},

        methdos: {
            ...mapActions('companyBanckAccount', {
                $_saveBank: 'savebankAccount',
            }),

            async emitData() {
                const validator = await this.$refs.form.validate();
                if (!validator) {
                    return;
                }
                this.$emit('change', validator);

                this.spinner.save_bank = true;
            },
        },
    };
</script>