pcpuma_unam_operador/components/operador/AdminEquipo.vue

<template>
  <div class="column is-4">
    <h3 class="is-size-4 mb-4">Administrador</h3>

    <b-field label="Status">
      <b-select icon="list-status" v-model="idStatus" expanded rounded>
        <option
          v-for="(s, index) in status"
          :key="index"
          :value="s.id_status"
          v-show="equipo.id_equipo"
          :disabled="s.id_status < 4 || equipo.entregaInmediata"
        >
          {{ s.status }}
        </option>
      </b-select>
    </b-field>

    <b-field label="Motivo" v-if="mostrarMotivo">
      <b-input v-model="motivo" type="textarea" maxlength="150" />
    </b-field>

    <b-field label="Tipo de entrada">
      <b-select icon="list-status" v-model="idTipoEntrada" expanded rounded>
        <option
          v-for="(tipoEntrada, index) in tipoEntradas"
          :key="index"
          :value="tipoEntrada.tipoEntrada.id_tipo_entrada"
        >
          {{ tipoEntrada.tipoEntrada.tipo_entrada }}
        </option>
      </b-select>
    </b-field>

    <b-field label="Programa">
      <b-select icon="list-status" v-model="idPrograma" expanded rounded>
        <option
          v-for="(programa, index) in programas"
          :key="index"
          :value="programa.programa.id_programa"
        >
          {{ programa.programa.programa }}
        </option>
      </b-select>
    </b-field>

    <b-field
      label="Cambiar nombre del equipo"
      v-if="equipo.carrito.tipoCarrito.id_tipo_carrito"
    >
      <b-input
        icon="list-status"
        v-model="nuevoNombreEquipo"
        placeholder="Nuevo nombre del equipo"
        rounded
      />
    </b-field>

    <b-button
      class="my-5"
      type="is-link"
      v-show="equipo.id_equipo"
      @click="
        $alertsGenericos.imprimirWarning(
          $buefy,
          `¿Estas segur@ que deseas cambiar esta información?`,
          updateInformacion
        )
      "
      :disabled="mostrarBoton()"
      rounded
      expanded
    >
      Actualizar Información
    </b-button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    operador: { type: Object, required: true },
    equipo: { type: Object, required: true },
    updateIsLoading: { type: Function, required: true },
    buscar: { type: Function, required: true },
  },
  data() {
    return {
      idStatus: '',
      idPrograma: '',
      idCarrito: '',
      idTipoEntrada: '',
      status: [],
      programas: [],
      carritos: [],
      tipoEntradas: [],

      motivo: '',
      mostrarMotivo: false,

      nuevoNombreEquipo: '',
    }
  },
  methods: {
    mostrarBoton() {
      // if (
      //   this.idStatus != this.equipo.status.id_status ||
      //   (this.equipo.programa &&
      //     this.idPrograma != this.equipo.programa.id_programa) ||
      //   this.idCarrito != this.equipo.carrito.id_carrito
      // )
      //   return false
      // return true

      if (
        this.idStatus != this.equipo.status.id_status ||
        this.nuevoNombreEquipo != this.equipo.equipo
      )
        return false
      return true
    },
    updateInformacion() {
      if (
        this.idStatus != this.equipo.status.id_status ||
        this.nuevoNombreEquipo != ''
      ) {
        this.updateEquipo()
        this.motivo = ''
      }
      for (let i = 0; i < this.programas.length; i++) {
        if (this.idPrograma) {
          if (
            this.equipo.programas.length === 0 ||
            this.idPrograma != this.equipo.programas[i].programa.id_programa
          ) {
            this.updateProgramas()
            this.idPrograma = ''
          }
        }
      }
      for (let i = 0; i < this.tipoEntradas.length; i++) {
        if (this.idTipoEntrada != '') {
          if (
            this.equipo.tiposEntradas.length === 0 ||
            this.idTipoEntrada !=
              this.equipo.tiposEntradas[i].tipoEntrada.id_tipo_entrada
          ) {
            this.updateTipoEntradas()
            this.idTipoEntrada = ''
          }
        }
      }
    },
    updateEquipo() {
      const data = {
        id_equipo: this.equipo.id_equipo,
        equipo: this.nuevoNombreEquipo
          ? this.nuevoNombreEquipo
          : this.equipo.equpo,
        id_operador: this.operador.id_operador,
        id_status:
          this.idStatus != this.equipo.status.id_status ? this.idStatus : null,
        motivo: this.motivo,
        idPrograma: this.idPrograma ? this.idPrograma : null,
      }
      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/equipo`, data, this.operador.token)
        .then((res) => {
          this.buscar()
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    updateProgramas() {
      const data = {
        id_equipo: this.equipo.id_equipo,
        id_programa: this.idPrograma,
      }
      this.updateIsLoading(true)
      axios
        .post(`${process.env.api}/equipo-programa`, data, this.operador.token)
        .then((res) => {
          this.buscar()
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    updateTipoEntradas() {
      const data = {
        id_equipo: this.equipo.id_equipo,
        id_tipo_entrada: this.idTipoEntrada,
      }
      this.updateIsLoading(true)
      axios
        .post(
          `${process.env.api}/equipo-tipo-entrada`,
          data,
          this.operador.token
        )
        .then((res) => {
          this.buscar()
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoStatus() {
      axios
        .get(`${process.env.api}/status`, this.operador.token)
        .then((res) => {
          this.status = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoProgramas() {
      axios
        .get(
          `${process.env.api}/institucion-programa/programas-mostrar?id_institucion=${this.operador.institucion.id_institucion}`,
          this.operador.token
        )
        .then((res) => {
          this.programas = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoTipoEntradas() {
      axios
        .get(
          `${process.env.api}/institucion-tipo-entrada/tipos-entrada-mostrar?id_institucion=${this.operador.institucion.id_institucion}`,
          this.operador.token
        )
        .then((res) => {
          this.tipoEntradas = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoCarritos() {
      axios
        .get(
          `${process.env.api}/carrito/carritos?pagina=1&id_institucion=${this.operador.institucion.id_institucion}&id_tipo_carrito=${this.equipo.carrito.tipoCarrito.id_tipo_carrito}`,
          this.operador.token
        )
        .then((res) => {
          this.carritos = res.data[0]
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  watch: {
    equipo() {
      this.obtenerCatalogoProgramas()
      this.obtenerCatalogoTipoEntradas()
      this.obtenerCatalogoCarritos()
      this.idStatus = this.equipo.status.id_status
      this.idCarrito = this.equipo.carrito.id_carrito
      if (this.equipo.programa)
        this.idPrograma = this.equipo.programa.id_programa
    },
    idStatus(value) {
      if (value != this.equipo.status.id_status) this.mostrarMotivo = true
    },
  },
  created() {
    if (this.operador.tipoUsuario.id_tipo_usuario === 3) {
      this.obtenerCatalogoStatus()
      this.idStatus = this.equipo.status.id_status
    }
  },
}
</script>

<style></style>