pcpuma_unam_operador/components/tablas/HorasExcepcionDia.vue

<template>
  <div>
    <div class="has-text-centered">
      <h5 class="subtitle is-3">Horario sin servicio</h5>

      <b-field class="mb-5">
        <b-button type="is-info" @click="updateMostrar()">
          {{ mostrar ? 'Ocutar' : 'Agregar' }}
        </b-button>
      </b-field>

      <RelojesHoraExcepcion
        :editar="editar"
        :obtenerHorasExcepcion="obtenerHorasExcepcion"
        :updateIsLoading="updateIsLoading"
        :updateMostrar="updateMostrar"
        :institucionDia="institucionDia"
        v-if="mostrar"
      />
    </div>

    <TablaHoraExcepcion
      :horasExcepcion="horasExcepcion"
      :isLoadingTable="isLoadingTable"
      :obtenerHorasExcepcion="obtenerHorasExcepcion"
      :updateIsLoading="updateIsLoading"
    />
  </div>
</template>

<script>
import axios from 'axios'
import TablaHoraExcepcion from '@/components/tablas/TablaHoraExcepcion'
import RelojesHoraExcepcion from '@/components/admin/RelojesHoraExcepcion'

export default {
  components: { RelojesHoraExcepcion, TablaHoraExcepcion },
  props: {
    institucionDia: { type: Object, required: true, default: () => ({}) },
    editar: { type: Function, required: true, default: () => {} },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      horasExcepcion: [],
      isLoadingTable: false,
      mostrar: false,
    }
  },
  methods: {
    obtenerHorasExcepcion() {
      this.isLoadingTable = true
      axios
        .get(
          `${process.env.api}/hora-excepcion?id_institucion_dia=${this.institucionDia.id_institucion_dia}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.horasExcepcion = res.data
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    onPageChange(page) {
      this.page = page
      this.obtenerHorasExcepcion()
    },
    updateMostrar() {
      this.mostrar = !this.mostrar
    },
  },
  created() {
    this.obtenerHorasExcepcion()
  },
}
</script>