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, i) in status"
          :key="i"
          :value="s.idStatus"
          v-show="equipo.idEquipo"
          :disabled="s.idStatus < 4 || equipo.entregaInmediata"
        >
          {{ s.status }}
        </option>
      </b-select>
    </b-field>

    <b-field
      label="Programa"
      v-if="equipo.Carrito.TipoCarrito.idTipoCarrito === 2"
    >
      <b-select icon="list-status" v-model="idPrograma" expanded rounded>
        <option
          v-for="(p, i) in programa"
          :key="i"
          :value="p.idPrograma"
          v-show="equipo.Programa"
        >
          {{ p.programa }}
        </option>
      </b-select>
    </b-field>

    <b-field label="Carrito" v-if="operador.idTipoUsuario === 1">
      <b-select icon="list-status" v-model="idCarrito" expanded rounded>
        <option
          v-for="(c, i) in carritos"
          :key="i"
          :value="c.idCarrito"
          v-show="equipo.idEquipo"
        >
          {{ c.carrito }}
        </option>
      </b-select>
    </b-field>

    <b-button
      class="my-5"
      type="is-link"
      v-show="equipo.idEquipo"
      @click="statusPrograma()"
      :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 },
    imprimirError: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    buscar: { type: Function, required: true },
  },
  data() {
    return {
      idStatus: '',
      idPrograma: '',
      idCarrito: '',
      status: [],
      programa: [],
      carritos: [],
    }
  },
  methods: {
    statusPrograma() {
      if (this.idStatus != this.equipo.Status.idStatus) this.prompt()
      else
        this.imprimirWarning(
          `¿Estas segur@ que deseas cambiar de programa?`,
          this.cambiarStatus
        )
    },
    mostrarBoton() {
      if (
        this.idStatus != this.equipo.Status.idStatus ||
        (this.equipo.Programa &&
          this.idPrograma != this.equipo.Programa.idPrograma) ||
        this.idCarrito != this.equipo.Carrito.idCarrito
      )
        return false
      return true
    },
    cambiarStatus(motivo = '') {
      const data = {
        idEquipo: this.equipo.idEquipo,
        idStatus:
          this.idStatus != this.equipo.Status.idStatus ? this.idStatus : null,
        idPrograma: this.idPrograma ? this.idPrograma : null,
        idCarrito: this.idCarrito,
        motivo,
      }
      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/equipo/update`, data, this.operador.token)
        .then((res) => {
          this.buscar()
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    obtenerCatalogoStatus() {
      axios
        .get(`${process.env.api}/status`, this.operador.token)
        .then((res) => {
          this.status = res.data
          this.obtenerCatalogoProgramas()
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
        })
    },
    obtenerCatalogoProgramas() {
      axios
        .get(`${process.env.api}/programa`, this.operador.token)
        .then((res) => {
          this.programa = res.data
          this.obtenerCatalogoCarritos()
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
        })
    },
    obtenerCatalogoCarritos() {
      axios
        .get(`${process.env.api}/carrito/carritos`, this.operador.token)
        .then((res) => {
          this.carritos = res.data
        })
        .catch((err) => {
          this.imprimirError(err.response.data)
        })
    },
    prompt() {
      this.$buefy.dialog.prompt({
        type: 'is-warning',
        title: '¡Espera un minuto!',
        message: `¿Estas segur@ que quieres cambiar el status de este equipo?`,
        inputAttrs: {
          type: 'text',
          placeholder: 'Motivo del cambio',
          min: 1,
          max: 500,
        },
        trapFocus: true,
        hasIcon: true,
        iconPack: 'mdi',
        icon: 'help-circle',
        cancelText: 'Cancelar',
        onConfirm: (value) => this.cambiarStatus(value),
      })
    },
  },
  watch: {
    equipo() {
      this.idStatus = this.equipo.Status.idStatus
      this.idCarrito = this.equipo.Carrito.idCarrito
      if (this.equipo.Programa)
        this.idPrograma = this.equipo.Programa.idPrograma
    },
  },
  created() {
    if (
      this.operador.idTipoUsuario === 2 ||
      this.operador.idTipoUsuario === 1
    ) {
      this.obtenerCatalogoStatus()
      this.idStatus = this.equipo.Status.idStatus
    }
  },
}
</script>

<style></style>