@iqual/nuxt-icms 1.2.3 → 1.3.0

package/components/Search/Facets/FacetedSearchUI.vue

@@ -7,34 +7,76 @@
         v-model="facetSelections"
         @facets-change="onFacetsChange"
         :total-count="totalCount"
-        :displayed-count="displayedResults.length"
+        :displayed-count="props.groupResultsByFacet ? 
+          displayedResults?.reduce((total, group) => total + (group?.results?.length || 0), 0) : 
+          displayedResults?.[0]?.results?.length"
         :loading="isLoading"
+        :colorScheme="colorScheme"
         class="mb-6"
+        :enable-text-search="enableTextSearch"
+        :search-term="searchTerm"
+        @update:search-term="onSearchTermChange"
       />
 
       <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>
+        <pre
+          class="mt-4 whitespace-pre rounded bg-gray-50 p-3 text-xs"
+          v-if="Object.keys(facetSelections).length"
+          >{{ JSON.stringify(facetSelections, null, 2) }}</pre
+        >
+        <pre
+          class="bg-blue-50 mt-2 whitespace-pre rounded p-3 text-xs"
+          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>
+      <pre class="bg-yellow-50 mb-4 whitespace-pre rounded p-3 text-xs">
+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>
+      <template v-if="displayedResults?.length">
+        <div
+          v-for="(group, groupIndex) in displayedResults"
+          :key="`group-${groupIndex}`"
+        >
+          <slot name="results" :results="group" :loading="loadingMore">
+            <p v-if="props.groupResultsByFacet && 'label' in group && group?.label">{{ group?.label }} <span v-if="'count' in group && group?.count">({{ group?.count }})</span></p>
+            <!-- Default slot content if no slot is provided -->
+            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+              <div v-for="(result, index) in group?.results"
+                :key="`result-${index}`"
+              >
+                <pre class="rounded bg-gray-100 p-2 text-xs overflow-hidden">{{
+                  JSON.stringify(result, null, 2)
+                }}</pre>
+              </div>
             </div>
+          </slot>
+          
+          <!-- Group-specific Load More Section (for grouped results) -->
+          <div v-if="props.groupResultsByFacet && 'label' in group && canGroupLoadMore(group)" class="mt-6 flex justify-center">
+            <slot name="group-load-more" :loadMore="() => loadMoreGroup(group)" :loading="isGroupLoading(group)" :group="group">
+              <button
+                @click="loadMoreGroup(group)"
+                :disabled="isGroupLoading(group)"
+                :class="props.loadMoreButtonClass || defaultButtonClass"
+              >
+                <span v-if="!isGroupLoading(group)">{{ defaultLoadMoreText }}</span>
+                <span v-else>{{ defaultLoadingText }}</span>
+              </button>
+            </slot>
           </div>
-        </slot>
+        </div>
       </template>
 
       <template v-else-if="!isLoading">
@@ -54,7 +96,7 @@
       </template>
     </div>
 
-    <!-- Load More Section -->
+    <!-- Global Load More Section (for non-grouped results) -->
     <div v-if="showLoadMore" class="mt-10 flex justify-center lg:mt-20">
       <slot name="load-more" :loadMore="loadMore" :loading="loadingMore">
         <button
@@ -71,6 +113,7 @@
 </template>
 
 <script lang="ts" setup>
