Migrate offers and suppliers pages to catalog layout with Teleport

app/pages/catalog/offers/index.vue

@@ -1,45 +1,107 @@
 <template>
-  <CatalogPage
-    :items="itemsForMap"
-    :loading="isLoading || productsLoading"
-    map-id="offers-map"
-    point-color="#f59e0b"
-    :selected-id="selectedOfferId"
-    v-model:hovered-id="hoveredOfferId"
-    @select="onSelectOffer"
-  >
-    <template #filters>
-      <CatalogFilterSelect
-        v-if="productFilters.length > 1"
-        :filters="productFilters"
-        :model-value="selectedProductUuid || 'all'"
-        @update:model-value="onProductFilterChange"
-      />
-    </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="activeFilterBadges"
+          :displayed-count="displayItems.length"
+          :total-count="total"
+          @remove-filter="onRemoveFilter"
+          @search="onSearch"
+        >
+          <template #filters>
+            <div class="p-2 space-y-3">
+              <div>
+                <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogOffersSection.filters.product') }}</div>
+                <ul class="menu menu-compact max-h-48 overflow-y-auto">
+                  <li v-for="filter in productFilters" :key="filter.id">
+                    <a
+                      :class="{ active: selectedProductUuid === filter.id || (!selectedProductUuid && filter.id === 'all') }"
+                      @click="onProductFilterChange(filter.id)"
+                    >
+                      {{ filter.label }}
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </template>
+        </CatalogSearchBar>
+      </div>
+    </Teleport>
 
-    <template #card="{ item }">
-      <OfferCard :offer="item" />
-    </template>
+    <!-- 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="offers-map"
+            :items="itemsWithCoords"
+            point-color="#f59e0b"
+            :hovered-item-id="hoveredOfferId"
+            :hovered-item="hoveredItem"
+            @select-item="onMapSelect"
+            @bounds-change="onBoundsChange"
+          />
+        </ClientOnly>
+      </div>
+    </Teleport>
+
+    <!-- List content -->
+    <div v-if="isLoading || productsLoading" 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"
+          :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedOfferId }"
+          @click="onSelectOffer(item)"
+          @mouseenter="hoveredOfferId = item.uuid"
+          @mouseleave="hoveredOfferId = undefined"
+        >
+          <OfferCard :offer="item" />
+        </div>
+      </Stack>
 
-    <template #pagination>
       <PaginationLoadMore
-        :shown="items.length"
+        v-if="displayItems.length > 0"
+        :shown="displayItems.length"
         :total="total"
         :can-load-more="canLoadMore"
         :loading="isLoadingMore"
+        hide-counter
         @load-more="loadMore"
+        class="mt-4"
       />
-    </template>
 
-    <template #empty>
-      <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
+      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
+        <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
+      </Stack>
     </template>
-  </CatalogPage>
+  </div>
 </template>
 
 <script setup lang="ts">
+import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+
 definePageMeta({
-  layout: 'topnav'
+  layout: 'catalog'
 })
 
 const { t } = useI18n()
@@ -64,12 +126,58 @@ const {
   setProductUuid
 } = useCatalogOffers()
 
+// Selected/hovered offer for map highlighting
+const selectedOfferId = ref<string>()
+const hoveredOfferId = 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
+}
+
 // Map items with correct coordinate field names
-const itemsForMap = computed(() => items.value.map(offer => ({
-  ...offer,
-  latitude: offer.locationLatitude,
-  longitude: offer.locationLongitude
-})))
+const itemsWithCoords = computed(() =>
+  items.value.filter(item =>
+    item.locationLatitude != null &&
+    item.locationLongitude != null &&
+    !isNaN(Number(item.locationLatitude)) &&
+    !isNaN(Number(item.locationLongitude))
+  ).map(item => ({
+    uuid: item.uuid,
+    name: item.productName || '',
+    latitude: Number(item.locationLatitude),
+    longitude: Number(item.locationLongitude)
+  }))
+)
+
+// Filtered items when searchWithMap is enabled
+const displayItems = computed(() => {
+  if (!searchWithMap.value || !currentBounds.value) return items.value
+  return items.value.filter(item => {
+    if (item.locationLatitude == null || item.locationLongitude == null) return false
+    const { west, east, north, south } = currentBounds.value!
+    const lng = Number(item.locationLongitude)
+    const lat = Number(item.locationLatitude)
+    return lng >= west && lng <= east && lat >= south && lat <= north
+  })
+})
+
+// Hovered item with coordinates for map highlight
+const hoveredItem = computed(() => {
+  if (!hoveredOfferId.value) return null
+  const item = items.value.find(i => i.uuid === hoveredOfferId.value)
+  if (!item?.locationLatitude || !item?.locationLongitude) return null
+  return { latitude: Number(item.locationLatitude), longitude: Number(item.locationLongitude) }
+})
 
 // Product filter options
 const productFilters = computed(() => {
@@ -81,17 +189,47 @@ const productFilters = computed(() => {
   return [...all, ...productOptions]
 })
 
+// Active filter badges
+const activeFilterBadges = computed(() => {
+  const badges: { id: string; label: string }[] = []
+  if (selectedProductUuid.value) {
+    const product = products.value.find(p => p.uuid === selectedProductUuid.value)
+    if (product) badges.push({ id: `product:${product.uuid}`, label: product.name })
+  }
+  return badges
+})
+
+// Remove filter badge
+const onRemoveFilter = (id: string) => {
+  if (id.startsWith('product:')) {
+    setProductUuid(null)
+  }
+}
+
 // Handle product filter change
 const onProductFilterChange = (value: string) => {
   setProductUuid(value === 'all' ? null : value)
 }
 
-// Selected/hovered offer for map highlighting
-const selectedOfferId = ref<string>()
-const hoveredOfferId = ref<string>()
+// Search handler (for future use)
+const onSearch = () => {
+  // TODO: Implement search
+}
 
 const onSelectOffer = (offer: any) => {
   selectedOfferId.value = offer.uuid
+  // Fly to offer on map
+  if (offer.locationLatitude && offer.locationLongitude) {
+    mapRef.value?.flyTo(Number(offer.locationLatitude), Number(offer.locationLongitude), 8)
+  }
+}
+
+// Handle selection from map
+const onMapSelect = (uuid: string) => {
+  const offer = items.value.find(i => i.uuid === uuid)
+  if (offer) {
+    selectedOfferId.value = uuid
+  }
 }
 
 // Initialize

app/pages/catalog/suppliers/index.vue

@@ -1,36 +1,88 @@
 <template>
-  <CatalogPage
-    :items="items"
-    :loading="isLoading"
-    map-id="suppliers-map"
-    point-color="#3b82f6"
-    :selected-id="selectedSupplierId"
-    v-model:hovered-id="hoveredSupplierId"
-    @select="onSelectSupplier"
-  >
-    <template #card="{ item }">
-      <SupplierCard :supplier="item" />
-    </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>
 
-    <template #pagination>
       <PaginationLoadMore
-        :shown="items.length"
+        v-if="displayItems.length > 0"
+        :shown="displayItems.length"
         :total="total"
         :can-load-more="canLoadMore"
         :loading="isLoadingMore"
+        hide-counter
         @load-more="loadMore"
+        class="mt-4"
       />
-    </template>
 
-    <template #empty>
-      <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
+      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
+        <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
+      </Stack>
     </template>
-  </CatalogPage>
+  </div>
 </template>
 
 <script setup lang="ts">
+import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+
 definePageMeta({
-  layout: 'topnav'
+  layout: 'catalog'
 })
 
 const { t } = useI18n()
@@ -49,8 +101,74 @@ const {
 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()