webapp/app/pages/catalog/offers/map.vue

<template>
  <NuxtLayout name="map">
    <template #sidebar>
      <!-- Product selection mode -->
      <CatalogMapSidebar
        v-if="!selectedProductUuid"
        :title="t('catalogOffersSection.header.select_product')"
        :back-link="localePath('/catalog/offers')"
        :back-label="t('catalogMap.actions.list_view')"
        :items-count="products.length"
        :loading="productsLoading"
        :empty-text="t('catalogOffersSection.empty.no_products')"
      >
        <template #cards>
          <Card
            v-for="product in products"
            :key="product.uuid"
            padding="sm"
            interactive
            @click="selectProduct(product)"
          >
            <Stack gap="2">
              <Text size="base" weight="semibold">{{ product.name }}</Text>
              <Text tone="muted">{{ product.categoryName || t('catalogProduct.labels.category_unknown') }}</Text>
            </Stack>
          </Card>
        </template>
      </CatalogMapSidebar>

      <!-- Offers for selected product -->
      <CatalogMapSidebar
        v-else
        :title="sidebarTitle"
        :back-link="localePath('/catalog/offers/map')"
        :back-label="t('common.back')"
        :items-count="items.length"
        :filters="filters"
        :selected-filter="selectedFilter"
        :loading="isLoading"
        :empty-text="t('catalogMap.empty.offers')"
        @update:selected-filter="selectedFilter = $event"
      >
        <template #cards>
          <OfferCard
            v-for="offer in items"
            :key="offer.uuid"
            :offer="offer"
            selectable
            :is-selected="selectedItemId === offer.uuid"
            @select="selectItem(offer)"
          />
        </template>
      </CatalogMapSidebar>
    </template>

    <CatalogMap
      ref="mapRef"
      map-id="offers-fullscreen-map"
      :items="itemsWithCoords"
      point-color="#f59e0b"
      @select-item="onMapSelectItem"
    />
  </NuxtLayout>
</template>

<script setup lang="ts">
definePageMeta({
  layout: false
})

const { t } = useI18n()
const localePath = useLocalePath()
const route = useRoute()
const router = useRouter()

// Products
const {
  items: products,
  isLoading: productsLoading,
  init: initProducts
} = useCatalogProducts()

// Offers
const {
  items,
  selectedFilter,
  filters,
  isLoading,
  itemsWithCoords,
  init: initOffers,
  setProductUuid
} = useCatalogOffers()

// Product from query
const selectedProductUuid = computed(() => route.query.product as string | undefined)

const selectedProduct = computed(() => {
  if (!selectedProductUuid.value) return null
  return products.value.find(p => p.uuid === selectedProductUuid.value)
})

const sidebarTitle = computed(() => {
  if (selectedProduct.value) {
    return `${t('catalogOffersSection.header.title')}: ${selectedProduct.value.name}`
  }
  return t('catalogOffersSection.header.title')
})

// Initialize products
await initProducts()

// Watch for product changes
watch(selectedProductUuid, async (uuid) => {
  setProductUuid(uuid || null)
  if (uuid) {
    await initOffers()
  }
}, { immediate: true })

const selectProduct = (product: any) => {
  router.push({
    path: route.path,
    query: { product: product.uuid }
  })
}

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

const selectItem = (item: any) => {
  selectedItemId.value = item.uuid
  const lat = item.locationLatitude
  const lng = item.locationLongitude
  if (lat && lng) {
    mapRef.value?.flyTo(lat, lng, 8)
  }
}

const onMapSelectItem = (uuid: string) => {
  selectedItemId.value = uuid
}
</script>