@iqual/nuxt-icms 1.1.0 → 1.2.1

package/components/Search/Facets/FacetDropdownUI.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+
+import Popover from '@/components/ui/popover/Popover.vue'
+import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
+import PopoverTrigger from '@/components/ui/popover/PopoverTrigger.vue'
+
+// Incoming facet shape from GraphQL API.
+export interface GraphQLFacetItem {
+  field: string
+  label: string
+  filter: {
+    id: string
+    label: string
+  }
+  count: number
+}
+
+// Internal normalized option shape (label == filter by default; could be mapped later)
+interface NormalizedFacetOption { value: string; label: string; count: number }
+
+type FacetSelections = Record<string, string[]>
+
+const props = defineProps<{
+  facets?: GraphQLFacetItem[]
+  /** grouped selections keyed by facet field */
+  modelValue?: FacetSelections
+  placeholder?: string
+  label?: string
+  /** Total count of results for display */
+  totalCount?: number
+  /** Currently displayed count for display */
+  displayedCount?: number
+  /** Loading state */
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [FacetSelections]
+  /** Emitted whenever a selection changes so parent can notify siblings */
+  'facets-change': [FacetSelections]
+}>()
+
+// Simple deep clone utility (data is plain: Record<string, string[]>)
+function cloneSelections(val?: FacetSelections | null): FacetSelections {
+  try {
+    return val ? JSON.parse(JSON.stringify(val)) : {}
+  } catch {
+    // Fallback shallow copy in worst case.
+    return Object.assign({}, val || {}) as FacetSelections
+  }
+}
+
+// Reactive selections
+const selections = ref<FacetSelections>(cloneSelections(props.modelValue))
+
+// Track open state for each popover to handle chevron rotation
+const openPopovers = ref<Record<string, boolean>>({})
+
+// Group facets by field.
+const grouped = computed(() => {
+  // Map key: { field, label } (label is fieldLabel if present, else field)
+  const map = new Map<{ field: string, label: string }, NormalizedFacetOption[]>()
+  const source = props.facets || []
+  for (const item of source) {
+    const field = item.field
+    const key = Array.from(map.keys()).find(k => k.field === field) || { field, label: item.label }
+    if (!map.has(key)) map.set(key, [])
+    map.get(key)!.push({ 
+      "value": item.filter.id, 
+      "label": item.filter.label, 
+      "count": item.count ,
+    })
+  }
+  // Sort each group alphabetically by label for stable UI.
+  for (const [, arr] of map) arr.sort((a, b) => a.label.localeCompare(b.label))
+  return map
+})
+
+// Flatten for utility lookups.
+const optionMap = computed(() => {
+  // Map key: filter string -> NormalizedFacetOption
+  const map = new Map<string, NormalizedFacetOption>()
+  for (const [, arr] of grouped.value) {
+    for (const opt of arr) {
+      map.set(opt.value, opt)
+    }
+  }
+  return map
+})
+
+// Stable array of [field, options[]] to simplify template & avoid calling entries() on undefined.
+// Array of [{ filter, label }, options[]] for template
+const groupEntries = computed(() => Array.from(grouped.value?.entries?.() || []))
+
+// Per-field trigger labels
+function fieldTriggerLabel(fieldData: { field: string, label: string }) {
+  let field: string = fieldData.field
+  let label: string = fieldData.label
+  const arr = selections.value[field] || []
+  if (!arr.length) return props.placeholder || `Select ${label}`
+  if (arr.length === 1) return optionMap.value.get(arr[0])?.label || arr[0]
+  return `${arr.length} selected`
+}
+
+function toggle(field: string, value: string) {
+  if (!selections.value[field]) selections.value[field] = []
+  const arr = selections.value[field]
+  const idx = arr.indexOf(value)
+  if (idx === -1) arr.push(value)
+  else arr.splice(idx, 1)
+  // Remove empty arrays to keep payload small.
+  if (!arr.length) delete selections.value[field]
+  emitAll()
+}
+
+function clearField(field: string) {
+  if (selections.value[field]) {
+    delete selections.value[field]
+    emitAll()
+  }
+}
+
+function clearAll() {
+  if (Object.keys(selections.value || {}).length) {
+    selections.value = {}
+    emitAll()
+  }
+}
+
+function emitAll() {
+  // Clone to avoid mutation issues in parent watchers.
+  const base = selections.value && typeof selections.value === 'object' ? selections.value : {}
+  const payload: FacetSelections = JSON.parse(JSON.stringify(base))
+  emit('update:modelValue', payload)
+  emit('facets-change', payload)
+}
+
+// Keep internal selections in sync if modelValue changes externally.
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) selections.value = cloneSelections(val)
+  },
+  { deep: true }
+)
+</script>
+
+<template>
+  <div class="facets-ui space-y-4" v-if="groupEntries.length">
+    <!-- Clear Filters Button -->
+    <div class="flex">
+      <Button
+        variant="ghost"
+        size="sm"
+        :disabled="!(selections && Object.keys(selections || {}).length)"
+        @click="clearAll"
+        class="flex items-center gap-2"
+      >
+        {{ $texts('listing.clear_filters', 'Clear all filters') }}
+      </Button>
+    </div>
+
+    <!-- Facet Groups -->
+    <div class="flex flex-wrap gap-4">
+      <template v-for="([key, opts]) in groupEntries" :key="key.field + '-' + key.label">
+        <div class="w-72">
+          <Label class="mb-1 block text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ key.label }}</Label>
+          <Popover @update:open="(open: boolean) => openPopovers[key.field] = open">
+            <PopoverTrigger as-child>
+              <Button variant="outline" class="w-full justify-between" :aria-label="`Facet ${key.label}`">
+                <span>{{ fieldTriggerLabel(key) }}</span>
+                <SpriteSymbol
+                  name="chevron-down"
+                  aria-hidden="true"
+                  :class="[
+                    'size-7 cursor-pointer text-black transition-all duration-300 group-hover/main:text-primary-500',
+                    openPopovers[key.field] ? 'rotate-180' : 'rotate-0'
+                  ]"
+                />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent class="p-0 w-72 bg-white" align="start">
+              <div class="max-h-72 overflow-y-auto py-1">
+                <template v-for="opt in opts" :key="opt.value">
+                  <button
+                    type="button"
+                    class="flex w-full items-center gap-3 px-3 py-2 text-left text-sm hover:bg-muted/60 focus:bg-muted/70 focus:outline-none"
+                    @click="toggle(key.field, opt.value)"
+                  >
+                    <Checkbox
+                      :checked="selections[key.field]?.includes(opt.value)"
+                      @update:checked="toggle(key.field, opt.value)"
+                      class="pointer-events-none"
+                    />
+                    <span class="flex-1 truncate">{{ opt.label }}</span>
+                    <span class="tabular-nums text-muted-foreground text-xs">{{ opt.count }}</span>
+                  </button>
+                </template>
+              </div>
+              <div class="flex items-center justify-between border-t px-2 py-1.5 gap-2">
+                <Button size="sm" variant="ghost" :disabled="!(selections[key.field] && selections[key.field].length)" @click="clearField(key.field)">Clear</Button>
+              </div>
+            </PopoverContent>
+            </Popover>
+        </div>
+      </template>
+    </div>
+
+    <!-- Results Counter -->
+    <div v-if="totalCount !== undefined" class="mb-4">
+      <div class="text-lg font-medium text-gray-900">
+        <span v-if="loading">Loading...</span>
+        <span v-else>
+          {{ totalCount }} {{ totalCount === 1 ? $texts('listing.result', 'result') : $texts('listing.results', 'results') }}
+          <span v-if="displayedCount && displayedCount < totalCount" class="text-sm font-normal text-gray-600">
+            ({{ $texts('listing.showing', 'result') }} {{ displayedCount }})
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

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
+    }
+  }
+}