MapComplete/UI/BigComponents/FilterviewWithFields.svelte

<script lang="ts">
    import FilteredLayer from "../../Models/FilteredLayer";
    import type {FilterConfigOption} from "../../Models/ThemeConfig/FilterConfig";
    import Locale from "../i18n/Locale";
    import ValidatedInput from "../InputElement/ValidatedInput.svelte";
    import {UIEventSource} from "../../Logic/UIEventSource";
    import {onDestroy} from "svelte";
    import {Utils} from "../../Utils";

    export let filteredLayer: FilteredLayer;
    export let option: FilterConfigOption;
    export let id: string;
    let parts: ({ message: string } | { subs: string })[];
    let language = Locale.language;
    $: {
        const template = option.question.textFor($language)
        parts = Utils.splitIntoSubstitutionParts(template)
    }
    let fieldValues: Record<string, UIEventSource<string>> = {};
    let fieldTypes: Record<string, string> = {};
    let appliedFilter = <UIEventSource<string>>filteredLayer.appliedFilters.get(id);
    let initialState: Record<string, string> = JSON.parse(appliedFilter?.data ?? "{}");

    function setFields() {
        const properties: Record<string, string> = {};
        for (const key in fieldValues) {
            const v = fieldValues[key].data;
            if (v === undefined) {
                properties[key] = undefined;
            } else {
                properties[key] = v;
            }
        }
        appliedFilter?.setData(FilteredLayer.fieldsToString(properties));
    }

    for (const field of option.fields) {
        // A bit of cheating: the 'parts' will have '}' suffixed for fields
        const src = new UIEventSource<string>(initialState[field.name] ?? "");
        fieldTypes[field.name] = field.type;
        fieldValues[field.name] = src;
        onDestroy(src.stabilized(200).addCallback(() => {
            setFields();
        }));
    }
    
</script>

<div>
    {#each parts as part, i}
        {#if part.subs}
            <!-- This is a field! -->
            <span class="mx-1">
            <ValidatedInput value={fieldValues[part.subs]} type={fieldTypes[part.subs]}/>
            </span>
        {:else}
            {part.message}
        {/if}
    {/each}
</div>