Search feature: refactor, add translations

This commit is contained in:
Pieter Vander Vennet 2024-09-11 17:31:38 +02:00
parent b3492930b8
commit bd3bddc89c
21 changed files with 499 additions and 507 deletions

View file

@ -1,38 +1,30 @@
import GeocodingProvider, {
FilterPayload, FilterResult,
GeocodeResult,
GeocodingUtils, LayerResult,
type SearchResult,
} from "../Search/GeocodingProvider"
import GeocodingProvider, { GeocodingUtils, type SearchResult } from "../Search/GeocodingProvider"
import { ImmutableStore, Store, Stores, UIEventSource } from "../UIEventSource"
import CombinedSearcher from "../Search/CombinedSearcher"
import FilterSearch from "../Search/FilterSearch"
import FilterSearch, { FilterSearchResult } from "../Search/FilterSearch"
import LocalElementSearch from "../Search/LocalElementSearch"
import CoordinateSearch from "../Search/CoordinateSearch"
import ThemeSearch from "../Search/ThemeSearch"
import OpenStreetMapIdSearch from "../Search/OpenStreetMapIdSearch"
import PhotonSearch from "../Search/PhotonSearch"
import ThemeViewState from "../../Models/ThemeViewState"
import Translations from "../../UI/i18n/Translations"
import type { MinimalLayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
import MoreScreen from "../../UI/BigComponents/MoreScreen"
import { BBox } from "../BBox"
import { Translation } from "../../UI/i18n/Translation"
import GeocodingFeatureSource from "../Search/GeocodingFeatureSource"
import ShowDataLayer from "../../UI/Map/ShowDataLayer"
import LayerSearch from "../Search/LayerSearch"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
export default class SearchState {
public readonly isSearching = new UIEventSource(false)
public readonly feedback: UIEventSource<Translation> = new UIEventSource<Translation>(undefined)
public readonly searchTerm: UIEventSource<string> = new UIEventSource<string>("")
public readonly searchIsFocused = new UIEventSource(false)
public readonly suggestions: Store<SearchResult[]>
public readonly filterSuggestions: Store<FilterResult[]>
public readonly filterSuggestions: Store<FilterSearchResult[]>
public readonly themeSuggestions: Store<MinimalLayoutInformation[]>
public readonly layerSuggestions: Store<LayerResult[]>
public readonly locationSearchers: ReadonlyArray<GeocodingProvider<GeocodeResult>>
public readonly layerSuggestions: Store<LayerConfig[]>
public readonly locationSearchers: ReadonlyArray<GeocodingProvider>
private readonly state: ThemeViewState
public readonly showSearchDrawer: UIEventSource<boolean>
@ -42,7 +34,7 @@ export default class SearchState {
this.state = state
this.locationSearchers = [
// new LocalElementSearch(state, 5),
new LocalElementSearch(state, 5),
new CoordinateSearch(),
new OpenStreetMapIdSearch(state),
new PhotonSearch(), // new NominatimGeocoding(),
@ -67,18 +59,18 @@ export default class SearchState {
Stores.concat(suggestions).map(suggestions => CombinedSearcher.merge(suggestions)),
)
const themeSearch = new ThemeSearch(state, 3)
this.themeSuggestions = this.searchTerm.mapD(query => themeSearch.searchDirect(query, 3))
const themeSearch = new ThemeSearch(state)
this.themeSuggestions = this.searchTerm.mapD(query => themeSearch.search(query, 3))
const layerSearch = new LayerSearch(state, 5)
this.layerSuggestions = this.searchTerm.mapD(query => layerSearch.searchDirect(query, 5))
const layerSearch = new LayerSearch(state)
this.layerSuggestions = this.searchTerm.mapD(query => layerSearch.search(query, 5))
const filterSearch = new FilterSearch(state)
this.filterSuggestions = this.searchTerm.stabilized(50)
.mapD(query => filterSearch.searchDirectly(query))
.mapD(query => filterSearch.search(query))
.mapD(filterResult => {
const active = state.layerState.activeFilters.data
return filterResult.filter(({ payload: { filter, index, layer } }) => {
return filterResult.filter(({ filter, index, layer }) => {
const foundMatch = active.some(active =>
active.filter.id === filter.id && layer.id === active.layer.id && active.control.data === index)
@ -108,22 +100,20 @@ export default class SearchState {
}
public async apply(result: FilterResult | LayerResult) {
if (result.category === "filter") {
return this.applyFilter(result.payload)
}
if (result.category === "layer") {
public async apply(result: FilterSearchResult | LayerConfig) {
if (result instanceof LayerConfig) {
return this.applyLayer(result)
}
return this.applyFilter(result)
}
private async applyLayer(layer: LayerResult) {
private async applyLayer(layer: LayerConfig) {
for (const [name, otherLayer] of this.state.layerState.filteredLayers) {
otherLayer.isDisplayed.setData(name === layer.osm_id)
otherLayer.isDisplayed.setData(name === layer.id)
}
}
private async applyFilter(payload: FilterPayload) {
private async applyFilter(payload: FilterSearchResult) {
const state = this.state
const { layer, filter, index } = payload