forked from MapComplete/MapComplete
97 lines
3.4 KiB
Svelte
97 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { Store } from "../../Logic/UIEventSource"
|
|
import ActiveFilters from "./ActiveFilters.svelte"
|
|
import Constants from "../../Models/Constants"
|
|
import type { ActiveFilter } from "../../Logic/State/LayerState"
|
|
import ThemeResults from "./ThemeResults.svelte"
|
|
import GeocodeResults from "./GeocodeResults.svelte"
|
|
import FilterResults from "./FilterResults.svelte"
|
|
import Tr from "../Base/Tr.svelte"
|
|
import Translations from "../i18n/Translations"
|
|
import type { FilterSearchResult } from "../../Logic/Search/FilterSearch"
|
|
import { WithSearchState } from "../../Models/ThemeViewState/WithSearchState"
|
|
import { TrashIcon } from "@babeard/svelte-heroicons/mini"
|
|
import { CogIcon } from "@rgossiaux/svelte-heroicons/solid"
|
|
import SidebarUnit from "../Base/SidebarUnit.svelte"
|
|
import DotMenu from "../Base/DotMenu.svelte"
|
|
import type { GeocodeResult } from "../../Logic/Search/GeocodingProvider"
|
|
import { default as GeocodeResultSvelte } from "./GeocodeResult.svelte"
|
|
|
|
export let state: WithSearchState
|
|
let activeFilters: Store<(ActiveFilter & FilterSearchResult)[]> =
|
|
state.layerState.activeFilters.map((fs) =>
|
|
fs
|
|
.filter((f) => f.filter.options[0].fields.length === 0 && !Constants.isPriviliged(f.layer))
|
|
.map((af) => {
|
|
const index = <number>af.control.data
|
|
const r: FilterSearchResult & ActiveFilter = {
|
|
...af,
|
|
index,
|
|
option: af.filter.options[index],
|
|
}
|
|
return r
|
|
})
|
|
)
|
|
|
|
let searchTerm = state.searchState.searchTerm
|
|
let recentlySeen: Store<GeocodeResult[]> = state.userRelatedState.recentlyVisitedSearch.value
|
|
|
|
let allowOtherThemes = state.featureSwitches.featureSwitchBackToThemeOverview
|
|
let allowFilters = state.featureSwitches.featureSwitchFilter
|
|
</script>
|
|
|
|
<div class="low-interaction flex flex-col gap-y-2 p-4">
|
|
{#if $allowFilters}
|
|
<ActiveFilters {state} activeFilters={$activeFilters} />
|
|
{/if}
|
|
{#if $searchTerm.length === 0 && $activeFilters.length === 0}
|
|
<div class="items-center p-8 text-center">
|
|
<b>
|
|
<Tr t={Translations.t.general.search.instructions} />
|
|
</b>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if $allowFilters}
|
|
<FilterResults {state} />
|
|
{/if}
|
|
<GeocodeResults
|
|
{state}
|
|
on:select={(select) => {
|
|
state.searchState.applyGeocodeResult(select.detail)
|
|
}}
|
|
>
|
|
<svelte:fragment slot="if-no-results">
|
|
{#if $recentlySeen?.length > 0}
|
|
<SidebarUnit>
|
|
<div class="flex justify-between">
|
|
<h3 class="m-2">
|
|
<Tr t={Translations.t.general.search.recents} />
|
|
</h3>
|
|
<DotMenu>
|
|
<button
|
|
on:click={() => {
|
|
state.userRelatedState.recentlyVisitedSearch.clear()
|
|
}}
|
|
>
|
|
<TrashIcon />
|
|
<Tr t={Translations.t.general.search.deleteSearchHistory} />
|
|
</button>
|
|
<button on:click={() => state.guistate.openUsersettings("sync-visited-locations")}>
|
|
<CogIcon />
|
|
<Tr t={Translations.t.general.search.editSearchSyncSettings} />
|
|
</button>
|
|
</DotMenu>
|
|
</div>
|
|
{#each $recentlySeen as entry (entry)}
|
|
<GeocodeResultSvelte {entry} {state} on:select />
|
|
{/each}
|
|
</SidebarUnit>
|
|
{/if}
|
|
</svelte:fragment>
|
|
</GeocodeResults>
|
|
|
|
{#if $allowOtherThemes}
|
|
<ThemeResults {state} />
|
|
{/if}
|
|
</div>
|