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" v-if="equipo.carrito.modulo.modulo">
      <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="disabledS(s.id_status, equipo.status.id_status)"
        >
          {{ 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 conector" v-if="equipo.carrito.modulo.modulo">
      <b-select icon="list-status" v-model="idTipoEntrada" expanded rounded>
        <option disabled :value="null">Tipo de conector</option>
        <option
          v-for="(tipoEntrada, index) in tipoEntradas"
          :key="index"
          :value="tipoEntrada.id_tipo_entrada"
          :disabled="disabledT(tipoEntrada.id_tipo_entrada)"
        >
          {{ tipoEntrada.tipo_entrada }}
        </option>
      </b-select>
    </b-field>

    <b-field label="Software" v-if="equipo.carrito.modulo.modulo">
      <b-select icon="list-status" v-model="idPrograma" expanded rounded>
        <option disabled :value="null">Software</option>
        <option
          v-for="(programa, index) in programas"
          :key="index"
          :value="programa.id_programa"
          :disabled="disabledP(programa.id_programa)"
        >
          {{ programa.programa }}
        </option>
      </b-select>
    </b-field>

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

    <b-button
      class="my-5"
      label="Actualizar Información"
      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
    />
  </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 {
      status: [],
      idStatus: '',
      tipoEntradas: [],
      idTipoEntrada: null,
      programas: [],
      idPrograma: null,

      nuevoNombreEquipo: '',
      motivo: '',
      mostrarMotivo: false,
    }
  },
  methods: {
    mostrarBoton() {
      if (
        (this.idStatus != this.equipo.status.id_status && this.motivo) ||
        this.idTipoEntrada ||
        this.idPrograma ||
        (this.nuevoNombreEquipo && this.nuevoNombreEquipo != this.equipo.equipo)
      )
        return false
      else return true
    },
    disabledS(idStatus, idStatusEquipo) {
      if (idStatus > 1 && idStatus < 4) return true
      if (idStatusEquipo === 2 || idStatusEquipo === 3) return true
      else return false
    },
    disabledT(idTipoEntrada) {
      for (let i = 0; i < this.equipo.tiposEntradas.length; i++) {
        if (
          this.equipo.tiposEntradas[i].tipoEntrada.id_tipo_entrada ===
          idTipoEntrada
        )
          return true
      }
    },
    disabledP(idPrograma) {
      for (let i = 0; i < this.equipo.programas.length; i++) {
        if (this.equipo.programas[i].programa.id_programa === idPrograma)
          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.$getToken.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.$getToken.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.$getToken.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.$getToken.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`, this.$getToken.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`,
          this.$getToken.token()
        )
        .then((res) => {
          this.tipoEntradas = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  watch: {
    equipo() {
      this.obtenerCatalogoProgramas()
      this.obtenerCatalogoTipoEntradas()
      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>