Skip to content

Alba María Álvarez / front_recipes

Go to a project
Commit 8577e200 by Alba María Álvarez
Options

feat(UserDetail): aplicada funcionalidad de visualizar los datos del usuario

parent 95461755
Inline Side-by-side
Showing with 24 additions and 20 deletions
src/views/UserDetail.vue
...@@ -18,22 +18,22 @@ ...@@ -18,22 +18,22 @@
<div class="row g-3 mb-4"> <div class="row g-3 mb-4">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<p class="mb-1 text-muted"><strong>Nombre</strong></p> <p class="mb-1 text-muted"><strong>Nombre</strong></p>
<p v-if="mode === 'view'" class="fw-bold">{{ user.name }}</p> <p v-if="mode === 'view'" class="fw-bold">{{ userStore.user?.name }}</p>
<input v-else type="text" class="form-control" v-model="editableUser.name"> <input v-else type="text" class="form-control" v-model="editableUser.name">
</div> </div>
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<p class="mb-1 text-muted"><strong>Apellidos</strong></p> <p class="mb-1 text-muted"><strong>Apellidos</strong></p>
<p v-if="mode === 'view'" class="fw-bold">{{ user.surname }}</p> <p v-if="mode === 'view'" class="fw-bold">{{ userStore.user?.surname }}</p>
<input v-else type="text" class="form-control" v-model="editableUser.surname"> <input v-else type="text" class="form-control" v-model="editableUser.surname">
</div> </div>
<div class="col-12"> <div class="col-12">
<p class="mb-1 text-muted"><strong>Email</strong></p> <p class="mb-1 text-muted"><strong>Email</strong></p>
<p v-if="mode === 'view'" class="fw-bold">{{ user.email }}</p> <p v-if="mode === 'view'" class="fw-bold">{{ userStore.user?.email }}</p>
<input v-else type="email" class="form-control" v-model="editableUser.email"> <input v-else type="email" class="form-control" v-model="editableUser.email">
</div> </div>
<div class="col-12"> <div class="col-12">
<p class="mb-1 text-muted"><strong>Rol</strong></p> <p class="mb-1 text-muted"><strong>Rol</strong></p>
<p class="fw-bold">{{ user.role }}</p> <p class="fw-bold">{{ authStore.user?.role }}</p>
</div> </div>
</div> </div>
...@@ -98,31 +98,35 @@ ...@@ -98,31 +98,35 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { useAuthStore } from '@/stores/authStore';
import { useUserStore } from '@/stores/userStore';
import { onMounted, ref } from 'vue';
const userStore = useUserStore();
const authStore = useAuthStore();
const mode = ref('view'); const mode = ref('view');
// Datos del usuario // Datos del usuario
const user = ref({ onMounted(async () => {
name: "Alba María", if (!userStore.user) {
surname: "Álvarez Fernández", await userStore.readUser();
email: "amaf0001@red.ujaen.es", }
role: "Usuario"
}); });
// Usamos una copia para editar los datos // Usamos una copia para editar los datos
const editableUser = ref({ ...user.value }); //const editableUser = ref({ ...user.value });
// Acciones // Acciones
const editData = () => { // const editData = () => {
mode.value = 'edit'; // mode.value = 'edit';
editableUser.value = { ...user.value }; // editableUser.value = { ...user.value };
}; // };
const saveChanges = () => { // const saveChanges = () => {
user.value = { ...editableUser.value }; // user.value = { ...editableUser.value };
mode.value = 'view'; // mode.value = 'view';
}; // };
const cancelEdit = () => { const cancelEdit = () => {
mode.value = 'view'; mode.value = 'view';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment