@iqual/nuxt-icms 1.1.0 → 1.2.2

package/components/Search/Facets/FacetedSearchUI.vue

@@ -0,0 +1,397 @@
+<template>
+  <div>
+    <!-- Facets Section (only for 'all' listing type) -->
+    <div v-if="listingType === 'all' && facets.length > 0">
+      <SearchFacetsFacetDropdownUI
+        :facets="facetData"
+        v-model="facetSelections"
+        @facets-change="onFacetsChange"
+        :total-count="totalCount"
+        :displayed-count="displayedResults.length"
+        :loading="isLoading"
+        class="mb-6"
+      />
+
+      <template v-if="debug">
+        <!-- Debug info (only if enabled) -->
+        <pre class="mt-4 text-xs whitespace-pre bg-gray-50 p-3 rounded" v-if="Object.keys(facetSelections).length">{{ JSON.stringify(facetSelections, null, 2) }}</pre>
+        <pre class="mt-2 text-xs whitespace-pre bg-blue-50 p-3 rounded" v-if="facetData.length">Facets: {{ facetData.length }} items</pre>
+      </template>
+    </div>
+
+    <template v-if="debug && listingType !== 'all'">
+      <!-- Debug info for manual/contextual filters -->
+      <pre class="mb-4 text-xs whitespace-pre bg-yellow-50 p-3 rounded">Active Filters ({{ listingType }}): {{ JSON.stringify(activeFilters, null, 2) }}</pre>
+    </template>
+
+    <!-- Results Section -->
+    <div class="results-container">
+      <template v-if="displayedResults.length > 0">
+        <slot name="results" :results="displayedResults" :loading="loadingMore">
+          <!-- Default slot content if no slot is provided -->
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div v-for="result in displayedResults" :key="result?.id || Math.random()" class="result-item">
+              <pre class="text-xs bg-gray-100 p-2 rounded">{{ JSON.stringify(result, null, 2) }}</pre>
+            </div>
+          </div>
+        </slot>
+      </template>
+
+      <template v-else-if="!isLoading">
+        <slot name="no-results">
+          <div class="col-span-12 py-8 text-center text-gray-500">
+            {{ defaultNoResultsText }}
+          </div>
+        </slot>
+      </template>
+
+      <template v-if="isLoading">
+        <slot name="loading">
+          <div class="col-span-12 py-8 text-center text-gray-500">
+            {{ defaultLoadingText }}
+          </div>
+        </slot>
+      </template>
+    </div>
+
+    <!-- Load More Section -->
+    <div v-if="showLoadMore" class="mt-10 flex justify-center lg:mt-20">
+      <slot name="load-more" :loadMore="loadMore" :loading="loadingMore">
+        <button
+          @click="loadMore"
+          :disabled="loadingMore"
+          :class="props.loadMoreButtonClass || defaultButtonClass"
+        >
+          <span v-if="!loadingMore">{{ defaultLoadMoreText }}</span>
+          <span v-else>{{ defaultLoadingText }}</span>
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { SearchApiQueryFilterInput } from '#graphql-operations'
+
+export interface FacetFilterItem {
+  id: string
+  label: string
+}
+
+export interface ManualFilters {
+  topics?: FacetFilterItem[]
+}
+
+export interface FacetedSearchUIProps {
+  /**
+   * Base filter conditions that are always applied (e.g., content type)
+   * Example: { conditions: [{ field: "type", value: ["icms_news"] }] }
+   */
+  baseFilter: SearchApiQueryFilterInput
+
+  /**
+   * Array of facet field names to request from the search API
+   * Example: ["topics", "project_phase", "locations"]
+   */
+  facets: string[]
+
+  /** Listing type: 'all' (faceted search), 'manual' (props filters), 'contextual' (injected filters) */
+  listingType?: 'all' | 'manual' | 'contextual'
+
+  /** Manual filters for 'manual' listing type */
+  manualFilters?: ManualFilters
+
+  /** Maximum number of results to display per page */
+  itemsPerPage?: number
+
+  /** Text labels for internationalization */
+  noResultsText?: string
+  loadingText?: string
+  loadMoreText?: string
+
+  /** Enable debug mode to show facet selection info */
+  debug?: boolean
+
+  /** Color scheme for default button styling */
+  colorScheme?: 'none' | 'dark' | 'light' | 'accent'
+
+  /** Custom CSS classes for the load more button */
+  loadMoreButtonClass?: string
+}
+
+const props = withDefaults(defineProps<FacetedSearchUIProps>(), {
+  itemsPerPage: 12,
+  debug: false,
+  colorScheme: 'none',
+  listingType: 'all'
+})
+
+// Get the $texts function for internationalization
+const { $texts } = useNuxtApp()
+
+// Default text values with fallbacks
+const defaultNoResultsText = computed(() =>
+  props.noResultsText || $texts('listing.no_results', 'Currently there is no content available.')
+)
+const defaultLoadingText = computed(() =>
+  props.loadingText || $texts('listing.loading', 'Loading...')
+)
+const defaultLoadMoreText = computed(() =>
+  props.loadMoreText || $texts('listing.load_more', 'Load more')
+)
+
+// Reactive state
+const facetSelections = ref<Record<string, string[]>>({})
+const allFacets = ref<any[]>([])
+const currentPage = ref(1)
+const loadingMore = ref(false)
+const isLoading = ref(false)
+
+// Contextual filters (injected from parent)
+const contextualFilters = {
+  topics: inject<FacetFilterItem[]>('topics', [])
+}
+
+// Get active filters based on listing type
+const activeFilters = computed(() => {
+  if (props.listingType === 'manual' && props.manualFilters) {
+    return props.manualFilters
+  } else if (props.listingType === 'contextual') {
+    return contextualFilters
+  }
+  return {}
+})
+
+// Build GraphQL filter from base filter and facet selections or manual/contextual filters
+const buildSearchFilter = (selections?: Record<string, string[]>): SearchApiQueryFilterInput => {
+  const baseConditions = props.baseFilter.conditions || []
+  const conditions = [...baseConditions]
+
+  if (props.listingType === 'all') {
+    // For 'all' listing type, use facet selections from dropdowns
+    const facetSelections = selections || {}
+    for (const [field, values] of Object.entries(facetSelections)) {
+      if (values.length > 0) {
+        conditions.push({
+          field,
+          value: values
+        })
+      }
+    }
+  } else {
+    // For 'manual' and 'contextual' listing types, use activeFilters
+    const filters = activeFilters.value
+    for (const [field, items] of Object.entries(filters)) {
+      if (items && Array.isArray(items) && items.length > 0) {
+        const values = items.map(item => item.id).filter(Boolean)
+        if (values.length > 0) {
+          // Convert camelCase field names to snake_case for GraphQL
+          const graphqlField = field.replace(/([A-Z])/g, '_$1').toLowerCase()
+          conditions.push({
+            field: graphqlField,
+            value: values
+          })
+        }
+      }
+    }
+  }
+
+  return { conditions }
+}
+
+// Initial query to get all available facets (only for 'all' listing type)
+const { data: initialFacetsData } = await useAsyncData(
+  props.listingType === 'all' ? `facetedSearch-facets-${JSON.stringify(props.baseFilter)}` : 'skip-facets',
+  async () => {
+    if (props.listingType !== 'all') {
+      return null
+    }
+    return await useGraphqlQuery('layoutOverviewFacetsSearch', {
+      facets: props.facets,
+      filter: props.baseFilter
+    }).then((v) => {
+      return v.data?.searchApiQuery ?? null
+    })
+  }
+)
+
+// Initial query to get search results
+const { data: initialResultsData, refresh: refreshResults } = await useAsyncData(
+  `facetedSearch-results-${props.listingType}-${JSON.stringify(props.baseFilter)}-${JSON.stringify(activeFilters.value)}`,
+  async () => {
+    const filter = buildSearchFilter()
+    const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
+      filter,
+      limit: props.itemsPerPage,
+      offset: 0
+    })
+
+    isLoading.value = false
+    return response.data?.searchApiQuery ?? null
+  }
+)
+
+// Initialize facets from initial query (only for 'all' listing type)
+if (initialFacetsData.value) {
+  allFacets.value = initialFacetsData.value.facets || []
+}
+
+// Function to update search results when facets change (only for 'all' listing type)
+async function updateSearchResults(selections: Record<string, string[]>) {
+  if (props.listingType !== 'all') {
+    return // No dynamic updates for manual/contextual
+  }
+
+  try {
+    isLoading.value = true
+    currentPage.value = 1 // Reset pagination when filters change
+    const filter = buildSearchFilter(selections)
+
+    const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
+      filter,
+      limit: props.itemsPerPage,
+      offset: 0
+    })
+
+    if (response.data?.searchApiQuery?.results) {
+      // Update the results data to reflect new search results
+      initialResultsData.value = {
+        ...initialResultsData.value,
+        results: response.data.searchApiQuery.results,
+        count: response.data.searchApiQuery.count
+      }
+    }
+  } catch (error) {
+    console.error('Error updating search results:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Computed properties
+const displayedResults = computed(() => {
+  return initialResultsData.value?.results || []
+})
+
+const totalCount = computed(() => {
+  return initialResultsData.value?.count || 0
+})
+
+const showLoadMore = computed(() => {
+  const currentlyDisplayed = displayedResults.value.length
+  return currentlyDisplayed > 0 && currentlyDisplayed < totalCount.value && !isLoading.value
+})
+
+// Transform allFacets data into the format expected by FacetsUI component
+const facetData = computed(() => {
+  if (!allFacets.value || !Array.isArray(allFacets.value)) {
+    return []
+  }
+
+  const transformedFacets: Array<{ field: string; label: string, filter: {id: string, label: string}; count: number; }> = []
+
+  allFacets.value.forEach((facet: any) => {
+    if (facet?.field && facet?.filter) {
+      transformedFacets.push({
+        field: facet.field,
+        label: facet.label,
+        filter: {
+          id: facet.filter.id,
+          label: facet.filter.label
+        },
+        count: facet.count || 0,
+      })
+    }
+  })
+
+  return transformedFacets
+})
+
+// Event handlers
+function onFacetsChange(payload: Record<string, string[]>) {
+  facetSelections.value = payload
+  updateSearchResults(payload)
+}
+
+// Default button styling based on color scheme
+const defaultButtonClass = computed(() => {
+  const baseClasses = 'shadow-none h-auto block text-h7 font-medium py-3 px-20 rounded-full duration-300 ease-in-out w-full md:w-fit border disabled:opacity-50 disabled:cursor-not-allowed'
+
+  const colorSchemeClasses = {
+    none: 'bg-white text-black hover:bg-black hover:text-white border-black',
+    dark: 'bg-white text-black hover:bg-black hover:text-white border-black',
+    light: 'bg-gray-50 text-black hover:bg-black hover:text-white border-black',
+    accent: 'bg-white text-black hover:bg-black hover:text-white border-black'
+  }
+
+  return `${baseClasses} ${colorSchemeClasses[props.colorScheme] || colorSchemeClasses.none}`
+})
+
+// Load more handler
+async function loadMore() {
+  if (loadingMore.value || isLoading.value) return
+  loadingMore.value = true
+
+  try {
+    const filter = props.listingType === 'all'
+      ? buildSearchFilter(facetSelections.value)
+      : buildSearchFilter()
+    const offset = currentPage.value * props.itemsPerPage
+
+    const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
+      filter,
+      limit: props.itemsPerPage,
+      offset
+    })
+
+    if (response.data?.searchApiQuery?.results) {
+      // Append new results to existing ones
+      const currentResults = initialResultsData.value?.results || []
+      const newResults = response.data.searchApiQuery.results
+
+      initialResultsData.value = {
+        ...initialResultsData.value,
+        results: [...currentResults, ...newResults],
+        count: response.data.searchApiQuery.count
+      }
+
+      currentPage.value += 1
+    }
+  } catch (error) {
+    console.error('Error loading more results:', error)
+  } finally {
+    loadingMore.value = false
+  }
+}
+
+// Debug logging
+watchEffect(() => {
+  if (props.debug) {
+    console.log('FacetedSearch - Listing type:', props.listingType)
+
+    if (props.listingType === 'all') {
+      if (facetData.value.length > 0) {
+        console.log('FacetedSearch - Transformed facet data:', facetData.value)
+      }
+      if (allFacets.value.length > 0) {
+        console.log('FacetedSearch - Raw facets from GraphQL:', allFacets.value)
+      }
+    } else {
+      console.log('FacetedSearch - Active filters:', activeFilters.value)
+    }
+
+    if (displayedResults.value.length > 0) {
+      console.log('FacetedSearch - Results loaded:', displayedResults.value.length, 'items')
+    }
+  }
+})
+
+// Expose functions for parent components if needed
+defineExpose({
+  refreshResults,
+  loadMore,
+  facetSelections: readonly(facetSelections),
+  totalCount: readonly(totalCount),
+  displayedResults: readonly(displayedResults)
+})
+</script>

package/components/Search/Facets/fragment.graphql

@@ -0,0 +1,40 @@
+query layoutOverviewFacetsSearch(
+  $facets: [String!],
+  $filter: SearchApiQueryFilterInput,
+) {
+	searchApiQuery(
+    indexId: "content_search",
+    facets: $facets
+    filter: $filter
+  ) {
+    count
+    facets {
+      field
+      label
+      filter {
+        id
+        label
+      }
+      count
+    }
+  }
+}
+
+query layoutOverviewResultsSearch(
+  $filter: SearchApiQueryFilterInput,
+  $limit: Int,
+  $offset: Int
+) {
+	searchApiQuery(
+    indexId: "content_search",
+    filter: $filter
+    limit: $limit
+    offset: $offset
+  ) {
+    count
+    results {
+      bundle: __typename
+      ...entityTeaser
+    }
+  }
+}

package/components/Section/Footer/index.vue

@@ -24,19 +24,19 @@
           class="col-span-3 mb-6 flex flex-col gap-8 lg:col-span-1 lg:flex-row"
         >
           <ul v-for="(link, index) in footerMenuLinks" :key="index">
-            <p class="mb-5 font-bold" v-text="link.link.label" />
+            <p class="mb-5 font-bold" v-text="link.label" />
 
             <li
