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> <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 class="image" src="@/assets/img/filter.svg" alt="" />
<img <h2 class="text">FILTRAR PROPUESTAS</h2>
class="image" </div>
src="@/assets/img/filter.svg" <BCollapse id="collapse-all" visible>
alt="" <!-- Location -->
/> <div class="row">
<h2 class="text">FILTRAR PROPUESTAS</h2> <div class="col-12">
</div> <div class="location">
<BCollapse id="collapse-all" visible> <div class="googleaddress-container">
<!-- Location --> <!-- TODO: Revisar componente -->
<div class="row"> <!-- <GoogleAddress
<div class="col-12">
<div class="location">
<div class="googleaddress-container">
<!-- TODO: Revisar componente -->
<!-- <GoogleAddress
@addedData="getPlace" @addedData="getPlace"
:geo="geo" :geo="geo"
:label="'Cercanía'" :label="'Cercanía'"
/> --> /> -->
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="collapsible collapsible-range"> <div class="collapsible collapsible-range">
<hr /> <hr />
<div v-b-toggle.collapse-price class="m-1 filter-header"> <div v-b-toggle.collapse-price class="m-1 filter-header">
<h2 class="title">Precio</h2> <h2 class="title">Precio</h2>
<img <img
src="../assets/img/latienda-arrow-down.svg" src="../assets/img/latienda-arrow-down.svg"
alt="" alt=""
class="arrow" 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> </div>
<BCollapse id="collapse-price" visible> <hr class="dotted-hr" />
<!-- Price --> <div class="form-check">
<div class="filter-range-container"> <input
<ClientOnly> id="checkbox-shipped"
<v-range-slider v-model="filterForm.shipping_cost"
v-model="priceRange" class="form-check-input"
:min="0" type="checkbox"
:max="500" />
step="10" <label class="form-check-label" for="checkbox-shipped">
thumb-label="always" Sin gastos de envío
color="#143E8C" </label>
track-color="#d6d5d5" </div>
> <hr class="dotted-hr" />
<template #prepend> <div class="form-check">
<span>{{ priceRange[0] }} €</span> <input
</template> id="checkbox-discount"
<template #append> v-model="filterForm.discount"
<span>{{ priceRange[1] }} €</span> class="form-check-input"
</template> type="checkbox"
</v-range-slider> value=""
</ClientOnly> />
</div> <label class="form-check-label" for="checkbox-discount">
<hr class="dotted-hr" /> Descuentos
<div class="form-check"> </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 <input
id="checkbox-shipped" :id="'checkbox-' + index"
v-model="filterForm.shipping_cost" v-model="checkedCategories"
class="form-check-input" class="form-check-input"
type="checkbox" type="checkbox"
:value="n"
/> />
<label class="form-check-label" for="checkbox-shipped"> <label class="form-check-label" :for="'checkbox-' + index">
Sin gastos de envío {{ n }}
</label> </label>
</div> </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> </div>
<BCollapse id="collapse-categories" visible> <div>
<div class="checkboxes"> <button class="filter-button" @click="applyFilters">
<div APLICAR FILTROS
v-for="(n, index) in categories" </button>
:key="index" </div>
class="form-check" </BCollapse>
> </div>
<input </BCollapse>
: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> </div>
</div> </div>
</template> </template>
@@ -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 {