From 94ed9867ce556ac0b881d533ec68426d7a8849ad Mon Sep 17 00:00:00 2001
From: Giulio Alessandrini <giulioa@wolfram.com>
Date: Sun, 1 Aug 2021 22:22:34 +0200
Subject: [PATCH] added todo filtering

---
 src/lib/apps/todoApp.svelte | 62 ++++++++++++++++++++++++++++---------
 src/routes/__layout.svelte  |  4 ++-
 2 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/lib/apps/todoApp.svelte b/src/lib/apps/todoApp.svelte
index 44880c5..b123a76 100644
--- a/src/lib/apps/todoApp.svelte
+++ b/src/lib/apps/todoApp.svelte
@@ -1,6 +1,6 @@
 <script>
-    import {todos} from "$lib/stores/todos.js"
-    let todo_text = ""
+    import {todos} from "$lib/stores/todos.js";
+    let todo_text = "";
     let addTodo = () => {
         if (todo_text.length > 0) {
             const todo = {
@@ -18,22 +18,40 @@
             todo.done = true;
             $todos = $todos;
     }
+    let filterTodo = (type) => {
+        switch (type) {
+            case 'active':
+                filteredTodo = $todos.filter(todo => !todo.done);
+                break;
+            case 'done':
+                filteredTodo = $todos.filter(todo => todo.done);
+                break;
+            case 'all':
+                filteredTodo = $todos;
+                break;
+        }
+    }
+    $: filteredTodo = $todos
 </script>
 
 <div class = "panel">
-    <h2 class= "title">
-    TODO
-    </h2>
+    <h2 class= "title">TODO</h2>
+    <hr/>
     <input bind:value="{todo_text}"/>
     <button on:click="{addTodo}">Add</button>
-    <div class = "todo-list">
-        {#each $todos as todo}
-            <div class = "todo {todo.done ? 'done' : ''}">
-                <p>{todo.text}</p>
-                <button on:click="{() => clearTodo(todo)}">{todo.done ? '✗' : '✓'}</button>
-            </div>
-        {/each}
+    <div class="todo-filter">
+        <button on:click="{() => filterTodo('active')}">active</button>
+        <button on:click="{() => filterTodo('done')}">done</button>
+        <button on:click="{() => filterTodo('all')}">all</button>
     </div>
+    <ul class = "todo-list">
+        {#each filteredTodo as todo}
+        <li class = "todo {todo.done ? 'done' : ''}">
+            <p>{todo.text}</p>
+            <button on:click="{() => clearTodo(todo)}">{todo.done ? '✗' : '✓'}</button>
+        </li>
+        {/each}
+    </ul>
 </div>
 
 <style>
@@ -41,7 +59,7 @@
 input {
     padding: 5px;
     margin: 0px;
-    border: solid rgb(182, 182, 182) 1px;
+    border: solid rgb(161, 161, 161) 1px;
     border-radius: 5px;
 }
 
@@ -52,6 +70,10 @@ button {
     border-radius: 5px;
 }
 
+hr {
+    border: 1px solid rgb(182, 182, 182);
+}
+
 .panel {
     background-color: rgb(245, 253, 255);
     padding: 10px;
@@ -60,7 +82,7 @@ button {
 }
 
 .title {
-    padding: 5px;
+    padding: 0px;
     margin: 0px;
     margin-left: 5px;
     font-family: Georgia, 'Times New Roman', Times, serif;
@@ -68,6 +90,18 @@ button {
     font-size: 1.5rem;
 }
 
+.todo-filter {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.todo-filter button {
+    margin-right: 5px;
+}
+
 /* .todo-list {
     padding: 5px;
     background-color: azure;
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 546ada6..9910a99 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -10,7 +10,9 @@
 </div>
 
 <style>
-:global(a) {
+
+:global(*) {
+    padding: 0;
     text-decoration: none;
     color : black
 }