kit-eco.social/consumocuidado
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve filters

Browse Source
This commit is contained in:
Diego Calvo
2025-09-23 15:32:00 +02:00
parent 7545dedb68
commit c5ba92ab21
1 changed files with 173 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
components/ProductFilter.vue
View File

@@ -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 {