pcpuma_unam_operador/components/crear/CrearOperador.vue

<template>
  <section class="mb-6">
    <h3 class="is-size-4 mb-3">Crear operador</h3>

    <div class="box">
      <div class="columns is-align-items-flex-end pl-0 pb-4">
        <b-field class="column mb-0 pb-0" label="Nombre completo">
          <b-input
            icon="account"
            placeholder="Nombres/Apellidos"
            type="text"
            :has-counter="false"
            :maxlength="100"
            @keyup.enter.native="warning()"
            v-model="nombre"
            rounded
          />
        </b-field>

        <b-field class="column mb-0 pb-0" label="Usuario">
          <b-input
            icon="account-circle"
            placeholder="Usuario"
            type="text"
            :has-counter="false"
            :maxlength="40"
            @keyup.enter.native="warning()"
            v-model="operador"
            rounded
          />
        </b-field>

        <b-field class="column mb-0 pb-0" label="Correo">
          <b-input
            icon="email"
            placeholder="Correo"
            type="email"
            :has-counter="false"
            :maxlength="80"
            @keyup.enter.native="warning()"
            v-model="correo"
            rounded
          />
        </b-field>

        <b-field class="column mb-0 pb-0" label="Contraseña">
          <b-input
            icon="lock"
            placeholder="Contraseña"
            type="password"
            @keyup.enter.native="warning()"
            v-model="password"
            password-reveal
            rounded
          />
        </b-field>

        <BotonCrear
          :disabled="!operador || !correo || !nombre || !password"
          :crear="warning"
        />
      </div>
    </div>
  </section>
</template>

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

export default {
  components: { BotonCrear },
  props: {
    updateActualizarTabla: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    idInstitucion: { type: Number, required: true, default: 0 },
  },
  data() {
    return {
      correo: '',
      nombre: '',
      operador: '',
      password: '',
    }
  },
  methods: {
    crearOperador() {
      const data = {
        correo: this.correo,
        nombre: this.nombre,
        operador: this.operador,
        password: this.password,
      }

      this.updateIsLoading(true)
      axios
        .post(
          `${process.env.api}/operador/operador`,
          data,
          this.$getToken.token()
        )
        .then((res) => {
          this.correo = ''
          this.nombre = ''
          this.operador = ''
          this.password = ''
          this.updateActualizarTabla(true)
          this.updateIsLoading(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() {
      if (this.correo && this.nombre && this.operador && this.password)
        this.$alertsGenericos.imprimirWarning(
          this.$buefy,
          '¿Esta segur@ de querer crear este operador?',
          this.crearOperador
        )
    },
  },
}
</script>

<style></style>