loading tasks

frontend/src/routes/project/Kanban.svelte

@@ -0,0 +1,109 @@
+<script>
+    import { api } from '../../urls.svelte.js';
+    import { onMount } from 'svelte';
+    import { t } from '../../translations.svelte.js';
+    import { useTinyRouter } from 'svelte-tiny-router';
+
+    let { id } = $props();
+
+    let error = $state(null);
+    let project = $state(null);
+    let router = useTinyRouter();
+    let states = $state(null);
+    let tasks = $state({});
+
+    let columns = $derived(states?Object.keys(states).length+1:1);
+
+    async function load(){
+        loadProject();
+        loadStates();
+        await loadTasks({project_id:+id,parent_task_id:0});
+        console.log(tasks);
+    }
+
+    async function loadProject(){
+        const url = api(`project/${id}`);
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            project = await resp.json();
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    async function loadStates(){
+        const url = api(`project/${id}/states`);
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            states = await resp.json();
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    async function loadTasks(selector){
+        const url = api('task/list');
+        selector.show_closed = true;
+        var resp = await fetch(url,{
+            credentials: 'include',
+            method:'POST',
+            body:JSON.stringify(selector)
+        });
+        if (resp.ok){
+            var json = await resp.json();
+            for (var task_id of Object.keys(json)) tasks[task_id] = json[task_id];
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    onMount(load);
+</script>
+
+<style>
+    .grid > *{
+        min-height: 50px;
+        border-radius: 5px;
+        margin: 2px;
+        padding: 2px;
+        background: orange;
+        color: black;
+    }
+    .head{
+        background: lime;
+    }
+</style>
+
+{#if project}
+<h1>{project.name} : {t('kanban_view')}</h1>
+{/if}
+{#if error}
+<span class="error">{error}</span>
+{/if}
+
+<p>Columns: {columns}</p>
+
+<div class="grid" style="display: grid; grid-template-columns: {`repeat(${columns}, auto)`}">
+    <div class="head">{t('user')}</div>
+    {#if states}
+    {#each Object.entries(states) as [sid,state]}
+    <div class="head">{t(state)}</div>
+    {/each}
+    {/if}
+    {#each Object.entries(tasks) as [tid,task]}
+    <div onclick={() => router.navigate(`/task/${tid}/view`)}>
+        <p>
+            {task.name}
+        </p>
+        <p>
+            {#each Object.entries(task.members) as [uid,member]}
+            {#if member.permission.name=='OWNER'}
+            {member.user.name}
+            {/if}
+            {/each}
+        </p>
+    </div>
+    {/each}
+</div>

frontend/src/routes/project/View.svelte

@@ -51,6 +51,10 @@
         }
     }
 
+    function kanban(){
+        router.navigate(`/project/${id}/kanban`);
+    }
+
     async function loadProject(){
         const url = api(`project/${id}`);
         const resp = await fetch(url,{credentials:'include'});
@@ -132,7 +136,7 @@
         <tr>
             <th>{t('state')}</th>
             <td>
-                <StateSelector selected={project.status.code} onchange={val => update({status:val})}/>
+                <StateSelector selected={project.status.code} onchange={val => update({status:val})} project_id={id} />
             </td>
         </tr>
         {#if project.company}
@@ -185,7 +189,8 @@
         <tr>
             <th>
                 {t('tasks')}
-                <button onclick={addTask}>{t('add_new',t('task'))}</button>
+                <button onclick={addTask}>{t('add_task')}</button>
+                <button onclick={kanban}>{t('show_kanban')}</button>
             </th>
             <td class="tasks">
                 {#if tasks}

frontend/src/routes/task/View.svelte

@@ -174,7 +174,7 @@
         <tr>
             <th>{t('state')}</th>
             <td>
-                <StateSelector selected={task.status.code} onchange={val => update({status:val})}/>
+                <StateSelector selected={task.status.code} onchange={val => update({status:val})} project_id={task.project_id} />
             </td>
         </tr>
         {#if task.description.rendered}