sfp_vue_franchisor_ginastica_cerebro/src/components/financial/SettleAccountReceivableDialog.vue

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

      <DefaultForm ref="formRef" @submit.prevent="onSubmit">
        <q-scroll-area class="form-dialog-scroll-area">
          <q-card-section class="row q-col-gutter-md q-pt-none">
            <div class="col-12 text-body2">
              {{ receivable.history }}
            </div>

            <DefaultInputDatePicker
              v-model="form.payment_date"
              v-model:untreated-date="form.payment_date_iso"
              v-model:error="validationErrors.payment_date"
              class="col-12"
              label="Data do pagamento"
              lazy-rules="ondemand"
              :error-message="validationErrors.payment_date"
              :rules="[inputRules.required]"
            />
          </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="Confirmar"
            no-caps
            type="submit"
            unelevated
            :loading="loading"
          />
        </q-card-actions>
      </DefaultForm>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import { settleFranchiseeReceivable } from "src/api/franchisee_account_receive";
import { useDialogPluginComponent } from "quasar";
import { useForm } from "src/composables/useForm";
import { useInputRules } from "src/composables/useInputRules";
import { useSubmitHandler } from "src/composables/useSubmitHandler";

import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import DefaultForm from "src/components/defaults/DefaultForm.vue";
import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";

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

const { receivable } = defineProps({
  receivable: {
    required: true,
    type: Object,
  },
});

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

const { inputRules } = useInputRules();

const formRef = ref(null);

const today = new Date();

const paymentDateIso = [
  today.getFullYear(),
  String(today.getMonth() + 1).padStart(2, "0"),
  String(today.getDate()).padStart(2, "0"),
].join("-");

const { form } = useForm({
  payment_date: today.toLocaleDateString("pt-BR"),
  payment_date_iso: paymentDateIso,
});

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

const onSubmit = () =>
  submitForm(() =>
    settleFranchiseeReceivable(receivable.id, {
      payment_date: form.payment_date_iso,
    }),
  );
</script>