@meeovi/layer-search 1.0.3

package/app/components/results/audioSearch.vue

@@ -0,0 +1,7 @@
+<template>
+    <div></div>
+</template>
+
+<script setup>
+
+</script>

package/app/components/results/booksSearch.vue

@@ -0,0 +1,7 @@
+<template>
+    <div></div>
+</template>
+
+<script setup>
+
+</script>

package/app/components/results/financeSearch.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <div v-if="results.length">
+            <v-row>
+                <v-col v-for="(result, index) in results" :key="index">
+                    <productCard :product="result" />
+                </v-col>
+            </v-row>
+        </div>
+
+        <p v-else>No results found.</p>
+
+        <v-pagination v-model="currentPage" :length="totalPages" :total-visible="5"
+            @update:modelValue="fetchSearchResults"></v-pagination>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        onMounted,
+        watch
+    } from 'vue';
+    import {
+        useRoute
+    } from 'vue-router';
+    import FilterComponent from '~/components/search/filters.vue';
+    import productCard from '~/components/commerce/commerce/product/productCard.vue';
+    import {
+        liteClient as algoliasearch
+    } from 'algoliasearch/lite';
+
+
+    const config = useRuntimeConfig();
+    const searchClient = algoliasearch(config.public.appId, config.public.apiKey);
+
+    const route = useRoute();
+    const results = ref([]);
+    const searchQuery = ref('');
+    const currentPage = ref(1);
+    const totalPages = ref(1);
+    const pageSize = ref(10);
+    const filterData = ref({});
+    const appliedFilters = ref({});
+
+    const fetchSearchResults = async () => {
+        if (route.query.q) {
+            searchQuery.value = route.query.q;
+            try {
+                const facetFilters = Object.entries(appliedFilters.value).map(([facet, values]) =>
+                    values.map(value => `${facet}:${value}`)
+                ).flat();
+
+                const response = await searchClient.search([{
+                    indexName: config.public.indexName,
+                    query: searchQuery.value,
+                    page: currentPage.value - 1,
+                    hitsPerPage: pageSize.value,
+                    facets: ['categories'], // Adjust this based on your filterable attributes
+                    facetFilters: facetFilters,
+                }, ]);
+
+                if (response.results && response.results[0]) {
+                    results.value = response.results[0].hits;
+                    totalPages.value = response.results[0].nbPages;
+                    currentPage.value = response.results[0].page + 1;
+                    updateFilters(response.results[0].facets);
+                } else {
+                    results.value = [];
+                    totalPages.value = 0;
+                    currentPage.value = 1;
+                    updateFilters({});
+                }
+            } catch (err) {
+                console.error('Search error:', err);
+            }
+        }
+    };
+
+    const updateFilters = (facets) => {
+        filterData.value = {
+            ...facets
+        };
+    };
+
+    const handleApplyFilters = (filters) => {
+        appliedFilters.value = filters;
+        fetchSearchResults();
+    };
+
+    onMounted(fetchSearchResults);
+    watch(() => route.query.q, fetchSearchResults);
+</script>

package/app/components/results/imageSearch.vue

@@ -0,0 +1,7 @@
+<template>
+    <div></div>
+</template>
+
+<script setup>
+
+</script>

package/app/components/results/musicSearch.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <div v-if="results.length">
+            <v-row>
+                <v-col v-for="(result, index) in results" :key="index">
+                    <productCard :product="result" />
+                </v-col>
+            </v-row>
+        </div>
+
+        <p v-else>No results found.</p>
+
+        <v-pagination v-model="currentPage" :length="totalPages" :total-visible="5"
+            @update:modelValue="fetchSearchResults"></v-pagination>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        onMounted,
+        watch
+    } from 'vue';
+    import {
+        useRoute
+    } from 'vue-router';
+    import FilterComponent from '~/components/search/filters.vue';
+    import productCard from '~/components/commerce/commerce/product/productCard.vue';
+    import {
+        liteClient as algoliasearch
+    } from 'algoliasearch/lite';
+
+
+    const config = useRuntimeConfig();
+    const searchClient = algoliasearch(config.public.appId, config.public.apiKey);
+
+    const route = useRoute();
+    const results = ref([]);
+    const searchQuery = ref('');
+    const currentPage = ref(1);
+    const totalPages = ref(1);
+    const pageSize = ref(10);
+    const filterData = ref({});
+    const appliedFilters = ref({});
+
+    const fetchSearchResults = async () => {
+        if (route.query.q) {
+            searchQuery.value = route.query.q;
+            try {
+                const facetFilters = Object.entries(appliedFilters.value).map(([facet, values]) =>
+                    values.map(value => `${facet}:${value}`)
+                ).flat();
+
+                const response = await searchClient.search([{
+                    indexName: config.public.indexName,
+                    query: searchQuery.value,
+                    page: currentPage.value - 1,
+                    hitsPerPage: pageSize.value,
+                    facets: ['categories'], // Adjust this based on your filterable attributes
+                    facetFilters: facetFilters,
+                }, ]);
+
+                if (response.results && response.results[0]) {
+                    results.value = response.results[0].hits;
+                    totalPages.value = response.results[0].nbPages;
+                    currentPage.value = response.results[0].page + 1;
+                    updateFilters(response.results[0].facets);
+                } else {
+                    results.value = [];
+                    totalPages.value = 0;
+                    currentPage.value = 1;
+                    updateFilters({});
+                }
+            } catch (err) {
+                console.error('Search error:', err);
+            }
+        }
+    };
+
+    const updateFilters = (facets) => {
+        filterData.value = {
+            ...facets
+        };
+    };
+
+    const handleApplyFilters = (filters) => {
+        appliedFilters.value = filters;
+        fetchSearchResults();
+    };
+
+    onMounted(fetchSearchResults);
+    watch(() => route.query.q, fetchSearchResults);
+</script>

