pcpuma_unam_operador/components/admin/HorasExcepcion.vue

<template>
  <div>
    <div class="has-text-centered">
      <p class="subtitle is-3">Hora Excepción</p>
      <b-button type="is-primary" @click="mostrar = true" v-if="!mostrar"
        >Agregar</b-button
      >
    </div>

    <Reloj
      :diaSeleccion="horasExcepcion"
      :crearHoraExcepcion="crearHoraExcepcion"
      tipo="crearHoraExcepcion"
      v-if="mostrar"
    />

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

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

      <b-table-column field="eliminar" label="Eliminar" centered v-slot="props">
        <b-button
          type="is-danger"
          @click="
            ;(id_hora_excepcion = props.row.id_hora_excepcion),
              $alertsGenericos.imprimirWarning(
                $buefy,
                '¿Esta segur@ de querer eliminar esta hora excepció?',
                eliminarHoraExcepcion
              )
          "
        >
          Eliminar
        </b-button>
      </b-table-column>
    </b-table>
  </div>
</template>

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

export default {
  components: { Reloj },
  props: {
    horasExcepcion: { type: Object, require: true },
    updateIsLoading: { type: Function, required: true },
    actualizarTabla: { type: Boolean, required: true },
    updateActualizarTabla: { type: Function, required: true },
  },
  data() {
    return {
      hora_inicio: new Date(),
      hora_fin: new Date(),
      mostrar: false,

      id_hora_excepcion: 0,
    }
  },
  methods: {
    crearHoraExcepcion(id_institucion_dia, hora_inicio, hora_fin) {
      const data = {
        id_institucion_dia,
        hora_inicio,
        hora_fin,
      }
      // this.updateIsLoading(true)
      axios
        .post(`${process.env.api}/hora-excepcion`, data, this.$getToken.token())
        .then((res) => {
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
          this.updateActualizarTabla(true)
        })
        .catch((err) => {
          this.error = 'is-danger'
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    eliminarHoraExcepcion() {
      const data = {
        id_hora_excepcion: this.id_hora_excepcion,
      }

      axios
        .delete(
          `${process.env.api}/hora-excepcion`,
          this.$getToken.tokenDelete(data)
        )
        .then((res) => {
          this.$alertsGenericos.imprimirMensaje(
            this.$buefy,
            'Se ah eliminado correctamente la hora excepción'
          )
          this.updateActualizarTabla(true)
        })
        .catch((err) => {
          this.error = 'is-danger'
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
}
</script>