|
|
@@ -1,54 +1,34 @@
|
|
|
<template>
|
|
|
<q-form ref="formRef" @submit="onSave">
|
|
|
+ <div class="flex justify-center q-mb-md">
|
|
|
+ <AvatarImageComponent ref="avatarRef" @update:file="onAvatarChange" />
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="row q-col-gutter-sm">
|
|
|
<DefaultInput
|
|
|
v-model="form.name"
|
|
|
- label="Nome do aluno"
|
|
|
- class="col-md-5 col-12"
|
|
|
+ label="Nome do Aluno"
|
|
|
+ class="col-6"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
/>
|
|
|
|
|
|
<DefaultInputDatePicker
|
|
|
v-model="form.birthdate"
|
|
|
label="Data de Nascimento"
|
|
|
- class="col-md-5 col-12"
|
|
|
+ class="col-6"
|
|
|
/>
|
|
|
|
|
|
- <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"
|
|
|
+ class="col-6"
|
|
|
:mask="masks.Brasil.cpf"
|
|
|
/>
|
|
|
|
|
|
<DefaultSelect
|
|
|
v-model="form.gender"
|
|
|
label="Gênero"
|
|
|
- class="col-md-6 col-12"
|
|
|
+ class="col-6"
|
|
|
emit-value
|
|
|
map-options
|
|
|
:options="genderOptions"
|
|
|
@@ -57,61 +37,69 @@
|
|
|
<DefaultInput
|
|
|
v-model="form.email"
|
|
|
label="E-mail"
|
|
|
- class="col-md-6 col-12"
|
|
|
+ class="col-6"
|
|
|
+ type="email"
|
|
|
/>
|
|
|
|
|
|
<DefaultInput
|
|
|
v-model="form.phone"
|
|
|
label="Celular com DDD"
|
|
|
- class="col-md-6 col-12"
|
|
|
+ class="col-6"
|
|
|
:mask="masks.Brasil.celular"
|
|
|
/>
|
|
|
|
|
|
<DefaultCepInput
|
|
|
v-model="form.cep"
|
|
|
- class="col-md-3 col-12"
|
|
|
+ class="col-4"
|
|
|
@rua="(v) => (form.address = v)"
|
|
|
@bairro="(v) => (form.neighborhood = v)"
|
|
|
@uf="(v) => stateSelectRef?.selectStateByCode(v)"
|
|
|
+ @cidade="(v) => citySelectRef?.selectCityByName(v)"
|
|
|
/>
|
|
|
|
|
|
<DefaultInput
|
|
|
v-model="form.address"
|
|
|
label="Endereço"
|
|
|
- class="col-md-6 col-12"
|
|
|
+ class="col-5"
|
|
|
/>
|
|
|
|
|
|
<DefaultInput
|
|
|
v-model="form.address_number"
|
|
|
label="Número"
|
|
|
- class="col-md-3 col-12"
|
|
|
+ class="col-3"
|
|
|
/>
|
|
|
|
|
|
<DefaultInput
|
|
|
v-model="form.neighborhood"
|
|
|
label="Bairro"
|
|
|
- class="col-md-6 col-12"
|
|
|
+ class="col-4"
|
|
|
+ />
|
|
|
+
|
|
|
+ <CitySelect
|
|
|
+ ref="citySelectRef"
|
|
|
+ v-model="selectedCity"
|
|
|
+ label="Cidade"
|
|
|
+ class="col-4"
|
|
|
+ :state="selectedState"
|
|
|
/>
|
|
|
|
|
|
<StateSelect
|
|
|
ref="stateSelectRef"
|
|
|
- v-model="form.state"
|
|
|
+ v-model="selectedState"
|
|
|
label="Estado"
|
|
|
- class="col-md-6 col-12"
|
|
|
- outlined
|
|
|
- :initial-id="props.student.state_id ?? null"
|
|
|
+ class="col-4"
|
|
|
/>
|
|
|
|
|
|
<DefaultInput
|
|
|
v-model="form.complement"
|
|
|
label="Complemento"
|
|
|
- class="col-md-6 col-12"
|
|
|
+ class="col-6"
|
|
|
/>
|
|
|
|
|
|
<DefaultInput
|
|
|
v-model="form.payer"
|
|
|
label="Pagador"
|
|
|
- class="col-md-6 col-12"
|
|
|
+ class="col-6"
|
|
|
/>
|
|
|
|
|
|
<DefaultSelect
|
|
|
@@ -128,24 +116,34 @@
|
|
|
label="Observações"
|
|
|
class="col-12"
|
|
|
type="textarea"
|
|
|
+ :input-style="{ minHeight: '120px' }"
|
|
|
autogrow
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div class="row justify-end q-mt-md" style="gap: 8px">
|
|
|
- <q-btn color="primary" label="Salvar" no-caps type="submit" :loading="loading" />
|
|
|
+ <q-btn
|
|
|
+ color="primary"
|
|
|
+ label="Salvar"
|
|
|
+ no-caps
|
|
|
+ type="submit"
|
|
|
+ :loading="loading"
|
|
|
+ />
|
|
|
</div>
|
|
|
</q-form>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, useTemplateRef } from "vue";
|
|
|
+import { ref, watch, onMounted, useTemplateRef } from "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";
|
|
|
import DefaultCepInput from "src/components/defaults/DefaultCepInput.vue";
|
|
|
+import AvatarImageComponent from "src/components/shared/AvatarImageComponent.vue";
|
|
|
import StateSelect from "src/components/selects/StateSelect.vue";
|
|
|
+import CitySelect from "src/components/selects/CitySelect.vue";
|
|
|
import { useSubmitHandler } from "src/composables/useSubmitHandler";
|
|
|
+import { useInputRules } from "src/composables/useInputRules";
|
|
|
import { updateStudent } from "src/api/student";
|
|
|
import masks from "src/helpers/masks";
|
|
|
import { formatDateYMDtoDMY, formatDateDMYtoYMD } from "src/helpers/utils";
|
|
|
@@ -159,12 +157,16 @@ const props = defineProps({
|
|
|
|
|
|
const emit = defineEmits(["saved"]);
|
|
|
|
|
|
+const { inputRules } = useInputRules();
|
|
|
+
|
|
|
const formRef = useTemplateRef("formRef");
|
|
|
-const fileInputRef = useTemplateRef("fileInputRef");
|
|
|
+const avatarRef = useTemplateRef("avatarRef");
|
|
|
const stateSelectRef = useTemplateRef("stateSelectRef");
|
|
|
+const citySelectRef = useTemplateRef("citySelectRef");
|
|
|
|
|
|
-const avatarPreview = ref(props.student.photo_url ?? null);
|
|
|
const avatarFile = ref(null);
|
|
|
+const selectedState = ref(null);
|
|
|
+const selectedCity = ref(null);
|
|
|
|
|
|
const genderOptions = [
|
|
|
{ label: "Prefiro não informar", value: "no_preference" },
|
|
|
@@ -182,7 +184,9 @@ const howFoundOptions = [
|
|
|
|
|
|
const form = ref({
|
|
|
name: props.student.name ?? null,
|
|
|
- birthdate: props.student.birth_date ? formatDateYMDtoDMY(props.student.birth_date) : null,
|
|
|
+ birthdate: props.student.birth_date
|
|
|
+ ? formatDateYMDtoDMY(props.student.birth_date)
|
|
|
+ : null,
|
|
|
cpf: props.student.document_number ?? null,
|
|
|
gender: props.student.gender ?? "no_preference",
|
|
|
email: props.student.email ?? null,
|
|
|
@@ -191,28 +195,41 @@ const form = ref({
|
|
|
address: props.student.street ?? null,
|
|
|
address_number: props.student.address_number ?? null,
|
|
|
neighborhood: props.student.neighborhood ?? null,
|
|
|
- state: null,
|
|
|
+ state_id: props.student.state_id ?? null,
|
|
|
+ city_id: props.student.city_id ?? null,
|
|
|
complement: props.student.complement ?? null,
|
|
|
payer: props.student.payer_name ?? null,
|
|
|
how_found: props.student.how_did_you_know_us ?? null,
|
|
|
notes: props.student.notes ?? null,
|
|
|
});
|
|
|
|
|
|
+watch(selectedState, (state) => {
|
|
|
+ form.value.state_id = state?.value ?? null;
|
|
|
+});
|
|
|
+
|
|
|
+watch(selectedCity, (city) => {
|
|
|
+ form.value.city_id = city?.value ?? null;
|
|
|
+});
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ if (props.student.photo_url) {
|
|
|
+ avatarRef.value?.setImageUrl(props.student.photo_url);
|
|
|
+ }
|
|
|
+ if (props.student.state_id) {
|
|
|
+ stateSelectRef.value?.selectStateById(props.student.state_id);
|
|
|
+ }
|
|
|
+ if (props.student.city_id) {
|
|
|
+ citySelectRef.value?.selectCityById(props.student.city_id);
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
const { loading, execute } = useSubmitHandler({
|
|
|
formRef,
|
|
|
onSuccess: () => emit("saved"),
|
|
|
});
|
|
|
|
|
|
-function triggerFileInput() {
|
|
|
- fileInputRef.value?.click();
|
|
|
-}
|
|
|
-
|
|
|
-function onAvatarChange(event) {
|
|
|
- const file = event.target.files[0];
|
|
|
- if (file) {
|
|
|
- avatarFile.value = file;
|
|
|
- avatarPreview.value = URL.createObjectURL(file);
|
|
|
- }
|
|
|
+function onAvatarChange(file) {
|
|
|
+ avatarFile.value = file;
|
|
|
}
|
|
|
|
|
|
function buildPayload() {
|
|
|
@@ -230,8 +247,11 @@ function buildPayload() {
|
|
|
formData.append("street", form.value.address ?? "");
|
|
|
formData.append("address_number", form.value.address_number ?? "");
|
|
|
formData.append("neighborhood", form.value.neighborhood ?? "");
|
|
|
- if (form.value.state?.value) {
|
|
|
- formData.append("state_id", form.value.state.value);
|
|
|
+ if (form.value.state_id) {
|
|
|
+ formData.append("state_id", form.value.state_id);
|
|
|
+ }
|
|
|
+ if (form.value.city_id) {
|
|
|
+ formData.append("city_id", form.value.city_id);
|
|
|
}
|
|
|
formData.append("complement", form.value.complement ?? "");
|
|
|
formData.append("payer_name", form.value.payer ?? "");
|
|
|
@@ -243,7 +263,9 @@ function buildPayload() {
|
|
|
|
|
|
return {
|
|
|
name: form.value.name,
|
|
|
- birth_date: form.value.birthdate ? formatDateDMYtoYMD(form.value.birthdate) : null,
|
|
|
+ birth_date: form.value.birthdate
|
|
|
+ ? formatDateDMYtoYMD(form.value.birthdate)
|
|
|
+ : null,
|
|
|
document_number: form.value.cpf,
|
|
|
gender: form.value.gender,
|
|
|
email: form.value.email || null,
|
|
|
@@ -252,7 +274,8 @@ function buildPayload() {
|
|
|
street: form.value.address,
|
|
|
address_number: form.value.address_number,
|
|
|
neighborhood: form.value.neighborhood,
|
|
|
- state_id: form.value.state?.value ?? null,
|
|
|
+ state_id: form.value.state_id,
|
|
|
+ city_id: form.value.city_id,
|
|
|
complement: form.value.complement,
|
|
|
payer_name: form.value.payer,
|
|
|
how_did_you_know_us: form.value.how_found,
|
ebagabee