package/app/components/results/newsSearch.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <div v-if="results.length">
+            <v-row>
+                <v-col v-for="(result, index) in results" :key="index">
+                    <productCard :product="result" />
+                </v-col>
+            </v-row>
+        </div>
+
+        <p v-else>No results found.</p>
+
+        <v-pagination v-model="currentPage" :length="totalPages" :total-visible="5"
+            @update:modelValue="fetchSearchResults"></v-pagination>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        onMounted,
+        watch
+    } from 'vue';
+    import {
+        useRoute
+    } from 'vue-router';
+    import FilterComponent from '~/components/search/filters.vue';
+    import productCard from '~/components/commerce/commerce/product/productCard.vue';
+    import {
+        liteClient as algoliasearch
+    } from 'algoliasearch/lite';
+
+
+    const config = useRuntimeConfig();
+    const searchClient = algoliasearch(config.public.appId, config.public.apiKey);
+
+    const route = useRoute();
+    const results = ref([]);
+    const searchQuery = ref('');
+    const currentPage = ref(1);
+    const totalPages = ref(1);
+    const pageSize = ref(10);
+    const filterData = ref({});
+    const appliedFilters = ref({});
+
+    const fetchSearchResults = async () => {
+        if (route.query.q) {
+            searchQuery.value = route.query.q;
+            try {
+                const facetFilters = Object.entries(appliedFilters.value).map(([facet, values]) =>
+                    values.map(value => `${facet}:${value}`)
+                ).flat();
+
+                const response = await searchClient.search([{
+                    indexName: config.public.indexName,
+                    query: searchQuery.value,
+                    page: currentPage.value - 1,
+                    hitsPerPage: pageSize.value,
+                    facets: ['categories'], // Adjust this based on your filterable attributes
+                    facetFilters: facetFilters,
+                }, ]);
+
+                if (response.results && response.results[0]) {
+                    results.value = response.results[0].hits;
+                    totalPages.value = response.results[0].nbPages;
+                    currentPage.value = response.results[0].page + 1;
+                    updateFilters(response.results[0].facets);
+                } else {
+                    results.value = [];
+                    totalPages.value = 0;
+                    currentPage.value = 1;
+                    updateFilters({});
+                }
+            } catch (err) {
+                console.error('Search error:', err);
+            }
+        }
+    };
+
+    const updateFilters = (facets) => {
+        filterData.value = {
+            ...facets
+        };
+    };
+
+    const handleApplyFilters = (filters) => {
+        appliedFilters.value = filters;
+        fetchSearchResults();
+    };
+
+    onMounted(fetchSearchResults);
+    watch(() => route.query.q, fetchSearchResults);
+</script>

package/app/components/results/spaceSearch.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <div v-if="results.length">
+            <v-row>
+                <v-col v-for="(result, index) in results" :key="index">
+                    <productCard :product="result" />
+                </v-col>
+            </v-row>
+        </div>
+
+        <p v-else>No results found.</p>
+
+        <v-pagination v-model="currentPage" :length="totalPages" :total-visible="5"
+            @update:modelValue="fetchSearchResults"></v-pagination>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        onMounted,
+        watch
+    } from 'vue';
+    import {
+        useRoute
+    } from 'vue-router';
+    import FilterComponent from '~/components/search/filters.vue';
+    import productCard from '~/components/commerce/commerce/product/productCard.vue';
+    import {
+        liteClient as algoliasearch
+    } from 'algoliasearch/lite';
+
+
+    const config = useRuntimeConfig();
+    const searchClient = algoliasearch(config.public.appId, config.public.apiKey);
+
+    const route = useRoute();
+    const results = ref([]);
+    const searchQuery = ref('');
+    const currentPage = ref(1);
+    const totalPages = ref(1);
+    const pageSize = ref(10);
+    const filterData = ref({});
+    const appliedFilters = ref({});
+
+    const fetchSearchResults = async () => {
+        if (route.query.q) {
+            searchQuery.value = route.query.q;
+            try {
+                const facetFilters = Object.entries(appliedFilters.value).map(([facet, values]) =>
+                    values.map(value => `${facet}:${value}`)
+                ).flat();
+
+                const response = await searchClient.search([{
+                    indexName: config.public.indexName,
+                    query: searchQuery.value,
+                    page: currentPage.value - 1,
+                    hitsPerPage: pageSize.value,
+                    facets: ['categories'], // Adjust this based on your filterable attributes
+                    facetFilters: facetFilters,
+                }, ]);
+
+                if (response.results && response.results[0]) {
+                    results.value = response.results[0].hits;
+                    totalPages.value = response.results[0].nbPages;
+                    currentPage.value = response.results[0].page + 1;
+                    updateFilters(response.results[0].facets);
+                } else {
+                    results.value = [];
+                    totalPages.value = 0;
+                    currentPage.value = 1;
+                    updateFilters({});
+                }
+            } catch (err) {
+                console.error('Search error:', err);
+            }
+        }
+    };
+
+    const updateFilters = (facets) => {
+        filterData.value = {
+            ...facets
+        };
+    };
+
+    const handleApplyFilters = (filters) => {
+        appliedFilters.value = filters;
+        fetchSearchResults();
+    };
+
+    onMounted(fetchSearchResults);
+    watch(() => route.query.q, fetchSearchResults);
+</script>

package/app/components/results/spacesSearch.vue

@@ -0,0 +1,7 @@
+<template>
+    <div></div>
+</template>
+
+<script setup>
+
+</script>

package/app/components/results/travelSearch.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <div v-if="results.length">
+            <v-row>
+                <v-col v-for="(result, index) in results" :key="index">
+                    <productCard :product="result" />
+                </v-col>
+            </v-row>
+        </div>
+
+        <p v-else>No results found.</p>
+
+        <v-pagination v-model="currentPage" :length="totalPages" :total-visible="5"
+            @update:modelValue="fetchSearchResults"></v-pagination>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        onMounted,
+        watch
+    } from 'vue';
+    import {
+        useRoute
+    } from 'vue-router';
+    import FilterComponent from '~/components/search/filters.vue';
+    import productCard from '~/components/commerce/commerce/product/productCard.vue';
+    import {
+        liteClient as algoliasearch
+    } from 'algoliasearch/lite';
+
+
+    const config = useRuntimeConfig();
+    const searchClient = algoliasearch(config.public.appId, config.public.apiKey);
+
+    const route = useRoute();
+    const results = ref([]);
+    const searchQuery = ref('');
+    const currentPage = ref(1);
+    const totalPages = ref(1);
+    const pageSize = ref(10);
+    const filterData = ref({});
+    const appliedFilters = ref({});
+
+    const fetchSearchResults = async () => {
+        if (route.query.q) {
+            searchQuery.value = route.query.q;
+            try {
+                const facetFilters = Object.entries(appliedFilters.value).map(([facet, values]) =>
+                    values.map(value => `${facet}:${value}`)
+                ).flat();
+
+                const response = await searchClient.search([{
+                    indexName: config.public.indexName,
+                    query: searchQuery.value,
+                    page: currentPage.value - 1,
+                    hitsPerPage: pageSize.value,
+                    facets: ['categories'], // Adjust this based on your filterable attributes
+                    facetFilters: facetFilters,
+                }, ]);
+
+                if (response.results && response.results[0]) {
+                    results.value = response.results[0].hits;
+                    totalPages.value = response.results[0].nbPages;
+                    currentPage.value = response.results[0].page + 1;
+                    updateFilters(response.results[0].facets);
+                } else {
+                    results.value = [];
+                    totalPages.value = 0;
+                    currentPage.value = 1;
+                    updateFilters({});
+                }
+            } catch (err) {
+                console.error('Search error:', err);
+            }
+        }
+    };
+
+    const updateFilters = (facets) => {
+        filterData.value = {
+            ...facets
+        };
+    };
+
+    const handleApplyFilters = (filters) => {
+        appliedFilters.value = filters;
+        fetchSearchResults();
+    };
+
+    onMounted(fetchSearchResults);
+    watch(() => route.query.q, fetchSearchResults);
+</script>

package/app/components/results/videoSearch.vue

@@ -0,0 +1,7 @@
+<template>
+    <div></div>
+</template>
+
+<script setup>
+
+</script>

