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

151
components/ProductFilter.vue
View File

@@ -1,13 +1,8 @@
<template> <template>
<div class="c-filter"> <div class="c-filter">
<div class="c-filter-content"> <div class="c-filter-content">
<div class="">
<div v-b-toggle.collapse-all class="filters-header"> <div v-b-toggle.collapse-all class="filters-header">
<img <img class="image" src="@/assets/img/filter.svg" alt="" />
class="image"
src="@/assets/img/filter.svg"
alt=""
/>
<h2 class="text">FILTRAR PROPUESTAS</h2> <h2 class="text">FILTRAR PROPUESTAS</h2>
</div> </div>
<BCollapse id="collapse-all" visible> <BCollapse id="collapse-all" visible>
@@ -37,7 +32,7 @@
class="arrow" class="arrow"
/> />
</div> </div>
<BCollapse id="collapse-price" visible> <BCollapse :id="'collapse-price'" :visible="!isMobile">
<!-- Price --> <!-- Price -->
<div class="filter-range-container"> <div class="filter-range-container">
<ClientOnly> <ClientOnly>
@@ -49,14 +44,11 @@
thumb-label="always" thumb-label="always"
color="#143E8C" color="#143E8C"
track-color="#d6d5d5" track-color="#d6d5d5"
> />
<template #prepend> <p class="notice">
<span>{{ priceRange[0] }} €</span> Entre <span>{{ priceRange[0] }} €</span> y
</template>
<template #append>
<span>{{ priceRange[1] }} €</span> <span>{{ priceRange[1] }} €</span>
</template> </p>
</v-range-slider>
</ClientOnly> </ClientOnly>
</div> </div>
<hr class="dotted-hr" /> <hr class="dotted-hr" />
@@ -96,7 +88,7 @@
class="arrow" class="arrow"
/> />
</div> </div>
<BCollapse id="collapse-categories" visible> <BCollapse id="collapse-categories" :visible="!isMobile">
<div class="checkboxes"> <div class="checkboxes">
<div <div
v-for="(n, index) in categories" v-for="(n, index) in categories"
@@ -125,7 +117,6 @@
</BCollapse> </BCollapse>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -133,23 +124,23 @@ export default {
props: { props: {
filters: { filters: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
}, },
prices: { prices: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
}, },
currentFilters: { currentFilters: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
}, },
geo: { geo: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
} },
}, },
emits: ['applyFilters'], emits: ["applyFilters"],
data() { data() {
return { return {
@@ -157,87 +148,101 @@ export default {
shipping_cost: false, shipping_cost: false,
discount: false, discount: false,
}, },
screenSize: null,
visible: true, visible: true,
checkedCategories: [], checkedCategories: [],
categories: [ categories: [
'Alimentación', "Alimentación",
'Agricultura ', "Agricultura ",
'Energía', "Energía",
'Hogar y jardín', "Hogar y jardín",
'Moda y Textil', "Moda y Textil",
'Salud y Cuidados', "Salud y Cuidados",
'Movilidad y Mensajería', "Movilidad y Mensajería",
'Ocio y Deporte', "Ocio y Deporte",
'Turismo y Gastronomía', "Turismo y Gastronomía",
'Cultura, Educación y Medios', "Cultura, Educación y Medios",
'Tecnología y Servicios Digitales', "Tecnología y Servicios Digitales",
'Economía Circular y Reparación', "Economía Circular y Reparación",
'Finanzas Éticas y Seguros', "Finanzas Éticas y Seguros",
'Servicios Profesionales', "Servicios Profesionales",
], ],
priceRange: [0, 500], priceRange: [0, 500],
priceRangeFilter: {}, priceRangeFilter: {},
place: null, place: null,
coordinates: null, coordinates: null,
} };
},
computed: {
isMobile() {
return this.screenSize <= 768;
},
}, },
watch: { watch: {
currentFilters(newCurrentFilters) { currentFilters(newCurrentFilters) {
if (newCurrentFilters) { if (newCurrentFilters) {
if (newCurrentFilters['category']) { if (newCurrentFilters["category"]) {
this.checkedCategories = newCurrentFilters['category'] this.checkedCategories = newCurrentFilters["category"];
} else { } else {
this.checkedCategories = [] this.checkedCategories = [];
} }
if (Object.keys(newCurrentFilters).includes('shipping_cost')) { if (Object.keys(newCurrentFilters).includes("shipping_cost")) {
this.filterForm.shipping_cost = true this.filterForm.shipping_cost = true;
} else { } 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) { prices(newPrices) {
if (newPrices.min && newPrices.max) { if (newPrices.min && newPrices.max) {
this.priceRange = [newPrices.min, newPrices.max] this.priceRange = [newPrices.min, newPrices.max];
} }
}, },
}, },
mounted() { mounted() {
if (this.prices.min && this.prices.max) { 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: { methods: {
getPlace(value) { getPlace(value) {
this.place = value this.place = value;
}, },
applyFilters() { applyFilters() {
const filters = {} const filters = {};
filters.price_min = this.priceRange[0] filters.price_min = this.priceRange[0];
filters.price_max = this.priceRange[1] filters.price_max = this.priceRange[1];
if (this.filterForm.shipping_cost) filters.shipping_cost = false if (this.filterForm.shipping_cost) filters.shipping_cost = false;
if (this.filterForm.discount) filters.discount = true if (this.filterForm.discount) filters.discount = true;
filters.category = this.checkedCategories filters.category = this.checkedCategories;
if (this.place) { if (this.place) {
filters.latitude = this.place.geo.latitude filters.latitude = this.place.geo.latitude;
filters.longitude = this.place.geo.longitude filters.longitude = this.place.geo.longitude;
} }
this.$emit('applyFilters', filters) this.$emit("applyFilters", filters);
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.c-filter { .c-filter {
width: 100%; width: 100%;
min-height: 100dvh;
max-height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -248,9 +253,9 @@ export default {
gap: 3rem; gap: 3rem;
color: $color-primary; color: $color-primary;
// @include mobile { .c-filter-content {
// margin-top: 7rem; width: 100%;
// } }
} }
.filter-button { .filter-button {
@@ -263,6 +268,15 @@ export default {
} }
.filter-range-container { .filter-range-container {
margin-top: 60px; 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 { .filters-header {
display: flex; display: flex;
@@ -271,9 +285,6 @@ export default {
justify-content: flex-start; justify-content: flex-start;
margin-bottom: 20px; margin-bottom: 20px;
outline: none; outline: none;
@include mobile {
margin-top: 2rem;
}
.text { .text {
font-size: $m; font-size: $m;
margin: 0; margin: 0;
@@ -295,13 +306,13 @@ export default {
} }
label:before { label:before {
content: ''; content: "";
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 20px; width: 20px;
background: url('../assets/img/product-filter-ubicacion.svg') center / background: url("../assets/img/product-filter-ubicacion.svg") center /
contain no-repeat; contain no-repeat;
} }
@@ -340,8 +351,10 @@ export default {
} }
.checkboxes { .checkboxes {
height: 6rem; padding-top: 1rem;
overflow-y: scroll; display: flex;
flex-direction: column;
gap: 1rem;
} }
.dotted-hr { .dotted-hr {