preparing document display

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

frontend/src/App.svelte

@@ -3,7 +3,7 @@
     import { loadTranslation } from './translations.svelte.js';
     import { user } from './user.svelte.js';
     import { Router, Route } from 'svelte-tiny-router';
-    import AddDocument from "./routes/document/AddDocument.svelte";
+    import AddDoc from "./routes/document/Add.svelte";
     import Callback from "./routes/user/OidcCallback.svelte";
     import DocList from "./routes/document/List.svelte";
     import EditService from "./routes/user/EditService.svelte";
@@ -15,6 +15,7 @@
     import ResetPw  from "./routes/user/ResetPw.svelte";
     import Search   from "./routes/search/Search.svelte";
     import User     from "./routes/user/User.svelte";
+    import ViewDoc  from "./routes/document/View.svelte";
 
     let translations_ready = $state(false);
     onMount(async () => {
@@ -38,7 +39,8 @@
             <Menu />
             <Route path="/"                            component={User} />
             <Route path="/document"                    component={DocList} />
-            <Route path="/document/add"                component={AddDocument} />
+            <Route path="/document/add"                component={AddDoc} />
+            <Route path="/document/:id/view"           component={ViewDoc} />
             <Route path="/message/settings"            component={Messages} />
             <Route path="/search"                      component={Search} />
             <Route path="/user"                        component={User} />

frontend/src/routes/document/List.svelte

@@ -40,6 +40,10 @@
         router.navigate(`/document/add?company_id=${selected_company.id}&document_type=${docType}`)
     }
 
+    function show(id){
+        router.navigate(`/document/${id}/view`);
+    }
+
     onMount(loadCompanies);
 </script>
 
@@ -73,7 +77,7 @@
         </thead>
         <tbody>
             {#each Object.entries(documents).reverse() as [id,document]}
-            <tr>
+            <tr onclick={() => show(id)}>
                 <td>{document.number}</td>
                 <td>{document.date}</td>
                 <td>{document.customer.name.split('\n')[0]}</td>

frontend/src/routes/document/View.svelte

@@ -0,0 +1,32 @@
+<script>
+    import { onMount } from 'svelte';
+    import { t } from '../../translations.svelte.js';
+    import { useTinyRouter } from 'svelte-tiny-router';
+
+    let { id } = $props();
+    let error = null;
+    let doc = $state(null);
+
+    async function loadDoc(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${id}`;
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            doc = await resp.json();
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    onMount(loadDoc);
+</script>
+
+
+<fieldset>
+    {#if error}
+    <span class="error">{error}</span>
+    {/if}
+    {#if doc}
+    <legend>{t('document.type_'+doc.type)} {doc.number}</legend>
+
+    {/if}
+</fieldset>