pcpuma_unam_operador/components/crear/CrearModelo.vue
2023-01-17 11:44:41 -06:00

121 lines
3.0 KiB
Vue

<template>
<div>
<div class="columns is-align-items-flex-end pl-0 pb-4 mt-4">
<b-field class="column mb-0 pb-0" label="Modelo">
<b-input
placeholder="Nombre de la modelo"
type="text"
@keyup.enter.native="warning()"
v-model="modelo"
rounded
/>
</b-field>
<BotonCrear columnSize="is-4" :disabled="!modelo" :crear="warning" />
</div>
<b-collapse
animation="slide"
aria-id="contentIdForA11y3"
class="card"
v-model="activo"
>
<template #trigger>
<div
aria-controls="contentIdForA11y3"
class="card-header"
role="button"
:aria-expanded="activo"
>
<p class="card-header-title">
Tabla de modelos de {{ tipo === 'e' ? 'equipos' : 'carritos' }}
</p>
<a class="card-header-icon">
<b-icon :icon="activo ? 'menu-down' : 'menu-up'" />
</a>
</div>
</template>
<TablaOpcionesCreadas
v-if="activo"
:data="modelos"
:columnaModeloC="true"
/>
</b-collapse>
</div>
</template>
<script>
import axios from 'axios'
import BotonCrear from '@/components/botones/BotonCrear'
import TablaOpcionesCreadas from '@/components/admin/TablaOpcionesCreadas'
export default {
components: { BotonCrear, TablaOpcionesCreadas },
props: {
updateIsLoading: { type: Function, required: true, default: () => {} },
tipo: { type: String, required: true, default: '' },
},
data() {
return { activo: false, modelos: [], modelo: '' }
},
methods: {
obtenerModelos() {
return axios
.get(
`${process.env.api}/modelo?tipo=${this.tipo}`,
this.$getToken.token()
)
.then((res) => {
this.modelos = res.data
})
.catch((err) => {
this.$alertsGenericos.imprimirError(
this.$buefy,
this.$router,
err.response.data
)
})
},
crearModelo() {
const data = {
modelo: this.modelo,
tipo: this.tipo,
}
this.updateIsLoading(true)
return axios
.post(`${process.env.api}/modelo/`, data, this.$getToken.token())
.then((res) => {
this.modelo = ''
this.obtenerModelos()
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.modelo)
this.$alertsGenericos.imprimirWarning(
this.$buefy,
`¿Está segur@ de querer crear este modelo de ${
this.tipo === 'e' ? 'equipo' : 'carrito'
}?`,
this.crearModelo
)
},
},
created() {
this.obtenerModelos()
},
}
</script>