pcpuma_unam_operador/components/admin/AdminInstitucion.vue

<template>
  <div class="column is-4">
    <h3 class="is-size-4 mb-4">Alta del responsable de PC-Puma</h3>

    <div class="columns">
      <div class="column">
        <b-field
          label="Nombre"
          v-show="admin.tipoUsuario.id_tipo_usuario === 2"
        >
          <b-input
            type="text"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.responsable"
            :disabled="!institucion.id_institucion"
            v-model="responsable"
          />
        </b-field>

        <b-field
          label="Correo"
          v-show="admin.tipoUsuario.id_tipo_usuario === 2"
        >
          <b-input
            type="email"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.correo"
            :disabled="!institucion.id_institucion"
            v-model="correo"
          />
        </b-field>

        <b-field
          label="Teléfono"
          v-show="admin.tipoUsuario.id_tipo_usuario === 2"
        >
          <b-input
            type="tel"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.telefono"
            :disabled="!institucion.id_institucion"
            v-model="telefono"
          />
        </b-field>

        <b-field
          label="Ubicación"
          v-show="admin.tipoUsuario.id_tipo_usuario === 2"
        >
          <b-input
            type="text"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.ubicacion"
            :disabled="!institucion.id_institucion"
            v-model="ubicacion"
          />
        </b-field>

        <b-field
          label="Dominio"
          v-show="admin.tipoUsuario.id_tipo_usuario === 3"
        >
          <b-input
            type="text"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.dominio"
            :disabled="!institucion.id_institucion"
            v-model="dominio"
          />
        </b-field>

        <b-field
          label="Días de multa por retraso"
          v-show="admin.tipoUsuario.id_tipo_usuario === 3"
        >
          <b-input
            type="number"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.dias_multa_retraso"
            :disabled="!institucion.id_institucion"
            v-model="diasMultaRetraso"
          />
        </b-field>

        <b-field
          label="Tiempo para recoger equipo"
          v-show="admin.tipoUsuario.id_tipo_usuario === 3"
        >
          <b-input
            type="number"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.tiempo_recoger"
            :disabled="!institucion.id_institucion"
            v-model="tiempoRecoger"
          />
        </b-field>

        <b-field
          label="Tiempo para entregar equipo"
          v-show="admin.tipoUsuario.id_tipo_usuario === 3"
        >
          <b-input
            type="number"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.tiempo_entrega"
            :disabled="!institucion.id_institucion"
            v-model="tiempoEntrega"
          />
        </b-field>

        <b-field
          label="Tiempo de prestamo"
          v-show="admin.tipoUsuario.id_tipo_usuario === 3"
        >
          <b-input
            type="number"
            @keyup.enter.native="actualizarDatos()"
            :placeholder="institucion.tiempo_prestamo"
            :disabled="!institucion.id_institucion"
            v-model="tiempoPrestamo"
          />
        </b-field>

        <b-field class="file" v-if="admin.tipoUsuario.id_tipo_usuario === 3">
          <b-upload v-model="logo" expanded accept=".png,.jpeg,.jpg">
            <a class="button is-primary is-fullwidth">
              <b-icon icon="upload"></b-icon>
              <span>{{ logo.name || 'Click para subir el logo' }}</span>
            </a>
          </b-upload>
        </b-field>

        <b-field>
          <b-button
            type="is-info"
            :disabled="
              responsable ||
              correo ||
              telefono ||
              ubicacion ||
              dominio ||
              diasMultaRetraso ||
              tiempoPrestamo ||
              tiempoRecoger ||
              tiempoEntrega ||
              logo.name
                ? false
                : true
            "
            @click="actualizarDatos()"
            expanded
          >
            Guardar
          </b-button>
        </b-field>

        <BotonFinSemestre :updateIsLoading="updateIsLoading" :admin="admin" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import BotonFinSemestre from '@/components/botones/BotonFinSemestre'

export default {
  components: {
    BotonFinSemestre,
    BotonFinSemestre,
  },
  props: {
    buscar: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    admin: { type: Object, required: true },
    institucion: { type: Object, required: true },
  },
  data() {
    return {
      correo: '',
      responsable: '',
      telefono: '',
      ubicacion: '',
      dominio: '',
      diasMultaRetraso: '',
      tiempoRecoger: '',
      tiempoEntrega: '',
      tiempoPrestamo: '',
      logo: {},
    }
  },
  methods: {
    actualizarDatos() {
      const data = { id_institucion: this.institucion.id_institucion }

      this.updateIsLoading(true)
      if (Object.entries(this.logo).length != 0) return this.subirLogo()
      if (this.correo) data.correo = this.correo
      if (this.responsable) data.responsable = this.responsable
      if (this.telefono) data.telefono = this.telefono
      if (this.ubicacion) data.ubicacion = this.ubicacion
      if (this.dominio) {
        data.email_institucional = true
        data.dominio = this.dominio
      }
      if (this.diasMultaRetraso)
        this.data.dias_multa_retraso = this.diasMultaRetraso
      if (this.tiempoRecoger) this.data.tiempo_recoger = this.tiempoRecoger
      if (this.tiempoEntrega) this.data.tiempo_entrega = this.tiempoEntrega
      if (this.tiempoPrestamo) this.data.tiempo_prestamo = this.tiempoPrestamo
      axios
        .put(`${process.env.api}/institucion`, data, this.$getToken.token())
        .then((res) => {
          if (this.correo) this.correo = ''
          if (this.responsable) this.responsable = ''
          if (this.telefono) this.telefono = ''
          if (this.dominio) this.dominio = ''
          if (this.ubicacion) this.ubicacion = ''
          if (this.diasMultaRetraso) this.diasMultaRetraso = ''
          if (this.tiempoRecoger) this.tiempoRecoger = ''
          if (this.tiempoEntrega) this.tiempoEntrega = ''
          if (this.tiempoPrestamo) this.tiempoPrestamo = ''
          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)
        })
    },
    subirLogo() {
      const formData = new FormData()

      this.updateIsLoading(true)
      formData.append('logo', this.logo)
      axios
        .post(
          `${process.env.api}/upload-file/upload-logo?id_institucion=${this.admin.institucion.id_institucion}`,
          formData,
          this.$getToken.token()
        )
        .then((res) => {
          this.logo = {}
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
}
</script>

<style></style>