sfp_vue_franchisee_ginastica_cerebro/src/pages/students/components/AddEditStudentDialog.vue

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

      <q-form ref="formRef" @submit="onOKClick">
        <q-card-section class="q-pt-none">
          <div class="text-subtitle2 q-mb-sm">Dados do Aluno</div>

          <div class="row q-col-gutter-sm">
            <DefaultInput
              v-model="form.name"
              label="Nome do aluno"
              class="col-md-5 col-12"
            />

            <DefaultInputDatePicker
              v-model="form.birthdate"
              label="Data de Nascimento"
              class="col-md-5 col-12"
            />

            <div class="col-md-2 col-12 flex justify-center items-start">
              <div style="position: relative; display: inline-block">
                <q-avatar size="72px" color="grey-3">
                  <img v-if="avatarPreview" :src="avatarPreview" />
                  <q-icon v-else name="mdi-account" size="42px" color="grey-6" />
                </q-avatar>
                <q-btn
                  round
                  dense
                  color="primary"
                  icon="mdi-camera"
                  size="xs"
                  style="position: absolute; bottom: 0; right: 0"
                  @click="triggerFileInput"
                />
                <input
                  ref="fileInputRef"
                  type="file"
                  accept="image/*"
                  style="display: none"
                  @change="onAvatarChange"
                />
              </div>
            </div>

            <DefaultInput
              v-model="form.cpf"
              label="CPF / CNH"
              class="col-md-6 col-12"
            />

            <DefaultSelect
              v-model="form.gender"
              label="Gênero"
              class="col-md-6 col-12"
              emit-value
              map-options
              :options="genderOptions"
            />

            <DefaultInput
              v-model="form.email"
              label="E-mail"
              class="col-md-6 col-12"
              type="email"
            />

            <DefaultInput
              v-model="form.phone"
              label="Celular com DDD"
              class="col-md-6 col-12"
            />

            <DefaultInput
              v-model="form.cep"
              label="Cep"
              class="col-md-3 col-12"
            />

            <DefaultInput
              v-model="form.address"
              label="Endereço"
              class="col-md-6 col-12"
            />

            <DefaultInput
              v-model="form.address_number"
              label="Numero"
              class="col-md-3 col-12"
            />

            <DefaultInput
              v-model="form.neighborhood"
              label="Bairro"
              class="col-md-6 col-12"
            />

            <DefaultInput
              v-model="form.city_state"
              label="Cidade / Estado"
              class="col-md-6 col-12"
            />

            <DefaultInput
              v-model="form.complement"
              label="Complemento"
              class="col-md-6 col-12"
            />

            <DefaultInput
              v-model="form.payer"
              label="Pagador"
              class="col-md-6 col-12"
            />

            <DefaultSelect
              v-model="form.how_found"
              label="Como nos conheceu?"
              class="col-12"
              emit-value
              map-options
              :options="howFoundOptions"
            />

            <DefaultInput
              v-model="form.notes"
              label="Observações"
              class="col-12"
              type="textarea"
              autogrow
            />
          </div>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn
            outline
            color="primary"
            label="CANCELAR"
            @click="onDialogCancel"
          />
          <q-btn
            color="primary"
            label="CADASTRAR"
            type="submit"
            :loading="loading"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, useTemplateRef } from "vue";
import { useDialogPluginComponent } from "quasar";

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

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

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

const formRef = useTemplateRef("formRef");
const fileInputRef = useTemplateRef("fileInputRef");
const loading = ref(false);
const avatarPreview = ref(null);

const form = ref({
  name: null,
  birthdate: null,
  cpf: null,
  gender: "no_preference",
  email: null,
  phone: null,
  cep: null,
  address: null,
  address_number: null,
  neighborhood: null,
  city_state: null,
  complement: null,
  payer: null,
  how_found: null,
  notes: null,
});

const genderOptions = ref([
  { label: "Prefiro não informar", value: "no_preference" },
  { label: "Masculino", value: "male" },
  { label: "Feminino", value: "female" },
  { label: "Outro", value: "other" },
]);

const howFoundOptions = ref([
  { label: "Indicação", value: "referral" },
  { label: "Redes Sociais", value: "social_media" },
  { label: "Google", value: "google" },
  { label: "Outro", value: "other" },
]);

function triggerFileInput() {
  fileInputRef.value?.click();
}

function onAvatarChange(event) {
  const file = event.target.files[0];
  if (file) {
    avatarPreview.value = URL.createObjectURL(file);
  }
}

async function onOKClick() {
  loading.value = true;
  try {
    console.log("Saving student:", form.value);
    onDialogOK(true);
  } finally {
    loading.value = false;
  }
}
</script>