sfp_vue_franchisor_ginastica_cerebro/src/components/financial/AddTreasuryLaunchDialog.vue

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card
      class="q-dialog-plugin overflow-hidden"
      style="width: 520px; max-width: 90vw"
    >
      <DefaultDialogHeader :title="title" @close="onDialogCancel" />

      <DefaultForm ref="formRef" @submit="onOKClick">
        <q-scroll-area ref="scrollAreaRef" class="form-dialog-scroll-area">
          <q-card-section class="row q-col-gutter-md q-pt-none">
            <DefaultSelect
              v-model="form.transaction_type"
              v-model:error="validationErrors.transaction_type"
              class="col-12"
              emit-value
              label="Tipo"
              map-options
              placeholder="Entrada ou Saída"
              :error-message="validationErrors.transaction_type"
              :options="typeOptions"
              :rules="[inputRules.required]"
            />

            <DefaultInput
              v-model="form.description"
              v-model:error="validationErrors.description"
              class="col-12"
              label="Descrição"
              placeholder="Descreva a movimentação"
              :error-message="validationErrors.description"
              :rules="[inputRules.required]"
            />

            <DefaultSelect
              v-model="form.financial_plan_account_id"
              v-model:error="validationErrors.financial_plan_account_id"
              class="col-12"
              emit-value
              input-debounce="0"
              label="Plano de Contas"
              map-options
              use-input
              :error-message="validationErrors.financial_plan_account_id"
              :loading="loadingPlanAccounts"
              :options="planAccountOptions"
              @filter="filterPlanAccounts"
            >
              <template #no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    {{ $t("http.errors.no_records_found") }}
                  </q-item-section>
                </q-item>
              </template>
            </DefaultSelect>

            <DefaultCurrencyInput
              v-model="form.amount"
              v-model:error="validationErrors.amount"
              class="col-12"
              label="Valor"
              :error-message="validationErrors.amount"
              :rules="[inputRules.requiredNumber, inputRules.minValue(0.01)]"
            />
          </q-card-section>
        </q-scroll-area>

        <q-separator />

        <q-card-actions align="right" class="q-pa-md q-gutter-sm">
          <q-btn
            color="negative"
            label="Cancelar"
            no-caps
            outline
            @click="onDialogCancel"
          />

          <q-btn
            color="primary"
            label="Salvar"
            no-caps
            type="submit"
            unelevated
            :loading="loading"
          />
        </q-card-actions>
      </DefaultForm>
    </q-card>
  </q-dialog>
</template>

<script setup>
import {
  createTreasuryLaunch,
  updateTreasuryLaunch,
} from "src/api/treasury_launch";

import { getFinancialPlanAccountsForSelect } from "src/api/financial_plan_account";
import { onMounted, ref } from "vue";
import { useDialogPluginComponent } from "quasar";
import { useForm } from "src/composables/useForm";
import { useInputRules } from "src/composables/useInputRules";
import { useScroll } from "src/composables/useScroll";
import { useSubmitHandler } from "src/composables/useSubmitHandler";

import DefaultCurrencyInput from "src/components/defaults/DefaultCurrencyInput.vue";
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, launch } = defineProps({
  account: {
    required: true,
    type: Object,
  },
  launch: {
    default: null,
    type: Object,
  },
});

const { inputRules } = useInputRules();

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

const formRef = ref(null);
const scrollAreaRef = ref(null);

const { scrollToComponent } = useScroll();

const { form, getUpdatedFields } = useForm(
  {
    amount: launch?.amount ?? 0,
    description: launch?.description ?? "",
    financial_plan_account_id: launch?.financial_plan_account_id ?? null,
    transaction_type: launch?.transaction_type ?? null,
  },
  { containerRef: scrollAreaRef },
);

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

const allPlanAccounts = ref([]);
const loadingPlanAccounts = ref(false);
const planAccountOptions = ref([]);

const isEdit = !!launch;
const title = `${isEdit ? "Editar" : "Nova"} movimentação — ${account.name}`;

const typeOptions = [
  { label: "Entrada", value: "entrada" },
  { label: "Saída", value: "saida" },
];

const filterPlanAccounts = (needle, update) => {
  update(() => {
    const term = needle.toLowerCase();

    planAccountOptions.value = term
      ? allPlanAccounts.value.filter((option) =>
          option.label.toLowerCase().includes(term),
        )
      : allPlanAccounts.value;
  });
};

const loadPlanAccounts = async () => {
  loadingPlanAccounts.value = true;

  try {
    const accounts = await getFinancialPlanAccountsForSelect();

    allPlanAccounts.value = accounts.map((account) => ({
      label: `${account.code} - ${account.description}`,
      value: account.id,
    }));

    planAccountOptions.value = allPlanAccounts.value;
  } finally {
    loadingPlanAccounts.value = false;
  }
};

const onOKClick = async () => {
  const payload = {
    account_id: account.id,
    amount: form.amount,
    description: form.description,
    financial_plan_account_id: form.financial_plan_account_id,
    transaction_type: form.transaction_type,
  };

  await submitForm(() =>
    isEdit
      ? updateTreasuryLaunch(launch.id, getUpdatedFields.value)
      : createTreasuryLaunch(payload),
  );
};

onMounted(loadPlanAccounts);
</script>