elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Search: refactoring searching for themes, refactor allThemesGui, incidentally fix #1679

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-09-05 02:25:03 +02:00
parent 9b8c300e77
commit d90b6d82d0
18 changed files with 421 additions and 334 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/UI/BigComponents/ThemesList.svelte
View file

@ -4,46 +4,36 @@
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import { UIEventSource } from "../../Logic/UIEventSource"
import ThemeButton from "./ThemeButton.svelte"
import { LayoutInformation, MinimalLayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
import MoreScreen from "./MoreScreen"
import themeOverview from "../../assets/generated/theme_overview.json"
import { MinimalLayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
export let search: UIEventSource<string>
export let themes: MinimalLayoutInformation[]
export let state: { osmConnection: OsmConnection }
export let isCustom: boolean = false
export let hideThemes: boolean = true
// Filter theme based on search value
$: filteredThemes = themes.filter((theme) => MoreScreen.MatchesLayout(theme, $search))
export let hasSelection : boolean = true
// Determine which is the first theme, after the search, using all themes
$: allFilteredThemes = themeOverview.filter((theme) => MoreScreen.MatchesLayout(theme, $search))
$: firstTheme = allFilteredThemes[0]
</script>
<section class="w-full">
<slot name="title" />
<div class="theme-list my-2 gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
{#each filteredThemes as theme (theme.id)}
{#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
<!-- TODO: doesn't work if first theme is hidden -->
{#if theme === firstTheme && !isCustom && $search !== "" && $search !== undefined}
<ThemeButton
{theme}
{isCustom}
userDetails={state.osmConnection.userDetails}
{state}
selected={true}
/>
{:else}
<ThemeButton {theme} {isCustom} userDetails={state.osmConnection.userDetails} {state} />
{#each themes as theme (theme.id)}
<ThemeButton
{theme}
{state}
>
{#if $search && hasSelection && themes[0] === theme}
<span class="thanks hidden-on-mobile" aria-hidden="true">
<Tr t={Translations.t.general.morescreen.enterToOpen} />
</span>
{/if}
{/if}
</ThemeButton>
{/each}
</div>
{#if filteredThemes.length === 0}
{#if themes.length === 0}
<NoThemeResultButton {search} />
{/if}
</section>