Fix: correctly replace fields in filterview

UI/BigComponents/FilterviewWithFields.svelte

@@ -5,14 +5,16 @@
     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: string[];
+    let parts: ({ message: string } | { subs: string })[];
     let language = Locale.language;
     $: {
-    parts = option.question.textFor($language).split("{");
+        const template = option.question.textFor($language)
+        parts = Utils.splitIntoSubstitutionParts(template)
     }
     let fieldValues: Record<string, UIEventSource<string>> = {};
     let fieldTypes: Record<string, string> = {};
@@ -23,11 +25,10 @@
         const properties: Record<string, string> = {};
         for (const key in fieldValues) {
             const v = fieldValues[key].data;
-      const k = key.substring(0, key.length - 1);
             if (v === undefined) {
-        properties[k] = undefined;
+                properties[key] = undefined;
             } else {
-        properties[k] = v;
+                properties[key] = v;
             }
         }
         appliedFilter?.setData(FilteredLayer.fieldsToString(properties));
@@ -35,9 +36,9 @@
 
     for (const field of option.fields) {
         // A bit of cheating: the 'parts' will have '}' suffixed for fields
-    fieldTypes[field.name + "}"] = field.type;
         const src = new UIEventSource<string>(initialState[field.name] ?? "");
-    fieldValues[field.name + "}"] = src;
+        fieldTypes[field.name] = field.type;
+        fieldValues[field.name] = src;
         onDestroy(src.stabilized(200).addCallback(() => {
             setFields();
         }));
@@ -47,11 +48,13 @@
 
 <div>
     {#each parts as part, i}
-    {#if part.endsWith("}")}
+        {#if part.subs}
             <!-- This is a field! -->
-      <ValidatedInput value={fieldValues[part]} type={fieldTypes[part]} />
+            <span class="mx-1">
+            <ValidatedInput value={fieldValues[part.subs]} type={fieldTypes[part.subs]}/>
+            </span>
         {:else}
-      {part}
+            {part.message}
         {/if}
     {/each}
 </div>

Utils.ts

@@ -1430,7 +1430,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         return true
     }
 
-    static SameObject(a: any, b: any) {
+   public static SameObject(a: any, b: any) {
         if (a === b) {
             return true
         }
@@ -1465,4 +1465,29 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
     ) {
         return Math.abs(c0.r - c1.r) + Math.abs(c0.g - c1.g) + Math.abs(c0.b - c1.b)
     }
+
+    /**
+     *
+     * Utils.splitIntoSubstitutionParts("abc") // => [{message: "abc"}]
+     * Utils.splitIntoSubstitutionParts("abc {search} def") // => [{message: "abc "}, {subs: "search"}, {message: " def"}]
+     *
+     */
+    public static splitIntoSubstitutionParts(template: string): ({ message: string } | {subs: string})[]{
+        const preparts = template.split("{")
+        const spec : ({ message: string } | {subs: string})[] = []
+        for (const prepart of preparts) {
+            const postParts = prepart.split("}")
+            if(postParts.length === 1){
+                // This was a normal part
+                spec.push({message: postParts[0]})
+            }else{
+                const [subs, message] = postParts
+                spec.push({subs})
+                if(message !== ""){
+                    spec.push({message})
+                }
+            }
+        }
+        return spec
+    }
 }