servicio_social_front/components/admin/servicio/vistaServicio.vue

<template>
  <div class="container">
    <div class="mb-5">
      <b-button class="boton is-info" @click="regresar()">
        Regresar
      </b-button>
    </div>
    <div id="Status">
      <p class="is-size-3" v-if="alumno.Status.idStatus == 1">
        Pre Registro
      </p>
      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 2">
        Pre Registro Válidado
      </p>
      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 3">
        Registro
      </p>
      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 4">
        Pre Término
      </p>
      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 5">
        Término
      </p>
      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 6">
          Liberación
      </p>
    </div>
    <div id="programa">
      <br>
      <p class="is-size-4"><b>Datos del programa</b></p><br>
      <p class="is-size-5" v-if="alumno.Programa.programa"><b>Programa: </b><span> {{alumno.Programa.programa}} </span></p>
      <p class="is-size-5" v-if="alumno.Programa.clavePrograma"><b>Clave del programa: </b><span> {{alumno.Programa.clavePrograma}} </span></p>
      <p class="is-size-5" v-if="alumno.Programa.dependencia"><b>Dependecia: </b><span> {{alumno.Programa.dependencia}} </span></p>
      <p class="is-size-5" v-if="alumno.Programa.institucion"><b>Institución: </b><span> {{alumno.Programa.institucion}} </span></p>
      <br>
    </div>
    <div id="datosPersonales">
      <p class="is-size-4" ><b>Datos personales</b></p>
      <p class="is-size-5 mt-5" v-if="alumno.Usuario.nombre"><b>Nombre: </b>{{alumno.Usuario.nombre}}</p>
      <p class="is-size-5 mt-5" v-if="alumno.Usuario.usuario"><b>Número de cuenta: </b>{{alumno.Usuario.usuario}}</p>
      <p class="is-size-5 mt-5" v-if="alumno.Carrera.carrera"><b>Correo: </b>{{alumno.Carrera.carrera}}</p>
      <p class="is-size-5 mt-5" v-if="alumno.correo"><b>Correo: </b>{{alumno.correo}}</p>
      <p class="is-size-5 mt-5" v-if="alumno.creditos"><b>Créditos: </b>{{alumno.creditos}}</p>
      <p class="is-size-5 mt-5" v-if="alumno.fechaInicio"><b>Fecha de inicio: </b>{{ fecha(alumno.fechaInicio)}}</p>
      <p class="is-size-5 mt-5" v-if="alumno.fechaFin"><b>Fecha de fin: </b>{{ fecha(alumno.fechaFin)}}</p>
      <p class="is-size-5 mt-5" v-if="alumno.telefono"><b>Teléfono: </b>{{alumno.telefono}}</p>
      <p class="is-size-5 mt-5" v-if="alumno.direccion"><b>Dirección: </b>{{alumno.direccion}}</p>
      <p class="is-size-5 mt-5" v-if="alumno.fechaNacimiento"><b>Fecha de nacimiento: </b>{{fecha(alumno.fechaNacimiento)}}</p>
    </div>
    <div id="enlaces">
      <b-button class="boton is-info" @click="$router.push('./servicio/modificar')">
        Editar información
      </b-button>
      <br><br>
      <h3 class="is-size-4 mb-5" v-if="alumno.Status.idStatus == 1">Confirmar el pre-registro del alumno</h3>
      <h3 class="is-size-4 mb-5" v-if="alumno.Status.idStatus == 4">Término</h3>
      <h3 class="is-size-4 mb-5" v-if="alumno.Status.idStatus == 5">Validar el término del alumno</h3>
      <div v-if="alumno.cartaAceptacion" class="">
        <span class="spanDoc"><strong>Ver carta de aceptación</strong></span>
        <a :href="linkCartaAceptacion" target="_blank" >
          <b-button class="is-info">
            Ver
          </b-button>
        </a>
        <b-button class="is-danger" v-if="alumno.Status.idStatus == 1 && alumno.cartaAceptacion" @click="mensajeRechBoolean1 = !mensajeRechBoolean1">
          Rechazar
        </b-button>
      </div>
      <b-field label="Razón del rechazo: " v-if="mensajeRechBoolean1">
        <b-input maxlength="500" type="textarea" v-model="mensajeRech1"></b-input>
      </b-field>
      <b-button v-if="mensajeRech1 && mensajeRechBoolean1" class="is-danger" @click="rechazarDialog(1)">
        Rechazar documento
      </b-button>
      <b-button v-else-if="mensajeRechBoolean1" disabled>
        Rechazar documento
      </b-button>
      <div v-if="alumno.cartaTermino" style="margin-top: 10px">
        <span class="spanDoc"><strong>Ver carta de término</strong></span>
        <a :href="linkCartaTermino" target="_blank" >
          <b-button class="is-info">
            Ver
          </b-button>
        </a>
        <b-button class="is-danger" v-if="alumno.Status.idStatus == 5 && alumno.cartaTermino" @click="mensajeRechBoolean2 = !mensajeRechBoolean2">
          Rechazar
        </b-button>
      </div>
      <b-field label="Razón del rechazo: " v-if="mensajeRechBoolean2">
        <b-input maxlength="500" type="textarea" v-model="mensajeRech2"></b-input>
      </b-field>
      <b-button v-if="mensajeRech2 && mensajeRechBoolean2" class="is-danger" @click="rechazarDialog(2)">
        Rechazar documento
      </b-button>
      <b-button v-else-if="mensajeRechBoolean2" disabled>
        Rechazar documento
      </b-button>
      <div v-if="alumno.informeGlobal" style="margin-top: 10px">
        <span class="spanDoc"><strong>Ver informe global de actividades</strong></span>
        <a :href="linkInformeGlobal" target="_blank" >
          <b-button class="is-info">
            Ver
          </b-button>
        </a>
        <b-button class="is-danger" v-if="alumno.Status.idStatus == 5 && alumno.informeGlobal" @click="mensajeRechBoolean3 = !mensajeRechBoolean3">
          Rechazar
        </b-button>
      </div>
      <b-field label="Razón del rechazo: " v-if="mensajeRechBoolean3">
        <b-input maxlength="500" type="textarea" v-model="mensajeRech3"></b-input>
      </b-field>
      <b-button v-if="mensajeRech3 && mensajeRechBoolean3" class="is-danger" @click="rechazarDialog(3)">
        Rechazar documento
      </b-button>
      <b-button v-else-if="mensajeRechBoolean3" disabled>
        Rechazar documento
      </b-button>
      <b-checkbox
        v-if="alumno.Programa.acatlan && alumno.Status.idStatus == 5"
        v-model="alumno.vistoBuenoAcatlan"
        size="is-medium"
        type="is-info"
        >
        Visto bueno Acatlán
      </b-checkbox>
      <p v-if="alumno.cuestionarioP">Cuenta con cuestionario de programa resuelto.</p>
      <p v-if="alumno.cuestionarioA">Cuenta con cuestionario de alumno resuelto.</p>
    </div>
    <div id="acciones" class="my-5">
      <b-button class="is-info" @click="regresar()">
        Regresar
      </b-button>
      <b-button class="is-danger" @click="enviarCancel = !enviarCancel">
        Cancelar
      </b-button>
      <b-button class="is-success" @click="confirmarDialog(1)" v-if="mostrarConfirmar1()">
        Confirmar
      </b-button>
      <b-button class="is-success" @click="confirmarDialog(2)" v-if="mostrarConfirmar2()">
        Confirmar
      </b-button>
      <br><br>
      <b-field label="Razón para cancelar: " v-if="enviarCancel">
        <b-input maxlength="500" type="textarea" v-model="mensajeCancel"></b-input>
      </b-field>
      <b-button v-if="mensajeCancel && enviarCancel" class="is-danger" @click="cancelarDialog()">
        Cancelar servicio
      </b-button>
      <b-button v-else-if="enviarCancel" disabled>
        Cancelar servicio
      </b-button>
      <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="true"></b-loading>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'
