improve filters
This commit is contained in:
@@ -1,129 +1,120 @@
|
||||
<template>
|
||||
<div class="c-filter">
|
||||
<div class="c-filter-content">
|
||||
<div class="">
|
||||
<div v-b-toggle.collapse-all class="filters-header">
|
||||
<img
|
||||
class="image"
|
||||
src="@/assets/img/filter.svg"
|
||||
alt=""
|
||||
/>
|
||||
<h2 class="text">FILTRAR PROPUESTAS</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
|
||||
<div v-b-toggle.collapse-all class="filters-header">
|
||||
<img class="image" src="@/assets/img/filter.svg" alt="" />
|
||||
<h2 class="text">FILTRAR PROPUESTAS</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>
|
||||
|
||||
<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 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="!isMobile">
|
||||
<!-- Price -->
|
||||
<div class="filter-range-container">
|
||||
<ClientOnly>
|
||||
<v-range-slider
|
||||
v-model="priceRange"
|
||||
:min="0"
|
||||
:max="500"
|
||||
step="10"
|
||||
thumb-label="always"
|
||||
color="#143E8C"
|
||||
track-color="#d6d5d5"
|
||||
/>
|
||||
<p class="notice">
|
||||
Entre <span>{{ priceRange[0] }} €</span> y
|
||||
<span>{{ priceRange[1] }} €</span>
|
||||
</p>
|
||||
</ClientOnly>
|
||||
</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="#143E8C"
|
||||
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">
|
||||
<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="!isMobile">
|
||||
<div class="checkboxes">
|
||||
<div
|
||||
v-for="(n, index) in categories"
|
||||
:key="index"
|
||||
class="form-check"
|
||||
>
|
||||
<input
|
||||
id="checkbox-shipped"
|
||||
v-model="filterForm.shipping_cost"
|
||||
:id="'checkbox-' + index"
|
||||
v-model="checkedCategories"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
:value="n"
|
||||
/>
|
||||
<label class="form-check-label" for="checkbox-shipped">
|
||||
Sin gastos de envío
|
||||
<label class="form-check-label" :for="'checkbox-' + index">
|
||||
{{ n }}
|
||||
</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 FILTROS
|
||||
</button>
|
||||
</div>
|
||||
</BCollapse>
|
||||
</div>
|
||||
</BCollapse>
|
||||
</div>
|
||||
<div>
|
||||
<button class="filter-button" @click="applyFilters">
|
||||
APLICAR FILTROS
|
||||
</button>
|
||||
</div>
|
||||
</BCollapse>
|
||||
</div>
|
||||
</BCollapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -133,23 +124,23 @@ export default {
|
||||
props: {
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
default: () => ({}),
|
||||
},
|
||||
prices: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
default: () => ({}),
|
||||
},
|
||||
currentFilters: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
default: () => ({}),
|
||||
},
|
||||
geo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
emits: ['applyFilters'],
|
||||
emits: ["applyFilters"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
@@ -157,87 +148,101 @@ export default {
|
||||
shipping_cost: false,
|
||||
discount: false,
|
||||
},
|
||||
screenSize: null,
|
||||
visible: true,
|
||||
checkedCategories: [],
|
||||
categories: [
|
||||
'Alimentación',
|
||||
'Agricultura ',
|
||||
'Energía',
|
||||
'Hogar y jardín',
|
||||
'Moda y Textil',
|
||||
'Salud y Cuidados',
|
||||
'Movilidad y Mensajería',
|
||||
'Ocio y Deporte',
|
||||
'Turismo y Gastronomía',
|
||||
'Cultura, Educación y Medios',
|
||||
'Tecnología y Servicios Digitales',
|
||||
'Economía Circular y Reparación',
|
||||
'Finanzas Éticas y Seguros',
|
||||
'Servicios Profesionales',
|
||||
"Alimentación",
|
||||
"Agricultura ",
|
||||
"Energía",
|
||||
"Hogar y jardín",
|
||||
"Moda y Textil",
|
||||
"Salud y Cuidados",
|
||||
"Movilidad y Mensajería",
|
||||
"Ocio y Deporte",
|
||||
"Turismo y Gastronomía",
|
||||
"Cultura, Educación y Medios",
|
||||
"Tecnología y Servicios Digitales",
|
||||
"Economía Circular y Reparación",
|
||||
"Finanzas Éticas y Seguros",
|
||||
"Servicios Profesionales",
|
||||
],
|
||||
priceRange: [0, 500],
|
||||
priceRangeFilter: {},
|
||||
place: null,
|
||||
coordinates: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
isMobile() {
|
||||
return this.screenSize <= 768;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentFilters(newCurrentFilters) {
|
||||
if (newCurrentFilters) {
|
||||
if (newCurrentFilters['category']) {
|
||||
this.checkedCategories = newCurrentFilters['category']
|
||||
if (newCurrentFilters["category"]) {
|
||||
this.checkedCategories = newCurrentFilters["category"];
|
||||
} else {
|
||||
this.checkedCategories = []
|
||||
this.checkedCategories = [];
|
||||
}
|
||||
if (Object.keys(newCurrentFilters).includes('shipping_cost')) {
|
||||
this.filterForm.shipping_cost = true
|
||||
if (Object.keys(newCurrentFilters).includes("shipping_cost")) {
|
||||
this.filterForm.shipping_cost = true;
|
||||
} else {
|
||||
this.filterForm.shipping_cost = false
|
||||
this.filterForm.shipping_cost = false;
|
||||
}
|
||||
}
|
||||
this.filterForm.discount = this.$route.query.hasOwnProperty('discount')
|
||||
this.filterForm.discount = this.$route.query.hasOwnProperty("discount");
|
||||
},
|
||||
prices(newPrices) {
|
||||
if (newPrices.min && newPrices.max) {
|
||||
this.priceRange = [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]
|
||||
this.priceRange = [this.prices.min, this.prices.max];
|
||||
}
|
||||
this.screenSize = window.innerWidth;
|
||||
window.addEventListener("resize", () => {
|
||||
this.screenSize = window.innerWidth;
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("resize", () => {
|
||||
this.screenSize = window.innerWidth;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPlace(value) {
|
||||
this.place = 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
|
||||
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
|
||||
filters.latitude = this.place.geo.latitude;
|
||||
filters.longitude = this.place.geo.longitude;
|
||||
}
|
||||
this.$emit('applyFilters', filters)
|
||||
this.$emit("applyFilters", filters);
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.c-filter {
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -248,9 +253,9 @@ export default {
|
||||
gap: 3rem;
|
||||
color: $color-primary;
|
||||
|
||||
// @include mobile {
|
||||
// margin-top: 7rem;
|
||||
// }
|
||||
.c-filter-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
@@ -263,6 +268,15 @@ export default {
|
||||
}
|
||||
.filter-range-container {
|
||||
margin-top: 60px;
|
||||
.notice {
|
||||
color: #000;
|
||||
font-family: Barlow;
|
||||
font-size: 0.875rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.0175rem;
|
||||
}
|
||||
}
|
||||
.filters-header {
|
||||
display: flex;
|
||||
@@ -271,9 +285,6 @@ export default {
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 20px;
|
||||
outline: none;
|
||||
@include mobile {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.text {
|
||||
font-size: $m;
|
||||
margin: 0;
|
||||
@@ -295,13 +306,13 @@ export default {
|
||||
}
|
||||
|
||||
label:before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: url('../assets/img/product-filter-ubicacion.svg') center /
|
||||
background: url("../assets/img/product-filter-ubicacion.svg") center /
|
||||
contain no-repeat;
|
||||
}
|
||||
|
||||
@@ -340,8 +351,10 @@ export default {
|
||||
}
|
||||
|
||||
.checkboxes {
|
||||
height: 6rem;
|
||||
overflow-y: scroll;
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.dotted-hr {
|
||||
|
||||
Reference in New Issue
Block a user