Move filterByBounds checkbox into SelectionPanel
Some checks failed
Build Docker Image / build (push) Has been cancelled

This commit is contained in:
Ruslan Bakiev
2026-01-26 14:56:40 +07:00
parent 3211c5a881
commit 5ca995ebcc
3 changed files with 14 additions and 18 deletions

View File

@@ -12,8 +12,17 @@
v-model="searchQuery" v-model="searchQuery"
type="text" type="text"
:placeholder="searchPlaceholder" :placeholder="searchPlaceholder"
class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50" class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50 mb-2"
/> />
<label class="flex items-center gap-2 cursor-pointer text-white/70 text-sm hover:text-white transition-colors">
<input
type="checkbox"
:checked="filterByBounds"
class="checkbox checkbox-xs checkbox-primary"
@change="emit('update:filter-by-bounds', ($event.target as HTMLInputElement).checked)"
/>
<span>{{ $t('catalog.search.filterByMap') }}</span>
</label>
</div> </div>
<!-- Content (scrollable) --> <!-- Content (scrollable) -->
@@ -107,11 +116,13 @@ const props = defineProps<{
loading?: boolean loading?: boolean
loadingMore?: boolean loadingMore?: boolean
hasMore?: boolean hasMore?: boolean
filterByBounds?: boolean
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
'select': [type: string, item: Item] 'select': [type: string, item: Item]
'close': [] 'close': []
'update:filter-by-bounds': [value: boolean]
'load-more': [] 'load-more': []
'hover': [uuid: string | null] 'hover': [uuid: string | null]
}>() }>()

View File

@@ -48,18 +48,6 @@
<span>{{ $t('catalog.list') }}</span> <span>{{ $t('catalog.list') }}</span>
</button> </button>
<!-- Filter by bounds checkbox (LEFT, next to list button) -->
<label
class="absolute top-[116px] left-32 z-20 hidden lg:flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-1.5 border border-white/10 cursor-pointer text-white text-sm hover:bg-black/40 transition-colors"
>
<input
type="checkbox"
:checked="filterByBounds"
class="checkbox checkbox-xs checkbox-primary"
@change="$emit('update:filter-by-bounds', ($event.target as HTMLInputElement).checked)"
/>
<span>{{ $t('catalog.search.filterByMap') }}</span>
</label>
<!-- View toggle (top RIGHT overlay, below header) --> <!-- View toggle (top RIGHT overlay, below header) -->
<div class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2"> <div class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
@@ -247,7 +235,6 @@ const props = withDefaults(defineProps<{
hoveredId?: string hoveredId?: string
items?: MapItem[] items?: MapItem[]
showPanel?: boolean showPanel?: boolean
filterByBounds?: boolean
relatedPoints?: Array<{ relatedPoints?: Array<{
uuid: string uuid: string
name: string name: string
@@ -263,7 +250,6 @@ const props = withDefaults(defineProps<{
pointColor: '#f97316', pointColor: '#f97316',
items: () => [], items: () => [],
showPanel: false, showPanel: false,
filterByBounds: false,
relatedPoints: () => [] relatedPoints: () => []
}) })
@@ -271,7 +257,6 @@ const emit = defineEmits<{
'select': [item: MapItem] 'select': [item: MapItem]
'bounds-change': [bounds: MapBounds] 'bounds-change': [bounds: MapBounds]
'update:hoveredId': [uuid: string | undefined] 'update:hoveredId': [uuid: string | undefined]
'update:filter-by-bounds': [value: boolean]
}>() }>()
// Server-side clustering - use computed node type based on view mode // Server-side clustering - use computed node type based on view mode

View File

@@ -9,11 +9,9 @@
:items="currentSelectionItems" :items="currentSelectionItems"
:hovered-id="hoveredItemId ?? undefined" :hovered-id="hoveredItemId ?? undefined"
:show-panel="showPanel" :show-panel="showPanel"
:filter-by-bounds="filterByBounds"
:related-points="relatedPoints" :related-points="relatedPoints"
@select="onMapSelect" @select="onMapSelect"
@bounds-change="onBoundsChange" @bounds-change="onBoundsChange"
@update:filter-by-bounds="filterByBounds = $event"
> >
<!-- Panel slot - shows selection list OR info OR quote results --> <!-- Panel slot - shows selection list OR info OR quote results -->
<template #panel> <template #panel>
@@ -27,10 +25,12 @@
:loading="selectionLoading" :loading="selectionLoading"
:loading-more="selectionLoadingMore" :loading-more="selectionLoadingMore"
:has-more="selectionHasMore && !filterByBounds" :has-more="selectionHasMore && !filterByBounds"
:filter-by-bounds="filterByBounds"
@select="onSelectItem" @select="onSelectItem"
@close="onClosePanel" @close="onClosePanel"
@load-more="onLoadMore" @load-more="onLoadMore"
@hover="onHoverItem" @hover="onHoverItem"
@update:filter-by-bounds="filterByBounds = $event"
/> />
<!-- Info mode: show detailed info about selected entity --> <!-- Info mode: show detailed info about selected entity -->