pcpuma_unam_operador/components/admin/InfoInstitucion.vue

<template>
  <div class="column is-8">
    <h3 class="is-size-4 mb-4">Datos de la Institución</h3>

    <div class="columns">
      <div class="column">
        <b-field label="Nombre de la Institución">
          <p class="input">{{ institucion.institucion }}</p>
        </b-field>

        <b-field label="Responsable">
          <p class="input">{{ institucion.responsable || '' }}</p>
        </b-field>

        <b-field label="Telefono">
          <p class="input">{{ institucion.telefono || '' }}</p>
        </b-field>

        <b-field label="Correo">
          <p class="input">{{ institucion.correo || '' }}</p>
        </b-field>

        <b-field label="Ubicación">
          <p class="input">{{ institucion.ubicacion || '' }}</p>
        </b-field>
      </div>

      <div class="column">
        <b-field label="Dominio">
          <p class="input">{{ institucion.dominio || '' }}</p>
        </b-field>

        <b-field
          label="Días de multa por retraso"
          v-if="admin.tipoUsuario.id_tipo_usuario === 3"
        >
          <p class="input">{{ institucion.dias_multa_retraso }}</p>
        </b-field>

        <b-field
          label="Tiempo para recoger equipo"
          v-if="admin.tipoUsuario.id_tipo_usuario === 3"
        >
          <p class="input">{{ institucion.tiempo_recoger }}</p>
        </b-field>

        <b-field
          label="Tiempo para entregar equipo"
          v-if="admin.tipoUsuario.id_tipo_usuario === 3"
        >
          <p class="input">{{ institucion.tiempo_entrega }}</p>
        </b-field>

        <b-field
          label="Tiempo de préstamo"
          v-if="admin.tipoUsuario.id_tipo_usuario === 3"
        >
          <p class="input">{{ institucion.tiempo_prestamo }}</p> 
        </b-field>

        <b-field label="Activo/Inactivo">
          <p
            class="input"
            v-for="(sA, i) in statusActivo"
            :key="i"
            :class="sA.tagType"
            v-show="institucion.activo === sA.activo"
          >
            {{ sA.texto }}
          </p>
        </b-field>

        <b-field
          v-show="
            admin.tipoUsuario.id_tipo_usuario === 2 &&
            institucion.id_institucion
          "
        >
          <b-button type="is-link" @click="activarDesactivar()" expanded>
            Activar/Desactivar
          </b-button>
        </b-field>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    admin: { type: Object, required: true },
    institucion: { type: Object, required: true },
    buscar: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      statusActivo: [
        {
          texto: 'Activo',
          tagType: 'is-success',
          activo: true,
        },
        { texto: 'Inactivo', tagType: 'is-danger', activo: false },
      ],
    }
  },
  methods: {
    activarDesactivar() {
      const data = {
        id_institucion: this.institucion.id_institucion,
        activo: !this.institucion.activo,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/institucion`, data)
        .then((res) => {
          this.updateIsLoading(false)
          this.buscar()
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
}
</script>

<style></style>