|
|
@@ -1,209 +0,0 @@
|
|
|
-<template>
|
|
|
- <q-dialog ref="dialogRef" @hide="onDialogHide">
|
|
|
- <q-card class="q-dialog-plugin" style="width: 700px; max-width: 90vw">
|
|
|
- <DefaultDialogHeader :title="title" @close="onDialogCancel" />
|
|
|
- <q-form ref="formRef" @submit="onOKClick">
|
|
|
- <q-card-section class="row q-col-gutter-sm">
|
|
|
- <q-select
|
|
|
- v-model="form.account_type"
|
|
|
- :options="accountTypeOptions"
|
|
|
- :label="$t('provider_payment_methods.account_type')"
|
|
|
- :rules="[inputRules.required]"
|
|
|
- :error="!!serverErrors?.account_type"
|
|
|
- :error-message="serverErrors?.account_type"
|
|
|
- emit-value
|
|
|
- map-options
|
|
|
- class="col-12"
|
|
|
- @update:model-value="onAccountTypeChange"
|
|
|
- />
|
|
|
-
|
|
|
- <template v-if="form.account_type === 'pix'">
|
|
|
- <q-input
|
|
|
- v-model="form.pix_key"
|
|
|
- :label="$t('provider_payment_methods.pix_key')"
|
|
|
- :rules="[inputRules.required]"
|
|
|
- :error="!!serverErrors?.pix_key"
|
|
|
- :error-message="serverErrors?.pix_key"
|
|
|
- class="col-12"
|
|
|
- />
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-if="form.account_type === 'bank_account'">
|
|
|
- <q-select
|
|
|
- v-model="form.bank_account_type"
|
|
|
- :options="bankAccountTypeOptions"
|
|
|
- :label="$t('provider_payment_methods.bank_account_type')"
|
|
|
- :rules="[inputRules.required]"
|
|
|
- :error="!!serverErrors?.bank_account_type"
|
|
|
- :error-message="serverErrors?.bank_account_type"
|
|
|
- emit-value
|
|
|
- map-options
|
|
|
- class="col-12"
|
|
|
- />
|
|
|
-
|
|
|
- <q-input
|
|
|
- v-model="form.agency"
|
|
|
- :label="$t('provider_payment_methods.agency')"
|
|
|
- :rules="[inputRules.required]"
|
|
|
- :error="!!serverErrors?.agency"
|
|
|
- :error-message="serverErrors?.agency"
|
|
|
- class="col-md-6 col-12"
|
|
|
- />
|
|
|
-
|
|
|
- <q-input
|
|
|
- v-model="form.account"
|
|
|
- :label="$t('provider_payment_methods.account')"
|
|
|
- :rules="[inputRules.required]"
|
|
|
- :error="!!serverErrors?.account"
|
|
|
- :error-message="serverErrors?.account"
|
|
|
- class="col-md-4 col-12"
|
|
|
- />
|
|
|
-
|
|
|
- <q-input
|
|
|
- v-model="form.digit"
|
|
|
- :label="$t('provider_payment_methods.digit')"
|
|
|
- :rules="[inputRules.required]"
|
|
|
- :error="!!serverErrors?.digit"
|
|
|
- :error-message="serverErrors?.digit"
|
|
|
- class="col-md-2 col-12"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </q-card-section>
|
|
|
-
|
|
|
- <q-card-actions align="right">
|
|
|
- <q-btn
|
|
|
- flat
|
|
|
- :label="$t('common.actions.cancel')"
|
|
|
- color="negative"
|
|
|
- @click="onDialogCancel"
|
|
|
- />
|
|
|
- <q-btn
|
|
|
- type="submit"
|
|
|
- :label="$t('common.actions.save')"
|
|
|
- :loading="loading"
|
|
|
- color="primary"
|
|
|
- :disable="!hasUpdatedFields"
|
|
|
- />
|
|
|
- </q-card-actions>
|
|
|
- </q-form>
|
|
|
- </q-card>
|
|
|
- </q-dialog>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { ref, computed, onMounted } from 'vue'
|
|
|
-import { useDialogPluginComponent } from 'quasar'
|
|
|
-import { useI18n } from 'vue-i18n'
|
|
|
-import {
|
|
|
- createProviderPaymentMethod,
|
|
|
- updateProviderPaymentMethod
|
|
|
-} from 'src/api/providerPaymentMethod'
|
|
|
-import DefaultDialogHeader from 'src/components/defaults/DefaultDialogHeader.vue'
|
|
|
-import { useInputRules } from "src/composables/useInputRules";
|
|
|
-import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
|
|
|
-import { useSubmitHandler } from "src/composables/useSubmitHandler";
|
|
|
-
|
|
|
-
|
|
|
-const { inputRules } = useInputRules();
|
|
|
-
|
|
|
-const props = defineProps({
|
|
|
- paymentMethod: {
|
|
|
- type: Object,
|
|
|
- default: null
|
|
|
- },
|
|
|
- providerId: {
|
|
|
- type: Number,
|
|
|
- required: true
|
|
|
- },
|
|
|
- title: {
|
|
|
- type: Function,
|
|
|
- default: () => ''
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-const { t } = useI18n()
|
|
|
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
|
|
|
-
|
|
|
-
|
|
|
-defineEmits([...useDialogPluginComponent.emits])
|
|
|
-
|
|
|
-const formRef = ref(null);
|
|
|
-
|
|
|
-const accountTypeOptions = computed(() => [
|
|
|
- {
|
|
|
- label: t('provider_payment_methods.account_types.pix'),
|
|
|
- value: 'pix'
|
|
|
- },
|
|
|
- {
|
|
|
- label: t('provider_payment_methods.account_types.bank_account'),
|
|
|
- value: 'bank_account'
|
|
|
- }
|
|
|
-])
|
|
|
-
|
|
|
-const bankAccountTypeOptions = computed(() => [
|
|
|
- {
|
|
|
- label: t('provider_payment_methods.bank_account_types.checking'),
|
|
|
- value: 'checking'
|
|
|
- },
|
|
|
- {
|
|
|
- label: t('provider_payment_methods.bank_account_types.savings'),
|
|
|
- value: 'savings'
|
|
|
- }
|
|
|
-]);
|
|
|
-
|
|
|
-const { form, getUpdatedFields, hasUpdatedFields } = useFormUpdateTracker({
|
|
|
- provider_id: props.providerId,
|
|
|
- account_type: props.paymentMethod ? props.paymentMethod.account_type : null,
|
|
|
- pix_key: props.paymentMethod ? props.paymentMethod.pix_key : null,
|
|
|
- bank_account_type: props.paymentMethod ? props.paymentMethod.bank_account_type : null,
|
|
|
- agency: props.paymentMethod ? props.paymentMethod.agency : null,
|
|
|
- account: props.paymentMethod ? props.paymentMethod.account : null,
|
|
|
- digit: props.paymentMethod ? props.paymentMethod.digit : null
|
|
|
-});
|
|
|
-
|
|
|
-const {
|
|
|
- loading,
|
|
|
- serverErrors,
|
|
|
- execute: submitForm,
|
|
|
-} = useSubmitHandler({
|
|
|
- onSuccess: () => onDialogOK(true),
|
|
|
- formRef: formRef,
|
|
|
-});
|
|
|
-
|
|
|
-const onAccountTypeChange = () => {
|
|
|
- if (form.account_type === 'pix') {
|
|
|
- form.bank_account_type = null
|
|
|
- form.agency = null
|
|
|
- form.account = null
|
|
|
- form.digit = null
|
|
|
- } else if (form.account_type === 'bank_account') {
|
|
|
- form.pix_key = null
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const onOKClick = async () => {
|
|
|
- const data = {
|
|
|
- ...form,
|
|
|
- };
|
|
|
-
|
|
|
- if(props.paymentMethod) {
|
|
|
- await submitForm(() => updateProviderPaymentMethod(getUpdatedFields.value, props.paymentMethod.id));
|
|
|
- } else {
|
|
|
- await submitForm(() => createProviderPaymentMethod(data));
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- if (props.paymentMethod) {
|
|
|
- form.value = {
|
|
|
- provider_id: props.providerId,
|
|
|
- account_type: props.paymentMethod.account_type,
|
|
|
- pix_key: props.paymentMethod.pix_key,
|
|
|
- bank_account_type: props.paymentMethod.bank_account_type,
|
|
|
- agency: props.paymentMethod.agency,
|
|
|
- account: props.paymentMethod.account,
|
|
|
- digit: props.paymentMethod.digit
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
-</script>
|