another approach to implement search with synchronized fields on menu and search page

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/Components/Menu.svelte

@@ -2,14 +2,13 @@
 import { onMount }       from 'svelte';
 import { useTinyRouter } from 'svelte-tiny-router';
 
-import { api, get }      from '../urls.svelte';
+import { api, get, search }      from '../urls.svelte';
 import { error }         from '../warn.svelte';
 import { logout, user }  from '../user.svelte';
 import { t }             from '../translations.svelte';
 
 import TimeRecorder from './TimeRecorder.svelte';
 
-let key = $state(null);
 const router  = useTinyRouter();
 let modules = $state(null);
 let expand = $state(false);
@@ -36,10 +35,10 @@ function onclick(e){
     return false;
 }
 
-async function search(e){
+async function doSearch(e){
     e.preventDefault();
     expand = false;
-    router.navigate(`/search?key=${key}`);
+    router.navigate(`/search?key=${search.key}`);
     return false;
 }
 
@@ -53,8 +52,8 @@ onMount(fetchModules);
 </style>
 
 <nav class={expand?"expanded":"collapsed"}>
-    <form onsubmit={search}>
-        <input type="text" bind:value={key} />
+    <form onsubmit={doSearch}>
+        <input type="text" bind:value={search.key} />
         <button type="submit">{t('search')}</button>
     </form>
     <button class="symbol" onclick={e => expand = !expand}> </button>

frontend/src/routes/search/Search.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
-    import { api, get, post, target }   from '../../urls.svelte.js';
+    import { api, get, post, search, target }   from '../../urls.svelte.js';
     import { error, warn, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { display }       from '../../time.svelte';
@@ -14,7 +14,6 @@
     let companies = $state(null);
     let documents = $state(null);
     let fulltext  = false;
-    let input     = $state(null);
     let notes     = $state(null);
     let pages     = $state(null);
     let projects  = $state(null);
@@ -22,16 +21,10 @@
     let tasks     = $state(null);
     let times     = $state(null);
 
-    async function setKey(ev){
-        if (ev) ev.preventDefault();
-        doSearch(input);
-    }
+
 
     function doSearch(key){
         warn(t('searching…'));
-        let url = window.location.origin + window.location.pathname;
-        if (key) url += '?key=' + encodeURI(key);
-        window.history.replaceState(history.state, '', url);
 
         const data = { key : key, fulltext : fulltext };
         post(api('bookmark/search'),data).then(handleBookmarks);
@@ -49,27 +42,6 @@
         get(api(module+'/'+entity_id)).then(res => setTitle(res,key,module))
     }
 
-    async function setTitle(resp,key,module){
-        if (resp.ok){
-            const json = await resp.json();
-            if (json.name) notes[key].title = t(module)+": "+json.name;
-            if (json.title) notes[key].title = t(module)+": "+json.title;
-            if (module == 'document'){
-                notes[key].title = t(json.type)+" "+json.number;
-            }
-        }
-
-    }
-
-    function onclick(e){
-        e.preventDefault();
-        var target = e.target;
-        while (target && !target.href) target=target.parentNode;
-        let href = target.getAttribute('href');
-        if (href) router.navigate(href);
-        return false;
-    }
-
     async function handleBookmarks(resp){
         quitOne();
         if (resp.ok){
@@ -168,31 +140,63 @@
         }
     }
 
+    function onclick(e){
+        e.preventDefault();
+        var target = e.target;
+        while (target && !target.href) target=target.parentNode;
+        let href = target.getAttribute('href');
+        if (href) router.navigate(href);
+        return false;
+    }
+
+    async function setKey(ev){
+        if (ev) ev.preventDefault();
+        doSearch(search.key);
+    }
+
+    async function setTitle(resp,key,module){
+        if (resp.ok){
+            const json = await resp.json();
+            if (json.name) notes[key].title = t(module)+": "+json.name;
+            if (json.title) notes[key].title = t(module)+": "+json.title;
+            if (module == 'document'){
+                notes[key].title = t(json.type)+" "+json.number;
+            }
+        }
+    }
+
     function quitOne(){
         counter--;
         if (counter > 0) {
             warn(t('searching…')+" "+counter);
         } else yikes();
     }
-    
-    $effect(() => {
-        input = router.getQueryParam('key');
-        doSearch(input);
+
+    function updateUrl(ev){
+        ev.preventDefault();
+        let url = window.location.origin + window.location.pathname;
+        if (search.key) {
+            url += '?key=' + encodeURI(search.key);
+            window.history.replaceState(history.state, '', url);
+            doSearch(search.key);
         }
-    );
+    }
+
+    $effect(() => {
+        doSearch(router.getQueryParam('key'));
+    });
 </script>
 
 <svelte:head>
-    <title>Umbrella – {t('search')}{input?': '+input:''}</title>
+    <title>Umbrella – {t('search')}{search.key?': '+search.key:''}</title>
 </svelte:head>
 
-
 <fieldset class="search">
-    <legend>{t('search')}</legend>
-    <form onsubmit={setKey}>
+    <legend>{t('search')} - {search.key}</legend>
+    <form onsubmit={updateUrl}>
     <label>
         {t('key')}
-        <input type="text" bind:value={input} />
+        <input type="text" bind:value={search.key} />
     </label>
     <label>
         <input type="checkbox" bind:checked={fulltext} />

frontend/src/urls.svelte.js

@@ -44,6 +44,8 @@ export function post(url,data){
     });
 }
 
+export const search = $state({"key":""});
+
 export function target(code){
     if (!code) return null;
     let altered = code;