Skip to content

Instantly share code, notes, and snippets.

@elinardo10
Created April 8, 2020 01:36
Show Gist options
  • Save elinardo10/8acc17aa78fd371b8d3aa0b8dec12fc0 to your computer and use it in GitHub Desktop.
Save elinardo10/8acc17aa78fd371b8d3aa0b8dec12fc0 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment