Search: fix loading previous searches, add 'clear history' buttons

This commit is contained in:
Pieter Vander Vennet 2024-09-05 02:53:25 +02:00
parent d90b6d82d0
commit 2ce9e7ca3c
5 changed files with 24 additions and 25 deletions

View file

@ -8,13 +8,11 @@ import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
export class RecentSearch {
private readonly _seenThisSession: UIEventSource<GeocodeResult[]>
public readonly seenThisSession: Store<GeocodeResult[]>
public readonly seenThisSession: UIEventSource<GeocodeResult[]>
constructor(state: { layout: LayoutConfig, osmConnection: OsmConnection, selectedElement: Store<Feature> }) {
const prefs = state.osmConnection.preferencesHandler.GetLongPreference("previous-searches")
this._seenThisSession = new UIEventSource<GeocodeResult[]>([])//UIEventSource.asObject<GeoCodeResult[]>(prefs, [])
this.seenThisSession = this._seenThisSession
this.seenThisSession = new UIEventSource<GeocodeResult[]>([])//UIEventSource.asObject<GeoCodeResult[]>(prefs, [])
prefs.addCallbackAndRunD(pref => {
if (pref === "") {
@ -24,7 +22,7 @@ export class RecentSearch {
const simpleArr = <GeocodeResult[]>JSON.parse(pref)
if (simpleArr.length > 0) {
this._seenThisSession.set(simpleArr)
this.seenThisSession.set(simpleArr)
return true
}
} catch (e) {
@ -72,17 +70,10 @@ export class RecentSearch {
}
addSelected(entry: GeocodeResult) {
const arr = [...(this.seenThisSession.data ?? []).slice(0, 20), entry]
const id = entry.osm_type+entry.osm_id
const arr = [...(this.seenThisSession.data.reverse() ?? []).slice(0, 5)]
.filter(e => e.osm_type+e.osm_id !== id)
const seenIds = new Set<string>()
for (let i = arr.length - 1; i >= 0; i--) {
const id = arr[i].osm_type + arr[i].osm_id
if (seenIds.has(id)) {
arr.splice(i, 1)
} else {
seenIds.add(id)
}
}
this._seenThisSession.set(arr)
this.seenThisSession.set([entry, ...arr])
}
}

View file

@ -47,6 +47,7 @@ export default class ThemeSearch implements GeocodingProvider {
const sorted = MoreScreen.sortedByLowest(query, this._otherThemes, this._layersToIgnore)
console.log(">>>", sorted)
return sorted
.filter(sorted => sorted.lowest < 2)
.map(th => th.theme)
.filter(th => !th.hideFromOverview || this._knownHiddenThemes.data.has(th.id))
.slice(0, limit)

View file

@ -80,8 +80,7 @@ export default class UserRelatedState {
public readonly preferencesAsTags: UIEventSource<Record<string, string>>
private readonly _mapProperties: MapProperties
private readonly _recentlyVisitedThemes: UIEventSource<string[]>
public readonly recentlyVisitedThemes: Store<string[]>
public readonly recentlyVisitedThemes: UIEventSource<string[]>
constructor(
@ -138,11 +137,10 @@ export default class UserRelatedState {
this.preferencesAsTags = this.initAmendedPrefs(layout, featureSwitches)
const prefs = this.osmConnection
this._recentlyVisitedThemes = UIEventSource.asObject(prefs.GetLongPreference("recently-visited-themes"), [])
this.recentlyVisitedThemes = this._recentlyVisitedThemes
this.recentlyVisitedThemes = UIEventSource.asObject(prefs.GetLongPreference("recently-visited-themes"), [])
if (layout) {
const osmConn = this.osmConnection
const recentlyVisited = this._recentlyVisitedThemes
const recentlyVisited = this.recentlyVisitedThemes
function update() {
if (!osmConn.isLoggedIn.data) {
@ -158,7 +156,7 @@ export default class UserRelatedState {
}
this._recentlyVisitedThemes.addCallbackAndRun(() => update())
this.recentlyVisitedThemes.addCallbackAndRun(() => update())
this.osmConnection.isLoggedIn.addCallbackAndRun(() => update())
}

View file

@ -47,7 +47,7 @@
if (entry.feature?.properties?.id) {
state.selectedElement.set(entry.feature)
}
state.recentlySearched.addSelected(entry)
state.searchState.recentlySearched.addSelected(entry)
dispatch("select")
}
</script>

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Store } from "../../Logic/UIEventSource"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import Loading from "../Base/Loading.svelte"
import Tr from "../Base/Tr.svelte"
import Translations from "../i18n/Translations"
@ -14,10 +14,11 @@
import FilterResult from "./FilterResult.svelte"
import ThemeResult from "./ThemeResult.svelte"
import SidebarUnit from "../Base/SidebarUnit.svelte"
import { TrashIcon } from "@babeard/svelte-heroicons/mini"
export let state: ThemeViewState
let activeFilters: Store<ActiveFilter[]> = state.layerState.activeFilters.map(fs => fs.filter(f => Constants.priviliged_layers.indexOf(<any>f.layer.id) < 0))
let recentlySeen: Store<GeocodeResult[]> = state.searchState.recentlySearched.seenThisSession
let recentlySeen: UIEventSource<GeocodeResult[]> = state.searchState.recentlySearched.seenThisSession
let recentThemes = state.userRelatedState.recentlyVisitedThemes.mapD(thms => thms.filter(th => th !== state.layout.id).slice(0, 6))
let allowOtherThemes = state.featureSwitches.featureSwitchBackToThemeOverview
let searchTerm = state.searchState.searchTerm
@ -92,6 +93,10 @@
{#each $recentlySeen as entry}
<SearchResultSvelte {entry} {state} on:select />
{/each}
<button class="as-link flex self-end" on:click={() => {recentlySeen.set([])}}>
<TrashIcon class="w-4 h-4"/>
Delete history
</button>
</SidebarUnit>
{/if}
@ -106,6 +111,10 @@
{state}
on:select />
{/each}
<button class="as-link flex self-end" on:click={() => {state.userRelatedState.recentlyVisitedThemes.set([])}}>
<TrashIcon class="w-4 h-4"/>
Delete history
</button>
</SidebarUnit>
{/if}