sfp_vue_franchisor_ginastica_cerebro/src/components/financial/AddEditTreasuryAccountDialog.vue

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card
      class="q-dialog-plugin overflow-hidden"
      style="width: 600px; max-width: 90vw"
    >
      <DefaultDialogHeader :title="title" @close="onDialogCancel" />
      <DefaultForm ref="formRef" @submit="onOKClick">
        <q-scroll-area class="form-dialog-scroll-area">
          <q-card-section class="row q-col-gutter-sm q-pt-none">
            <DefaultInput
              v-model="form.name"
              v-model:error="validationErrors.name"
              :error-message="validationErrors.name"
              :rules="[inputRules.required]"
              label="Nome da conta"
              placeholder="Ex. Conta Principal"
              class="col-12"
            />

            <DefaultInput
              v-model="form.bank_name"
              v-model:error="validationErrors.bank_name"
              :error-message="validationErrors.bank_name"
              :rules="[inputRules.required]"
              label="Banco"
              placeholder="Ex. Banco do Brasil"
              class="col-12 col-md-6"
            />

            <DefaultSelect
              v-model="form.bank_type_account"
              v-model:error="validationErrors.bank_type_account"
              :error-message="validationErrors.bank_type_account"
              :options="accountTypeOptions"
              emit-value
              map-options
              label="Tipo de conta"
              placeholder="Selecione"
              class="col-12 col-md-6"
            />

            <DefaultInput
              v-model="form.bank_agency"
              v-model:error="validationErrors.bank_agency"
              :error-message="validationErrors.bank_agency"
              label="Agência"
              placeholder="Ex. 1234"
              class="col-12 col-md-6"
            />

            <DefaultInput
              v-model="form.bank_account"
              v-model:error="validationErrors.bank_account"
              :error-message="validationErrors.bank_account"
              label="Conta"
              placeholder="Ex. 56789-0"
              class="col-12 col-md-6"
            />
          </q-card-section>
        </q-scroll-area>

        <q-card-actions>
          <q-space />
          <q-btn
            outline
            color="negative"
            label="Cancelar"
            @click="onDialogCancel"
          />
          <q-btn
            color="primary"
            :label="isEdit ? 'Salvar' : 'Cadastrar'"
            type="submit"
            :loading="loading"
          />
        </q-card-actions>
      </DefaultForm>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import { useDialogPluginComponent } from "quasar";
import { useInputRules } from "src/composables/useInputRules";
import { useSubmitHandler } from "src/composables/useSubmitHandler";
import {
  createTreasuryAccount,
  updateTreasuryAccount,
} from "src/api/treasury_account";

import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";
import DefaultSelect from "src/components/defaults/DefaultSelect.vue";

defineEmits([...useDialogPluginComponent.emits]);

const { account } = defineProps({
  account: {
    type: Object,
    default: null,
  },
});

const { inputRules } = useInputRules();

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();

const formRef = ref(null);
const isEdit = computed(() => !!account);
const title = computed(() => (isEdit.value ? "Editar Banco" : "Novo Banco"));

const accountTypeOptions = [
  { label: "Conta Corrente", value: "corrente" },
  { label: "Conta Poupança", value: "poupanca" },
];

const form = ref({
  name: account?.name ?? "",
  bank_name: account?.bank_name ?? "",
  bank_agency: account?.bank_agency ?? "",
  bank_account: account?.bank_account ?? "",
  bank_type_account: account?.bank_type_account ?? null,
});

const {
  loading,
  validationErrors,
  execute: submitForm,
} = useSubmitHandler({
  onSuccess: (response) => onDialogOK(response),
  formRef,
});

const onOKClick = async () => {
  const payload = {
    name: form.value.name,
    treasury_type: "bank",
    bank_name: form.value.bank_name,
    bank_agency: form.value.bank_agency || null,
    bank_account: form.value.bank_account || null,
    bank_type_account: form.value.bank_type_account || null,
  };

  if (isEdit.value) {
    await submitForm(() => updateTreasuryAccount(account.id, payload));
  } else {
    await submitForm(() => createTreasuryAccount(payload));
  }
};
</script>