working on project list: introducing task list

frontend/src/Components/TaskList.svelte

@@ -0,0 +1,15 @@
+<script>
+    import { t } from '../translations.svelte.js';
+
+    let { tasks } = $props();
+
+    let sortedTasks = $derived.by(() => Object.values(tasks).sort((a, b) => a.name.localeCompare(b.name)));
+
+
+</script>
+
+<ul>
+    {#each sortedTasks as task}
+    <li>{task.name}</li>
+    {/each}
+</ul>

frontend/src/routes/project/List.svelte

@@ -8,6 +8,8 @@
     let projects = $state(null);
     let companies = $state(null);
 
+    let sortedProjects = $derived.by(() => Object.values(projects).sort((a, b) => a.name.localeCompare(b.name)));
+
     async function loadProjects(){
         let url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`;
         let resp = await fetch(url,{credentials:'include'});
@@ -48,8 +50,8 @@
             </tr>
         </thead>
         <tbody>
-            {#each Object.entries(projects) as [pid,project]}
-            <tr onclick={() => router.navigate(`/project/${pid}/view`)}>
+            {#each sortedProjects as project}
+            <tr onclick={() => router.navigate(`/project/${project.id}/view`)}>
                 <td>{project.name}</td>
                 <td>
                     {#if project.company_id}

frontend/src/routes/project/View.svelte

@@ -1,21 +1,39 @@
 <script>
     import { t } from '../../translations.svelte.js';
     import { onMount } from 'svelte';
+    import TaskList from '../../Components/TaskList.svelte';
 
     let { id } = $props();
     let project = $state(null);
     let error = $state(null);
+    let tasks = $state(null);
+
     async function loadProject(){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/${id}`;
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             project = await resp.json();
             error = null;
+            loadTasks();
         } else {
             error = await resp.text();
         }
     }
 
+    async function loadTasks(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/list`;
+        const resp = await fetch(url,{
+            credentials:'include',
+            method:'POST',
+            body:JSON.stringify({project_id:+id})
+        });
+        if (resp.ok){
+            tasks = await resp.json();
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
 
     onMount(loadProject);
 </script>
@@ -55,7 +73,11 @@
         </tr>
         <tr>
             <th>{t('tasks')}</th>
-            <td class="error">TODO</td>
+            <td>
+                {#if tasks}
+                <TaskList {tasks} />
+                {/if}
+            </td>
         </tr>
         <tr>
             <th>{t('members')}</th>