servicio_social_front/components/admin/InformacionServicio.vue

<template>
  <div class="mb-5">
    <div class="mb-5">
      <h4 class="is-size-4 pb-2">Datos del programa</h4>

      <b-field label="Institución:">
        <p class="input">{{ alumno.Programa.institucion }}</p>
      </b-field>

      <b-field label="Dependencia:">
        <p class="input">{{ alumno.Programa.dependencia }}</p>
      </b-field>

      <b-field label="Programa:">
        <p class="input">{{ alumno.Programa.programa }}</p>
      </b-field>

      <b-field label="Clave de programa:">
        <p class="input">{{ alumno.Programa.clavePrograma }}</p>
      </b-field>

      <b-field label="Responsable:">
        <p class="input">
          {{ alumno.Programa.Usuario.nombre }}
        </p>
      </b-field>

      <b-field label="Correo:">
        <p class="input">
          {{ alumno.Programa.Usuario.usuario }}
        </p>
      </b-field>
    </div>

    <div class="mb-5">
      <h4 class="is-size-4 pb-2">Datos personales</h4>

      <b-field label="Numero de cuenta:">
        <p class="input">{{ alumno.Usuario.usuario }}</p>
      </b-field>

      <b-field label="Nombre:">
        <p class="input">{{ alumno.Usuario.nombre }}</p>
      </b-field>

      <b-field label="Fecha de nacimiento:" v-if="alumno.fechaNacimiento">
        <p class="input">{{ fecha(alumno.fechaNacimiento) }}</p>
      </b-field>

      <b-field label="Carrera:">
        <p class="input">{{ alumno.Carrera.carrera }}</p>
      </b-field>

      <b-field label="Créditos">
        <p class="input">
          {{ alumno.creditos ? parseInt(alumno.creditos) : '' }}
          <span v-if="alumno.creditos">%</span>
        </p>
      </b-field>

      <b-field label="Teléfono:" v-if="alumno.telefono">
        <p class="input">{{ alumno.telefono }}</p>
      </b-field>

      <b-field label="Dirección:" v-if="alumno.direccion">
        <p class="input">{{ alumno.direccion }}</p>
      </b-field>

      <b-field label="Email:">
        <p class="input">{{ alumno.correo }}</p>
      </b-field>

      <b-field label="Programa Interno:" v-if="alumno.programaInterno">
        <p class="input">{{ alumno.programaInterno }}</p>
      </b-field>

      <b-field label="Profesor:" v-if="alumno.profesor">
        <p class="input">{{ alumno.profesor }}</p>
      </b-field>

      <b-field label="Fecha de registro:" v-if="alumno.createdAt">
        <p class="input">{{ fecha(alumno.createdAt) }}</p>
      </b-field>

      <b-field label="Fecha de inicio:">
        <p class="input">{{ fecha(alumno.fechaInicio) }}</p>
      </b-field>

      <b-field label="Fecha de termino:">
        <p class="input">{{ fecha(alumno.fechaFin) }}</p>
      </b-field>

      <b-field label="Fecha de liberación:" v-if="alumno.fechaLiberacion">
        <p class="input">{{ fecha(alumno.fechaLiberacion) }}</p>
      </b-field>
    </div>

    <b-field>
      <b-button
        type="is-info"
        @click="editar()"
        :disabled="
          alumno.Status.idStatus === 6 || alumno.Status.idStatus === 10
        "
      >
        Editar información
      </b-button>
    </b-field>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  props: {
    alumno: { type: Object, required: true },
  },
  methods: {
    fecha(date) {
      if (date) {
        const fecha = moment(date)

        return `${fecha.date() < 10 ? '0' + fecha.date() : fecha.date()}/${
          fecha.month() < 9 ? '0' + (fecha.month() + 1) : fecha.month() + 1
        }/${fecha.year()}`
      }
      return ''
    },
    editar() {
      this.$router.push('/admin/servicio/editar')
    },
  },
}
</script>

<style scoped></style>