pcpuma_unam_operador/components/admin/TablaInfracciones.vue

<template>
  <div>
    <b-table :data="data">
      <b-table-column
        field="infraccion"
        label="Infracción"
        v-slot="props"
        centered
      >
        {{ props.row.infraccion.infraccion }}
      </b-table-column>

      <b-table-column
        field="diasMulta"
        label="Días de multa"
        width="300"
        v-slot="props"
        centered
      >
        <p>
          <b-input
            type="number"
            v-model="props.row.dias_multa"
            :disabled="
              idInstitucionInfraccion != props.row.id_institucion_infraccion
            "
          />
        </p>
      </b-table-column>

      <b-table-column field="editar" label="Editar" v-slot="props" centered
        ><b-button
          type="is-primary"
          @click="habilitarGuardado(props.row.id_institucion_infraccion)"
          v-if="idInstitucionInfraccion != props.row.id_institucion_infraccion"
        >
          <b-icon icon="pencil" size="is-small" />
        </b-button>

        <b-button
          type="is-success"
          @click="
            $alertsGenericos.imprimirWarning(
              $buefy,
              '¿Estás seguro de querer actualizar estos datos?',
              editarDiasMulta
            )
          "
          v-if="idInstitucionInfraccion === props.row.id_institucion_infraccion"
        >
          Guardar
        </b-button>
      </b-table-column>
    </b-table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    admin: { type: Object, require: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      data: [],
      idInstitucionInfraccion: 0,
      diasMulta: 0,
    }
  },
  methods: {
    habilitarGuardado(id_institucion_infraccion) {
      this.idInstitucionInfraccion = id_institucion_infraccion
    },
    editarDiasMulta() {
      for (let i = 0; i < this.data.length; i++) {
        if (
          this.data[i].id_institucion_infraccion ===
          this.idInstitucionInfraccion
        )
          this.diasMulta = this.data[i].dias_multa
      }

      const data = {
        id_institucion_infraccion: this.idInstitucionInfraccion,
        dias_multa: Number(this.diasMulta),
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/institucion-infraccion/`, data)
        .then((res) => {
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
          this.obtenerCatalogoInfracciones()
          this.idInstitucionInfraccion = 0
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
          this.updateIsLoading(false)
        })
    },
    obtenerCatalogoInfracciones() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/institucion-infraccion/infracciones?id_institucion=${this.admin.institucion.id_institucion}`
        )
        .then((res) => {
          this.data = res.data
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  created() {
    this.obtenerCatalogoInfracciones()
  },
}
</script>