@rocketsearch/vue-uappi 0.0.0-stage → 0.1.0

package/runtime/components/RocketSearch.vue

@@ -0,0 +1,513 @@
+<template>
+  <div
+    class="rocket-search rocket-search__product-search rocket-search--page"
+    data-search-mode="page"
+    :data-facets-mode="mode"
+  >
+    <div class="rocket-search__content">
+      <div class="rocket-search__products-result opened">
+        <div class="wrapper">
+          <div v-if="mode === 'side'" class="rocket-search__products-result__col-left">
+            <RocketSearchFacets
+              :facets="context.facets"
+              :applied-filters="context.appliedFilters"
+              :closed-facets="closedFacets"
+              facets-mode="side"
+              :is-mobile="isMobile"
+              :is-selected="isSelected"
+              :range-key="rangeKey"
+              @toggle-facet="toggleFacet"
+              @click-facet="clickFacet"
+              @apply-price="applyPrice"
+              @clear-facet="clearFacet"
+              @clear-price="clearPrice"
+              @clear-boolean="clearBoolean"
+              @clear-all="clearAllFilters"
+            />
+          </div>
+
+          <div class="rocket-search__products-result__col-right">
+            <div class="rocket-search__header">
+              <span class="rocket-search__count"><span v-text="context.total" /> produtos encontrados.</span>
+
+              <button v-if="mode === 'fixed'" class="rocket-search__open-facets" @click="fixedFacetsOpened = true">
+                <svg xmlns="http://www.w3.org/2000/svg" width="15.096" height="15.812" viewBox="0 0 15.096 15.812">
+                  <g transform="translate(-8.37 -6.396)">
+                    <path d="M9.028,9.525h7.593a2.457,2.457,0,0,0,4.741,0h1.445a.658.658,0,0,0,0-1.316H21.357a2.457,2.457,0,0,0-4.741,0H9.028a.658.658,0,1,0,0,1.316ZM19,7.713a1.153,1.153,0,1,1-1.16,1.15A1.153,1.153,0,0,1,19,7.713Z" fill="#fff" />
+                    <path d="M22.808,38.18h-7.6a2.455,2.455,0,0,0-4.74,0H9.028a.658.658,0,1,0,0,1.316h1.451a2.455,2.455,0,0,0,4.74,0h7.59a.658.658,0,1,0,0-1.316Zm-9.972,1.811a1.155,1.155,0,1,1,.82-.336A1.153,1.153,0,0,1,12.836,39.992Z" transform="translate(0 -24.536)" fill="#fff" />
+                    <path d="M22.808,68.168H21.357a2.457,2.457,0,0,0-4.741,0H9.028a.658.658,0,1,0,0,1.316h7.593a2.457,2.457,0,0,0,4.741,0h1.445a.658.658,0,1,0,0-1.316ZM19,69.981a1.153,1.153,0,1,1,1.146-1.151A1.153,1.153,0,0,1,19,69.981Z" transform="translate(0 -49.088)" fill="#fff" />
+                  </g>
+                </svg>
+                Filtrar
+              </button>
+
+              <div class="rocket-search__sorter">
+                <div class="select" @click="showSortOptions = !showSortOptions">
+                  <span class="text" v-text="appliedSortLabel" />
+                  <svg xmlns="http://www.w3.org/2000/svg" width="10.582" height="6.692" viewBox="0 0 10.582 6.692">
+                    <path d="M5.291 4.314L1.401.424l-.977.977 4.867 4.867 4.867-4.867-.977-.977z" fill="#9e9e9e" stroke="#9e9e9e" stroke-width=".6" fill-rule="evenodd" />
+                  </svg>
+                </div>
+                <ul v-show="showSortOptions" class="select-options">
+                  <li
+                    v-for="option in context.sortOptions"
+                    :key="option.id"
+                    :class="{ selected: context.sortInfo.applied === option.id }"
+                    @click="changeSort(option)"
+                    v-text="option.label"
+                  />
+                </ul>
+              </div>
+            </div>
+
+            <p v-if="context.didYouMean && context.didYouMean.query" class="rocket-search__did-you-mean">
+              <template v-if="!context.total">
+                Nenhum resultado para <strong v-text="term" />.
+              </template>
+              Você quis dizer <a :href="didYouMeanUrl" @click="applyDidYouMean" v-text="context.didYouMean.query" />?
+            </p>
+
+            <div v-if="context.appliedFilters.length > 0" class="rocket-search__facets__selected--v2">
+              <span>Filtros aplicados:</span>
+              <ul>
+                <template v-for="(facet, i) in context.appliedFilters" :key="'af-' + i">
+                  <li v-for="(value, j) in facet.values || []" :key="'f-' + j" :data-alias="facet.alias">
+                    <span class="option-title" :data-alias="facet.alias">
+                      <span class="name" v-text="facet.alias + ':'" />
+                      <span class="label" v-text="value" />
+                    </span>
+                    <button class="rocket-search__facets__selected__clear-filter" aria-label="Remover filtro" @click="clearFacet(value, facet)">
+                      x
+                    </button>
+                  </li>
+                  <li v-if="facet.type === 'range'" :data-alias="facet.alias">
+                    <span class="option-title" :data-alias="facet.alias">
+                      <span class="name" v-text="facet.alias + ':'" />
+                      <span class="label">De {{ formatCurrency(facet.min) }} até {{ formatCurrency(facet.max) }}</span>
+                    </span>
+                    <button class="rocket-search__facets__selected__clear-filter" aria-label="Remover filtro" @click="clearPrice">
+                      x
+                    </button>
+                  </li>
+                  <li v-if="facet.type === 'boolean'" :data-alias="facet.alias" :data-type="facet.type">
+                    <span class="option-title" :data-alias="facet.alias">
+                      <span class="name" v-text="facet.alias + ':'" />
+                      <span class="label" v-text="facet.value ? 'Sim' : 'Não'" />
+                    </span>
+                    <button class="rocket-search__facets__selected__clear-filter" aria-label="Remover filtro" @click="clearBoolean(facet)">
+                      x
+                    </button>
+                  </li>
+                </template>
+                <li class="rocket-search__clear-all-filters">
+                  <button @click="clearAllFilters">
+                    Limpar
+                  </button>
+                </li>
+              </ul>
+            </div>
+
+            <div v-show="isLoading && !livescrolling" class="rocket-search__product-placeholder">
+              <div v-for="n in size" :key="n" class="rocket-search__product-placeholder__product-line">
+                <div v-for="i in 6" :key="i" class="rocket-search__product-placeholder__item" :class="'item-' + i" />
+              </div>
+            </div>
+
+            <ul v-show="!isLoading || livescrolling" ref="products" class="rocket-search__products">
+              <li
+                v-for="(product, index) in products"
+                :key="product.id"
+                :data-product-id="product.id"
+                class="rocket-search__product"
+                @click.capture="trackProductClick(product, index, $event)"
+              >
+                <slot name="product" :product="product" :position="index">
+                  <RouterLink :to="productPath(product)" class="rocket-search__card">
+                    <img v-if="productImage(product)" :src="productImage(product)" :alt="product.nome" loading="lazy">
+                    <span class="rocket-search__card-name" v-text="product.nome" />
+                    <span v-if="productPrice(product) !== null" class="rocket-search__card-price" v-text="formatCurrency(productPrice(product))" />
+                  </RouterLink>
+                </slot>
+              </li>
+            </ul>
+
+            <p v-if="!isLoading && loaded && !products.length" class="rocket-search__empty">
+              Nenhum produto encontrado.
+            </p>
+
+            <RocketSearchPagination
+              v-if="!livescroll && context.totalPages > 1"
+              :page="context.page"
+              :total-pages="context.totalPages"
+              :has-prev-page="context.hasPrevPage"
+              :has-next-page="context.hasNextPage"
+              @change="changePage"
+            />
+
+            <div v-if="livescroll && context.hasNextPage" class="rocket-search__footer">
+              <button class="rocket-search__livescroll" :class="{ 'button-loading': livescrolling }" @click="nextPageLivescroll">
+                Veja mais
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="fixedFacetsOpened && mode === 'fixed'" id="rocket-search__overlay" class="visible" @click="fixedFacetsOpened = false" />
+      <RocketSearchFacets
+        v-if="mode === 'fixed'"
+        :facets="context.facets"
+        :applied-filters="context.appliedFilters"
+        :closed-facets="closedFacets"
+        :fixed-facets-opened="fixedFacetsOpened"
+        facets-mode="fixed"
+        :is-mobile="isMobile"
+        :is-selected="isSelected"
+        :range-key="rangeKey"
+        @close="fixedFacetsOpened = false"
+        @toggle-facet="toggleFacet"
+        @click-facet="clickFacet"
+        @apply-price="applyPrice"
+        @clear-facet="clearFacet"
+        @clear-price="clearPrice"
+        @clear-boolean="clearBoolean"
+        @clear-all="clearAllFilters"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+// CSS pelo script e não por <style src>: o plugin-vue registra o dono de um src pelo caminho
+// do arquivo, e o mesmo .css em dois SFCs (com índices diferentes) quebra o build.
+import '../css/common.css';
+import '../css/search.css';
+import RocketSearchFacets from './search/RocketSearchFacets.vue';
+import RocketSearchPagination from './search/RocketSearchPagination.vue';
+import { productImage, productPath, productPrice, formatCurrency } from '../uappi.js';
+import { TRACKING_PARAMS, didYouMeanQuery, dispatchDidYouMeanClick } from '../listing.js';
+
+// Parâmetros de campanha nunca viram filtro na busca.
+function emptyContext () {
+  return {
+    appliedFilters: [],
+    total: 0,
+    page: 0,
+    size: 0,
+    totalPages: 0,
+    hasNextPage: false,
+    hasPrevPage: false,
+    products: [],
+    facets: {},
+    sortInfo: { requested: 'relevance', applied: 'relevance' },
+    sortOptions: [],
+    didYouMean: null
+  };
+}
+
+function splitValues (raw) {
+  return String(raw || '').split(';').filter(v => v !== '');
+}
+
+export default {
+  name: 'RocketSearch',
+  components: { RocketSearchFacets, RocketSearchPagination },
+  emits: ['products-loaded'],
+  props: {
+    pageSize: { type: Number, default: 20 },
+    facetsMode: { type: String, default: 'side' },
+    livescroll: { type: Boolean, default: false },
+    // Modo categoria: filtra a busca pela categoria (id da Rocket = id da categoria na Uappi).
+    isCategory: { type: Boolean, default: false },
+    categoryId: { type: [String, Number], default: '' },
+    mediaSize: { type: String, default: 'medium' }
+  },
+  data () {
+    return {
+      context: emptyContext(),
+      products: [],
+      isLoading: true,
+      loaded: false,
+      livescrolling: false,
+      showSortOptions: false,
+      fixedFacetsOpened: false,
+      closedFacets: [],
+      isMobile: false,
+      rangeKey: 0
+    };
+  },
+  computed: {
+    size () {
+      return this.pageSize;
+    },
+    mode () {
+      // Mobile sempre usa o painel fixo (mesma regra da Linx).
+      return this.isMobile || this.facetsMode === 'fixed' ? 'fixed' : 'side';
+    },
+    queryParam () {
+      return this.$rocket.config.searchPageParam;
+    },
+    term () {
+      const q = this.$route.query;
+      return String(q[this.queryParam] || q.q || '');
+    },
+    didYouMeanLocation () {
+      const suggestion = this.context.didYouMean && this.context.didYouMean.query;
+      if (!suggestion) return null;
+      const { busca, ...origin } = didYouMeanQuery(suggestion, this.term);
+      return { path: this.$rocket.config.searchPagePath, query: { [this.queryParam]: busca, ...origin } };
+    },
+    didYouMeanUrl () {
+      return this.didYouMeanLocation ? this.$router.resolve(this.didYouMeanLocation).href : '';
+    },
+    appliedSortLabel () {
+      const applied = this.context.sortInfo && this.context.sortInfo.applied;
+      const option = (this.context.sortOptions || []).find(o => o.id === applied);
+      return option ? option.label : 'Ordenar';
+    }
+  },
+  watch: {
+    '$route.query' () {
+      this.fetchResult();
+    }
+  },
+  mounted () {
+    this.isMobile = window.innerWidth < 1024;
+    this.onDocumentClick = (event) => {
+      if (!event.target.closest || !event.target.closest('.rocket-search__sorter')) this.showSortOptions = false;
+    };
+    this.onKeyup = (event) => {
+      if (event.code === 'Escape') this.fixedFacetsOpened = false;
+    };
+    document.addEventListener('click', this.onDocumentClick);
+    document.addEventListener('keyup', this.onKeyup);
+    this.fetchResult();
+  },
+  beforeUnmount () {
+    document.removeEventListener('click', this.onDocumentClick);
+    document.removeEventListener('keyup', this.onKeyup);
+    document.body.classList.remove('faceting');
+  },
+  methods: {
+    productImage (product) {
+      return productImage(product, this.mediaSize);
+    },
+    productPath,
+    productPrice,
+    formatCurrency,
+
+    // ---- Busca ----
+
+    buildParams (page) {
+      const query = this.$route.query;
+      const params = {
+        q: this.term,
+        size: this.size,
+        sort: query.sort || 'relevance',
+        page: page || query.page || 1
+      };
+      Object.keys(query).forEach((key) => {
+        const value = query[key];
+        if (value === undefined || value === null || value === '') return;
+        if (key === this.queryParam || key === 'q' || key === 'sort' || key === 'page') return;
+        const lower = key.toLowerCase();
+        if (TRACKING_PARAMS.includes(lower) || lower.indexOf('utm_') === 0) return;
+        params[key] = Array.isArray(value) ? value.join(';') : value;
+      });
+      if (this.isCategory && this.categoryId) params.categoryId = this.categoryId;
+      return params;
+    },
+
+    async fetchResult (page) {
+      const seq = this.seq = (this.seq || 0) + 1;
+      const append = this.livescrolling;
+      this.isLoading = true;
+      document.body.classList.add('faceting');
+
+      try {
+        const start = Date.now();
+        const response = await this.$rocket.search(this.buildParams(page));
+        if (seq !== this.seq) return;
+        const responseTime = Date.now() - start;
+        this.context = Object.assign(emptyContext(), response);
+        this.$rocket.rememberSearchPrices(this.context.products);
+
+        if (this.term !== '') {
+          this.$rocket.dispatchEvent('search', {
+            query: this.term,
+            resultsCount: this.context.total,
+            meta: { query: this.term, resultsCount: this.context.total, responseTime }
+          }).catch(() => {});
+        }
+
+        // Rocket ordena/filtra; o card mostra o produto como a Uappi o tem.
+        const ids = (this.context.products || []).map(p => p.id);
+        const products = await this.$rocket.fetchProducts(ids);
+        if (seq !== this.seq) return;
+        this.products = append ? this.products.concat(products) : products;
+        this.$emit('products-loaded', { products: this.products, total: this.context.total, term: this.term });
+      }
+      catch (e) {
+        if (seq !== this.seq) return;
+        if (!append) this.products = [];
+        console.warn('[RocketSearch] busca falhou', e && e.message ? e.message : e);
+      }
+      this.isLoading = false;
+      this.livescrolling = false;
+      this.loaded = true;
+      document.body.classList.remove('faceting');
+      // Depois da resposta: o layout do tema rola para o topo a cada troca de rota, e um
+      // scroll disparado junto com o push perderia para ele.
+      if (this.pendingScroll) {
+        this.pendingScroll = false;
+        this.$nextTick(() => this.scrollIntoView());
+      }
+    },
+
+    // Estado mora na URL (como na Linx): toda mudança vira navegação, e o watch de
+    // $route.query refaz a busca — voltar/avançar do navegador funciona sozinho.
+    updateQuery (mutate) {
+      const query = Object.assign({}, this.$route.query);
+      // Origem da sugestão vale só para a busca que veio dela, não para filtro/ordem/página seguintes.
+      delete query.rs_src;
+      delete query.rs_from;
+      mutate(query);
+      Object.keys(query).forEach((key) => {
+        const keepEmpty = key === this.queryParam && !this.isCategory;
+        if (!keepEmpty && (query[key] === '' || query[key] == null)) delete query[key];
+      });
+      // Na busca o param fica mesmo vazio: é ele que marca "busca sem termo".
+      if (!this.isCategory && query[this.queryParam] === undefined) query[this.queryParam] = this.term;
+      this.pendingScroll = true;
+      this.$router.push({ path: this.$route.path, query });
+    },
+
+    scrollIntoView () {
+      const el = this.$refs.products;
+      if (el && el.scrollIntoView) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    },
+
+    applyDidYouMean (event) {
+      dispatchDidYouMeanClick(this.$rocket, {
+        from: this.term,
+        suggestion: this.context.didYouMean.query,
+        source: 'search-page'
+      });
+      if (this.$rocket.isModifiedClick(event)) return;
+      if (event && event.preventDefault) event.preventDefault();
+      this.$router.push(this.didYouMeanLocation);
+    },
+
+    // ---- Facets ----
+
+    isSelected (value, facet) {
+      if (value === 0 || value === 1) {
+        const booleanFilter = (this.context.appliedFilters || []).find(f => f.type === 'boolean' && f.field === facet.field);
+        return !!booleanFilter && booleanFilter.value === (value === 1);
+      }
+      return (this.context.appliedFilters || []).some(f => (f.values || []).includes(value));
+    },
+
+    clickFacet (value, facet) {
+      const selected = this.isSelected(value.value, facet);
+      this.updateQuery((query) => {
+        if (value.value === 0 || value.value === 1) {
+          query[facet.label] = selected ? '' : String(value.value);
+        }
+        else {
+          let values = splitValues(query[facet.label]);
+          values = selected ? values.filter(v => v !== String(value.value)) : values.concat(String(value.value));
+          query[facet.label] = values.join(';');
+        }
+        delete query.page;
+        delete query.minPrice;
+        delete query.maxPrice;
+      });
+    },
+
+    applyPrice ({ min, max }) {
+      this.updateQuery((query) => {
+        query.minPrice = String(min);
+        query.maxPrice = String(max);
+        delete query.page;
+      });
+    },
+
+    clearFacet (value, facet) {
+      this.updateQuery((query) => {
+        query[facet.alias] = splitValues(query[facet.alias]).filter(v => v !== String(value)).join(';');
+      });
+    },
+
+    clearPrice () {
+      this.rangeKey++;
+      this.updateQuery((query) => {
+        delete query.page;
+        delete query.minPrice;
+        delete query.maxPrice;
+      });
+    },
+
+    clearBoolean (facet) {
+      this.updateQuery((query) => {
+        delete query[facet.alias];
+        delete query.page;
+      });
+    },
+
+    clearAllFilters () {
+      this.rangeKey++;
+      this.updateQuery((query) => {
+        Object.keys(query).forEach((key) => {
+          if (key !== this.queryParam) delete query[key];
+        });
+      });
+    },
+
+    toggleFacet (facet) {
+      const i = this.closedFacets.indexOf(facet.field);
+      if (i !== -1) this.closedFacets.splice(i, 1);
+      else this.closedFacets.push(facet.field);
+    },
+
+    // ---- Ordenação / paginação ----
+
+    changeSort (option) {
+      this.showSortOptions = false;
+      this.updateQuery((query) => {
+        query.sort = option.id;
+        delete query.page;
+      });
+    },
+
+    changePage (page) {
+      this.updateQuery((query) => {
+        query.page = String(page);
+      });
+    },
+
+    // Sem mexer na URL (diferente da Linx): toda troca de rota faz o layout do tema rolar
+    // para o topo, o que jogaria o cliente para cima no meio da lista.
+    nextPageLivescroll () {
+      if (this.livescrolling) return;
+      this.livescrolling = true;
+      this.fetchResult((this.context.page || 1) + 1);
+    },
+
+    // ---- Tracking ----
+
+    // Captura o clique em qualquer link do card (o tema navega pelo próprio router-link;
+    // em SPA a página não descarrega, então o evento sai sem precisar segurar a navegação).
+    trackProductClick (product, index, event) {
+      const link = event.target && event.target.closest ? event.target.closest('a[href]') : null;
+      if (!link) return;
+      // position = índice na lista exibida (mesma semântica da Linx).
+      this.$rocket.dispatchEvent('click', {
+        productId: String(product.id),
+        position: index,
+        meta: { source: 'search-page', query: this.term || '' }
+      }).catch(() => {});
+    }
+  }
+};
+</script>