Fix profile image handling and data flow
The commit improves image handling by removing the separate imagenVista ref, using data.image directly, and properly refreshing session data after image upload. Also adds v-if guard for data availability.
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<v-container
|
||||
v-if="data"
|
||||
class="fill-height d-flex align-center justify-center text-center"
|
||||
>
|
||||
<div class="full-height flex-column mr-5">
|
||||
@@ -8,7 +9,7 @@
|
||||
:width="200"
|
||||
aspect-ratio="16/9"
|
||||
cover
|
||||
:src="imagenVista"
|
||||
:src="data.image"
|
||||
:alt="data.name"
|
||||
></v-img>
|
||||
</v-avatar>
|
||||
@@ -29,7 +30,7 @@
|
||||
</div>
|
||||
<div class="full-height flex-column">
|
||||
<h3>Último login:</h3>
|
||||
<p>{{ data?.last_login ? data.last_login : "Nunca" }}</p>
|
||||
<p>{{ data.last_login ? data.last_login : "Nunca" }}</p>
|
||||
<h3>Username:</h3>
|
||||
<p>{{ data.username }}</p>
|
||||
<h3>Nombre:</h3>
|
||||
@@ -51,7 +52,7 @@
|
||||
definePageMeta({
|
||||
auth: true,
|
||||
});
|
||||
const { data, token } = useAuth();
|
||||
const { data, token, getSession } = useAuth();
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useSystemStore } from "~/stores/system";
|
||||
import { useListasStore } from "~/stores/listas";
|
||||
@@ -59,7 +60,6 @@ const listasStore = useListasStore();
|
||||
const systemStore = useSystemStore();
|
||||
const { handleFileInput, files } = useFileStorage();
|
||||
let imagen = ref([]);
|
||||
let imagenVista = ref("");
|
||||
|
||||
const uploadImage = async () => {
|
||||
const url = "http://" + systemStore.url_backend + "/auth/users/me/";
|
||||
@@ -71,21 +71,21 @@ const uploadImage = async () => {
|
||||
formData.append("last_name", data.value.last_name);
|
||||
formData.append("image", imagen.value ? imagen.value : null);
|
||||
|
||||
await $fetch(url, {
|
||||
const response = await $fetch(url, {
|
||||
headers: {
|
||||
Authorization: `${token.value}`,
|
||||
},
|
||||
method: "PUT",
|
||||
body: formData,
|
||||
})
|
||||
.then((response) => {
|
||||
imagenVista.value = response.image;
|
||||
files.value.pop();
|
||||
imagen.value = null;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
});
|
||||
if (response) {
|
||||
//imagenVista.value = response.image;
|
||||
files.value.pop();
|
||||
imagen.value = null;
|
||||
await getSession();
|
||||
} else {
|
||||
console.error(response);
|
||||
}
|
||||
};
|
||||
|
||||
const validateFileType = () => {
|
||||
@@ -117,10 +117,5 @@ const openImageDialog = () => {
|
||||
|
||||
onMounted(async () => {
|
||||
await listasStore.getData();
|
||||
if (data) {
|
||||
console.log(data.value.image);
|
||||
|
||||
imagenVista.value = data.value.image;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user