-              v-for="(subLink, index) in link.subtree"
+              v-for="(subLink, index) in link?.children"
               :key="index"
               class="mb-3 last:mb-0"
             >
               <NuxtLink
-                v-if="subLink.link.url"
-                :to="subLink.link.url.path"
-                :title="subLink.link.label"
+                v-if="subLink?.href"
+                :to="subLink?.href"
+                :title="subLink.label"
                 class="transition-colors hover:text-primary-500 focus:text-primary-500"
-              >{{ subLink.link.label }}</NuxtLink>
+              >{{ subLink.label }}</NuxtLink>
             </li>
           </ul>
         </div>
@@ -93,12 +93,12 @@
             <ul class="flex flex-col gap-4 md:flex-row md:gap-6">
               <li v-for="(link, index) in footerMetaMenuLinks" :key="index">
                 <NuxtLink
-                  v-if="link.link.url"
-                  :to="link.link.url.path"
-                  :title="link.link.label"
+                  v-if="link?.href"
+                  :to="link?.href"
+                  :title="link.label"
                   class="underline transition-colors hover:text-primary-500 focus:text-primary-500"
                   prefetch
-                >{{ link.link.label }}</NuxtLink>
+                >{{ link.label }}</NuxtLink>
               </li>
             </ul>
           </div>
@@ -109,9 +109,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { NuxtSvgSpriteSymbol } from '../../../../../.nuxt/nuxt-svg-sprite/runtime'
-const initData: Ref<InitData> = await useInitData()
-const { footerMenuLinks, footerMetaMenuLinks, globalConfig } = initData.value
+import type { NuxtSvgSpriteSymbol } from '#nuxt-svg-icon-sprite/runtime'
+
+const { menuItems: footerMenuLinks } = await useMenu('footerMenu')
+const { menuItems: footerMetaMenuLinks } = await useMenu('footerMenu')
 const {
   companyLogo,
   companyName,
@@ -120,7 +121,7 @@ const {
   phoneNumber,
   emailAddress,
   socialMediaLinks,
-} = globalConfig
+} = await useGlobalConfig()
 
 interface SocialMediaIconMeta {
   sprite: NuxtSvgSpriteSymbol