From d03564a2d907681ebaacc71ac59c7156c1acf45f Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 24 Jan 2026 10:54:09 +0700
Subject: [PATCH] Add filter by map bounds checkbox to SelectionPanel

- Remove map search input (was wrong implementation)
- Add checkbox "In map area" to filter list by visible map bounds
- Filter products/hubs/suppliers when checkbox is enabled
- Disable "load more" when filtering by bounds (client-side only)
---
 app/components/catalog/SelectionPanel.vue | 13 ++++++
 app/components/page/CatalogPage.vue       | 28 +------------
 app/pages/catalog/index.vue               | 51 +++++++++++++++++++++--
 i18n/locales/en/catalog.json              |  2 +-
 i18n/locales/ru/catalog.json              |  2 +-
 5 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/app/components/catalog/SelectionPanel.vue b/app/components/catalog/SelectionPanel.vue
index 85f4639..919c396 100644
--- a/app/components/catalog/SelectionPanel.vue
+++ b/app/components/catalog/SelectionPanel.vue
@@ -14,6 +14,17 @@
         :placeholder="searchPlaceholder"
         class="input input-sm w-full bg-white/50 border-base-300/50 text-base-content placeholder:text-base-content/50"
       />
+      <!-- Filter by map bounds checkbox -->
+      <label class="flex items-center gap-2 mt-2 text-sm cursor-pointer text-base-content/80 hover:text-base-content">
+        <input
+          type="checkbox"
+          :checked="filterByBounds"
+          class="checkbox checkbox-sm checkbox-primary"
+          @change="emit('update:filter-by-bounds', ($event.target as HTMLInputElement).checked)"
+        />
+        <Icon name="lucide:map" size="14" />
+        <span>{{ $t('catalog.search.filterByMap') }}</span>
+      </label>
     </div>
 
     <!-- List -->
@@ -96,12 +107,14 @@ const props = defineProps<{
   loading?: boolean
   loadingMore?: boolean
   hasMore?: boolean
+  filterByBounds?: boolean
 }>()
 
 const emit = defineEmits<{
   'select': [type: string, item: Item]
   'close': []
   'load-more': []
+  'update:filter-by-bounds': [value: boolean]
 }>()
 
 const { t } = useI18n()
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 9d314dd..3c05515 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -38,29 +38,6 @@
       <span class="text-white text-sm">{{ $t('common.loading') }}</span>
     </div>
 
-    <!-- Map search input (top LEFT, next to panel or at left edge) -->
-    <div
-      class="absolute top-[116px] z-20 hidden lg:block"
-      :class="showPanel ? 'left-[420px]' : 'left-4'"
-    >
-      <div class="flex items-center gap-2 bg-white/80 backdrop-blur-md rounded-full shadow-lg border border-white/40 px-4 py-2 w-64">
-        <Icon name="lucide:search" size="18" class="text-base-content/60 flex-shrink-0" />
-        <input
-          v-model="mapSearchQuery"
-          type="text"
-          :placeholder="$t('catalog.search.searchOnMap')"
-          class="flex-1 bg-transparent outline-none text-sm text-base-content placeholder:text-base-content/50"
-        />
-        <button
-          v-if="mapSearchQuery"
-          class="text-base-content/40 hover:text-base-content transition-colors"
-          @click="mapSearchQuery = ''"
-        >
-          <Icon name="lucide:x" size="16" />
-        </button>
-      </div>
-    </div>
-
     <!-- View toggle (top RIGHT overlay, below header) - works in both modes -->
     <div class="absolute top-[116px] right-4 z-20 hidden lg:block">
       <div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
@@ -252,9 +229,6 @@ const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void }
 // Selected item from map click
 const selectedMapItem = ref<MapItem | null>(null)
 
-// Map search query
-const mapSearchQuery = ref('')
-
 // Mobile panel state
 const mobilePanelExpanded = ref(false)
 
@@ -317,5 +291,5 @@ const flyTo = (lat: number, lng: number, zoom = 8) => {
   mapRef.value?.flyTo(lat, lng, zoom)
 }
 
-defineExpose({ flyTo })
+defineExpose({ flyTo, currentBounds })
 </script>
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index 0af6278..fabe1ab 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -1,5 +1,6 @@
 <template>
   <CatalogPage
+    ref="catalogPageRef"
     :loading="isLoading"
     :use-server-clustering="true"
     :cluster-node-type="clusterNodeType"
@@ -8,6 +9,7 @@
     :items="[]"
     :show-panel="showPanel"
     @select="onMapSelect"
