busqueda functionality amend

components/NavBarSearch.vue

@@ -1,16 +1,25 @@
 <template>
   <div class="navsearch_container container-fluid">
     <NuxtLink to="/busqueda"> Todos</NuxtLink>
-    <NuxtLink :to="{ name: 'busqueda', query: { order: 'newest' } }">
-      Últimos productos</NuxtLink
-    >
+    <button  @click="searchLastestProducts"> Últimos productos</button>
     <NuxtLink to="/busqueda"> Más buscados</NuxtLink>
     <NuxtLink to="/c"> Cooperativas</NuxtLink>
     <NuxtLink to="/registro"> Regístrate</NuxtLink>
   </div>
 </template>
 
-<script></script>
+<script>
+export default {
+  methods: {
+    searchLastestProducts() {
+      return navigateTo({
+        name: 'busqueda',
+        query: { order: 'newest' }
+      })
+    }
+  }
+}
+</script>
 
 <style lang="scss" scoped>
 .navsearch_container {
@@ -22,7 +31,7 @@
     display: none;
   }
 
-  a {
+  a, button {
     font-size: $m;
     font-weight: $bold;
     color: $color-navy;
@@ -31,7 +40,11 @@
   a:nth-child(1):after,
   a:nth-child(2):after,
   a:nth-child(3):after,
-  a:nth-child(4):after {
+  a:nth-child(4):after,
+  button:nth-child(1):after,
+  button:nth-child(2):after,
+  button:nth-child(3):after,
+  button:nth-child(4):after {
     color: $color-navy;
     content: '\22EE';
     margin: 0.5rem;

components/ProductCard.vue

@@ -34,22 +34,15 @@
           class="description"
           :class="{ 'not-expanded-description': !expanded }"
         >
-          <p
+          <p 
             v-if="product.description"
-            v-sanitize="[
-              {
-                allowedTags: ['p'],
-                allowedAttributes: {},
-              },
-              product.description,
-            ]"
-          >
+            v-html="sanitizedDescription"
+          ></p>
             <span v-if="product.shipping_terms">{{
               product.shipping_terms
             }}</span>
-          </p>
         </div>
-        <b-collapse :id="'collapse-' + product.id" accordion="my-accordion">
+        <b-collapse :id="'collapse-' + product.id" accordion="my-accordion" @show="onOpen" @hide="onClose">
           <div class="tags_container">
             <NuxtLink
               :to="tagRoute(n)"
@@ -142,16 +135,16 @@
         }}</span>
       </div>
     </div>
-
     <div v-if="expanded && relatedProducts" class="related_products">
       <h2>Productos relacionados</h2>
       <ProductsRelated :related-products="relatedProducts" />
     </div>
-    <ProductModal :product="product" @close="closeModal" />
+    <ProductModal v-if="modal" :product="product" @close-modal="closeModal" />
   </div>
 </template>
 
 <script>
+import DOMPurify from 'dompurify'
 import { mapState } from 'pinia'
 import socialShare from '~/utils/socialShare'
 export default {
@@ -171,30 +164,40 @@ export default {
   },
   computed: {
     ...mapState(useAuthStore, ['access']),
+    sanitizedDescription() {
+      return DOMPurify.sanitize(this.product.description, {
+        ALLOWED_TAGS: ['p'],
+        ALLOWED_ATTR: [],
+      })
+    }
   },
   mounted() {
     this.productUrl = window.location.origin + `/productos/${this.product.id}`
-
-    this.$root.$on('bv::collapse::state', async (collapseId, isJustShown) => {
-      if (collapseId === `collapse-${this.product.id}`) {
-        this.expanded = isJustShown
-        if (this.expanded) {
-          await this.getRelatedProducts()
-          await this.sendLog('view')
-        }
-      }
-    })
+    this.getRelatedProducts()
   },
 
   methods: {
+    async onOpen() {
+      this.expanded = true
+      await this.getRelatedProducts()
+      await this.sendLog('view')
+    },
+    onClose() {
+      this.expanded = false
+    },
     tagRoute(tag) {
       return `/busqueda?tags=${tag}`
     },
     async getRelatedProducts() {
       try {
-        const { data } = await this.$api.get(
-          `/products/${this.product.id}/related/`
-        )
+        const config = useRuntimeConfig()
+        const data = await $fetch(`/products/${this.product.id}/related/`, {
+          baseURL: config.public.baseURL,
+          method: 'GET',
+          headers: {
+            Authorization: '/',
+          },
+        })
         this.relatedProducts = data
       } catch {
         this.relatedProducts = null

layouts/admin.vue

@@ -42,7 +42,7 @@ export default {
   text-align: center;
   padding: 20px 20px;
 
-  a {
+  a, button {
     font-size: $m;
     font-weight: $bold;
     color: $color-navy;
@@ -50,7 +50,11 @@ export default {
   }
   a:nth-child(1):after,
   a:nth-child(2):after,
-  a:nth-child(3):after {
+  a:nth-child(3):after,
+  button:nth-child(1):after,
+  button:nth-child(2):after,
+  button:nth-child(3):after,
+  button:nth-child(4):after {
     color: $color-navy;
     content: '\22EE';
     margin: 0.5rem;

pages/busqueda.vue

@@ -17,7 +17,7 @@
       <div v-if="!loadingProducts" class="col-md-9">
         <div class="carousel">
           <h2 class="title">Últimos productos</h2>
-          <ItemsRow class="items" :type="`product`" :items="carouselProducts" />
+          <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" />
         </div>
         <div v-if="hasFilterTags" class="applied-filters">
           <h2 class="title">FILTROS APLICADOS</h2>
@@ -82,14 +82,14 @@
       </div>
     </div>
   </div>
-  appliedFilters: {{appliedFilters}} <br>
+  <!-- appliedFilters: {{appliedFilters}} <br>
     filters: {{filters}} <br>
     prices: {{prices}} <br>
     coordinates: {{coordinates}} <br>
     products: {{products}} <br>
     defaultProducts: {{defaultProducts}} <br>
-    <!-- carouselProducts: {{carouselProducts}} <br> -->
-    count: {{count}}
+     carouselProducts: {{carouselProducts}} <br>
+    count: {{count}} -->
 </template>
 
 <script>
@@ -151,29 +151,25 @@ export default {
   async beforeCreate() {
     const config = useRuntimeConfig()
     const params = import.meta.client ? clientSearch(this.$route.query) : serverSearch(this.$route.query)
-
     const data = await $fetch(`/search_products/?`, {
       baseURL: config.public.baseURL,
       method: 'GET',
-      query: {
-        q: params.q || '',
-        limit: 10,
-        offset: 0
-      },
+      params: params,
       headers: {
         Authorization: '/',
       },
     })
-    console.log('data', data)
+    //console.log('data', data)
 
     const products = data.products
+    //console.log('products', products)
     let defaultProducts = []
     if (products.length === 0) {
-      console.log('no products, fetching default')
+      //console.log('no products, fetching default')
       const data = await $fetch(`/search_products/?q=${params.q}`, {
         baseURL: config.public.baseURL,
         method: 'GET',
-        query: {
+        params: {
           order: 'newest',
           limit: 10,
           offset: 0
@@ -188,11 +184,15 @@ export default {
     const carouselProducts = await $fetch(`/products/`, {
       baseURL: config.public.baseURL,
       method: 'GET',
+      params: {
+          limit: 10,
+          offset: 0
+        },
       headers: {
         Authorization: '/',
       },
     })
-    console.log('carouselProducts', carouselProducts)
+    //console.log('carouselProducts', carouselProducts)
 
     let coordinates
     if (params.latitude && params.longitude) {
@@ -210,7 +210,7 @@ export default {
     } else {
       prices = { max: null, min: null }
     }
-    //TODO: Implement filtering logic
+
     this.appliedFilters = params.q
     this.filters = data.filters
     this.prices = prices
@@ -234,10 +234,18 @@ export default {
     },
 
     async getMoreProducts(offset) {
-      const data = await this.$api.get(`/search_products/?limit=10&offset=${offset}`, {
+      const config = useRuntimeConfig()
+      const data = await $fetch(`/search_products/`, {
         baseURL: config.public.baseURL,
         method: 'GET',
-        body: { params: this.appliedFilters },
+        params: {
+          ...this.appliedFilters,
+          limit: 10,
+          offset: offset
+        },
+        headers: {
+          Authorization: '/',
+        },
       })
       return data.products
     },