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

<template>
  <div class="flex flex-col flex-1 min-h-0">
    <!-- Loading state -->
    <div v-if="isLoading || productsLoading" class="flex-1 flex items-center justify-center">
      <Card padding="lg">
        <Stack align="center" justify="center" gap="3">
          <Spinner />
          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
        </Stack>
      </Card>
    </div>

    <!-- Products catalog (when no product selected) -->
    <div v-else-if="!selectedProductUuid" class="flex-1 overflow-y-auto py-4">
      <Stack gap="4">
        <Grid :cols="1" :md="2" :lg="3" :gap="4">
          <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>
        </Grid>

        <Stack v-if="products.length === 0" align="center" gap="2">
          <Text tone="muted">{{ t('catalogOffersSection.empty.no_products') }}</Text>
        </Stack>
      </Stack>
    </div>

    <!-- Offers for selected product -->
    <template v-else>
      <CatalogPage
        :items="items"
        :loading="isLoading"
        map-id="offers-map"
        point-color="#f59e0b"
        :selected-id="selectedOfferId"
        @select="onSelectOffer"
      >
        <template #filters>
          <CatalogFilters :filters="filters" v-model="selectedFilter" />
        </template>

        <template #card="{ item }">
          <OfferCard :offer="item" />
        </template>

        <template #pagination>
          <PaginationLoadMore
            :shown="items.length"
            :total="total"
            :can-load-more="canLoadMore"
            :loading="isLoadingMore"
            @load-more="loadMore"
          />
        </template>

        <template #empty>
          <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
        </template>
      </CatalogPage>
    </template>
  </div>
</template>

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

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

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

// Offers
const {
  items,
  total,
  selectedFilter,
  filters,
  isLoading,
  isLoadingMore,
  canLoadMore,
  loadMore,
  init: initOffers,
  setProductUuid
} = useCatalogOffers()

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

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

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

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

// Selected offer for map highlighting
const selectedOfferId = ref<string>()

const onSelectOffer = (offer: any) => {
  selectedOfferId.value = offer.uuid
}

// Initialize
await initProducts()

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

useHead(() => ({
  title: pageTitle.value
}))
</script>