pcpuma_unam_operador/components/operador/usuarios/InfoUsuario.vue
2022-07-15 16:12:49 -05:00

88 lines
2.0 KiB
Vue

<template>
<div class="column is-8">
<h3 class="is-size-4 mb-4">Datos del Usuario</h3>
<div class="columns">
<div class="column">
<b-field label="Número de Cuenta">
<p class="input">{{ usuario.usuario }}</p>
</b-field>
<b-field label="Nombre">
<p class="input">{{ usuario.nombre }}</p>
</b-field>
<b-field label="Correo">
<p class="input">{{ usuario.correo }}</p>
</b-field>
<b-field label="Teléfono">
<p class="input">{{ usuario.telefono }}</p>
</b-field>
</div>
<div class="column">
<b-field label="Institucion">
<b-tag
class="ml-2"
type="is-info"
size="is-large"
v-for="(institucion, index) in institucionesArray"
:key="index"
>{{ institucion.institucionCarrera.institucion.institucion }}</b-tag
>
</b-field>
<b-field label="Carrera">
<b-tag
class="ml-2"
type="is-info"
size="is-large"
v-for="(institucion, index) in institucionesArray"
:key="index"
>{{ institucion.institucionCarrera.carrera.carrera }}</b-tag
>
</b-field>
<b-field label="Multa">
<p class="input is-size-6 tag is-danger" v-if="usuario.multa">
Tiene Multa
</p>
<p
v-if="usuario.id_usuario && !usuario.multa"
class="input is-size-6 tag is-success"
>
No Tiene Multa
</p>
</b-field>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
usuario: { type: Object, required: true },
},
data() {
return {
institucionesArray: [],
}
},
methods: {
instituciones() {
for (let i = 0; i < this.usuario.instituciones.length; i++) {
this.institucionesArray[i] = this.usuario.instituciones[i]
}
},
},
watch: {
usuario() {
this.instituciones()
},
},
}
</script>