From 894546a901669ceabbc3bac0971b0d62b8c8b523 Mon Sep 17 00:00:00 2001
From: Diego Calvo <diego.calvo@enreda.coop>
Date: Fri, 10 Oct 2025 15:00:36 +0200
Subject: [PATCH] fix search and filtering for /busqueda

---
 components/ProductFilter.vue |  68 ++++++-------
 pages/busqueda.vue           | 189 +++++++++--------------------------
 2 files changed, 77 insertions(+), 180 deletions(-)

diff --git a/components/ProductFilter.vue b/components/ProductFilter.vue
index f9f7e45..7793f2d 100644
--- a/components/ProductFilter.vue
+++ b/components/ProductFilter.vue
@@ -38,9 +38,9 @@
               <ClientOnly>
                 <v-range-slider
                   v-model="priceRange"
-                  :min="0"
-                  :max="500"
-                  step="10"
+                  :min="minPrice"
+                  :max="maxPrice"
+                  step="5"
                   thumb-label="always"
                   color="#143E8C"
                   track-color="#d6d5d5"
@@ -120,15 +120,17 @@
 </template>
 
 <script>
+
+
 export default {
   props: {
-    filters: {
-      type: Object,
-      default: () => ({}),
+    maxPrice: {
+      type: Number,
+      default: 500,
     },
-    prices: {
-      type: Object,
-      default: () => ({}),
+    minPrice: {
+      type: Number,
+      default: 0,
     },
     currentFilters: {
       type: Object,
@@ -144,16 +146,12 @@ export default {
 
   data() {
     return {
-      // filterForm: {
-      //   shipping_cost: false,
-      //   discount: false,
-      // },
       screenSize: null,
       visible: true,
       checkedCategories: [],
       categories: [
         "Alimentación",
-        "Agricultura ",
+        "Agricultura",
         "Energía",
         "Hogar y jardín",
         "Moda y Textil",
@@ -167,7 +165,7 @@ export default {
         "Finanzas Éticas y Seguros",
         "Servicios Profesionales",
       ],
-      priceRange: [0, 500],
+      priceRange: [this.minPrice, this.maxPrice],
       priceRangeFilter: {},
       place: null,
       coordinates: null,
@@ -188,24 +186,25 @@ export default {
         } 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];
+        if (newCurrentFilters["price_min"] && newCurrentFilters["price_max"]) {
+          this.priceRange = [newCurrentFilters["price_min"], newCurrentFilters["price_max"]];
+        }
+        else if (newCurrentFilters["price_min"] && !newCurrentFilters["price_max"]) {
+          this.priceRange = [newCurrentFilters["price_min"], this.maxPrice];
+        }
+        else if (!newCurrentFilters["price_min"] && newCurrentFilters["price_max"]) {
+          this.priceRange = [this.minPrice, newCurrentFilters["price_max"]];
+        }
+        else {
+          this.priceRange = [this.minPrice, this.maxPrice];
+        }
       }
     },
   },
 
   mounted() {
-    if (this.prices.min && this.prices.max) {
-      this.priceRange = [this.prices.min, this.prices.max];
+    if (this.currentFilters?.price_min && this.currentFilters?.price_max) {
+      this.priceRange = [this.currentFilters.price_min, this.currentFilters.prices_max];
     }
     this.screenSize = window.innerWidth;
     window.addEventListener("resize", () => {
@@ -224,17 +223,7 @@ export default {
     },
 
     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);
+      this.$emit("applyFilters", { category: [...this.checkedCategories], price_min: this.priceRange[0], price_max: this.priceRange[1] });
     },
   },
 };
@@ -361,7 +350,6 @@ export default {
   gap: 1rem;
 }
 .form-check-input {
-
   &:checked {
     background-color: $color-button;
   }
diff --git a/pages/busqueda.vue b/pages/busqueda.vue
index 3ecf2cd..20d42cd 100644
--- a/pages/busqueda.vue
+++ b/pages/busqueda.vue
@@ -17,14 +17,14 @@
                 type="text"
                 autocomplete="off"
                 placeholder="Encuentra productos o servicios"
-              />
+              >
               <div class="search-link">
                 <img
                   class="search-icon"
                   src="@/assets/img/latienda-search.svg"
                   alt="consumo-cuidado-search"
                   @click="search"
-                />
+                >
               </div>
             </form>
           </div>
@@ -34,9 +34,9 @@
     <div class="c-container">
       <div class="col-md-3">
         <ProductFilter
-        :filters="filters"
         :current-filters="currentFilters"
-        :prices="prices"
+        :max_price="MAX_PRICE"
+        :min_price="MIN_PRICE"
         :geo="coordinates"
         @apply-filters="updateData"
         />
@@ -62,7 +62,7 @@
         <div v-if="count > 0" class="carousel">
           <div class="title-container">
             <h5 class="items-title">Últimos productos y servicios</h5>
-            <div class="title-lines"></div>
+            <div class="title-lines"/>
           </div>
           <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" :items-to-show="3" />
         </div>
@@ -104,7 +104,7 @@
         <div class="results">
           <div class="title-container">
             <h5 class="items-title">Catálogo</h5>
-            <div class="title-lines"></div>
+            <div class="title-lines"/>
           </div>
           <p class="count">Resultados de búsqueda: {{ count }} resultados</p>
           <div v-if="products.length !== 0">
@@ -128,23 +128,11 @@
               Prueba un término más general, revisa la ortografía o 
               <span class="link" @click="clearFilters">limpia los filtros</span>.
             </p>
-            <!-- <div v-for="product in defaultProducts" :key="product.id">
-              <ProductCard :key="product.key" :product="product" />
-            </div> -->
           </div>
         </div>
       </div>
     </div>
   </div>
-  
-  <!-- appliedFilters: {{appliedFilters}} <br>
-    filters: {{filters}} <br>
-    prices: {{prices}} <br>
-    coordinates: {{coordinates}} <br>
-    products: {{products}} <br>
-    defaultProducts: {{defaultProducts}} <br>
-     carouselProducts: {{carouselProducts}} <br>
-    count: {{count}} -->
 </template>
 
 <script>
@@ -174,46 +162,35 @@ export default {
       previousParams: null,
       currentFilters: null,
       mountedProducts: [],
-      appliedFilters: {},
       filters: {},
-      prices: { min: null, max: null },
+      MAX_PRICE: 500,
+      MIN_PRICE: 0,
       coordinates: null,
       products: [],
-      defaultProducts: [],
       carouselProducts: [],
       count: 0,
       loadingProducts: true,
     }
   },
 
-  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.query'(newValue) {
-      console.log('New Value:', newValue)
-      //console.log('Route changed:', this.$route.fullPath)
-      //console.log('Current params:', this.$route.query)
-      this.queryText = newValue.q
-      console.log('Updated queryText:', this.queryText)
-      this.updateData(newValue)
-      //Object.assign(this.$data, this.$options.data())
-    }
-  },
+  // watch: {
+  //   '$route.query'(newValue) {
+  //     console.log('New Value:', newValue)
+  //     //console.log('Route changed:', this.$route.fullPath)
+  //     //console.log('Current params:', this.$route.query)
+  //     this.queryText = newValue.q
+  //     console.log('Updated queryText:', this.queryText)
+  //     this.updateData(newValue)
+  //     //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('Initial params:', params);
+    
     const data = await $fetch(`/search_products/?`, {
       baseURL: config.public.baseURL,
       method: 'GET',
@@ -222,28 +199,9 @@ export default {
         Authorization: '/',
       },
     })
-    //console.log('data', data)
-
     const products = data.products
-    //console.log('products', products)
-    let defaultProducts = []
-    if (products.length === 0) {
-      //console.log('no products, fetching default')
-      const data = await $fetch(`/search_products/?q=${params.q}`, {
-        baseURL: config.public.baseURL,
-        method: 'GET',
-        params: {
-          order: 'newest',
-          limit: 10,
-          offset: 0
-        },
-        headers: {
-          Authorization: '/',
-        },
-      })
-      defaultProducts = data.products
-    }
 
+    // Productos para el carrusel
     const carouselProducts = await $fetch(`/products/`, {
       baseURL: config.public.baseURL,
       method: 'GET',
@@ -255,8 +213,8 @@ export default {
         Authorization: '/',
       },
     })
-    //console.log('carouselProducts', carouselProducts)
 
+    // Pasar filtros aplicados a las variables de estado que usan los componentes de filtros
     let coordinates
     if (params.latitude && params.longitude) {
       coordinates = {
@@ -264,32 +222,24 @@ export default {
         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 }
-    }
-
-    this.appliedFilters = params.q
-    console.log('Initial appliedFilters:', this.appliedFilters)
+    // 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 }
+    // }
+    this.searchText = params.q
+    this.currentFilters = { category: params.category, q: params.q, price_min: params.price_min, price_max: params.price_max }
     this.filters = data.filters
-    this.prices = prices
     this.coordinates = coordinates
     this.products = products
-    this.defaultProducts = defaultProducts
     this.carouselProducts = carouselProducts
     this.count = data.count
     this.loadingProducts = false
   },
-  
 
-  mounted() {
-    this.currentFilters = this.appliedFilters
-  },
 
   methods: {
     async handlePageChange(value) {
@@ -303,7 +253,7 @@ export default {
         baseURL: config.public.baseURL,
         method: 'GET',
         params: {
-          ...this.appliedFilters,
+          ...this.currentFilters,
           limit: 10,
           offset: offset
         },
@@ -315,11 +265,16 @@ export default {
     },
     
     async updateData(value) {
-      //console.log('updateData called with:', value)
-      const filters = { q: this.appliedFilters.q }
-      const query = Object.keys(value).length === 0 ? { ...filters } : { ...value, ...filters }
+      this.loadingProducts = true
+
+      // Actualizar filtros aplicados        
+      const query = {};
+      if (this.searchText) query['q'] = this.searchText;
+      if (value.q) query['q'] = value.q;
+      if (value.category) query['category'] = value.category;
+      if (value.price_min > this.MIN_PRICE) query['price_min'] = value.price_min;
+      if (value.price_max < this.MAX_PRICE) query['price_max'] = value.price_max;
 
-      //console.log('Navigating to busqueda with query:', query)
       this.$router.push({ name: 'busqueda', query })
 
       const config = useRuntimeConfig()
@@ -334,65 +289,19 @@ export default {
       this.loadingProducts = false
     },
 
-    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 },
-      })
-    },
-
-
     async search() {
-      this.currentFilters = { ...this.appliedFilters }
-      console.log('Searching for:', this.searchText)
-      if (this.searchText) {
-        this.appliedFilters = this.searchText
-        this.products = await this.updateData({ q: this.searchText })
-      }
+      this.currentFilters = {}
+      await this.updateData({ q: this.searchText })
     },
 
     clearFilters() {
-      this.currentFilters = null
-      this.appliedFilters = null
+      this.currentFilters = {}
+      this.searchText = ''
       this.queryText = ''
       this.$router.push({ 
-        name: 'busqueda'
+        name: 'busqueda', query: {}
       })
-
+      this.updateData({})
     },
   },
 }