danielGe/PortaFront
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

front temrinado

Browse Source
This commit is contained in:
DanielRamirezGe
2021-01-05 18:32:07 -06:00
parent 3322b667ee
commit 4e10a9015f
20 changed files with 632 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/agregarLibro.vue
+142
View File
@@ -0,0 +1,142 @@
<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="inline-form-input-name"
class="mb-2 mr-sm-2 mb-sm-0"
placeholder="ISBN"
></b-form-input>
</b-col>
<b-col>
<b-form-input
id="inline-form-input-name"
class="mb-2 mr-sm-2 mb-sm-0"
placeholder="Titulo"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-dropdown 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="inline-form-input-name"
class="mb-2 mr-sm-2 mb-sm-0"
placeholder="Autor"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-input
id="inline-form-input-name"
class="mb-2 mr-sm-2 mb-sm-0"
placeholder="Numero de paginas"
></b-form-input>
</b-col>
<b-col>
<b-form-input
id="inline-form-input-name"
class="mb-2 mr-sm-2 mb-sm-0"
placeholder="Precio"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-input
id="inline-form-input-name"
class="mb-2 mr-sm-2 mb-sm-0"
placeholder="Versión"
></b-form-input>
</b-col>
<b-col>
<b-form-input
id="inline-form-input-name"
class="mb-2 mr-sm-2 mb-sm-0"
placeholder="Año de publicación"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-file
v-model="file1"
placeholder="Seleccione el PDF o arrastre..."
accept=".pdf"
></b-form-file>
</b-col>
<b-col>
<b-form-file
v-model="file1"
placeholder="Seleccione la imagen o arrastre..."
accept=".png"
></b-form-file>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-textarea
id="textarea"
v-model="text"
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">Agregar</b-button>
</div>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
props: {
nombreLibro: String,
value: String
},
data() {
return {
isbn: "example asa12",
titulo: "",
categoria:"Categoria",
autor:"",
paginas:"",
impresion:"",
precio:"",
version:"",
descripcion:"",
year:""
};
},
}
</script>
<style scoped>
b{
text-align: left;
}
</style>
src/components/editarBanner.vue
+78
View File
@@ -0,0 +1,78 @@
<template>
<b-container class="mt-5">
<div class="mb-5">
<h1 class="mb-4" style="text-align:left;">Agregar Imagen</h1>
<b-row>
<b-col class="p-0" cols="8">
<b-form-file
v-model="file1"
block
placeholder="Seleccione la imagen o arrastre aqui..."
accept=".png"
></b-form-file>
</b-col>
<b-col>
<b-button block variant="success">Agregar</b-button>
</b-col>
</b-row>
</div>
<h1 class="mb-4" style="text-align:left;">Eliminar Imagen</h1>
<div class="divMaster row ">
<div class=" d-flex flex-wrap " style="justify-content: space-between;">
<div v-bind:key="libro.id" v-for="(libro, idx) in Libros" :class="{ active: idx == 0 }">
<b-card class="mb-3" style="width: 28rem;">
<b-card-img :src="libro.img" alt="Image" ></b-card-img>
<b-card-footer><b-button variant="danger">Eliminar</b-button></b-card-footer>
</b-card>
</div>
</div>
</div>
</b-container>
</template>
<script>
import axios from "axios";
import config from "../config/config.js";
export default {
name: "editarBanner",
data() {
return {
Libros: [],
};
},
async created() {
try {
let path = `${config.api}/imagenCarrusel?nombre=`;
let nombres = await axios.get(`${config.api}/nombreCarrusel`);
nombres = nombres.data.data;
for (let i = 0; i < nombres.length; i++) {
//console.log(path);
let config = {
// example url
url: `${path}${nombres[i]}`,
method: "GET",
responseType: "blob"
};
await axios(config).then(response => {
let reader = new FileReader();
reader.readAsDataURL(response.data);
reader.onload = () => {
this.Libros.push({ id: i, img: reader.result });
};
});
}
} catch (error) {
console.log(`Ocurrio un error msj: ${error}`);
}
}
};
</script>
<style scoped>
.divMaster {
height: auto;
}
</style>
src/components/editarLibro.vue
+10 -5
View File
@@ -1,6 +1,6 @@
<template>
<div>
<div class=" divMaster row row d-flex flex-wrap justify-content-center">
<b-container class="mt-5">
<div class=" divMaster row row d-flex flex-wrap justify-content-center mb-3">
<b-input-group class="mb-2">
<b-input-group-prepend is-text>
<b-icon icon="search"></b-icon>
@@ -14,21 +14,26 @@
<b-card class="mb-3" style="width: 14rem; height: 22rem;">
<b-card-img :src="libro.img" alt="Image" style="max-width: 20rem; height: 15rem;" no-body ></b-card-img>
<template #footer>
<b-button variant="outline-warning" class="float-left">Editar</b-button>
<b-button variant="outline-danger" class="float-right">Eliminar</b-button>
<b-button variant="outline-warning" class="float-left" v-b-modal.modalEditarLibro>Editar</b-button>
<b-button variant="outline-danger" class="float-right" >Eliminar</b-button>
</template>
</b-card>
</div>
</div>
</div>
</div>
<ModalEditar nombreLibro="uno" value="valueCampo" />
</b-container>
</template>
<script>
import axios from "axios";
import config from "../config/config.js";
import ModalEditar from './modalEditar.vue'
export default {
components: {
ModalEditar,
},
data() {
return {
Libros: []
src/components/modalEditar.vue
+210
View File
@@ -0,0 +1,210 @@
<template>
<b-modal size="lg" id="modalEditarLibro" hide-footer title="Editar Libro">
<b-container fluid>
<b-row class="mb-2">
<b-col >
<h1 style="text-align:center;">Editar {{nombreLibro}}</h1>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-checkbox v-model="checked" name="check-button" switch><b>ISBN:</b></b-form-checkbox>
</b-col>
<b-col>
<label class="mr-sm-2">{{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"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-checkbox v-model="checked" name="check-button" switch><b>Titulo:</b></b-form-checkbox>
</b-col>
<b-col>
<label class="mr-sm-2">{{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"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-checkbox v-model="checked" name="check-button" switch><b>Categoria:</b></b-form-checkbox>
</b-col>
<b-col>
<label class="mr-sm-2">{{categoria}}</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"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-checkbox v-model="checked" name="check-button" switch><b>Autor:</b></b-form-checkbox>
</b-col>
<b-col>
<label class="mr-sm-2">{{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"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-checkbox v-model="checked" name="check-button" switch><b>Numero de paginas:</b></b-form-checkbox>
</b-col>
<b-col>
<label class="mr-sm-2">{{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"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-checkbox v-model="checked" name="check-button" switch><b>Precio:</b></b-form-checkbox>
</b-col>
<b-col>
<label class="mr-sm-2">{{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"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-checkbox v-model="checked" name="check-button" switch><b>Versión:</b></b-form-checkbox>
</b-col>
<b-col>
<label class="mr-sm-2">{{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"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-checkbox v-model="checked" name="check-button" switch><b>Año de publicación:</b></b-form-checkbox>
</b-col>
<b-col>
<label class="mr-sm-2">{{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"
></b-form-input>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-checkbox v-model="checked" name="check-button" switch><b>Descrpción:</b></b-form-checkbox>
</b-col>
<b-col>
<label class="mr-sm-2">{{descripcion}}</label>
</b-col>
<b-col cols="6">
<b-form-textarea
id="textarea"
v-model="text"
placeholder="Enter something..."
rows="3"
max-rows="6"
></b-form-textarea>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-checkbox v-model="checked" name="check-button" switch><b>Imagen</b></b-form-checkbox>
</b-col>
<b-col>
</b-col>
<b-col cols="6">
<b-form-file
v-model="file1"
placeholder="Seleccione la imagen o arrastre..."
accept=".png"
></b-form-file>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<b-form-checkbox v-model="checked" 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
v-model="file1"
placeholder="Seleccione el PDF o arrastre..."
accept=".pdf"
></b-form-file>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
<div style="margin-top: 2rem;">
<b-button class="btn btn-outline-success float-right" @click="enviarFicha()" style="width: 30%; ">Enviar</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-modal>
</template>
<script>
export default {
props: {
nombreLibro: String,
value: String
},
data() {
return {
isbn: "example asa12",
titulo: "",
categoria:"",
autor:"",
paginas:"",
impresion:"",
precio:"",
version:"",
descripcion:"",
year:""
};
},
}
</script>
src/components/navAdmin.vue
+48
View File
@@ -0,0 +1,48 @@
<template>
<div>
<b-nav vertical class="mt-3">
<b-nav-item class="m-2">
<div class="accordion" role="tablist">
<b-card no-body >
<b-card-header header-tag="header" role="tab">
<b-button block squared v-b-toggle.banner @click="$store.commit('cambiarNav','EditarBanner')" class="p-1 azulUnam">Banner principal</b-button>
</b-card-header>
<b-collapse id="banner" accordion="my-accordion" role="tabpanel">
<b-card-body>
</b-card-body>
</b-collapse>
</b-card>
</div>
</b-nav-item>
<b-nav-item class="m-2">
<div class="accordion" role="tablist">
<b-card no-body >
<b-card-header header-tag="header" role="tab">
<b-button block squared v-b-toggle.libros class="p-1 azulUnam">Libros</b-button>
</b-card-header>
<b-collapse id="libros" accordion="my-accordion" role="tabpanel">
<b-card-body>
<b-button block variant="light" class="p-1 m-0" @click="$store.commit('cambiarNav','EditarLibro')">Editar</b-button>
<b-button block variant="light" class="p-1 m-0" @click="$store.commit('cambiarNav','AgregarLibro')">Agregar</b-button>
</b-card-body>
</b-collapse>
</b-card>
</div>
</b-nav-item>
</b-nav>
</div>
</template>
<style scoped>
* {
margin: 0;
padding: 0;
}
.azulUnam {
background-color: #1e3c70;
}
</style>