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.$bvToast.toast(`Email enviado correctamente`, {
-          title: 'latienda.coop',
-          autoHideDelay: 5000,
-          appendToast: true,
-          variant: 'success',
-        })
+      this.active = true
+      if (value === 200 || value === 201) {
+        this.modalText = 'Actualizado correctamente'
+        this.modalColor = 'success'
       } else if (value) {
-        this.$bvToast.toast(`Se ha producido un error en el envío`, {
-          title: 'latienda.coop',
-          autoHideDelay: 5000,
-          appendToast: true,
-          variant: 'danger',
-        })
+        this.modalText = 'Se ha producido un error en el envío'
+        this.modalColor = '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) {
-        this.$bvToast.toast(`Email enviado correctamente`, {
-          title: 'latienda.coop',
-          autoHideDelay: 5000,
-          appendToast: true,
-        })
+      if (value === 200 || value === 201) {
+        this.modalText = 'Actualizado correctamente'
+        this.modalColor = 'success'
       } else if (value) {
-        this.$bvToast.toast(`Se ha producido un error en el envío`, {
-          title: 'latienda.coop',
-          autoHideDelay: 5000,
-          appendToast: true,
-          variant: 'danger',
-        })
+        this.modalText = 'Se ha producido un error en el envío'
+        this.modalColor = '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,6 +58,7 @@
           <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" />
@@ -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 },
+      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: '/' },
       })
-      } else {
-        return this.$router.push({
-          name: 'busqueda',
-          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`, {
-        title: 'latienda.coop',
-        autoHideDelay: 5000,
-        appendToast: true,
-        variant: 'success',
-      })
+      this.modalText = 'Producto creado correctamente'
+      this.modalColor = 'success'
+      this.activeModal = true
     }
     await this.getDataFromApi()
   },