333 lines
14 KiB
Vue
333 lines
14 KiB
Vue
<template>
|
|
<b-modal size="lg" id="modalEditarLibro" hide-footer title="Editar Libro">
|
|
|
|
<b-container fluid v-if="!loading">
|
|
<b-row class="mb-2">
|
|
<b-col >
|
|
<h2 style="text-align:left;"> {{libro.titulo}}</h2>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActiveIsbn" name="check-button" switch><b>ISBN:</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
<label class="mr-sm-2">{{libro.isbn}}</label>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-form-input
|
|
id="inline-form-input-name"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Editar"
|
|
v-model="isbn"
|
|
></b-form-input>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActiveTitulo" name="check-button" switch><b>Titulo:</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
<label class="mr-sm-2">{{libro.titulo}}</label>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-form-input
|
|
id="inline-form-input-name"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Editar"
|
|
v-model="titulo"
|
|
></b-form-input>
|
|
</b-col>
|
|
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActiveCategoria" name="check-button" switch><b>Categoria:</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
<label class="mr-sm-2">{{libro.categoria}}</label>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-dropdown v-model="categoria" v-bind:text="categoria" block split split-variant="outline-primary" variant="primary" class="m-2">
|
|
<b-dropdown-item @click="categoria='Ciencias Socioeconómicas'" >Ciencias Socioeconómicas</b-dropdown-item>
|
|
<b-dropdown-item @click="categoria='Diseño y Edificación'" >Diseño y Edificación</b-dropdown-item>
|
|
<b-dropdown-item @click="categoria='Enseñanza de Idiomas'" >Enseñanza de Idiomas</b-dropdown-item>
|
|
<b-dropdown-item @click="categoria='Estudios de Posgrado'" >Estudios de Posgrado</b-dropdown-item>
|
|
<b-dropdown-item @click="categoria='Humanidades'" >Humanidades</b-dropdown-item>
|
|
<b-dropdown-item @click="categoria='Matemáticas e Ingenieria'" >Matemáticas e Ingenieria</b-dropdown-item>
|
|
<b-dropdown-item @click="categoria='Universidad Abierta y Educación a Distancia'" >Universidad Abierta y Educación a Distancia</b-dropdown-item>
|
|
</b-dropdown>
|
|
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActiveAutor" name="check-button" switch><b>Autor:</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
<label class="mr-sm-2">{{libro.autor}}</label>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-form-input
|
|
id="inline-form-input-name"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Editar"
|
|
v-model="autor"
|
|
></b-form-input>
|
|
</b-col>
|
|
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActivePaginas" name="check-button" switch><b>Numero de paginas:</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
<label class="mr-sm-2">{{libro.paginas}}</label>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-form-input
|
|
id="inline-form-input-name"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Editar"
|
|
v-model="paginas"
|
|
type="number"
|
|
></b-form-input>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActivePrecio" name="check-button" switch><b>Precio:</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
<label class="mr-sm-2">{{libro.precio}}</label>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-form-input
|
|
id="inline-form-input-name"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Editar"
|
|
v-model="precio"
|
|
></b-form-input>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActiveEdicion" name="check-button" switch><b>Edición:</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
<label class="mr-sm-2">{{libro.impresion}}</label>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-form-input
|
|
id="inline-form-input-name"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Editar"
|
|
v-model="edicion"
|
|
></b-form-input>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActiveVersion" name="check-button" switch><b>Versión:</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
<label class="mr-sm-2">{{libro.version}}</label>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-form-input
|
|
id="inline-form-input-name"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Editar"
|
|
v-model="version"
|
|
></b-form-input>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActiveYear" name="check-button" switch><b>Año de publicación:</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
<label class="mr-sm-2">{{libro.year}}</label>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-form-input
|
|
id="inline-form-input-name"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Editar"
|
|
v-model="year"
|
|
type="number"
|
|
></b-form-input>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActiveDescripcion" name="check-button" switch><b>Descrpción:</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
<label class="mr-sm-2" style="font-size: 12px">{{libro.descripcion}}</label>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-form-textarea
|
|
id="textarea"
|
|
v-model="descripcion"
|
|
placeholder="Editar"
|
|
rows="3"
|
|
max-rows="6"
|
|
></b-form-textarea>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActiveImagen" name="check-button" switch><b>Imagen</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-form-file
|
|
placeholder="Seleccione la imagen o arrastre..."
|
|
accept=".png, .jpg"
|
|
id="imagen"
|
|
></b-form-file>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-checkbox v-model="isActivePdf" name="check-button" switch><b>PDF Visualización</b></b-form-checkbox>
|
|
</b-col>
|
|
<b-col>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<b-form-file
|
|
placeholder="Seleccione el PDF o arrastre..."
|
|
id="pdf"
|
|
accept=".pdf"
|
|
></b-form-file>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<div style="margin-top: 2rem;">
|
|
<b-button variant="outline-success" class="float-right" @click="actualizarLibro(libro.idLibro)" style="width: 30%; ">Actualizar</b-button>
|
|
<b-button @click="$bvModal.hide('modalEditarLibro')" variant="outline-danger" class="btn float-left" style="width: 30%; ">Cancelar</b-button>
|
|
</div>
|
|
</b-col>
|
|
</b-row>
|
|
</b-container>
|
|
<b-container v-else>
|
|
<div class="text-center">
|
|
<b-spinner style="width: 10rem; height: 10rem; margin: 3rem;" variant="primary" label="Text Centered"></b-spinner><br />
|
|
<strong><h1 style="margin: 3rem;">Guardando...</h1></strong>
|
|
</div>
|
|
</b-container>
|
|
</b-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import config from "../config/config.js";
|
|
import Swal from 'sweetalert2'
|
|
export default {
|
|
props: {
|
|
libro: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
isbn: "",
|
|
titulo: "",
|
|
categoria:"Categoria",
|
|
autor:"",
|
|
paginas:"",
|
|
impresion:"",
|
|
precio:"",
|
|
version:"",
|
|
descripcion:"",
|
|
year:"",
|
|
edicion:"",
|
|
isActiveIsbn: false,
|
|
isActiveTitulo: false,
|
|
isActiveCategoria: false,
|
|
isActiveAutor: false,
|
|
isActivePaginas: false,
|
|
isActivePrecio: false,
|
|
isActiveVersion: false,
|
|
isActiveYear: false,
|
|
isActiveDescripcion: false,
|
|
isActiveImagen: false,
|
|
isActivePdf: false,
|
|
isActiveEdicion:false,
|
|
loading: false
|
|
};
|
|
|
|
},
|
|
methods:{
|
|
async actualizarLibro(idLibro){
|
|
try{
|
|
var formData = new FormData();
|
|
if(this.isActiveIsbn) formData.append("isbn", this.isbn);
|
|
if(this.isActiveTitulo) formData.append("titulo", this.titulo);
|
|
if(this.isActiveCategoria) formData.append("categoria", this.categoria);
|
|
if(this.isActiveAutor) formData.append("autor", this.autor);
|
|
if(this.isActivePaginas) formData.append("paginas", this.paginas);
|
|
if(this.isActiveEdicion) formData.append("edicion", this.impresion);
|
|
if(this.isActivePrecio) formData.append("precio", this.precio);
|
|
if(this.isActiveVersion) formData.append("version", this.version);
|
|
if(this.isActiveDescripcion) formData.append("descripcion", this.descripcion);
|
|
if(this.isActiveYear) formData.append("year", this.year);
|
|
if(this.isActiveImagen){
|
|
var imagen = document.querySelector('#imagen');
|
|
if(imagen.files[0].size > 1200000){
|
|
Swal.fire(
|
|
`EL tamaño de la Imagen es muy grande`,
|
|
'Por favor suba imagenes menores a 1MG',
|
|
'warning'
|
|
)
|
|
return;
|
|
}
|
|
formData.append("imagen", imagen.files[0]);
|
|
}
|
|
if(this.isActivePdf){
|
|
var pdf = document.querySelector('#pdf');
|
|
if(pdf.files[0].size > 1200000){
|
|
Swal.fire(
|
|
`EL tamaño del PDF es muy grande`,
|
|
'Por favor suba PDFs menores a 1MG',
|
|
'warning'
|
|
)
|
|
return;
|
|
}
|
|
formData.append("pdf", pdf.files[0]);
|
|
}
|
|
if( formData.entries().next().done){
|
|
Swal.fire(
|
|
'¿Aún no has ningún campo a editar?',
|
|
'',
|
|
'question'
|
|
);
|
|
return;
|
|
}
|
|
formData.append("idLibro", idLibro);
|
|
formData.append("type", 'editarLibro');
|
|
this.loading = true;
|
|
await axios.post( `${config.api}/actualizarLibro`, formData ,{ headers: { 'Content-Type': 'multipart/form-data' } });
|
|
this.loading = false;
|
|
await Swal.fire(
|
|
'Libro actualizado con éxito',
|
|
'',
|
|
'success'
|
|
);
|
|
location.reload();
|
|
}
|
|
catch(error){
|
|
console.log(error);
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'El libro no pudo ser actualizado',
|
|
text: `Algo salio mal, ${error}`,
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</script> |