forked from MapComplete/MapComplete
Feature: improve inspectorGui: add search, placeholder, see #2353
This commit is contained in:
parent
0a67668bec
commit
589909ba44
5 changed files with 123 additions and 51 deletions
|
@ -3,29 +3,34 @@
|
|||
* Shows all the location-results
|
||||
*/
|
||||
import Translations from "../i18n/Translations"
|
||||
import { Store } from "../../Logic/UIEventSource"
|
||||
import SidebarUnit from "../Base/SidebarUnit.svelte"
|
||||
import Loading from "../Base/Loading.svelte"
|
||||
import { default as GeocodeResultSvelte } from "./GeocodeResult.svelte"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import DotMenu from "../Base/DotMenu.svelte"
|
||||
import { CogIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||
import { TrashIcon } from "@babeard/svelte-heroicons/mini"
|
||||
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import type { GeocodeResult } from "../../Logic/Search/GeocodingProvider"
|
||||
import { WithSearchState } from "../../Models/ThemeViewState/WithSearchState"
|
||||
import type { MapProperties } from "../../Models/MapProperties"
|
||||
|
||||
export let state: WithSearchState
|
||||
export let state: {
|
||||
searchState: {
|
||||
searchTerm: UIEventSource<string>
|
||||
suggestions: Store<GeocodeResult[]>
|
||||
suggestionsSearchRunning: Store<boolean>
|
||||
}, mapProperties: MapProperties
|
||||
}
|
||||
|
||||
let searchTerm = state.searchState.searchTerm
|
||||
let results = state.searchState.suggestions
|
||||
let isSearching = state.searchState.suggestionsSearchRunning
|
||||
let recentlySeen: Store<GeocodeResult[]> = state.userRelatedState.recentlyVisitedSearch.value
|
||||
let isSearching = state.searchState.suggestionsSearchRunning ?? new ImmutableStore(false)
|
||||
|
||||
const t = Translations.t.general.search
|
||||
</script>
|
||||
|
||||
{#if $searchTerm.length > 0}
|
||||
<SidebarUnit>
|
||||
<h3><Tr t={t.locations} /></h3>
|
||||
<h3>
|
||||
<Tr t={t.locations} />
|
||||
</h3>
|
||||
|
||||
{#if $results?.length > 0}
|
||||
{#each $results as entry (entry)}
|
||||
|
@ -41,35 +46,12 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !$isSearching && $results.length === 0}
|
||||
{#if !$isSearching && $results?.length === 0}
|
||||
<b class="flex justify-center p-4">
|
||||
<Tr t={t.nothingFor.Subs({ term: "<i>" + $searchTerm + "</i>" })} />
|
||||
</b>
|
||||
{/if}
|
||||
</SidebarUnit>
|
||||
{:else if $recentlySeen?.length > 0}
|
||||
<SidebarUnit>
|
||||
<div class="flex justify-between">
|
||||
<h3 class="m-2">
|
||||
<Tr t={t.recents} />
|
||||
</h3>
|
||||
<DotMenu>
|
||||
<button
|
||||
on:click={() => {
|
||||
state.userRelatedState.recentlyVisitedSearch.clear()
|
||||
}}
|
||||
>
|
||||
<TrashIcon />
|
||||
<Tr t={t.deleteSearchHistory} />
|
||||
</button>
|
||||
<button on:click={() => state.guistate.openUsersettings("sync-visited-locations")}>
|
||||
<CogIcon />
|
||||
<Tr t={t.editSearchSyncSettings} />
|
||||
</button>
|
||||
</DotMenu>
|
||||
</div>
|
||||
{#each $recentlySeen as entry (entry)}
|
||||
<GeocodeResultSvelte {entry} {state} on:select />
|
||||
{/each}
|
||||
</SidebarUnit>
|
||||
{:else}
|
||||
<slot name="if-no-results" />
|
||||
{/if}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue