sfp_vue_franchisor_ginastica_cerebro/src/pages/clientes/components/AddEditClientesDialog.vue

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin" style="width: 1000px">
      <DefaultDialogHeader :title="props.title" @close="onDialogCancel" />
      <q-card-section>
        <q-form ref="formRef" class="row q-col-gutter-sm">
          <q-input
            v-model="form.nome_fantasia"
            label="Nome Fantasia"
            hint="Obrigatório"
            :rules="[inputRules.required]"
            outlined
            class="col-12 q-input-border"
            dense
            bg-color="white"
            hide-bottom-space
          />
          <q-input
            v-model="form.razao_social"
            label="Razão Social"
            outlined
            class="col-12 q-input-border q-mb-sm"
            dense
            bg-color="white"
            hide-bottom-space
          />
          <q-input
            v-model="form.cnpj"
            label="CNPJ"
            hint="Obrigatório"
            outlined
            class="col-4 q-input-border q"
            :mask="masks.Brasil.docEmpresa"
            dense
            bg-color="white"
            hide-bottom-space
          />
          <q-input
            v-model="form.inscricao_estadual"
            label="Inscrição Estadual"
            mask="########################"
            outlined
            class="col-4 q-input-border q-mb-sm"
            dense
            bg-color="white"
            hide-bottom-space
          />
          <q-input
            v-model="form.inscricao_municipal"
            label="Inscrição Municipal"
            mask="########################"
            outlined
            class="col-4 q-input-border q-mb-sm"
            dense
            bg-color="white"
            hide-bottom-space
          />
          <q-input
            v-model="form.email"
            label="Email"
            :rules="[inputRules.email]"
            outlined
            class="col-12 q-input-border q-mb-sm"
            dense
            bg-color="white"
            hide-bottom-space
          />

          <q-input
            v-model="form.observacoes"
            dense
            outlined
            label="Observações"
            class="col-12 q-input-border q-mb-sm"
            bg-color="white"
            hide-bottom-space
            autogrow
            type="textarea"
          />
        </q-form>
      </q-card-section>

      <q-card-section>
        <div class="row items-center">
          <!-- Input com Toggle e textos Ativo/Inativo -->
          <div v-if="props.clienteId" class="col-auto row items-center">
            <span class="q-mr-sm text-body-2">Inativo</span>
            <q-toggle
              v-model="form.status"
              color="primary"
              size="sm"
              true-value="ativo"
              false-value="inativo"
              dense
              outlined
            />
            <span class="q-ml-sm text-body-2">Ativo</span>
          </div>

          <div class="col">
            <q-card-actions align="right" class="flex justify-end">
              <q-btn
                outline
                padding="10px 20px"
                label="Cancelar"
                color="dark"
                @click="onDialogCancel"
              />
              <q-btn
                padding="10px 20px"
                color="primary"
                label="Salvar"
                @click="onOKClick"
              />
            </q-card-actions>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { inputRules } from "src/helpers/utils";
import { useDialogPluginComponent } from "quasar";

import masks from "src/helpers/masks.js";
import DefaultDialogHeader from "src/components/geral/DefaultDialogHeader.vue";
import { getCliente } from "src/api/clientes";
// import { getClientesInfos } from "src/api/clientes";

defineEmits([
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emits,
]);

const props = defineProps({
  cliente: {
    type: Object,
    default: null,
  },
  clienteId: {
    type: Number,
    default: null,
  },
  title: {
    type: String,
    default: "Novo Usuário",
  },
});

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

const formRef = ref(null);

const form = ref({
  nome_fantasia: null,
  razao_social: null,
  cnpj: null,
  inscricao_estadual: null,
  inscricao_municipal: null,
  email: null,
  observacoes: null,
  status: "ativo",
});

const onOKClick = () => {
  if (!formRef.value.validate()) {
    return;
  }

  onDialogOK(form.value);
};

const fetchClientes = async () => {
  const response = await getCliente(props.clienteId);
  form.value = response;
};

onMounted(async () => {
  if (props.clienteId) {
    fetchClientes();
  }
});
</script>