Add filter by map bounds checkbox to SelectionPanel
All checks were successful
Build Docker Image / build (push) Successful in 3m36s

- 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)
This commit is contained in:
Ruslan Bakiev
2026-01-24 10:54:09 +07:00
parent 74324ff337
commit d03564a2d9
5 changed files with 63 additions and 33 deletions

View File

@@ -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>