PortaFront/src/components/agregarLibro.vue

<template>
    <b-container fluid>
        <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>
    </b-container>
</template>
<script>
import axios from "axios";
import config from "../config/config.js";
import Swal from 'sweetalert2'
export default {
    props: {
    nombreLibro: String,
    value: String
  },
    data() {
    return {
      isbn: "",
      titulo: "",
      categoria:"Categoria",
      autor:"",
      paginas:"",
      impresion:"",
      precio:"",
      version:"Versión",
      descripcion:"",
      year:"",
     
    };
  },
  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) formData.append("imagen", imagen.files[0]); else return this.faltaCampo("Imagen");
                if(pdf.files.length > 0) formData.append("pdf", pdf.files[0]); else return this.faltaCampo("Pdf");
                formData.append("type", 'addLibro');
                await axios.post( `${config.api}/actualizarLibro`,  formData ,{ headers: { 'Content-Type': 'multipart/form-data' } });
                await Swal.fire(
                'Libro agregado con éxito',
                    '',
                    '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>