premiaciones_front2/components/admin/EditarPremiacion.vue

<template>
  <div class="full-h container">
    <b-button @click="atras()" type="is-primary"> Atrás </b-button>
    <h2 class="has-text-centered is-size-2">Editar premiación</h2>
    <div class="is-flex is-justify-content-center">
      <form class="box">
        <p class="is-size-4 block mr-4">
          <b>{{ premiacion }}</b>
        </p>
        <b-field :label="`Fecha: (${fecha})`">
          <b-datepicker
            v-model="fechaNueva"
            locale="es-MX"
            placeholder="Seleccione"
            icon="calendar-today"
            trap-focus
          >
          </b-datepicker>
        </b-field>

        <b-field label="Hora (HH:MM, 24 horas)">
          <b-input
            v-model="horaNueva"
            :placeholder="hora"
            icon="clock"
            maxlength="5"
          >
          </b-input>
        </b-field>

        <div class="has-text-centered">
          <b-button
            @click="confirmarEnviar()"
            type="is-success"
            :disabled="!(fecha && hora)"
          >
            Editar
          </b-button>
          <b-button
            @click="confirmarEditar()"
            :type="colorBoton()"
            :disabled="!(fecha && hora)"
          >
            {{ textoBoton() }}
          </b-button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    updateIsLoading: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      premiacion: localStorage.getItem('premiacion'),
      idPremiacion: localStorage.getItem('idPremiacion'),
      fecha: localStorage.getItem('fecha'),
      hora: localStorage.getItem('hora'),
      activa: localStorage.getItem('activa') === 'true' ? true : false,
      horaNueva: null,
      fechaNueva: null,
    }
  },
  methods: {
    editar() {
      const data = {
        idPremiacion: this.idPremiacion,
        hora: this.horaNueva,
        fecha: this.fechaNueva,
      }
      axios
        .put(`${process.env.api}/Premiacion/editar`, data)
        .then((res) => {
          this.updateIsLoading(false)
          let message = 'Se ha editado la premiación con éxito.'
          this.success(message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.errorMessage(err.response.data.message)
          console.log(err)
        })
    },
    atras() {
      localStorage.removeItem('premiacion')
      localStorage.removeItem('idPremiacion')
      localStorage.removeItem('fecha')
      localStorage.removeItem('hora')
      localStorage.removeItem('activa')
      this.$router.push('/admin')
    },
    colorBoton() {
      console.log(this.activa)
      if (this.activa === true) return 'is-danger'
      return 'is-success'
    },
    textoBoton() {
      if (this.activa === true) return 'Desactivar'
      return 'Activar'
    },
    activarDesactivar() {
      this.updateIsLoading(true)
      const data = {
        idPremiacion: this.idPremiacion,
        activa: !this.activa,
      }
      console.log(data)
      axios
        .put(`${process.env.api}/Premiacion/activarDesactivar`, data)
        .then((res) => {
          this.updateIsLoading(false)
          let message =
            this.activa === true
              ? 'Se ha desactivado la premiación con éxito'
              : 'Se ha desactivado la premiación con éxito'
          this.successEditar(message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.errorMessage(err.response.data.message)
          console.log(err)
        })
    },
    confirmarEditar() {
      this.$swal({
        title: '¿Estás seguro de querer editar esta premiación?',
        type: 'question',
        timer: 9000,
        showCancelButton: true,
        cancelButtonColor: '#d33',
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      }).then((res) => {
        if (res.value) {
          this.activarDesactivar()
        }
      })
    },
    confirmarEnviar() {
      this.$swal({
        title: '¿Estás seguro de querer editar esta premiación?',
        type: 'question',
        timer: 9000,
        showCancelButton: true,
        cancelButtonColor: '#d33',
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      }).then((res) => {
        if (res.value) {
          this.editar()
        }
      })
    },
    success(text) {
      this.$swal({
        title: text,
        type: 'success',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      })
    },
    successEditar(text) {
      this.$swal({
        title: text,
        type: 'success',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      }).then((res) => {
        if (res.value) {
          this.$router.push("/admin")
        }
      })
    },
    errorMessage(err) {
      this.$swal({
        title: err,
        type: 'error',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      })
    },
  },
}
</script>

<style scoped>
form {
  width: 80%;
}
</style>