export default {
  data () {
    return {
      alumno: {
        Programa: {},
        Usuario: {},
        Carrera: {},
        Status: {}
      },
      idServicio: localStorage.getItem('idServicio'),
      token: {
        headers: {
          token: localStorage.getItem('token')
        }
      },
      linkCartaAceptacion: '',
      linkCartaTermino: '',
      linkInformeGlobal: '',
      enviarMensaje: false,
      enviarCancel: false,
      mensaje: '',
      mensajeCancel: '',
      isLoading: false,
      mensajeRech1: '',
      mensajeRech2: '',
      mensajeRech3: '',
      mensajeRechBoolean1: false,
      mensajeRechBoolean2: false,
      mensajeRechBoolean3: false
    }
  },
  methods: {
    mostrarConfirmar1 () {
      if (this.alumno.Status.idStatus === 1) return true
      return false
    },
    mostrarConfirmar2 () {
      if (this.alumno.Status.idStatus === 5) {
        if (!this.alumno.acatlanContigo) return true
        else if (this.alumno.vistoBueno) return true
      }
      return false
    },
    obtenerRegistro () {
      this.isLoading = true
      return axios
        .get(
          `${process.env.api}/servicio/admin?idServicio=${this.idServicio}`//,
          // this.token
        )
        .then(res => {
          this.isLoading = false
          this.alumno = res.data
          if (this.alumno.cartaAceptacion) { this.linkCartaAceptacion = `https://drive.google.com/file/d/${this.alumno.cartaAceptacion}/view?usp=sharing` }
          if (this.alumno.cartaTermino) { this.linkCartaTermino = `https://drive.google.com/file/d/${this.alumno.cartaTermino}/view?usp=sharing` }
          if (this.alumno.informeGlobal) { this.linkInformeGlobal = `https://drive.google.com/file/d/${this.alumno.informeGlobal}/view?usp=sharing` }
        })
        .catch(err => {
          this.isLoading = false
          console.log(err.response)
        })
    },
    cancelarDialog () {
      this.$buefy.dialog.confirm({
        title: 'Cancelar sevicio',
        message: '¿Seguro(a) que quiere cancelar este servicio?',
        confirmText: 'Cancelar servicio',
        cancelText: 'No',
        type: 'is-danger',
        hasIcon: true,
        onConfirm: () => this.cancelar()
      })
    },
    confirmarDialog (a) {
      this.$buefy.dialog.confirm({
        title: 'Confimar servicio',
        message: '¿Seguro(a) que quiere confirmar este servicio?',
        confirmText: 'Confirmar',
        cancelText: 'Cancelar',
        type: 'is-success',
        hasIcon: true,
        onConfirm: () => {
          switch (a) {
            case 1: this.confirmarRegistro()
              break
            case 2: this.confirmarTermino()
              break
          }
        }
      })
    },
    rechazarDialog (num) {
      const doc = num
      this.$buefy.dialog.confirm({
        title: 'Confimar servicio',
        message: '¿Seguro(a) que quiere rechazar este documento?',
        confirmText: 'Confirmar',
        cancelText: 'Cancelar',
        type: 'is-dnager',
        hasIcon: true,
        onConfirm: () => {
          switch (doc) {
            case 1: this.rechazarCartaAceptacion()
              break
            case 2: this.rechazarCartaTermino()
              break
            case 3: this.rechazarInformeGlobal()
          }
        }
      })
    },
    rechazarCartaAceptacion () {
      this.isLoading = true
      const data = {
        mensaje: this.mensajeRech1,
        idServicio: this.idServicio
      }
      axios
        .put(`${process.env.api}/servicio/rechazar_aceptacion`, data)
        .then(res => {
          this.isLoading = false
          this.$buefy.dialog.alert('Se ha rechazado el documento')
        })
        .catch(err => {
          this.isLoading = false
          this.error()
          console.log(err)
        })
    },
    rechazarCartaTermino () {
      this.isLoading = true
      const data = {
        mensaje: this.mensajeRech2,
        idServicio: this.idServicio
      }
      axios
        .put(`${process.env.api}/servicio/rechazar_termino`, data)
        .then(res => {
          this.isLoading = false
          this.$buefy.dialog.alert('Se ha rechazado el documento')
        })
        .catch(err => {
          this.isLoading = false
          this.error()
          console.log(err)
        })
    },
    rechazarInformeGlobal () {
      this.isLoading = true
      const data = {
        mensaje: this.mensajeRech3,
        idServicio: this.idServicio
      }
      axios
        .put(`${process.env.api}/servicio/rechazar_informe`, data)
        .then(res => {
          this.isLoading = false
          this.$buefy.dialog.alert('Se ha rechazado el documento')
        })
        .catch(err => {
          this.isLoading = false
          this.error()
          console.log(err)
        })
    },
    cancelar () {
      this.isLoading = true
      const data = {
        idServicio: this.idServicio,
        mensajeCalce: this.mensajeCancel
      }
      axios
        .put(`${process.env.api}/servicio/cancelar`, data)
        .then(res => {
          this.isLoading = false
          this.$buefy.dialog.alert('El servicio ha sido cancelado con éxito')
          localStorage.removeItem('idServicio')
          this.$router.push('./')
        })
        .catch(err => {
          this.isLoading = false
          this.error()
          console.log(err)
        })
    },
    fecha (date) {
      const fecha = moment(date.substr(0, 10))
      return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
    },
    confirmarRegistro () {
      this.isLoading = true
      const data = {
        idServicio: this.idServicio
      }
      axios
        .put(`${process.env.api}/servicio/registro`, data)
        .then(res => {
          this.isLoading = false
          this.$buefy.dialog.alert('El servicio ha sido aprovado')
          localStorage.removeItem('idServicio')
          this.$router.push('/admin')
        })
        .catch(e => {
          this.isLoading = false
          console.log(e)
          this.error()
        })
    },
    confirmarLiberacion () {
      this.isLoading = true
      const data = {
        idServicio: this.idServicio
      }
      if (this.alumno.vistoBueno) {
        data.vistoBueno = this.alumno.vistoBueno
      }
      axios
        .put(`${process.env.api}/servicio/liberacion`, data)
        .then(res => {
          this.isLoading = false
          this.$buefy.dialog.alert('El servicio ha sido liberado')
          localStorage.removeItem('idServicio')
          this.$router.push('/admin')
        })
        .catch(e => {
          this.isLoading = false
          console.log(e)
          this.error()
        })
    },
    error () {
      this.$buefy.dialog.alert({
        title: 'Error',
        message: 'Ha ocurrido un <b>error</b>, inténtalo de nuevo más tarde',
        type: 'is-danger',
        hasIcon: true,
        icon: 'times-circle',
        iconPack: 'fa',
        ariaRole: 'alertdialog',
        ariaModal: true
      })
    },
    regresar () {
      this.$router.push('./')
      localStorage.removeItem('idServicio')
    }
  },
  async created () {
    await this.obtenerRegistro()
  }/* ,
  beforeCreate () {
    if (!localStorage.getItem('idServicio')) { this.$router.push('./admin') }
  } */
}
</script>

<style scoped>
.boton {
  margin-top: 2%;
}
.is-size-5{
  margin-bottom: 10px;
}
.link-f {
  font-size: 27px !important;
}
.link {
  display: flex;
  justify-content: flex-start;
  font-size: 20px;
  margin-top: 10px;
}
.spanDoc {
  margin-right: 5%;
}

</style>