+import { nextTick } from 'vue'
 import type { SearchApiQueryFilterInput } from '#graphql-operations'
 
 export interface FacetFilterItem {
@@ -91,7 +134,7 @@ export interface FacetedSearchUIProps {
 
   /**
    * Array of facet field names to request from the search API
-   * Example: ["topics", "project_phase", "locations"]
+   * Example: ["topics"]
    */
   facets: string[]
 
@@ -117,27 +160,39 @@ export interface FacetedSearchUIProps {
 
   /** Custom CSS classes for the load more button */
   loadMoreButtonClass?: string
+
+  /** Enable fulltext search */
+  enableTextSearch?: boolean
+
+  /** Machine name of facets, enables grouping */
+  groupResultsByFacet?: string
+
+  /** Conjunction operator for combining additional filter conditions (base conditions are always AND) */
+  conjunction?: 'AND' | 'OR'
 }
 
 const props = withDefaults(defineProps<FacetedSearchUIProps>(), {
   itemsPerPage: 12,
   debug: false,
   colorScheme: 'none',
-  listingType: 'all'
+  listingType: 'all',
+  conjunction: 'AND',
 })
 
 // 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 defaultNoResultsText = computed(
+  () =>
+    props.noResultsText ||
+    $texts('listing.no_results', 'Currently there is no content available.'),
 )
-const defaultLoadingText = computed(() =>
-  props.loadingText || $texts('listing.loading', 'Loading...')
+const defaultLoadingText = computed(
+  () => props.loadingText || $texts('listing.loading', 'Loading...'),
 )
-const defaultLoadMoreText = computed(() =>
-  props.loadMoreText || $texts('listing.load_more', 'Load more')
+const defaultLoadMoreText = computed(
+  () => props.loadMoreText || $texts('listing.load_more', 'Load more'),
 )
 
 // Reactive state
@@ -147,11 +202,22 @@ const currentPage = ref(1)
 const loadingMore = ref(false)
 const isLoading = ref(false)
 
+// Group-specific pagination and loading states
+const groupPagination = ref<Record<string, number>>({})
+const groupLoadingMore = ref<Record<string, boolean>>({})
+
+// Helper function to get group key from group data
+function getGroupKey(group: any): string {
+  return group?.label || 'default'
+}
+
 // Contextual filters (injected from parent)
 const contextualFilters = {
-  topics: inject<FacetFilterItem[]>('topics', [])
+  topics: inject<FacetFilterItem[]>('topics', []),
 }
 
+const searchTerm = useQueryString('text')
+
 // Get active filters based on listing type
 const activeFilters = computed(() => {
   if (props.listingType === 'manual' && props.manualFilters) {
@@ -163,18 +229,20 @@ const activeFilters = computed(() => {
 })
 
 // Build GraphQL filter from base filter and facet selections or manual/contextual filters
-const buildSearchFilter = (selections?: Record<string, string[]>): SearchApiQueryFilterInput => {
+const buildSearchFilter = (
+  selections?: Record<string, string[]>,
+): SearchApiQueryFilterInput => {
   const baseConditions = props.baseFilter.conditions || []
-  const conditions = [...baseConditions]
+  const additionalConditions: any[] = []
 
   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({
+        additionalConditions.push({
           field,
-          value: values
+          value: values,
         })
       }
     }
@@ -182,54 +250,109 @@ const buildSearchFilter = (selections?: Record<string, string[]>): SearchApiQuer
     // 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 (items) {
+        let values: string[] = []
+
+        // Handle both arrays and single objects
+        if (Array.isArray(items)) {
+          // Handle array of items (multi-select fields)
+          values = items.map((item) => item?.id).filter(Boolean)
+        } else if (items && typeof items === 'object' && items.id) {
+          // Handle single object (single-select fields)
+          values = [items.id]
+        }
         if (values.length > 0) {
           // Convert camelCase field names to snake_case for GraphQL
           const graphqlField = field.replace(/([A-Z])/g, '_$1').toLowerCase()
-          conditions.push({
+          additionalConditions.push({
             field: graphqlField,
-            value: values
+            value: values,
           })
         }
       }
     }
   }
 
-  return { conditions }
+  // Combine base conditions with additional conditions
+  // The conjunction only applies within additionalConditions, not between base and additional
+  if (additionalConditions.length === 0) {
+    // If no additional conditions, just return base conditions
+    return { conditions: baseConditions }
+  } else if (baseConditions.length === 0) {
+    // If no base conditions, return additional conditions with conjunction
+    return { 
+      conditions: additionalConditions,
+      conjunction: props.conjunction 
+    }
+  } else {
+    // Create the exact structure: base group AND additional group (with specified conjunction)
+    return {
+      conjunction: 'AND',
+      groups: [
+        {
+          conditions: baseConditions
+        },
+        {
+          conditions: additionalConditions,
+          conjunction: props.conjunction
+        }
+      ]
+    }
+  }
 }
 
 // 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',
+  props.listingType === 'all'
+    ? `facetedSearch-facets-${JSON.stringify(props.baseFilter)}-${searchTerm.value}`
+    : 'skip-facets',
   async () => {
     if (props.listingType !== 'all') {
       return null
     }
     return await useGraphqlQuery('layoutOverviewFacetsSearch', {
       facets: props.facets,
-      filter: props.baseFilter
+      filter: props.baseFilter,
+      keys: searchTerm.value ?? '',
     }).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
-    })
+const { data: initialResultsData, refresh: refreshResults } =
+  await useAsyncData(
+    `facetedSearch-results-${props.listingType}-${JSON.stringify(props.baseFilter)}-${JSON.stringify(activeFilters.value)}`,
+    async () => {
+      const filter = buildSearchFilter()
+      
+      // Debug: Log the initial filter structure
+      if (props.debug) {
+        console.log('FacetedSearch - Initial filter being sent:', JSON.stringify(filter, null, 2))
+      }
+      
+      const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
+        filter,
+        facets: props.facets,
+        limit: props?.groupResultsByFacet ? props.itemsPerPage * 10 : props.itemsPerPage,
+        offset: 0,
+        keys: searchTerm.value ?? '',
+      })
+      isLoading.value = false
+      if (props?.groupResultsByFacet && response?.data?.searchApiQuery?.facets) {
+        response.data.searchApiQuery.facets = response.data?.searchApiQuery?.facets?.map(f => {return {
+          count: f?.count,
+          field: f?.field,
+          label: f?.label,
+          filter: f?.filter,
+          results: f?.results?.slice(0, 4)
+        }})
+      }
+      return response.data?.searchApiQuery ?? null
+    },
+  )
 
-    isLoading.value = false
-    return response.data?.searchApiQuery ?? null
-  }
-)
 
 // Initialize facets from initial query (only for 'all' listing type)
 if (initialFacetsData.value) {
@@ -245,22 +368,54 @@ async function updateSearchResults(selections: Record<string, string[]>) {
   try {
     isLoading.value = true
     currentPage.value = 1 // Reset pagination when filters change
+    
+    // Reset group pagination states when filters change
+    groupPagination.value = {}
+    groupLoadingMore.value = {}
+    
     const filter = buildSearchFilter(selections)
 
+    // Debug: Log the filter structure
+    if (props.debug) {
+      console.log('FacetedSearch - Filter being sent:', JSON.stringify(filter, null, 2))
+    }
+
     const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
       filter,
-      limit: props.itemsPerPage,
-      offset: 0
+      facets: props.facets,
+      limit: props?.groupResultsByFacet ? props.itemsPerPage * 10 : props.itemsPerPage,
+      offset: 0,
+      keys: searchTerm.value ?? '',
     })
 
-    if (response.data?.searchApiQuery?.results) {
-      // Update the results data to reflect new search results
+    // Update the results data to reflect new search results
+    if (props?.groupResultsByFacet) {
+      // Apply the same transformation as in the initial query
+      let processedFacets = response?.data?.searchApiQuery?.facets
+      if (processedFacets) {
+        processedFacets = processedFacets.map(f => ({
+          count: f?.count,
+          field: f?.field,
+          label: f?.label,
+          filter: f?.filter,
+          results: f?.results?.slice(0, 4)
+        }))
+      }
+      
+      initialResultsData.value = {
+        ...initialResultsData.value,
+        facets: processedFacets,
+        count: response?.data?.searchApiQuery?.count,
+      }
+    }
+    else {
       initialResultsData.value = {
         ...initialResultsData.value,
-        results: response.data.searchApiQuery.results,
-        count: response.data.searchApiQuery.count
+        results: response?.data?.searchApiQuery?.results,
+        count: response?.data?.searchApiQuery?.count,
       }
     }
+
   } catch (error) {
     console.error('Error updating search results:', error)
   } finally {
@@ -270,7 +425,20 @@ async function updateSearchResults(selections: Record<string, string[]>) {
 
 // Computed properties
 const displayedResults = computed(() => {
-  return initialResultsData.value?.results || []
+  if (props?.groupResultsByFacet) {
+    return initialResultsData.value?.facets?.filter((facet) => {
+      return facet?.field == props?.groupResultsByFacet
+    }).map((facet) => {
+      return {
+        'label': facet?.filter?.label,
+        'count': facet?.count,
+        'results': facet?.results || [],
+      }
+    })
+  }
+  return  [{
+    'results': initialResultsData.value?.results || []
+  }]
 })
 
 const totalCount = computed(() => {
@@ -278,17 +446,43 @@ const totalCount = computed(() => {
 })
 
 const showLoadMore = computed(() => {
-  const currentlyDisplayed = displayedResults.value.length
-  return currentlyDisplayed > 0 && currentlyDisplayed < totalCount.value && !isLoading.value
+  if (props?.groupResultsByFacet) {
+    return false // Individual groups will have their own load more buttons
+  }
+  const currentlyDisplayed = displayedResults.value?.[0]?.results?.length || 0
+  return (
+    currentlyDisplayed > 0 &&
+    currentlyDisplayed < totalCount.value &&
+    !isLoading.value
+  )
 })
 
+// Check if a group can load more results
+function canGroupLoadMore(group: any): boolean {
+  if (!props.groupResultsByFacet || !('label' in group)) return false
+  const currentResults = group?.results?.length || 0
+  const totalResults = group?.count || 0
+  return currentResults > 0 && currentResults < totalResults && !isLoading.value
+}
+
+// Get loading state for a specific group
+function isGroupLoading(group: any): boolean {
+  const groupKey = getGroupKey(group)
+  return groupLoadingMore.value[groupKey] || false
+}
+
 // 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; }> = []
+  const transformedFacets: Array<{
+    field: string
+    label: string
+    filter: { id: string; label: string }
+    count: number
+  }> = []
 
   allFacets.value.forEach((facet: any) => {
     if (facet?.field && facet?.filter) {
@@ -297,7 +491,7 @@ const facetData = computed(() => {
         label: facet.label,
         filter: {
           id: facet.filter.id,
-          label: facet.filter.label
+          label: facet.filter.label,
         },
         count: facet.count || 0,
       })
@@ -313,15 +507,37 @@ function onFacetsChange(payload: Record<string, string[]>) {
   updateSearchResults(payload)
 }
 
+// Handle search term changes
+function onSearchTermChange(newSearchTerm: string) {
+  // Update the searchTerm ref directly
+  searchTerm.value = newSearchTerm
+}
+
+// Watch for search term changes and update results automatically
+watch(
+  searchTerm,
+  () => {
+    // Trigger search results update for 'all' listing type
+    if (props.listingType === 'all') {
+      updateSearchResults(facetSelections.value)
+    } else {
+      // For manual/contextual types, refresh results
+      refreshResults()
+    }
+  },
+  { immediate: false }
+)
+
 // 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 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'
+    accent: 'bg-white text-black hover:bg-black hover:text-white border-black',
   }
 
   return `${baseClasses} ${colorSchemeClasses[props.colorScheme] || colorSchemeClasses.none}`
@@ -333,15 +549,17 @@ async function loadMore() {
   loadingMore.value = true
 
   try {
-    const filter = props.listingType === 'all'
-      ? buildSearchFilter(facetSelections.value)
-      : buildSearchFilter()
+    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
+      offset,
+      keys: searchTerm.value ?? '',
     })
 
     if (response.data?.searchApiQuery?.results) {
@@ -352,7 +570,7 @@ async function loadMore() {
       initialResultsData.value = {
         ...initialResultsData.value,
         results: [...currentResults, ...newResults],
-        count: response.data.searchApiQuery.count
+        count: response.data.searchApiQuery.count,
       }
 
       currentPage.value += 1
@@ -364,6 +582,100 @@ async function loadMore() {
   }
 }
 
+// Load more handler for specific group
+async function loadMoreGroup(group: any) {
+  if (!props.groupResultsByFacet || !group || !('label' in group)) return
+  
+  const groupKey = getGroupKey(group)
+  if (groupLoadingMore.value[groupKey] || isLoading.value) return
+  
+  groupLoadingMore.value[groupKey] = true
+
+  try {
+    // Find the facet filter value that corresponds to this group
+    const groupFacetValue = initialResultsData.value?.facets?.find(f => 
+      f && f.field === props.groupResultsByFacet && f.filter?.label === group.label
+    )?.filter?.id
+
+    if (!groupFacetValue) {
+      console.warn('Could not find facet value for group:', group.label)
+      return
+    }
+
+    // Check if this facet is already selected
+    const currentSelection = facetSelections.value[props.groupResultsByFacet]
+    const isAlreadySelected = currentSelection?.includes(groupFacetValue)
+
+    if (!isAlreadySelected) {
+      // Step 1: First apply the facet filter and wait for it to complete
+      const updatedSelections = {
+        ...facetSelections.value,
+        [props.groupResultsByFacet]: [groupFacetValue]
+      }
+      
+      // Update facetSelections and trigger the normal facet change flow
+      facetSelections.value = updatedSelections
+      onFacetsChange(updatedSelections)
+      
+      // Wait for the facet change to complete
+      await nextTick()
+      // Wait a bit more to ensure the search results have been updated
+      await new Promise(resolve => setTimeout(resolve, 100))
+    }
+
+    // Step 2: Now do the load more operation
+    // For grouped results, find the current results for this specific group
+    const currentGroupData = initialResultsData.value?.facets?.find(f => 
+      f && f.field === props.groupResultsByFacet && f.filter?.label === group.label
+    )
+    
+    const currentGroupResults = currentGroupData?.results || []
+    const currentCount = currentGroupResults.length
+    
+    // Use the current group result count as offset to load more
+    const response = await useGraphqlQuery('layoutOverviewResultsSearch', {
+      filter: buildSearchFilter(facetSelections.value),
+      limit: props.itemsPerPage,
+      offset: currentCount,
+      keys: searchTerm.value ?? '',
+    })
+
+    if (response.data?.searchApiQuery?.results) {
+      // Append new results to the existing group results
+      const newResults = response.data.searchApiQuery.results
+      
+      // Update the specific group's results in the facets array
+      if (initialResultsData.value?.facets && currentGroupData) {
+        const updatedFacets = initialResultsData.value.facets.map(facet => {
+          if (facet && facet.field === props.groupResultsByFacet && facet.filter?.label === group.label) {
+            return {
+              ...facet,
+              results: [...currentGroupResults, ...newResults]
+            }
+          }
+          return facet
+        })
+        
+        initialResultsData.value = {
+          ...initialResultsData.value,
+          facets: updatedFacets,
+          count: response.data.searchApiQuery.count,
+        }
+      }
+
+      // Update group pagination counter for future reference
+      if (!groupPagination.value[groupKey]) {
+        groupPagination.value[groupKey] = 1
+      }
+      groupPagination.value[groupKey] += 1
+    }
+  } catch (error) {
+    console.error('Error loading more results for group:', error)
+  } finally {
+    groupLoadingMore.value[groupKey] = false
+  }
+}
+
 // Debug logging
 watchEffect(() => {
   if (props.debug) {
@@ -380,8 +692,12 @@ watchEffect(() => {
       console.log('FacetedSearch - Active filters:', activeFilters.value)
     }
 
-    if (displayedResults.value.length > 0) {
-      console.log('FacetedSearch - Results loaded:', displayedResults.value.length, 'items')
+    if (displayedResults.value && displayedResults.value.length > 0) {
+      console.log(
+        'FacetedSearch - Results loaded:',
+        displayedResults.value.length,
+        'groups',
+      )
     }
   }
 })
@@ -392,6 +708,6 @@ defineExpose({
   loadMore,
   facetSelections: readonly(facetSelections),
   totalCount: readonly(totalCount),
-  displayedResults: readonly(displayedResults)
+  displayedResults: readonly(displayedResults),
 })
-</script>
+</script>