pcpuma_unam_operador/components/admin/CrearInstiProgra.vue

<template>
  <div class="box">
    <dir class="columns is-align-items-flex-end pl-0 pb-4">
      <b-field class="column mb-0 pb-0" label="Programa">
        <b-input
          type="text"
          placeholder="Nombre del programa"
          v-model="programa"
          rounded
          @keyup.enter.native="
            $alertsGenericos.imprimirWarning(
              $buefy,
              '¿Está segur@ de querer crear este programa?',
              crearInstitucionPrograma
            )
          "
        />
      </b-field>

      <b-button
        type="is-info"
        class="column is-4"
        @click="
          $alertsGenericos.imprimirWarning(
            $buefy,
            '¿Esta segur@ de querer crear este programa?',
            crearInstitucionPrograma
          )
        "
        :disabled="!programa"
        expanded
        rounded
      >
        Crear
      </b-button>
    </dir>

    <b-collapse
      aria-id="contentIdForA11y3"
      class="card"
      animation="slide"
      v-model="active"
    >
      <template #trigger>
        <div
          class="card-header"
          role="button"
          aria-controls="contentIdForA11y3"
          :aria-expanded="active"
        >
          <p class="card-header-title">Tabla de programas</p>
          <a class="card-header-icon">
            <b-icon :icon="active ? 'menu-down' : 'menu-up'"> </b-icon>
          </a>
        </div>
      </template>

      <TablaOpcionesCreadas
        v-if="active"
        :data="programas"
        :columnaPrograma="true"
      />
    </b-collapse>
  </div>
</template>

<script>
import axios from 'axios'
import TablaOpcionesCreadas from '@/components/admin/TablaOpcionesCreadas'
export default {
  components: {
    TablaOpcionesCreadas,
  },
  props: {
    admin: { type: Object, require: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      active: false,
      programas: [],
      programa: '',
    }
  },
  methods: {
    obtenerCatalogoProgramas() {
      axios
        .get(`${process.env.api}/institucion-programa/`, this.$getToken.token())
        .then((res) => {
          this.programas = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    crearInstitucionPrograma() {
      const data = {
        programa: this.programa,
      }
      this.updateIsLoading(true)
      axios
        .post(
          `${process.env.api}/institucion-programa/`,
          data,
          this.$getToken.token()
        )
        .then((res) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
          this.obtenerCatalogoProgramas()
          this.programa = ''
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  created() {
    this.obtenerCatalogoProgramas()
  },
}
</script>