first kanban view working

frontend/src/routes/project/Kanban.svelte

@@ -53,7 +53,23 @@
         });
         if (resp.ok){
             var json = await resp.json();
-            for (var task_id of Object.keys(json)) tasks[task_id] = json[task_id];
+            console.clear();
+            for (var task_id of Object.keys(json)) {
+                let task = json[task_id];
+                let state = task.status.name;
+                let owner = null;
+                let assignee = null;
+                for (var uid of Object.keys(task.members)){
+                    var member = task.members[uid];
+                    if (member.permission.name == 'OWNER') owner = member.user.name;
+                    if (member.permission.name == 'ASSIGNEE') assignee = member.user.name;
+                }
+                if (!assignee) assignee = owner;
+                if (!tasks[assignee]) tasks[assignee] = {};
+                if (!tasks[assignee][state]) tasks[assignee][state] = {};
+                tasks[assignee][state][task_id] = task;
+            }
+            console.log(tasks);
         } else {
             error = await resp.text();
         }
@@ -63,17 +79,25 @@
 </script>
 
 <style>
-    .grid > *{
-        min-height: 50px;
+    .box,
+    .head,
+    .user{
         border-radius: 5px;
         margin: 2px;
-        padding: 2px;
-        background: orange;
+        min-height: 50px;
         color: black;
+        padding: 2px;
     }
-    .head{
+    .box{
+        background: orange;
+    }
+    .head,
+    .user{
         background: lime;
     }
+    .empty{
+        background: repeating-linear-gradient(45deg,transparent,transparent 10px,#ccc 10px,#ccc 20px),linear-gradient(to bottom,#eee,#999);
+    }
 </style>
 
 {#if project}
@@ -83,8 +107,6 @@
 <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}
@@ -92,18 +114,15 @@
     <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 Object.entries(tasks) as [user,states]}
+        <div class="user">{user}</div>
+        {#each Object.entries(states) as [state,list]}
+            <div>
+            {#each Object.entries(list) as [tid,task]}
+                <div class="box" onclick={() => router.navigate(`/task/${task.id}/view`)}>{task.name}</div>
             {/each}
-        </p>
-    </div>
+                <div class="empty box"></div>
+            </div>
+        {/each}
     {/each}
 </div>