pcpuma_unam_operador/components/admin/RelojesHoraExcepcion.vue

<template>
  <div>
    <div class="columns">
      <Reloj
        horaStr="11:00"
        tipo="inicio"
        @hora-seleccionada="(nuevaHoraInicio) => (horaInicio = nuevaHoraInicio)"
      />

      <Reloj
        horaStr="12:00"
        tipo="fin"
        @hora-seleccionada="(nuevaHoraFind) => (horaFin = nuevaHoraFind)"
      />
    </div>

    <dir>
      <div class="columns is-centered">
        <BotonCrear columnSize="is-3" :disabled="false" :crear="warning" />
      </div>
    </dir>
  </div>
</template>

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

export default {
  components: { BotonCrear, Reloj },
  props: {
    editar: { type: Function, required: true, default: () => {} },
    obtenerHorasExcepcion: {
      type: Function,
      required: true,
      default: () => {},
    },
    updateIsLoading: { type: Function, required: true, default: () => {} },
    updateMostrar: { type: Function, required: true, default: () => {} },
    institucionDia: { type: Object, required: true, default: () => ({}) },
  },
  data() {
    return { horaInicio: new Date(), horaFin: new Date() }
  },
  methods: {
    crear() {
      const data = {
        id_institucion_dia: this.institucionDia.id_institucion_dia,
        hora_inicio: moment(this.horaInicio).format('HH:mm'),
        hora_fin: moment(this.horaFin).format('HH:mm'),
      }

      this.updateIsLoading(true)
      return axios
        .post(`${process.env.api}/hora-excepcion`, data, this.$getToken.token())
        .then((res) => {
          this.obtenerHorasExcepcion()
          this.updateIsLoading(false)
          this.updateMostrar(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    warning() {
      this.$alertsGenericos.imprimirWarning(
        this.$buefy,
        '¿Esta segur@ de querer crear este horario sin servicio?',
        this.crear
      )
    },
  },
}
</script>