toast replace by modals, and product filters working

pages/busqueda.vue

@@ -58,12 +58,13 @@
           <h2 class="title"></h2>
           <p class="count">Hay {{ count }} productos</p>
         </div>
+        
         <div v-if="products.length !== 0">
           <div v-for="product in products" :key="product.id">
             <ProductCard :key="product.key" :product="product" />
           </div>
           <BPagination
-          v-model="currentPage"
+            v-model="currentPage"
             class="pagination"
             :total-rows="count"
             :per-page="perPage"
@@ -82,6 +83,7 @@
       </div>
     </div>
   </div>
+  
   <!-- appliedFilters: {{appliedFilters}} <br>
     filters: {{filters}} <br>
     prices: {{prices}} <br>
@@ -126,7 +128,7 @@ export default {
       defaultProducts: [],
       carouselProducts: [],
       count: 0,
-      loadingProducts: true
+      loadingProducts: true,
     }
   },
 
@@ -139,14 +141,20 @@ export default {
         (Array.isArray(this.appliedFilters.category) &&
           this.appliedFilters.category.length > 0)
       )
-    },
+    }
   },
 
   watch: {
-    $route() {
+    '$route.query'(newValue) {
+      console.log('New Value:', newValue)
+      console.log('Route changed:', this.$route.fullPath)
+      console.log('Current params:', this.$route.query)
+      this.updateData(newValue)
       Object.assign(this.$data, this.$options.data())
-    },
+      
+    }
   },
+
   
   async beforeCreate() {
     const config = useRuntimeConfig()
@@ -250,20 +258,23 @@ export default {
       return data.products
     },
     
-    updateData(value) {
+    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 }
 
-      if (Object.keys(value).length === 0) { //Review this condition
-        return this.$router.push({
-          name: 'busqueda',
-          query: { ...filters },
-        })
-      } else {
-        return this.$router.push({
-          name: 'busqueda',
-          query: { ...value, ...filters },
-        })
-      }
+      this.$router.push({ name: 'busqueda', query })
+
+      const config = useRuntimeConfig()
+      const data = await $fetch('/search_products/', {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        params: query,
+        headers: { Authorization: '/' },
+      })
+      this.products = data.products
+      this.count = data.count
+      this.loadingProducts = false
     },
 
     removeCategory(cat) {

pages/editar/productos/index.vue

@@ -133,12 +133,9 @@ export default {
 
   async created() {
     if (this.$route.params.action === 'created') {
-      this.$bvToast.toast(`Producto creado`, {
-        title: 'latienda.coop',
-        autoHideDelay: 5000,
-        appendToast: true,
-        variant: 'success',
-      })
+      this.modalText = 'Producto creado correctamente'
+      this.modalColor = 'success'
+      this.activeModal = true
     }
     await this.getDataFromApi()
   },