servicio_social_front/components/admin/servicio/vistaServicio.vue

<template>
  <div class="container">
    <div class="mb-5">
      <BotonRegresar
        path="/admin"
        :deleteFromLocalStorage="['idServicio', 'idStatus']"
      />
    </div>
    <TituloServicio :status="alumno.Status.idStatus" />
    <DatosPrograma :programa="alumno.Programa" />
    <DatosPersonales :alumno="alumno" />
    <div id="enlaces">
      <b-button class="boton is-info" @click="editar()" v-if="mostrarEditar()">
        Editar información
      </b-button>
      <br /><br />
      <TituloStatus :status="alumno.Status.idStatus" />
      <div v-if="alumno.cartaAceptacion">
        <Documento
          :title="'Ver carta de aceptación'"
          :link="linkCartaAceptacion"
          :doc="alumno.cartaAceptacion"
          :idDoc="1"
          :status="alumno.Status.idStatus"
        />
      </div>
      <div v-if="alumno.cartaTermino" style="margin-top: 10px">
        <Documento
          :title="'Ver carta de término'"
          :link="linkCartaTermino"
          :doc="alumno.cartaTermino"
          :idDoc="2"
          :status="alumno.Status.idStatus"
        />
      </div>
      <div v-if="alumno.informeGlobal" style="margin-top: 10px">
        <Documento
          :title="'Ver informe global de actividades'"
          :link="linkInformeGlobal"
          :doc="alumno.InformeGlobal"
          :idDoc="3"
          :status="alumno.Status.idStatus"
        />
      </div>
      <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.idCuestionarioPrograma" class="my-4">
        <strong> Cuenta con cuestionario de programa resuelto. </strong>
      </p>
      <p v-if="alumno.idCuestionarioAlumno" class="my-4">
        <strong> Cuenta con cuestionario de alumno resuelto. </strong>
      </p>
    </div>
    <div id="acciones" class="my-5">
      <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() && mostrarVistoBueno()"
      >
        Confirmar
      </b-button>
      <b-button
        v-if="mostrarCancelar()"
        class="is-danger"
        @click="enviarCancel = !enviarCancel"
      >
        Cancelar
      </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>
      <div>
        <BotonRegresar
          path="/admin"
          :deleteFromLocalStorage="['idServicio', 'idStatus']"
        />
      </div>
      <b-loading
        :is-full-page="true"
        v-model="isLoading"
        :can-cancel="false"
      ></b-loading>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import TituloServicio from './tituloServicio'
import TituloStatus from './tituloStatus'
import DatosPrograma from './datosPrograma'
import DatosPersonales from './datosPersonales'
import Documento from './documento'
import BotonRegresar from '../../botonRegresar'

export default {
  components: {
    TituloServicio,
    DatosPrograma,
    DatosPersonales,
    TituloStatus,
    Documento,
    BotonRegresar,
  },
  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,
    }
  },
  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
    },
    mostrarCancelar() {
      if (
        this.alumno.Status.idStatus === 10 ||
        this.alumno.Status.idStatus === 6
      )
        return false
      return true
    },
    mostrarEditar() {
      if (this.alumno.Status.idStatus === 10) return false
      return true
    },
    mostrarVistoBueno() {
      if (!this.alumno.Programa.acatlan) return true
      if (this.alumno.vistoBuenoAcatlan) return true
      return false
    },
    editar() {
      localStorage.setItem('idStatus', this.alumno.Status.idStatus)
      this.$router.push('servicio/modificar')
    },
    obtenerRegistro() {
      this.isLoading = true
      return axios
        .get(
          `${process.env.api}/servicio/admin?idServicio=${this.idServicio}`,
          this.token
        )
        .then((res) => {
          this.alumno = res.data
          this.alumno.creditos = Number(res.data.creditos)
          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.error(err.response.data.message)
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    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.confirmarLiberacion()
              break
          }
        },
      })
    },
    cancelar() {
      this.isLoading = true
      const data = { idServicio: this.idServicio, mensaje: this.mensajeCancel }
      axios
        .put(`${process.env.api}/servicio/cancelar`, data, this.token)
        .then((res) => {
          this.$buefy.dialog.alert('El servicio ha sido cancelado con éxito')
          localStorage.removeItem('idServicio')
          this.$router.push('/admin')
        })
        .catch((err) => {
          this.error(err.response.data.message)
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    confirmarRegistro() {
      this.isLoading = true
      const data = { idServicio: this.idServicio }
      axios
        .put(`${process.env.api}/servicio/registro`, data, this.token)
        .then((res) => {
          this.$buefy.dialog.alert('El servicio ha sido aprobado')
          localStorage.removeItem('idServicio')
          this.$router.push('/admin')
        })
        .catch((err) => {
          this.error(err.response.data.message)
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    confirmarLiberacion() {
      this.isLoading = true
      const data = { idServicio: this.idServicio }
      if (this.alumno.vistoBuenoAcatlan)
        data.vistoBuenoAcatlan = this.alumno.vistoBuenoAcatlan
      axios
        .put(`${process.env.api}/servicio/liberacion`, data, this.token)
        .then((res) => {
          this.$buefy.dialog.alert('El servicio ha sido liberado')
          localStorage.removeItem('idServicio')
          this.$router.push('/admin')
        })
        .catch((err) => {
          this.error(err.response.data.message)
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    error(msj) {
      let salir = false
      switch (msj) {
        case 'invalid signature':
          msj = 'Tu token no es valido, inicia sesión de nuevo.'
          salir = true
          break
        case 'jwt expired':
          msj = 'Tu sesión ha expirado, inicia sesión de nuevo.'
          salir = true
          break
        case 'jwt malformed':
          msj = 'No se encontro tu token, inicia sesión de nuevo.'
          salir = true
          break
        case 'No hay token':
          msj = 'Ocurrio un error al enviar tu token, inicia sesión de nuevo.'
          salir = true
          break
      }

      this.$buefy.dialog.alert({
        title: 'Error',
        message: msj,
        type: 'is-danger',
        hasIcon: true,
        icon: 'alert-circle',
        iconPack: 'mdi',
        ariaRole: 'alertdialog',
        ariaModal: true,
      })
      if (salir == true) {
        localStorage.clear()
        this.$router.push(`/`)
      }
    },
  },
  created() {
    this.obtenerRegistro()
  },
}
</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>