261 lines
11 KiB
Vue
261 lines
11 KiB
Vue
<template>
|
|
<b-container fluid>
|
|
<div v-if="!cargando">
|
|
<b-row class="mb-2">
|
|
<b-col class="mt-5 mb-3">
|
|
<h1 style="text-align:center;">Agregar Libro</h1>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-input
|
|
id="isbn"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="ISBN"
|
|
v-model="isbn"
|
|
></b-form-input>
|
|
</b-col>
|
|
<b-col>
|
|
<b-form-input
|
|
id="titulo"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Titulo"
|
|
v-model="titulo"
|
|
></b-form-input>
|
|
</b-col>
|
|
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<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-col>
|
|
<b-form-input
|
|
id="autor"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Autor"
|
|
v-model="autor"
|
|
></b-form-input>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-input
|
|
id="paginas"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Numero de paginas"
|
|
v-model="paginas"
|
|
type="number"
|
|
></b-form-input>
|
|
</b-col>
|
|
<b-col>
|
|
<b-form-input
|
|
id="precio"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Precio"
|
|
v-model="precio"
|
|
></b-form-input>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-dropdown v-model="version" v-bind:text="version" block split split-variant="outline-primary" variant="primary" class="m-2">
|
|
<b-dropdown-item @click="version='Impresa'" >Impresa</b-dropdown-item>
|
|
<b-dropdown-item @click="version='Digital'" >Digital</b-dropdown-item>
|
|
</b-dropdown>
|
|
</b-col>
|
|
<b-col>
|
|
<b-form-input
|
|
id="year"
|
|
class="mb-2 mr-sm-2 mb-sm-0"
|
|
placeholder="Año de publicación"
|
|
v-model="year"
|
|
type="number"
|
|
></b-form-input>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-file
|
|
id="pdfNuevo"
|
|
placeholder="Seleccione el PDF o arrastre..."
|
|
accept=".pdf"
|
|
></b-form-file>
|
|
</b-col>
|
|
|
|
<b-col>
|
|
<b-form-file
|
|
id="imagenNuevo"
|
|
placeholder="Seleccione la imagen o arrastre..."
|
|
accept=".png, .jpg"
|
|
></b-form-file>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-textarea
|
|
id="descripcion"
|
|
v-model="impresion"
|
|
placeholder="Ediciones (Primera edición: 2016)"
|
|
rows="3"
|
|
max-rows="6"
|
|
></b-form-textarea>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col>
|
|
<b-form-textarea
|
|
id="descripcion"
|
|
v-model="descripcion"
|
|
placeholder="Descripción"
|
|
rows="3"
|
|
max-rows="6"
|
|
></b-form-textarea>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="mb-2">
|
|
<b-col class="mb-5">
|
|
<div style="margin-top: 2rem;">
|
|
<b-button block variant="success" @click="agregarLibro()">Agregar</b-button>
|
|
</div>
|
|
</b-col>
|
|
</b-row>
|
|
</div>
|
|
<div v-else>
|
|
<CargandoLibro v-bind:imageLoading="imageLoading" v-bind:pdfLoading="pdfLoading" v-bind:dataLoading="dataLoading" v-bind:imageSaved="imageSaved" v-bind:pdfSaved="pdfSaved" v-bind:dataSaved="dataSaved" />
|
|
</div>
|
|
</b-container>
|
|
</template>
|
|
<script>
|
|
import axios from "axios";
|
|
import config from "../config/config.js";
|
|
import Swal from 'sweetalert2'
|
|
import CargandoLibro from './cargandoDatos.vue';
|
|
export default {
|
|
components: {
|
|
CargandoLibro
|
|
},
|
|
props: {
|
|
nombreLibro: String,
|
|
value: String
|
|
},
|
|
data() {
|
|
return {
|
|
isbn: "",
|
|
titulo: "",
|
|
categoria:"Categoria",
|
|
autor:"",
|
|
paginas:"",
|
|
impresion:"",
|
|
precio:"",
|
|
version:"Versión",
|
|
descripcion:"",
|
|
year:"",
|
|
cargando: false,
|
|
imageLoading: true,
|
|
pdfLoading: true,
|
|
dataLoading: true,
|
|
imageSaved: false,
|
|
pdfSaved: false,
|
|
dataSaved: false
|
|
};
|
|
},
|
|
methods:{
|
|
faltaCampo(campo){
|
|
Swal.fire(
|
|
`Te falta por llenar el campo de ${campo}`,
|
|
'',
|
|
'warning'
|
|
)
|
|
},
|
|
async agregarLibro(){
|
|
try{
|
|
|
|
|
|
var formData = new FormData();
|
|
var imagen = document.querySelector('#imagenNuevo');
|
|
var pdf = document.querySelector('#pdfNuevo');
|
|
if(this.isbn !== "") formData.append("isbn", this.isbn); else return this.faltaCampo("ISBN");
|
|
if(this.titulo !== "") formData.append("titulo", this.titulo); else return this.faltaCampo("Titulo");
|
|
if(this.categoria !== "Categoria") formData.append("categoria", this.categoria); else return this.faltaCampo("Categoria");
|
|
if(this.autor !== "") formData.append("autor", this.autor); else return this.faltaCampo("Autor");
|
|
if(this.paginas !== "") formData.append("paginas", this.paginas); else return this.faltaCampo("Paginas");
|
|
if(this.impresion !== "") formData.append("edicion", this.impresion); else return this.faltaCampo("Edición");
|
|
if(this.precio !== "") formData.append("precio", this.precio); else return this.faltaCampo("Precio");
|
|
if(this.version !== "Versión") formData.append("version", this.version); else return this.faltaCampo("Versión");
|
|
if(this.descripcion !== "") formData.append("descripcion", this.descripcion); else return this.faltaCampo("Descripción");
|
|
if(this.year !== "") formData.append("year", this.year); else return this.faltaCampo("Año de publicación");
|
|
if(imagen.files.length === 0) return this.faltaCampo("Imagen");
|
|
if(pdf.files.length === 0) return this.faltaCampo("Pdf");
|
|
formData.append("type", 'addLibro');
|
|
formData.append("seccion", 'datos');
|
|
this.cargando = true;
|
|
let idLibro = null;
|
|
let textoFinal = ``;
|
|
await axios.post( `${config.api}/actualizarLibro`, formData ,{ headers: { 'Content-Type': 'multipart/form-data' } }).then(response =>{
|
|
console.log('lo que responde datos:', response);
|
|
idLibro = response.data.idLibro;
|
|
this.dataLoading= false;
|
|
this.dataSaved = true;
|
|
}).catch(async () =>{
|
|
this.dataLoading= false
|
|
await Swal.fire({
|
|
icon: 'error',
|
|
title: 'No se pudieron guardar los datos',
|
|
text: `No se pudieron guardar los datos en la base de datos, intentelo en un otro momento`,
|
|
});
|
|
location.reload();
|
|
return;
|
|
});
|
|
formData.delete('seccion');
|
|
formData.append("seccion", 'imagen');
|
|
formData.append("idLibro", idLibro);
|
|
formData.append("imagen", imagen.files[0]);
|
|
await axios.post( `${config.api}/actualizarLibro`, formData ,{ headers: { 'Content-Type': 'multipart/form-data' } }).then(() =>{
|
|
this.imageLoading= false;
|
|
this.imageSaved = true;
|
|
}).catch(() => {
|
|
this.imageLoading= false;
|
|
textoFinal += `No su pudo guardar la imagen`;
|
|
});
|
|
formData.delete('seccion');
|
|
formData.delete('imagen');
|
|
formData.append("seccion", 'pdf');
|
|
formData.append("pdf", pdf.files[0]);
|
|
await axios.post( `${config.api}/actualizarLibro`, formData ,{ headers: { 'Content-Type': 'multipart/form-data' } }).then(() =>{
|
|
this.pdfLoading= false;
|
|
this.pdfSaved = true;
|
|
}).catch(() =>{
|
|
this.pdfLoading= false;
|
|
textoFinal += `y tampoco se pude guardar el pdf`;
|
|
});
|
|
if(textoFinal!== ``)
|
|
textoFinal += ` actualize los datos editando el libro`
|
|
await Swal.fire(
|
|
'Se termino de subir los datos',
|
|
textoFinal,
|
|
'success'
|
|
);
|
|
location.reload();
|
|
}
|
|
catch(error){
|
|
console.log(error);
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'El libro no pudo ser agregado',
|
|
text: `Algo salio mal, ${error}`,
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</script> |