feat: move completed away

README.md

@@ -9,8 +9,8 @@
 - [ ] list option: sort
 - [x] list option: show last completion
 - [x] list option: show next refresh
-- [ ] list option: move completed below
-- [ ] list option: hide completed
+- [x] list option: move completed below
+- [x] list option: hide completed
 - [ ] options in cookies
 - [ ] list per URL
 - [ ] Empty list message

resources/ts/components/TaskList.vue

@@ -4,12 +4,14 @@ import type { Task } from "@/types";
 import { getTasks, createTask, deleteTask } from "@/api/tasks";
 import { CirclePlus } from "@lucide/vue";
 import TaskItem from "@/components/TaskItem.vue";
+import { taskCompleted } from "@/lib/tasks";
 
 const taskInput = ref<string>("");
 const tasks = ref<Task[]>([]);
 const list = ref<string>("test");
 const showLastChecked = ref<boolean>(false);
 const showNextReset = ref<boolean>(false);
+const separateCompleted = ref<boolean>(false);
 
 function fetchTasks() {
     void getTasks(list.value)
@@ -53,17 +55,18 @@ onBeforeMount(fetchTasks);
 </script>
 
 <template>
-    <ul class="list ">
-        <li v-for="(task, i) in tasks" :key="task.id">
-            <task-item
-                v-if="tasks[i]"
-                v-model="tasks[i]"
-                :show-last-checked="showLastChecked"
-                :show-next-reset="showNextReset"
-                @clone="onCloneTask"
-                @delete="onDeleteTask"
-            />
-        </li>
+    <ul class="list">
+        <template v-for="(task, i) in tasks" :key="task.id">
+            <li v-if="tasks[i] && (!separateCompleted || !taskCompleted(task))">
+                <task-item
+                    v-model="tasks[i]"
+                    :show-last-checked="showLastChecked"
+                    :show-next-reset="showNextReset"
+                    @clone="onCloneTask"
+                    @delete="onDeleteTask"
+                />
+            </li>
+        </template>
         <li class="list-row">
             <div class="list-col-grow">
                 <input
@@ -85,8 +88,27 @@ onBeforeMount(fetchTasks);
             </div>
         </li>
     </ul>
+    <div v-if="separateCompleted" class="collapse collapse-arrow">
+      <input id="completed-dropdown" type="checkbox" />
+      <div class="collapse-title mb-0">Completed</div>
+      <div class="collapse-content p-0">
+          <ul class="list">
+              <template v-for="(task, i) in tasks" :key="`${task.id}-completed`">
+                    <li v-if="tasks[i] && taskCompleted(task)">
+                        <task-item
+                            v-model="tasks[i]"
+                            :show-last-checked="showLastChecked"
+                            :show-next-reset="showNextReset"
+                            @clone="onCloneTask"
+                            @delete="onDeleteTask"
+                        />
+                    </li>
+              </template>
+          </ul>
+      </div>
+    </div>
     <div class="collapse collapse-arrow  font-light text-sm">
-      <input type="checkbox" />
+      <input id="options-dropdown" type="checkbox"/>
       <div class="collapse-title">Options</div>
       <div class="collapse-content text-sm">
           <fieldset class="fieldset flex flex-col gap-2">
@@ -98,6 +120,10 @@ onBeforeMount(fetchTasks);
               <input v-model="showNextReset" type="checkbox" class="checkbox" />
               Show next reset time
             </label>
+            <label class="label">
+              <input v-model="separateCompleted" type="checkbox" class="checkbox" />
+              Move completed tasks below
+            </label>
           </fieldset>
       </div>
     </div>