webapp/app/pages/catalog/index.vue

<template>
  <CatalogPage
    :loading="isLoading"
    :use-server-clustering="true"
    :cluster-node-type="clusterNodeType"
    map-id="unified-catalog-map"
    :point-color="mapPointColor"
    :items="[]"
    :show-panel="showPanel"
    @select="onMapSelect"
  >
    <!-- Panel slot - shows selection list OR quote results -->
    <template #panel>
      <!-- Selection mode: show list for picking product/hub/supplier -->
      <SelectionPanel
        v-if="selectMode"
        :select-mode="selectMode"
        :products="products"
        :hubs="hubs"
        :suppliers="suppliers"
        :loading="selectionLoading"
        @select="onSelectItem"
        @close="cancelSelect"
      />

      <!-- Quote results: show offers after search -->
      <QuotePanel
        v-else-if="showQuoteResults"
        :loading="offersLoading"
        :offers="offers"
        @select-offer="onSelectOffer"
      />
    </template>
  </CatalogPage>
</template>

<script setup lang="ts">
import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'

definePageMeta({
  layout: 'topnav'
})

const { t } = useI18n()
const { execute } = useGraphQL()
const router = useRouter()
const localePath = useLocalePath()

const {
  catalogMode,
  selectMode,
  productId,
  supplierId,
  hubId,
  canSearch,
  mapViewMode,
  setMapViewMode,
  entityColors,
  selectItem,
  cancelSelect,
  setLabel
} = useCatalogSearch()

// Composables for data (initialize immediately when selectMode changes)
const { items: products, isLoading: productsLoading, init: initProducts } = useCatalogProducts()
const { items: hubs, isLoading: hubsLoading, init: initHubs } = useCatalogHubs()
const { items: suppliers, isLoading: suppliersLoading, init: initSuppliers } = useCatalogSuppliers()

// Selection loading state
const selectionLoading = computed(() => {
  if (selectMode.value === 'product') return productsLoading.value
  if (selectMode.value === 'hub') return hubsLoading.value
  if (selectMode.value === 'supplier') return suppliersLoading.value
  return false
})

// Initialize data and sync map view when selectMode changes
watch(selectMode, async (mode) => {
  if (mode === 'product') {
    await initProducts()
    setMapViewMode('offers')
  }
  if (mode === 'hub') {
    await initHubs()
    setMapViewMode('hubs')
  }
  if (mode === 'supplier') {
    await initSuppliers()
    setMapViewMode('suppliers')
  }
}, { immediate: true })

// Offers data for quote results
const offers = ref<any[]>([])
const offersLoading = ref(false)
const showQuoteResults = ref(false)

// Watch for search trigger from topnav
const searchTrigger = useState<number>('catalog-search-trigger', () => 0)
watch(searchTrigger, () => {
  if (canSearch.value) {
    onSearch()
  }
})

// Loading state
const isLoading = computed(() => offersLoading.value || selectionLoading.value)

// Show panel when selecting OR when showing quote results
const showPanel = computed(() => {
  return selectMode.value !== null || showQuoteResults.value
})

// Cluster node type based on map view mode
const clusterNodeType = computed(() => {
  if (mapViewMode.value === 'offers') return 'offer'
  if (mapViewMode.value === 'hubs') return 'logistics'
  if (mapViewMode.value === 'suppliers') return 'supplier'
  return 'offer'
})

// Map point color based on map view mode
const mapPointColor = computed(() => {
  if (mapViewMode.value === 'offers') return entityColors.offer
  if (mapViewMode.value === 'hubs') return entityColors.hub
  if (mapViewMode.value === 'suppliers') return entityColors.supplier
  return entityColors.offer
})

// Handle map item selection
const onMapSelect = (item: any) => {
  // Navigate to offer detail page if in quote mode with results
  if (catalogMode.value === 'quote' && item.uuid) {
    console.log('Selected from map:', item)
  }
}

// Handle selection from SelectionPanel
const onSelectItem = (type: string, item: any) => {
  if (item.uuid && item.name) {
    selectItem(type, item.uuid, item.name)
    showQuoteResults.value = false
    offers.value = []
  }
}

// Search for offers
const onSearch = async () => {
  if (!canSearch.value) return

  offersLoading.value = true
  showQuoteResults.value = true

  try {
    const vars: any = {}
    if (productId.value) vars.productUuid = productId.value
    if (supplierId.value) vars.teamUuid = supplierId.value
    if (hubId.value) vars.locationUuid = hubId.value

    const data = await execute(GetOffersDocument, vars, 'public', 'exchange')
    offers.value = data?.getOffers || []

    // Update labels from response
    if (offers.value.length > 0) {
      const first = offers.value[0]
      if (productId.value && first.productName) {
        setLabel('product', productId.value, first.productName)
      }
      if (hubId.value && first.locationName) {
        setLabel('hub', hubId.value, first.locationName)
      }
      if (supplierId.value && first.teamName) {
        setLabel('supplier', supplierId.value, first.teamName)
      }
    }
  } finally {
    offersLoading.value = false
  }
}

// Select offer - navigate to detail page
const onSelectOffer = (offer: any) => {
  if (offer.uuid && offer.productUuid) {
    router.push(localePath(`/catalog/offers/${offer.productUuid}?offer=${offer.uuid}`))
  }
}

// SEO
useHead(() => ({
  title: t('catalog.hero.title')
}))
</script>