foto de parfil mas arriba
This commit is contained in:
@@ -1,112 +1,110 @@
|
||||
<template>
|
||||
<div class="flex q-ma-md">
|
||||
<q-btn
|
||||
round
|
||||
color="deep-orange"
|
||||
icon="keyboard_return"
|
||||
@click="
|
||||
cargarDatos();
|
||||
$router.push('/');
|
||||
"
|
||||
/>
|
||||
<div class="row q-ma-md">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
round
|
||||
color="deep-orange"
|
||||
icon="keyboard_return"
|
||||
@click="
|
||||
cargarDatos();
|
||||
$router.push('/');
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 flex flex-center">
|
||||
<q-avatar size="96px">
|
||||
<img
|
||||
:src="
|
||||
listaStore.pb.authStore.model.avatar.length > 0
|
||||
? listaStore.pb.getFileUrl(
|
||||
listaStore.pb.authStore.model,
|
||||
listaStore.pb.authStore.model.avatar
|
||||
)
|
||||
: `https://cdn.quasar.dev/img/avatar.png`
|
||||
"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
<q-page class="flex flex-center">
|
||||
<div class="column q-gutter-sm">
|
||||
<div class="row flex-center q-pb-md q-mb-md">
|
||||
<q-avatar size="96px">
|
||||
<img
|
||||
:src="
|
||||
listaStore.pb.authStore.model.avatar.length > 0
|
||||
? listaStore.pb.getFileUrl(
|
||||
listaStore.pb.authStore.model,
|
||||
listaStore.pb.authStore.model.avatar
|
||||
)
|
||||
: `https://cdn.quasar.dev/img/avatar.png`
|
||||
"
|
||||
/>
|
||||
</q-avatar>
|
||||
<div class="flex flex-center">
|
||||
<q-form class="q-gutter-md" @click.once="recibeDatos()">
|
||||
<div class="row" style="max-width: 198px">
|
||||
<q-file
|
||||
class="full-width q-mb-md"
|
||||
outlined
|
||||
v-model="imagen"
|
||||
label="Avatar"
|
||||
/>
|
||||
</div>
|
||||
<q-form class="q-gutter-md" @click.once="recibeDatos()">
|
||||
<div class="row" style="max-width: 198px">
|
||||
<q-file
|
||||
class="full-width q-mb-md"
|
||||
outlined
|
||||
v-model="imagen"
|
||||
label="Avatar"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="name"
|
||||
label="Name"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val != null && val.length >= 3) || 'Mínimo 3 caracteres',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="username"
|
||||
label="Username"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val != null && val.length >= 3) || 'Mínimo 3 caracteres',
|
||||
(val) => comprobarUsername || 'Ya existe en la BD',
|
||||
(val) => /^[A-Z0-9]+$/i.test(val) || 'Sólo letras o números',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="listaStore.pb.authStore.model.email"
|
||||
label="email"
|
||||
disable
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
<div class="row q-mt-md q-mx-auto">
|
||||
<div class="col">
|
||||
<q-btn flat color="primary" label="Cancelar" @click="cargarDatos()" />
|
||||
<div class="row">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="name"
|
||||
label="Name"
|
||||
:rules="[
|
||||
(val) => (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="username"
|
||||
label="Username"
|
||||
:rules="[
|
||||
(val) => (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
|
||||
(val) => comprobarUsername || 'Ya existe en la BD',
|
||||
(val) => /^[A-Z0-9]+$/i.test(val) || 'Sólo letras o números',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="listaStore.pb.authStore.model.email"
|
||||
label="email"
|
||||
disable
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
<div class="row q-mt-md q-mx-auto">
|
||||
<div class="col">
|
||||
<q-btn flat color="primary" label="Cancelar" @click="cargarDatos()" />
|
||||
<q-btn
|
||||
flat
|
||||
:disable="btnSaveDisable()"
|
||||
color="secondary"
|
||||
label="Guardar"
|
||||
@click="alertSave = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-dialog v-model="alertSave" persistent>
|
||||
<q-card>
|
||||
<q-card-section class="row items-center">
|
||||
<q-avatar icon="warning" color="warning" text-color="white" />
|
||||
<span class="q-ml-sm">Está seguro de guardar los datos?</span>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
flat
|
||||
:disable="btnSaveDisable()"
|
||||
color="secondary"
|
||||
label="Guardar"
|
||||
@click="alertSave = true"
|
||||
label="No"
|
||||
color="negative"
|
||||
v-close-popup
|
||||
@click="cargarDatos()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-dialog v-model="alertSave" persistent>
|
||||
<q-card>
|
||||
<q-card-section class="row items-center">
|
||||
<q-avatar icon="warning" color="warning" text-color="white" />
|
||||
<span class="q-ml-sm">Está seguro de guardar los datos?</span>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
flat
|
||||
label="No"
|
||||
color="negative"
|
||||
v-close-popup
|
||||
@click="cargarDatos()"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
label="Guardar"
|
||||
color="accent"
|
||||
v-close-popup
|
||||
@click="updateUser()"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</q-page>
|
||||
<q-btn
|
||||
flat
|
||||
label="Guardar"
|
||||
color="accent"
|
||||
v-close-popup
|
||||
@click="updateUser()"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
Reference in New Issue
Block a user