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

search comppnent

Browse Source
This commit is contained in:
Enrique Maya García
2020-10-22 19:49:11 -05:00
parent 54cd339130
commit 2b8fd0098a
5 changed files with 161 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+81 -81
View File
@@ -1392,16 +1392,6 @@
"integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
"dev": true
},
"@types/mini-css-extract-plugin": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
"integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
"dev": true,
"optional": true,
"requires": {
"@types/webpack": "*"
}
},
"@types/minimatch": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -1796,17 +1786,6 @@
"integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
"dev": true
},
"ansi-styles": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
"dev": true,
"optional": true,
"requires": {
"@types/color-name": "^1.1.1",
"color-convert": "^2.0.1"
}
},
"cacache": {
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1833,34 +1812,6 @@
"unique-filename": "^1.1.1"
}
},
"chalk": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"find-cache-dir": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1882,13 +1833,6 @@
"path-exists": "^4.0.0"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1953,16 +1897,6 @@
"minipass": "^3.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1979,21 +1913,6 @@
"terser": "^4.6.12",
"webpack-sources": "^1.4.3"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.0.0-beta.7",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
"integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
"dev": true,
"optional": true,
"requires": {
"@types/mini-css-extract-plugin": "^0.9.1",
"chalk": "^3.0.0",
"hash-sum": "^2.0.0",
"loader-utils": "^1.2.3",
"merge-source-map": "^1.1.0",
"source-map": "^0.6.1"
}
}
}
},
@@ -11043,6 +10962,87 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.0.0-beta.8",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
"integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-router": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",
src/components/SearchResultsPage.vue
+76
View File
@@ -0,0 +1,76 @@
<template>
<div class="container my-5">
<h4><b>Resultados para "{{productResult[0].searchText}}"</b></h4>
<p>Hay {{productResult[0].numberFound}} productos</p>
<div class="my-4 d-flex justify-content-sm-start justify-content-center flex-wrap">
<div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
<img v-bind:src="productResult[0].img" class="card-img-top" alt="...">
<div class="card-body text-center">
<p class="card-text">{{productResult[0].description}}</p>
<span><b>${{productResult[0].price}}</b></span>
</div>
</div>
<div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
<img v-bind:src="productResult[1].img" class="card-img-top" alt="...">
<div class="card-body text-center">
<p class="card-text">{{productResult[1].description}}</p>
<span><b>${{productResult[1].price}}</b></span>
</div>
</div>
<div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
<img v-bind:src="productResult[2].img" class="card-img-top" alt="...">
<div class="card-body text-center">
<p class="card-text">{{productResult[2].description}}</p>
<span><b>${{productResult[2].price}}</b></span>
</div>
</div>
</div>
<p>Mostrando {{productResult[0].numberFound}} de {{productResult[0].totalBookCategory}} artículo(s)</p>
</div>
</template>
<script>
export default {
data(){
return {
productResult: [
{
searchText: "Lorem ipsum",
numberFound: 3,
description: "Some quick example text to build on the card title and...",
price: 180,
totalBookCategory: 28,
img: 'https://images.cdn3.buscalibre.com/fit-in/360x360/7d/92/7d92cb1e49ff2d7756f192114e5c8901.jpg'
},
{
searchText: "Lorem ipsum",
numberFound: 3,
description: "2 Some quick example text to build on the card title and...",
price: 190,
totalBookCategory: 28,
img: 'https://m.media-amazon.com/images/I/51HdyT9COEL.jpg'
},
{
searchText: "Lorem ipsum",
numberFound: 3,
description: "3 Some quick example text to build on the card title and...",
price: 200,
totalBookCategory: 28,
img: 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Lenin_book_1902.jpg'
}
]
}
}
}
</script>
<style scoped>
.g-card-sty {
-webkit-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
}
</style>
src/routes.js
-6
View File
@@ -2,7 +2,6 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './view/Home.vue'
import SearchResultsPage from './view/SearchResultsPage.vue'
const routes = [
{
@@ -15,11 +14,6 @@ const routes = [
component: Home,
name: 'home'
},
{
path: '/search-results',
component: SearchResultsPage,
name: 'searchResultsPage'
},
]
Vue.use(VueRouter)
src/view/Home.vue
+4 -1
View File
@@ -5,8 +5,11 @@
</template>
<script>
export default {
export default {
components: {
}
}
</script>
src/view/SearchResultsPage.vue
-47
View File
@@ -1,47 +0,0 @@
<template>
<div class="container my-5">
<h4><b>Resultados para "Lorem ipsum"</b></h4>
<p>Hay 3 productos</p>
<div class="my-4 d-flex justify-content-sm-start justify-content-center flex-wrap">
<div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
<img src="../img/bookOne.jpg" class="card-img-top" alt="...">
<div class="card-body text-center">
<p class="card-text">Some quick example text to build on the card title and...</p>
<span><b>$180</b></span>
</div>
</div>
<div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
<img src="../img/bookOne.jpg" class="card-img-top" alt="...">
<div class="card-body text-center">
<p class="card-text">Some quick example text to build on the card title and...</p>
<span><b>$180</b></span>
</div>
</div>
<div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
<img src="../img/bookOne.jpg" class="card-img-top" alt="...">
<div class="card-body text-center">
<p class="card-text">Some quick example text to build on the card title and...</p>
<span><b>$180</b></span>
</div>
</div>
</div>
<p>Mostrando 1 - 3 de 3 artículo(s)</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.g-card-sty {
-webkit-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
}
</style>