preparing document display

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

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>