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.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">
      <div class="confimar mb-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()"
        >
          Confirmar
        </b-button>
      </div>
      <div class="demas">
        <b-button class="is-info" @click="regresar()">
          Regresar
        </b-button>
        <b-button 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>
      <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");
          this.$router.push("./");
        })
        .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");
          this.$router.push("./");
        })
        .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");
          this.$router.push("./");
        })
        .catch((err) => {
          this.isLoading = false;
          this.error();
          console.log(err);
        });
    },
    cancelar() {
      this.isLoading = true;
      const data = {
        idServicio: this.idServicio,
        mensaje: 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>