pcpuma_unam_operador/components/admin/ConfigInstitucion.vue
2022-07-11 09:15:10 -05:00

168 lines
4.4 KiB
Vue

<template>
<section>
<div class="columns">
<div class="column py-4 mt-5 has-text-centered">
<b-field>
<b-button
class="mx-5"
expanded
:type="type"
@click="hasDominion = true"
>Con Dominio</b-button
>
<b-button
class="mx-5"
expanded
:type="typeTwo"
@click="hasDominion = false"
>Sin Dominio</b-button
>
</b-field>
<b-field class="m-5" label="Dominio">
<b-input v-model="dominio" :disabled="!hasDominion" />
</b-field>
<b-button
class="mt-4"
type="is-success"
@click="
$alertsGenericos.imprimirWarning(
$buefy,
'¿Esta segur@ de querer subir este archivo?',
actualizarDominio
)
"
>
Actualizar
</b-button>
</div>
<div class="column has-text-centered pb-5">
<b-field>
<b-upload v-model="logo" drag-drop expanded accept=".png,.jpeg,.jpg">
<section
class="section is-flex is-align-items-center is-justify-content-center drag-drop"
>
<div class="content has-text-centered">
<p>
<b-icon icon="upload" size="is-large"> </b-icon>
</p>
<p>{{ logo.name || 'Adjunta el logo de la Institución' }}</p>
</div>
</section>
</b-upload>
</b-field>
<b-button
type="is-success"
:disabled="!logo.name"
@click="
$alertsGenericos.imprimirWarning(
$buefy,
'¿Esta segur@ de querer subir este archivo?',
subirLogo
)
"
>
Subir
</b-button>
</div>
</div>
</section>
</template>
<script>
import axios from 'axios'
export default {
props: {
admin: { type: Object, require: true },
updateIsLoading: { type: Function, required: true },
},
data() {
return {
hasDominion: false,
dominio: '',
logo: {},
}
},
methods: {
deleteDropFile(index) {
this.logo.splice(index, 1)
},
obtenerDominio() {
this.updateIsLoading(true)
axios
.get(
`${process.env.api}/institucion/institucion?id_institucion=${this.admin.institucion.id_institucion}`,
this.token
)
.then((res) => {
this.dominio = res.data.dominio
this.dominio ? (this.hasDominion = true) : (this.hasDominion = false)
this.updateIsLoading(false)
})
.catch((err) => {
this.updateIsLoading(false)
this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
})
},
actualizarDominio() {
if (this.hasDominion) this.dominio = ''
const data = {
id_institucion: this.admin.institucion.id_institucion,
dominio: this.hasDominion ? this.dominio : '',
email_institucional: this.dominio ? true : false,
}
this.updateIsLoading(true)
axios
.put(`${process.env.api}/institucion`, data)
.then((res) => {
this.updateIsLoading(false)
this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
})
.catch((err) => {
this.updateIsLoading(false)
this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
})
},
subirLogo() {
const formData = new FormData()
this.updateIsLoading(true)
formData.append('logo', this.logo)
axios
.post(
`${process.env.api}/upload-file/upload-logo?id_institucion=${this.admin.institucion.id_institucion}`,
formData
)
.then((res) => {
this.dropFiles = []
this.updateIsLoading(false)
this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
})
.catch((err) => {
this.updateIsLoading(false)
this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
})
},
},
computed: {
type() {
return {
'is-info': this.hasDominion == true,
}
},
typeTwo() {
return {
'is-info': this.hasDominion == false,
}
},
},
created() {
this.obtenerDominio()
},
}
</script>