pcpuma_unam_operador/components/admin/TablaInstiDia.vue

<template>
  <section>
    <b-table :data="data" detailed>
      <b-table-column field="dia" label="Día" centered v-slot="props">
        {{ props.row.dia.dia }}
      </b-table-column>

      <b-table-column
        field="hora_inicio"
        label="Hora Inicio"
        centered
        v-slot="props"
      >
        {{ props.row.hora_inicio }}
      </b-table-column>

      <b-table-column field="hora_fin" label="Hora Fin" centered v-slot="props">
        {{ props.row.hora_fin }}
      </b-table-column>

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

      <b-table-column field="activar" label="Activar" centered v-slot="props">
        <BotonDesactivar
          :admin="admin"
          :data="props.row"
          tipo="día"
          :cambiarStatus="cambiarStatus"
        />
      </b-table-column>

      <template #detail="props">
        <HorasExcepcion
          :horasExcepcion="props.row"
          :updateIsLoading="updateIsLoading"
          :actualizarTabla="actualizarTabla"
          :updateActualizarTabla="updateActualizarTabla"
        />
      </template>
    </b-table>

    <div v-if="mostrar">
      <Reloj
        :cambiarHora="cambiarHora"
        :diaSeleccion="diaSeleccion"
        tipo="cambiarHora"
      />
    </div>
  </section>
</template>

<script>
import axios from 'axios'
import BotonDesactivar from '@/components/operador/BotonDesactivar'
import HorasExcepcion from '@/components/admin/HorasExcepcion'
import Reloj from '@/components/admin/Reloj'

export default {
  components: {
    BotonDesactivar,
    HorasExcepcion,
    Reloj,
  },
  props: {
    admin: { type: Object, require: true },
    updateIsLoading: { type: Function, required: true },
    actualizarTabla: { type: Boolean, required: true },
    updateActualizarTabla: { type: Function, required: true },
  },
  data() {
    return {
      data: [],
      mostrar: false,
      diaSeleccion: {},
    }
  },
  methods: {
    cambiarStatus(dataSelect, status) {
      const data = {
        id_institucion_dia: dataSelect.id_institucion_dia,
        activo: status,
      }
      this.updateIsLoading(true)
      axios
        .put(
          `${process.env.api}/institucion-dia/`,
          data,
          this.$getToken.token()
        )
        .then((res) => {
          this.obtenerDias()
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerDias() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/institucion-dia/?id_institucion=${this.admin.institucion.id_institucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.data = res.data
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    editarHora(diaSeleccion) {
      if (this.diaSeleccion != diaSeleccion) this.mostrar = true
      else
        this.mostrar === false ? (this.mostrar = true) : (this.mostrar = false)
      this.diaSeleccion = diaSeleccion
    },
    cambiarHora(id_institucion_dia, hora_inicio, hora_fin, activo) {
      const data = {
        id_institucion_dia,
        hora_inicio,
        hora_fin,
        activo,
      }
      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/institucion-dia`, data, this.$getToken.token())
        .then((res) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
          this.updateActualizarTabla(true)
        })
        .catch((err) => {
          this.error = 'is-danger'
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  watch: {
    actualizarTabla() {
      if (this.actualizarTabla) {
        this.obtenerDias()
        this.updateActualizarTabla(false)
      }
    },
  },
  created() {
    this.obtenerDias()
  },
}
</script>