+    @bounds-change="onBoundsChange"
   >
     <!-- Panel slot - shows selection list OR quote results -->
     <template #panel>
@@ -15,15 +17,17 @@
       <SelectionPanel
         v-if="selectMode"
         :select-mode="selectMode"
-        :products="products"
-        :hubs="hubs"
-        :suppliers="suppliers"
+        :products="filteredProducts"
+        :hubs="filteredHubs"
+        :suppliers="filteredSuppliers"
         :loading="selectionLoading"
         :loading-more="selectionLoadingMore"
-        :has-more="selectionHasMore"
+        :has-more="selectionHasMore && !filterByBounds"
+        :filter-by-bounds="filterByBounds"
         @select="onSelectItem"
         @close="cancelSelect"
         @load-more="onLoadMore"
+        @update:filter-by-bounds="filterByBounds = $event"
       />
 
       <!-- Quote results: show offers after search -->
@@ -39,6 +43,7 @@
 
 <script setup lang="ts">
 import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
+import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
 
 definePageMeta({
   layout: 'topnav'
@@ -49,6 +54,28 @@ const { execute } = useGraphQL()
 const router = useRouter()
 const localePath = useLocalePath()
 
+// Ref to CatalogPage for accessing bounds
+const catalogPageRef = ref<{ currentBounds: Ref<MapBounds | null> } | null>(null)
+
+// Filter by map bounds state
+const filterByBounds = ref(false)
+const currentMapBounds = ref<MapBounds | null>(null)
+
+// Handle bounds change from map
+const onBoundsChange = (bounds: MapBounds) => {
+  currentMapBounds.value = bounds
+}
+
+// Check if item is within map bounds
+const isInBounds = (item: any, bounds: MapBounds | null): boolean => {
+  if (!bounds) return true
+  if (!item.latitude || !item.longitude) return false
+  const lat = Number(item.latitude)
+  const lng = Number(item.longitude)
+  return lat >= bounds.south && lat <= bounds.north
+      && lng >= bounds.west && lng <= bounds.east
+}
+
 const {
   catalogMode,
   selectMode,
@@ -69,6 +96,22 @@ const { items: products, isLoading: productsLoading, isLoadingMore: productsLoad
 const { items: hubs, isLoading: hubsLoading, isLoadingMore: hubsLoadingMore, canLoadMore: hubsCanLoadMore, loadMore: loadMoreHubs, init: initHubs } = useCatalogHubs()
 const { items: suppliers, isLoading: suppliersLoading, isLoadingMore: suppliersLoadingMore, canLoadMore: suppliersCanLoadMore, loadMore: loadMoreSuppliers, init: initSuppliers } = useCatalogSuppliers()
 
+// Filtered items by map bounds
+const filteredProducts = computed(() => {
+  if (!filterByBounds.value || !currentMapBounds.value) return products.value
+  return products.value.filter((p: any) => isInBounds(p, currentMapBounds.value))
+})
+
+const filteredHubs = computed(() => {
+  if (!filterByBounds.value || !currentMapBounds.value) return hubs.value
+  return hubs.value.filter((h: any) => isInBounds(h, currentMapBounds.value))
+})
+
+const filteredSuppliers = computed(() => {
+  if (!filterByBounds.value || !currentMapBounds.value) return suppliers.value
+  return suppliers.value.filter((s: any) => isInBounds(s, currentMapBounds.value))
+})
+
 // Selection loading state
 const selectionLoading = computed(() => {
   if (selectMode.value === 'product') return productsLoading.value
diff --git a/i18n/locales/en/catalog.json b/i18n/locales/en/catalog.json
index e587eb9..a11dd4b 100644
--- a/i18n/locales/en/catalog.json
+++ b/i18n/locales/en/catalog.json
@@ -12,7 +12,7 @@
       "searchProducts": "Search products...",
       "searchSuppliers": "Search suppliers...",
       "searchHubs": "Search hubs...",
-      "searchOnMap": "Search on map..."
+      "filterByMap": "In map area"
     },
     "hero": {
       "title": "Find the best offer",
diff --git a/i18n/locales/ru/catalog.json b/i18n/locales/ru/catalog.json
index b699f4e..53271af 100644
--- a/i18n/locales/ru/catalog.json
+++ b/i18n/locales/ru/catalog.json
@@ -12,7 +12,7 @@
       "searchProducts": "Поиск товаров...",
       "searchSuppliers": "Поиск поставщиков...",
       "searchHubs": "Поиск хабов...",
-      "searchOnMap": "Поиск на карте..."
+      "filterByMap": "В области карты"
     },
     "hero": {
       "title": "Найдите лучшее предложение",