workin on document creation: frontend work

frontend/src/routes/document/List.svelte

@@ -2,18 +2,20 @@
     import { useTinyRouter } from 'svelte-tiny-router';
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
+    import TypeSelector from './TypeSelector.svelte';
 
     let error = null;
     let companies = {};
     let documents = null;
     let selected_company = null;
     let router = useTinyRouter();
+    let docType = 0;
+
     async function loadCompanies(){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/companies`;
         var resp = await fetch(url,{ credentials: 'include'});
         if (resp.ok){
             companies = await resp.json();
-            console.log(companies);
         } else {
             error = await resp.text();
         }
@@ -29,18 +31,20 @@
         });
         if (resp.ok){
             documents = await resp.json();
-            console.log(documents);
         } else {
             error = await resp.text();
         }
+    }
 
+    function createDoc(){
+        router.navigate(`/document/add?company_id=${selected_company.id}&document_type=${docType}`)
     }
 
     onMount(loadCompanies);
 </script>
 
 <fieldset>
-    <legend>{name ? t( 'document.list_of',name) : t('document.list')}</legend>
+    <legend>{selected_company ? t( 'document.list_of',selected_company.name) : t('document.list')}</legend>
     {#if error}
     <div class="error">{error}</div>
     {/if}
@@ -51,19 +55,31 @@
         {/each}
     </div>
     {#if documents}
-    <button onclick={() => router.navigate(`/document/add?company=${selected_company.id}`)}>{t('document.create_new')}</button>
     <table>
         <thead>
-
+            <tr>
+                <th>{t('document.number')}</th>
+                <th>{t('document.date')}</th>
+                <th>{t('document.customer')}</th>
+                <th>{t('document.gross_sum')}</th>
+                <th>{t('document.type')}</th>
+                <th>{t('document.state')}</th>
+                <th>
+                    {t('document.actions')}
+                    {docType}
+                    <TypeSelector caption={t('document.create_new')} bind:value={docType} onchange={createDoc}/>
+                </th>
+            </tr>
         </thead>
         <tbody>
-            {#each Object.entries(documents) as [id,document]}
+            {#each Object.entries(documents).reverse() as [id,document]}
             <tr>
-                <td>{id}</td>
                 <td>{document.number}</td>
                 <td>{document.date}</td>
                 <td>{document.customer.name.split('\n')[0]}</td>
                 <td>{document.sum/100 + document.currency}</td>
+                <td>{t('document.type_'+document.type)}</td>
+                <td>{t('document.state_'+document.state.name)}</td>
             </tr>
             {/each}
         </tbody>