webapp/app/pages/catalog/suppliers/index.vue

<template>
  <div>
    <!-- SearchBar teleported to layout -->
    <Teleport to="#catalog-searchbar">
      <div class="px-4 lg:px-6 py-2">
        <CatalogSearchBar
          v-model:search-query="searchQuery"
          :active-filters="[]"
          :displayed-count="displayItems.length"
          :total-count="total"
          @search="onSearch"
        />
      </div>
    </Teleport>

    <!-- Map teleported to layout -->
    <Teleport to="#catalog-map">
      <div class="h-full w-full relative">
        <!-- Search with map checkbox -->
        <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
          <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
          <span class="text-sm">{{ t('catalogMap.searchWithMap') }}</span>
        </label>
        <ClientOnly>
          <CatalogMap
            ref="mapRef"
            map-id="suppliers-map"
            :items="itemsWithCoords"
            point-color="#3b82f6"
            :hovered-item-id="hoveredSupplierId"
            :hovered-item="hoveredItem"
            @select-item="onMapSelect"
            @bounds-change="onBoundsChange"
          />
        </ClientOnly>
      </div>
    </Teleport>

    <!-- List content -->
    <div v-if="isLoading" class="flex items-center justify-center py-8">
      <Card padding="lg">
        <Stack align="center" justify="center" gap="3">
          <Spinner />
          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
        </Stack>
      </Card>
    </div>

    <template v-else>
      <Stack gap="3">
        <div
          v-for="item in displayItems"
          :key="item.uuid || item.teamUuid"
          :class="{ 'ring-2 ring-primary rounded-lg': (item.uuid || item.teamUuid) === selectedSupplierId }"
          @click="onSelectSupplier(item)"
          @mouseenter="hoveredSupplierId = item.uuid || item.teamUuid"
          @mouseleave="hoveredSupplierId = undefined"
        >
          <SupplierCard :supplier="item" />
        </div>
      </Stack>

      <PaginationLoadMore
        v-if="displayItems.length > 0"
        :shown="displayItems.length"
        :total="total"
        :can-load-more="canLoadMore"
        :loading="isLoadingMore"
        hide-counter
        @load-more="loadMore"
        class="mt-4"
      />

      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
        <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
      </Stack>
    </template>
  </div>
</template>

<script setup lang="ts">
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'

definePageMeta({
  layout: 'catalog'
})

const { t } = useI18n()

const {
  items,
  total,
  isLoading,
  isLoadingMore,
  canLoadMore,
  loadMore,
  init
} = useCatalogSuppliers()

// Selected/hovered supplier for map highlighting
const selectedSupplierId = ref<string>()
const hoveredSupplierId = ref<string>()

// Search bar
const searchQuery = ref('')

// Map ref
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)

// Search with map checkbox
const searchWithMap = ref(false)
const currentBounds = ref<MapBounds | null>(null)

const onBoundsChange = (bounds: MapBounds) => {
  currentBounds.value = bounds
}

// Filter items with valid coordinates for map
const itemsWithCoords = computed(() =>
  items.value.filter(item =>
    item.latitude != null &&
    item.longitude != null &&
    !isNaN(Number(item.latitude)) &&
    !isNaN(Number(item.longitude))
  ).map(item => ({
    uuid: item.uuid || item.teamUuid,
    name: item.name || '',
    latitude: Number(item.latitude),
    longitude: Number(item.longitude)
  }))
)

// Filtered items when searchWithMap is enabled
const displayItems = computed(() => {
  if (!searchWithMap.value || !currentBounds.value) return items.value
  return items.value.filter(item => {
    if (item.latitude == null || item.longitude == null) return false
    const { west, east, north, south } = currentBounds.value!
    const lng = Number(item.longitude)
    const lat = Number(item.latitude)
    return lng >= west && lng <= east && lat >= south && lat <= north
  })
})

// Hovered item with coordinates for map highlight
const hoveredItem = computed(() => {
  if (!hoveredSupplierId.value) return null
  const item = items.value.find(i => (i.uuid || i.teamUuid) === hoveredSupplierId.value)
  if (!item?.latitude || !item?.longitude) return null
  return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
})

// Search handler (for future use)
const onSearch = () => {
  // TODO: Implement search
}

const onSelectSupplier = (supplier: any) => {
  selectedSupplierId.value = supplier.uuid || supplier.teamUuid
  // Fly to supplier on map
  if (supplier.latitude && supplier.longitude) {
    mapRef.value?.flyTo(Number(supplier.latitude), Number(supplier.longitude), 8)
  }
}

// Handle selection from map
const onMapSelect = (uuid: string) => {
  const supplier = items.value.find(i => (i.uuid || i.teamUuid) === uuid)
  if (supplier) {
    selectedSupplierId.value = uuid
  }
}

await init()

useHead(() => ({
  title: t('catalogSuppliersSection.header.title')
}))
</script>