toast replace by modals, and product filters working

components/ProductCard.vue

@@ -140,6 +140,13 @@
       <ProductsRelated :related-products="relatedProducts" />
     </div>
     <ProductModal v-if="modal" :product="product" @close-modal="closeModal" />
+    <BModal 
+        id="modal-center" 
+        v-model="active" 
+        centered 
+        title="latienda.coop" 
+        :ok-variant="modalColor"> {{ modalText }}
+    </BModal>
   </div>
 </template>
 
@@ -160,6 +167,9 @@ export default {
       modal: false,
       productUrl: null,
       relatedProducts: null,
+      active: false,
+      modalText: '',
+      modalColor: 'info',
     }
   },
   computed: {
@@ -274,21 +284,16 @@ export default {
     },
 
     closeModal(value) {
+      console.log(value)
       this.modal = false
-      if (value === 200) {
+      this.active = true
-        this.$bvToast.toast(`Email enviado correctamente`, {
+      if (value === 200 || value === 201) {
-          title: 'latienda.coop',
+        this.modalText = 'Actualizado correctamente'
-          autoHideDelay: 5000,
+        this.modalColor = 'success'
-          appendToast: true,
-          variant: 'success',
-        })
       } else if (value) {
-        this.$bvToast.toast(`Se ha producido un error en el envío`, {
+        this.modalText = 'Se ha producido un error en el envío'
-          title: 'latienda.coop',
+        this.modalColor = 'danger'
-          autoHideDelay: 5000,
+      
-          appendToast: true,
-          variant: 'danger',
-        })
       }
     },
 

components/ProductCardDetails.vue

@@ -106,6 +106,13 @@
       <ProductsRelated :related-products="relatedProducts" />
     </div>
     <ProductModal v-if="modal" :product="product" @close-modal="closeModal" />
+    <BModal 
+      id="modal-center" 
+      v-model="active" 
+      centered 
+      title="latienda.coop" 
+      :ok-variant="modalColor"> {{ modalText }}
+  </BModal>
   </div>
 </template>
 
@@ -137,6 +144,9 @@ export default {
       modal: true,
       productUrl: null,
       geolocation: null,
+      active: false,
+      modalText: '',
+      modalColor: 'info',
     }
   },
   computed: {
@@ -161,19 +171,13 @@ export default {
     },
     closeModal(value) {
       this.modal = false
-      if (value === 200) {
+      if (value === 200 || value === 201) {
-        this.$bvToast.toast(`Email enviado correctamente`, {
+        this.modalText = 'Actualizado correctamente'
-          title: 'latienda.coop',
+        this.modalColor = 'success'
-          autoHideDelay: 5000,
-          appendToast: true,
-        })
       } else if (value) {
-        this.$bvToast.toast(`Se ha producido un error en el envío`, {
+        this.modalText = 'Se ha producido un error en el envío'
-          title: 'latienda.coop',
+        this.modalColor = 'danger'
-          autoHideDelay: 5000,
+      
-          appendToast: true,
-          variant: 'danger',
-        })
       }
     },
     // TODO: implement buyIntent (review functionality, because sendLog is not working)

components/ProductModal.vue

@@ -182,7 +182,7 @@ export default {
       })
     },
     handleEmit() {
-      this.$emit('closeModal')
+      this.$emit('closeModal', null)
     },
   },
 }

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,15 +141,21 @@ 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()
     const params = import.meta.client ? clientSearch(this.$route.query) : serverSearch(this.$route.query)
@@ -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
+      this.$router.push({ name: 'busqueda', query })
-        return this.$router.push({
+
-          name: 'busqueda',
+      const config = useRuntimeConfig()
-          query: { ...filters },
+      const data = await $fetch('/search_products/', {
-        })
+        baseURL: config.public.baseURL,
-      } else {
+        method: 'GET',
-        return this.$router.push({
+        params: query,
-          name: 'busqueda',
+        headers: { Authorization: '/' },
-          query: { ...value, ...filters },
+      })
-        })
+      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`, {
+      this.modalText = 'Producto creado correctamente'
-        title: 'latienda.coop',
+      this.modalColor = 'success'
-        autoHideDelay: 5000,
+      this.activeModal = true
-        appendToast: true,
-        variant: 'success',
-      })
     }
     await this.getDataFromApi()
   },