|
@@ -1,230 +0,0 @@
|
|
|
-<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 aluno:", form.value);
|
|
|
|
|
- onDialogOK(true);
|
|
|
|
|
- } finally {
|
|
|
|
|
- loading.value = false;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-</script>
|
|
|