preparing for adding positions to document

frontend/src/routes/document/PositionSelector.svelte

@@ -6,20 +6,43 @@
 
     let { close = () => {}, doc = $bindable({}), onSelect = (item) => {} } = $props();
 
-    let select = $state(0);
+    let source = $state(0);
+
+    function select(position){
+        close();
+        onSelect(position);
+    }
 
     function estimateSelected(estimate){
-        onSelect({task:estimate});
-        close();
+        select({
+            code:t('estimated_time'),
+            subject:estimate.name,
+            description:estimate.description.source,
+            amount:estimate.estimated_time,
+            unit:doc.currency+"/h"
+        });
     }
 
     function itemSelected(item){
-        onSelect({item:item});
-        close();
+        select({
+            code:item.code,
+            subject:item.name,
+            description:item.description.source,
+            amount:1,
+            unit:item.unit,
+            unit_price:item.unit_price,
+            tax:item.tax
+        });
     }
 
     function timeSelected(time){
-        console.log({timeSelected:time});
+        select({
+            code:t('document.timetrack'),
+            title:time.subject,
+            description:time.description.source,
+            amount:time.duration,
+            unit:doc.currency+"/h"
+        });
     }
 </script>
 
@@ -42,14 +65,14 @@
 
 <div class="position_selector">
     <span class="tabs">
-        <button onclick={() => select=0}>{t('document.items')}</button>
-        <button onclick={() => select=1}>{t('document.estimated_times')}</button>
-        <button onclick={() => select=2}>{t('document.timetrack')}</button>
+        <button onclick={() => source=0}>{t('document.items')}</button>
+        <button onclick={() => source=1}>{t('document.estimated_times')}</button>
+        <button onclick={() => source=2}>{t('document.timetrack')}</button>
         <button onclick={close}>{t('document.abort')}</button>
     </span>
-    {#if select == 0}
+    {#if source == 0}
     <ItemList company_id={doc.company.id} onSelect={itemSelected} />
-    {:else if select == 1}
+    {:else if source == 1}
     <EstimateList company_id={doc.company.id} onSelect={estimateSelected}  />
     {:else}
     <TimeList company_id={doc.company.id} onSelect={timeSelected}  />

frontend/src/routes/document/TimeList.svelte

@@ -4,17 +4,33 @@
 
     let { company_id, onSelect = (time) => {} } = $props();
 
+    let projects = $state(null);
     let times = $state(null);
     let error = $state(null);
 
-    async function loadTimes(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/times/list`;
+    async function loadProjects(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/list`;
         let data = { company_id: company_id };
         const resp = await fetch(url,{
             credentials:'include',
             method: 'POST',
             body: JSON.stringify(data)
         });
+        if (resp.ok){
+            projects = await resp.json();
+        } else {
+            error = await resp.body();
+        }
+    }
+
+    async function loadTimes(projectId){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/times/list`;
+        let data = { company_id: company_id, project_id: projectId };
+        const resp = await fetch(url,{
+            credentials:'include',
+            method: 'POST',
+            body: JSON.stringify(data)
+        });
         if (resp.ok){
             times = await resp.json();
         } else {
@@ -22,11 +38,24 @@
         }
     }
 
-    onMount(loadTimes);
+    onMount(loadProjects);
 </script>
 
 <div>
     <h1>Times</h1>
+    {#if projects}
+    {#each projects as project,idx1}
+    <button onclick={() => loadTimes(project.id)}>{project.name}</button>
+    {/each}
+    {/if}
     {#if times}
+    {#each times as time,idx2}
+    <div class="time" onclick={() => onSelect(time)}>
+        <span class="duration">{(time.duration).toFixed(3)} {t('hours')}</span>
+        <span class="subject">{time.subject}</span>
+        <span class="start_time">{time.start_time}</span>
+        <span class="description">{@html time.description.rendered}</span>
+    </div>
+    {/each}
     {/if}
 </div>

frontend/src/routes/document/View.svelte

@@ -10,7 +10,7 @@
     import StateSelector     from './StateSelector.svelte';
     import TemplateSelector  from './TemplateSelector.svelte';
     let { id } = $props();
-    let error = null;
+    let error = $state(null);
     let doc = $state(null);
     let position_select = $state(false);
 
@@ -63,12 +63,17 @@
         }
     }
 
-    function addPosition(selected){
-        console.log(selected);
-        let newPos = {};
-        if (selected.item) newPos['item']=selected.item.id;
-        if (selected.task) newPos['task']=selected.task.id;
-        console.log(JSON.stringify({newPos:newPos}));
+    async function addPosition(selected){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${doc.id}/position`;
+        const resp = await fetch(url,{
+            method: 'POST',
+            credentials:'include',
+            body:JSON.stringify(selected)
+        });
+        if (resp.ok){
+        } else {
+            error = await resp.text();
+        }
     }
 
     onMount(loadDoc);