wip busqueda page
This commit is contained in:
María
60
components/FacebookSignIn.vue
Normal file
60
components/FacebookSignIn.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<button class="button f-signin-btn" @click="logInWithFacebook">
|
||||
Login with Facebook
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
script: [
|
||||
{
|
||||
src: 'https://connect.facebook.net/es_ES/sdk.js',
|
||||
defer: true,
|
||||
async: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.fbAsyncInit = async function () {
|
||||
await window.FB.init({
|
||||
appId: process.env.facebookId,
|
||||
cookie: true,
|
||||
version: 'v13.0',
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async logInWithFacebook() {
|
||||
await window.FB.login(function (response) {
|
||||
if (response.authResponse) {
|
||||
console.log(response)
|
||||
alert('You are logged in & cookie set!')
|
||||
// Now you can redirect the user or do an AJAX request to
|
||||
// a PHP script that grabs the signed request from the cookie.
|
||||
} else {
|
||||
alert('User cancelled login or did not fully authorize.')
|
||||
}
|
||||
})
|
||||
return false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scooped>
|
||||
.f-signin-btn {
|
||||
align-self: center;
|
||||
background-color: $color-facebook;
|
||||
color: $color-light;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
text-transform: uppercase;
|
||||
padding: 15px 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
92
components/GoogleSignIn.vue
Normal file
92
components/GoogleSignIn.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<button class="g-signin-btn" id="googleSignIn" type="button">
|
||||
Login with Google
|
||||
</button>
|
||||
<!-- id="google-signin-button"
|
||||
class="g-signin2"
|
||||
data-onsuccess="onGoogleSignIn" -->
|
||||
</template>
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
// function onGoogleSignIn(googleUser) {
|
||||
// // Useful data for your client-side scripts:
|
||||
// var profile = googleUser.getBasicProfile()
|
||||
// console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
|
||||
// console.log('Full Name: ' + profile.getName())
|
||||
// console.log('Given Name: ' + profile.getGivenName())
|
||||
// console.log('Family Name: ' + profile.getFamilyName())
|
||||
// console.log('Image URL: ' + profile.getImageUrl())
|
||||
// console.log('Email: ' + profile.getEmail())
|
||||
|
||||
// // The ID token you need to pass to your backend:
|
||||
// var id_token = googleUser.getAuthResponse().id_token
|
||||
// console.log('ID Token: ' + id_token)
|
||||
// }
|
||||
|
||||
function onLoadGoogleCallback() {
|
||||
gapi.load('auth2', function () {
|
||||
const auth2 = gapi.auth2.init({
|
||||
client_id: process.env.googleId,
|
||||
cookiepolicy: 'single_host_origin',
|
||||
scope: 'profile',
|
||||
})
|
||||
|
||||
const element = document.getElementById('googleSignIn')
|
||||
auth2.attachClickHandler(
|
||||
element,
|
||||
{},
|
||||
function (googleUser) {
|
||||
console.log('Signed in: ' + googleUser.getBasicProfile().getName())
|
||||
},
|
||||
function (error) {
|
||||
console.log('Sign-in error', error)
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
meta: [
|
||||
{
|
||||
name: 'google-signin-scope',
|
||||
content: 'profile email',
|
||||
},
|
||||
{
|
||||
name: 'google-signin-client_id',
|
||||
content: process.env.googleId,
|
||||
},
|
||||
],
|
||||
script: [
|
||||
{
|
||||
src: 'https://apis.google.com/js/platform.js',
|
||||
defer: true,
|
||||
async: true,
|
||||
},
|
||||
// {
|
||||
// src: 'https://apis.google.com/js/api:client.js',
|
||||
// },
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.onload = onLoadGoogleCallback
|
||||
},
|
||||
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.g-signin-btn {
|
||||
align-self: center;
|
||||
background-color: $color-google;
|
||||
color: $color-light;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
text-transform: uppercase;
|
||||
padding: 15px 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
338
components/ProductFilter.vue
Normal file
338
components/ProductFilter.vue
Normal file
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div v-b-toggle.collapse-all class="filters-header">
|
||||
<img
|
||||
class="image"
|
||||
src="@/assets/img/product-filter-filtrar.svg"
|
||||
alt=""
|
||||
/>
|
||||
<h2 class="text">FILTRAR POR</h2>
|
||||
</div>
|
||||
<BCollapse id="collapse-all" visible>
|
||||
<!-- Location -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="location">
|
||||
<div class="googleaddress-container">
|
||||
<!-- TODO: Revisar componente -->
|
||||
<!-- <GoogleAddress
|
||||
@addedData="getPlace"
|
||||
:geo="geo"
|
||||
:label="'Cercanía'"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapsible collapsible-range">
|
||||
<hr />
|
||||
<div v-b-toggle.collapse-price class="m-1 filter-header">
|
||||
<h2 class="title">Precio</h2>
|
||||
<img
|
||||
src="../assets/img/latienda-arrow-down.svg"
|
||||
alt=""
|
||||
class="arrow"
|
||||
/>
|
||||
</div>
|
||||
<BCollapse id="collapse-price" visible>
|
||||
<!-- Price -->
|
||||
<div class="filter-range-container">
|
||||
<ClientOnly>
|
||||
<v-range-slider
|
||||
v-model="priceRange"
|
||||
:min="0"
|
||||
:max="500"
|
||||
step="10"
|
||||
thumb-label="always"
|
||||
color="#8cead8"
|
||||
track-color="#d6d5d5"
|
||||
>
|
||||
<template #prepend>
|
||||
<span>{{ priceRange[0] }} €</span>
|
||||
</template>
|
||||
<template #append>
|
||||
<span>{{ priceRange[1] }} €</span>
|
||||
</template>
|
||||
</v-range-slider>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
<hr class="dotted-hr" />
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="checkbox-shipped"
|
||||
v-model="filterForm.shipping_cost"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label class="form-check-label" for="checkbox-shipped">
|
||||
Sin gastos de envío
|
||||
</label>
|
||||
</div>
|
||||
<hr class="dotted-hr" />
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="checkbox-discount"
|
||||
v-model="filterForm.discount"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<label class="form-check-label" for="checkbox-discount">
|
||||
Descuentos
|
||||
</label>
|
||||
</div>
|
||||
</BCollapse>
|
||||
</div>
|
||||
<div class="collapsible collapsible-checkboxes">
|
||||
<hr />
|
||||
<div v-b-toggle.collapse-categories class="m-1 filter-header">
|
||||
<h2 class="title">Categorías</h2>
|
||||
<img
|
||||
src="../assets/img/latienda-arrow-down.svg"
|
||||
alt=""
|
||||
class="arrow"
|
||||
/>
|
||||
</div>
|
||||
<BCollapse id="collapse-categories" visible>
|
||||
<div class="checkboxes">
|
||||
<div
|
||||
v-for="(n, index) in categories"
|
||||
:key="index"
|
||||
class="form-check"
|
||||
>
|
||||
<input
|
||||
:id="'checkbox-' + index"
|
||||
v-model="checkedCategories"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
:value="n"
|
||||
/>
|
||||
<label class="form-check-label" :for="'checkbox-' + index">
|
||||
{{ n }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="filter-button" @click="applyFilters">
|
||||
Aplicar
|
||||
</button>
|
||||
</div>
|
||||
</BCollapse>
|
||||
</div>
|
||||
</BCollapse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
prices: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
currentFilters: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
geo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
|
||||
emits: ['applyFilters'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
filterForm: {
|
||||
shipping_cost: false,
|
||||
discount: false,
|
||||
},
|
||||
visible: true,
|
||||
checkedCategories: [],
|
||||
categories: [
|
||||
'Alimentación, bebida y tabaco',
|
||||
'Arte y ocio',
|
||||
'Bebés y niños pequeños',
|
||||
'Bricolaje',
|
||||
'Cámaras y ópticas',
|
||||
'Casa y jardín',
|
||||
'Economía e industria',
|
||||
'Electrónica',
|
||||
'Elementos religiosos y ceremoniales',
|
||||
'Equipamiento deportivo',
|
||||
'Juegos y juguetes',
|
||||
'Maletas y bolsos de viaje',
|
||||
'Material de oficina',
|
||||
'Mobiliario',
|
||||
'Multimedia',
|
||||
'Productos para adultos',
|
||||
'Productos para mascotas y animales',
|
||||
'Ropa y accesorios',
|
||||
'Salud y belleza',
|
||||
'Software',
|
||||
'Vehículos y recambios',
|
||||
],
|
||||
priceRange: [0, 500],
|
||||
priceRangeFilter: {},
|
||||
place: null,
|
||||
coordinates: null,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentFilters(newCurrentFilters) {
|
||||
if (newCurrentFilters) {
|
||||
if (newCurrentFilters['category']) {
|
||||
this.checkedCategories = newCurrentFilters['category']
|
||||
} else {
|
||||
this.checkedCategories = []
|
||||
}
|
||||
if (Object.keys(newCurrentFilters).includes('shipping_cost')) {
|
||||
this.filterForm.shipping_cost = true
|
||||
} else {
|
||||
this.filterForm.shipping_cost = false
|
||||
}
|
||||
}
|
||||
this.filterForm.discount = this.$route.query.hasOwnProperty('discount')
|
||||
},
|
||||
prices(newPrices) {
|
||||
if (newPrices.min && newPrices.max) {
|
||||
this.priceRange = [newPrices.min, newPrices.max]
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.prices.min && this.prices.max) {
|
||||
this.priceRange = [this.prices.min, this.prices.max]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPlace(value) {
|
||||
this.place = value
|
||||
},
|
||||
|
||||
applyFilters() {
|
||||
const filters = {}
|
||||
filters.price_min = this.priceRange[0]
|
||||
filters.price_max = this.priceRange[1]
|
||||
if (this.filterForm.shipping_cost) filters.shipping_cost = false
|
||||
if (this.filterForm.discount) filters.discount = true
|
||||
filters.category = this.checkedCategories
|
||||
if (this.place) {
|
||||
filters.latitude = this.place.geo.latitude
|
||||
filters.longitude = this.place.geo.longitude
|
||||
}
|
||||
this.$emit('applyFilters', filters)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.filter-button {
|
||||
margin-top: 30px;
|
||||
background-color: $color-navy;
|
||||
color: $color-light;
|
||||
font-size: $xs;
|
||||
padding: 0.5em 0.8em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.filter-range-container {
|
||||
margin-top: 60px;
|
||||
}
|
||||
.filters-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 20px;
|
||||
outline: none;
|
||||
@include mobile {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.text {
|
||||
font-size: $s;
|
||||
margin: 0;
|
||||
margin-left: 10px;
|
||||
color: $color-navy;
|
||||
font-weight: $bold;
|
||||
}
|
||||
.image {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.location {
|
||||
label {
|
||||
font-size: $s;
|
||||
color: $color-navy;
|
||||
font-weight: $bold;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: url('../assets/img/product-filter-ubicacion.svg') center /
|
||||
contain no-repeat;
|
||||
}
|
||||
|
||||
.location-input {
|
||||
background-color: $color-grey-nav;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.filter-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
|
||||
h2 {
|
||||
font-size: $s;
|
||||
color: $color-navy;
|
||||
font-weight: $bold;
|
||||
}
|
||||
img {
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
font-family: Noto Sans Regular, sans-serif;
|
||||
font-size: $s;
|
||||
color: $color-greytext;
|
||||
}
|
||||
}
|
||||
|
||||
.checkboxes {
|
||||
height: 6rem;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.dotted-hr {
|
||||
border-top: 2px dotted $color-greylighter;
|
||||
margin: 8px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container wrapper">
|
||||
<form @submit.prevent="search" class="search-container">
|
||||
<form class="search-container" @submit.prevent="search" >
|
||||
<div class="categorias-wrapper">
|
||||
<select v-model="selectedCategory" class="categorias">
|
||||
<option selected value="">Todas las categorías</option>
|
||||
@@ -15,13 +15,13 @@
|
||||
</div>
|
||||
<input
|
||||
id="searchbox"
|
||||
@focus="focused"
|
||||
@blur="focusedOut"
|
||||
v-model="searchText"
|
||||
class="search-text"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
placeholder=""
|
||||
@focus="focused"
|
||||
@blur="focusedOut"
|
||||
/>
|
||||
<div class="search-link">
|
||||
<img
|
||||
@@ -76,7 +76,7 @@ export default {
|
||||
this.startTyping()
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
beforeUnmount() {
|
||||
this.stopTyping()
|
||||
},
|
||||
|
||||
@@ -96,8 +96,8 @@ export default {
|
||||
let i = 0
|
||||
let word = 0
|
||||
let step = 0
|
||||
let input = document.querySelector('#searchbox')
|
||||
let placeholderTexts = [
|
||||
const input = document.querySelector('#searchbox')
|
||||
const placeholderTexts = [
|
||||
'Jabón sólido',
|
||||
'Huertos de libertad',
|
||||
'Hierbabuena',
|
||||
|
||||
@@ -1,18 +1,379 @@
|
||||
<template>
|
||||
<div>
|
||||
pagina busqueda
|
||||
<h1>Busqueda</h1>
|
||||
<p>Esta es la página de búsqueda.</p>
|
||||
<p>Utiliza el componente NavBarSearch para navegar.</p>
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<ProductFilter
|
||||
:filters="filters"
|
||||
:current-filters="currentFilters"
|
||||
:prices="prices"
|
||||
:geo="coordinates"
|
||||
@apply-filters="updateData"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="carousel">
|
||||
<h2 class="title">Últimos productos</h2>
|
||||
<ItemsRow class="items" :type="`product`" :items="carouselProducts" />
|
||||
</div>
|
||||
<div v-if="hasFilterTags" class="applied-filters">
|
||||
<h2 class="title">FILTROS APLICADOS</h2>
|
||||
<div class="filter-buttons">
|
||||
<button
|
||||
v-if="appliedFilters.hasOwnProperty('shipping_cost')"
|
||||
type="button"
|
||||
class="btn-tag"
|
||||
@click="removeFilter('shipping_cost')"
|
||||
>
|
||||
<span>Sin gastos de envío</span>
|
||||
<img src="@/assets/img/latienda-close.svg" alt="" />
|
||||
</button>
|
||||
<button
|
||||
v-if="appliedFilters.hasOwnProperty('discount')"
|
||||
type="button"
|
||||
class="btn-tag"
|
||||
@click="removeFilter('discount')"
|
||||
>
|
||||
<span>Descuentos</span>
|
||||
<img src="@/assets/img/latienda-close.svg" alt="" />
|
||||
</button>
|
||||
<div v-if="appliedFilters.hasOwnProperty('category')">
|
||||
<button
|
||||
v-for="(cat, key) in appliedFilters.category"
|
||||
:key="key"
|
||||
type="button"
|
||||
class="btn-delete-all"
|
||||
@click="removeCategory(cat)"
|
||||
>
|
||||
<span>{{ cat }}</span>
|
||||
<img src="@/assets/img/latienda-close.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="results">
|
||||
<h2 class="title"></h2>
|
||||
<p class="count">Hay {{ count }} productos</p>
|
||||
</div>
|
||||
<div v-if="products.length !== 0">
|
||||
<div v-for="product in products" :key="product.id">
|
||||
<ProductCard :key="product.key" :product="product" />
|
||||
</div>
|
||||
<BPagination
|
||||
v-model="currentPage"
|
||||
class="pagination"
|
||||
:total-rows="count"
|
||||
:per-page="perPage"
|
||||
@change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="no-results">
|
||||
<p>
|
||||
No hemos encontrado resultados para su búsqueda... pero puede buscar
|
||||
otro o consultar estos productos.
|
||||
</p>
|
||||
<div v-for="product in defaultProducts" :key="product.id">
|
||||
<ProductCard :key="product.key" :product="product" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
//import { useRoute, useRouter } from 'vue-router'
|
||||
import serverSearch from '~/utils/serverSearch'
|
||||
import clientSearch from '~/utils/clientSearch'
|
||||
|
||||
}
|
||||
export default {
|
||||
setup(){
|
||||
definePageMeta({
|
||||
layout: 'mainbanner',
|
||||
})
|
||||
|
||||
const auth = useAuthStore()
|
||||
return { auth }
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
searchText: '',
|
||||
currentPage: 1,
|
||||
perPage: 10,
|
||||
filterTags: {
|
||||
shipping_cost: undefined,
|
||||
},
|
||||
previousParams: null,
|
||||
currentFilters: null,
|
||||
mountedProducts: [],
|
||||
appliedFilters: {},
|
||||
filters: {},
|
||||
prices: { min: null, max: null },
|
||||
coordinates: null,
|
||||
products: [],
|
||||
defaultProducts: [],
|
||||
carouselProducts: [],
|
||||
count: 0,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasFilterTags() {
|
||||
if (!this.appliedFilters) return false
|
||||
return (
|
||||
Object.keys(this.appliedFilters).includes('shipping_cost') ||
|
||||
Object.keys(this.appliedFilters).includes('discount') ||
|
||||
(Array.isArray(this.appliedFilters.category) &&
|
||||
this.appliedFilters.category.length > 0)
|
||||
)
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route() {
|
||||
Object.assign(this.$data, this.$options.data())
|
||||
},
|
||||
},
|
||||
|
||||
async beforeCreate() {
|
||||
const config = useRuntimeConfig()
|
||||
const params = import.meta.client ? clientSearch(this.$route.query) : serverSearch(this.$route.query)
|
||||
console.log('Params', this.$route.query)
|
||||
|
||||
const data = await $fetch(`/search_products/?limit=10&offset=0`, {
|
||||
baseURL: config.public.apiBaseUrl,
|
||||
method: 'GET',
|
||||
params,
|
||||
headers: {
|
||||
Authorization: `Bearer ${this.auth.access}`,
|
||||
},
|
||||
})
|
||||
console.log('data', data)
|
||||
|
||||
const products = data.products
|
||||
let defaultProducts = []
|
||||
if (products.length === 0) {
|
||||
const data = await $fetch(`/search_products/?q=&order=newest&limit=10&offset=0`, {
|
||||
baseURL: config.public.apiBaseUrl,
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: `Bearer ${this.auth.access}`,
|
||||
},
|
||||
})
|
||||
defaultProducts = data.products
|
||||
}
|
||||
|
||||
const carouselProducts = await $fetch(`/products/?limit=12&offset=0`, {
|
||||
baseURL: config.public.apiBaseUrl,
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: `Bearer ${this.auth.access}`,
|
||||
},
|
||||
})
|
||||
|
||||
let coordinates
|
||||
if (params.latitude && params.longitude) {
|
||||
coordinates = {
|
||||
lat: Number(params.latitude),
|
||||
lng: Number(params.longitude),
|
||||
}
|
||||
}
|
||||
|
||||
let prices
|
||||
if (params.price_min || params.price_max) {
|
||||
prices = { max: params.price_max, min: params.price_min }
|
||||
} else if (data.prices.min || data.prices.max) {
|
||||
prices = data.prices
|
||||
} else {
|
||||
prices = { max: null, min: null }
|
||||
}
|
||||
|
||||
return {
|
||||
appliedFilters: params,
|
||||
filters: data.filters,
|
||||
prices: prices,
|
||||
coordinates: coordinates,
|
||||
products: products,
|
||||
defaultProducts: defaultProducts,
|
||||
carouselProducts: carouselProducts.data.results,
|
||||
count: data.count,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.currentFilters = this.appliedFilters
|
||||
},
|
||||
|
||||
methods: {
|
||||
async handlePageChange(value) {
|
||||
const offset = (value - 1) * this.perPage
|
||||
this.products = await this.getMoreProducts(offset)
|
||||
},
|
||||
|
||||
async getMoreProducts(offset) {
|
||||
const data = await this.$api.get(`/search_products/?limit=10&offset=${offset}`, {
|
||||
baseURL: config.public.apiBaseUrl,
|
||||
method: 'GET',
|
||||
body: { params: this.appliedFilters },
|
||||
})
|
||||
return data.products
|
||||
},
|
||||
|
||||
updateData(value) {
|
||||
const filters = { q: this.appliedFilters.q }
|
||||
|
||||
if (Object.keys(value).length === 0) { //Review this condition
|
||||
return this.$router.push({
|
||||
name: 'busqueda',
|
||||
query: { ...filters },
|
||||
})
|
||||
} else {
|
||||
return this.$router.push({
|
||||
name: 'busqueda',
|
||||
query: { ...value, ...filters },
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
removeCategory(cat) {
|
||||
this.currentFilters = this.appliedFilters
|
||||
const categoryArray = this.currentFilters.category
|
||||
const newCats = []
|
||||
categoryArray.forEach((element) => {
|
||||
if (element !== cat) {
|
||||
newCats.push(element)
|
||||
}
|
||||
})
|
||||
this.currentFilters.category = newCats
|
||||
const noCategory = {}
|
||||
Object.entries(this.currentFilters).forEach(([key, value]) => {
|
||||
if (key !== 'category') {
|
||||
noCategory[key] = value
|
||||
}
|
||||
})
|
||||
if (newCats.length === 0) {
|
||||
return this.$router.push({
|
||||
path: this.$route.path,
|
||||
query: { ...noCategory },
|
||||
})
|
||||
} else {
|
||||
return this.$router.push({
|
||||
path: this.$route.path,
|
||||
query: { category: newCats, ...noCategory },
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
removeFilter(filter) {
|
||||
this.currentFilters = { ...this.appliedFilters }
|
||||
this.currentFilters = Object.fromEntries(
|
||||
Object.entries(this.currentFilters).filter(([key]) => key !== filter)
|
||||
)
|
||||
|
||||
return this.$router.push({
|
||||
name: 'busqueda',
|
||||
query: { ...this.currentFilters },
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
search() {
|
||||
if (this.searchText) {
|
||||
return this.$router.push({
|
||||
name: 'busqueda',
|
||||
query: { q: this.searchText },
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ad {
|
||||
margin: 40px auto;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: $color-grey-nav;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.applied-filters {
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
.title {
|
||||
font-size: $xl;
|
||||
color: $color-navy;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
margin-bottom: 30px;
|
||||
|
||||
button {
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 8px 10px;
|
||||
color: $color-light;
|
||||
background-color: $color-dark-green;
|
||||
|
||||
img {
|
||||
width: 18px;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-delete-all {
|
||||
background-color: $color-darker-green;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel {
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
.title {
|
||||
font-size: $xl;
|
||||
color: $color-navy;
|
||||
@include tablet {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
.items {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.results {
|
||||
.title {
|
||||
font-size: $xl;
|
||||
color: $color-navy;
|
||||
}
|
||||
.count {
|
||||
font-size: $xs;
|
||||
color: $color-greytext;
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: $xl;
|
||||
color: $color-navy;
|
||||
margin-top: 100px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
layout: 'admin',
|
||||
}
|
||||
|
||||
// Esto debe estar fuera del export default
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
auth: {
|
||||
authority: 'SITE_ADMIN',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Solo para admins</h1>
|
||||
</template>
|
||||
Reference in New Issue
Block a user