package/app/components/search.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="searchField">
+    <div class="container">
+      <ais-instant-search :search-client="searchClient" :index-name="indexName">
+        <ais-configure :hits-per-page.camel="8" />
+        <div class="search-panel">
+          <div class="search-panel__filters">
+            <ais-panel>
+              <template v-slot:header>type</template>
+              <ais-refinement-list attribute="type" />
+            </ais-panel>
+
+            <ais-panel>
+              <template v-slot:header>actors</template>
+              <ais-refinement-list searchable attribute="actors" />
+            </ais-panel>
+          </div>
+
+          <div class="search-panel__results">
+            <div class="searchbox">
+              <ais-search-box placeholder="" />
+              <v-text-field v-if="isDev" v-model="searchQuery" placeholder="Debug: search input" class="debug-search-input"></v-text-field>
+            </div>
+            <ais-hits>
+              <template v-slot:item="{ item, index }">
+                <article @click="openResult(item)" style="cursor:pointer">
+                  <h1>
+                    <ais-highlight attribute="title" :hit="item" />
+                  </h1>
+                  <p>
+                    <ais-snippet :hit="item" attribute="plot" />
+                  </p>
+                </article>
+              </template>
+            </ais-hits>
+
+            <div class="pagination">
+              <ais-pagination />
+            </div>
+          </div>
+        </div>
+      </ais-instant-search>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {
+    useRouter
+  } from 'vue-router'
+
+  import {
+    type Ref,
+    ref,
+    watch
+  } from 'vue';
+  import Client from '@searchkit/instantsearch-client'
+
+  const searchClient = Client({
+    url: '/api/search'
+  })
+
+  const configDetails = useRuntimeConfig()
+
+  const router = useRouter()
+  const searchQuery = ref('');
+  const indexName = configDetails.public.indexName;
+  const isDev = process.env.NODE_ENV !== 'production'
+
+
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.debug('[search] searchClient', searchClient, 'has search method:', typeof searchClient.search)
+  }
+
+  function openResult(item: any) {
+    const id = item._id ?? item.id ?? '';
+    const title = item.title ?? '';
+    router.push({
+      path: '/results',
+      query: {
+        id,
+        title
+      }
+    });
+  }
+</script>

package/app/components/templates/HomeTemplate.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+const appConfig = useAppConfig()
+
+const indexName = appConfig.ecommerce.indexName
+
+const sortingOptions = [
+  { value: `${indexName}`, label: 'Featured' },
+  { value: `${indexName}:price:asc`, label: 'Price: Low to High' },
+  { value: `${indexName}:price:desc`, label: 'Price: High to Low' },
+  { value: `${indexName}:rating:desc`, label: 'Rating: High to Low' }
+]
+</script>
+
+<template>
+  <MeiliSearchProvider :index-name="indexName">
+    <TheNavbar class="mb-5 shadow-l">
+      <template #shared>
+        <MeiliSearchBar />
+      </template>
+    </TheNavbar>
+    <div class="container mb-5">
+      <div class="filters">
+        <MeiliSearchFacetFilter attribute="category" initial-sort-by="name" class="mb-5" />
+        <MeiliSearchFacetFilter attribute="brand" initial-sort-by="count" class="mb-5" />
+        <MeiliSearchRangeFilter attribute="price" class="mb-5" />
+        <MeiliSearchRatingFilter attribute="rating_rounded" label="Rating" />
+      </div>
+      <div class="results">
+        <div class="mb-5 results-meta">
+          <MeiliSearchStats />
+          <MeiliSearchSorting :options="sortingOptions" />
+        </div>
+        <MeiliSearchLoadingProvider v-slot="{ isSearchStalled }" class="mb-5">
+          <div v-show="isSearchStalled" style="height: 80vh; display: flex; flex-direction: column;">
+            <LoadingIndicator class="m-auto" />
+          </div>
+          <MeiliSearchResults v-show="!isSearchStalled" />
+        </MeiliSearchLoadingProvider>
+      </div>
+    </div>
+  </MeiliSearchProvider>
+</template>
+
+<style src="~/assets/css/components/home.css" scoped />

package/app/components/widgets/ClearRefinements.vue

@@ -0,0 +1,27 @@
+<template>
+  <div v-if="state" class="ais-ClearRefinements">
+    <button
+      type="reset"
+      class="ais-ClearRefinements-button"
+      @click.prevent="refine"
+    >
+      Reset filters
+    </button>
+  </div>
+</template>
+
+<script>
+import { connectClearRefinements } from 'instantsearch.js/es/connectors';
+import { createWidgetMixin } from 'vue-instantsearch';
+
+export default {
+  name: 'AppClearRefinements',
+  mixins: [createWidgetMixin({ connector: connectClearRefinements })],
+  methods: {
+    refine() {
+      this.state.refine();
+      this.$emit('click');
+    },
+  },
+};
+</script>