feat: show missed tasks

resources/ts/views/ListView.vue

@@ -4,8 +4,6 @@ import type { Task } from "@/types";
 import { getTasks, createTask, deleteTask } from "@/api/tasks";
 import {
     CirclePlusIcon,
-    ArrowDownUpIcon,
-    Settings2Icon,
     CircleCheckBigIcon,
     CheckCheckIcon,
     SearchIcon,
@@ -14,6 +12,9 @@ import {
 const TaskItem = defineAsyncComponent(
     () => import("@/components/TaskItem.vue"),
 );
+const ListOptions = defineAsyncComponent(
+    () => import("@/components/ListOptions.vue"),
+);
 import { taskCompleted, sortTasks, newTemporaryTask } from "@/lib/tasks";
 import { SortType } from "@/enums";
 import { booleanCookieRef, enumCookieRef } from "@/lib/cookies";
@@ -36,6 +37,7 @@ const sortReverse = booleanCookieRef("sortReverse", false);
 const showLastChecked = booleanCookieRef("showLastChecked", false);
 const showNextReset = booleanCookieRef("showNextReset", false);
 const separateCompleted = booleanCookieRef("separateCompleted", true);
+const showMissed = booleanCookieRef("showMissed", true);
 
 const completedCount = computed<number>(
     () => tasks.value.filter(taskCompleted).length,
@@ -146,14 +148,6 @@ function onDeleteTask(task: Task) {
         });
 }
 
-function onChangeSortType() {
-    reSortTasks();
-}
-
-function onChangeSortReverse() {
-    reSortTasks();
-}
-
 function onShare() {
     if (!empty.value) {
         shareLink(
@@ -229,6 +223,7 @@ onBeforeRouteLeave(() => {
                     v-model="tasks[i]"
                     :show-last-checked="showLastChecked"
                     :show-next-reset="showNextReset"
+                    :show-missed="showMissed"
                     @updated="onUpdateTask"
                     @clone="onCloneTask"
                     @delete="onDeleteTask"
@@ -256,6 +251,7 @@ onBeforeRouteLeave(() => {
                             v-model="tasks[i]"
                             :show-last-checked="showLastChecked"
                             :show-next-reset="showNextReset"
+                            :show-missed="showMissed"
                             @clone="onCloneTask"
                             @delete="onDeleteTask"
                         />
@@ -281,76 +277,15 @@ onBeforeRouteLeave(() => {
             <circle-plus-icon />
         </button>
     </div>
-    <div
+    <list-options
         v-if="!empty"
-        class="mt-4 -mb-4 collapse collapse-arrow font-light text-sm"
-    >
-        <input id="options-dropdown p-0" type="checkbox" />
-        <div class="collapse-title p-0 content-center">
-            <settings-2-icon class="inline" :size="16" />
-            {{ $t("options.title") }}
-        </div>
-        <div class="collapse-content">
-            <fieldset class="fieldset flex flex-col gap-2">
-                <label class="label">
-                    <arrow-down-up-icon class="inline" />
-                    {{ $t("options.sort_by") }}
-                    <select
-                        v-model="sortType"
-                        class="select"
-                        @change="onChangeSortType"
-                    >
-                        <option :value="SortType.CREATED_AT">
-                            {{ $t("options.sort.created_at") }}
-                        </option>
-                        <option :value="SortType.UPDATED_AT">
-                            {{ $t("options.sort.updated_at") }}
-                        </option>
-                        <option :value="SortType.CHECK_DATE">
-                            {{ $t("options.sort.check_date") }}
-                        </option>
-                        <option :value="SortType.RESET_DATE">
-                            {{ $t("options.sort.reset_date") }}
-                        </option>
-                        <option :value="SortType.NAME">
-                            {{ $t("options.sort.name") }}
-                        </option>
-                    </select>
-                </label>
-                <label class="label">
-                    <input
-                        v-model="sortReverse"
-                        type="checkbox"
-                        class="checkbox"
-                        @change="onChangeSortReverse"
-                    />
-                    {{ $t("options.reverse_sort") }}
-                </label>
-                <label class="label">
-                    <input
-                        v-model="showLastChecked"
-                        type="checkbox"
-                        class="checkbox"
-                    />
-                    {{ $t("options.last_checked") }}
-                </label>
-                <label class="label">
-                    <input
-                        v-model="showNextReset"
-                        type="checkbox"
-                        class="checkbox"
-                    />
-                    {{ $t("options.next_reset") }}
-                </label>
-                <label class="label">
-                    <input
-                        v-model="separateCompleted"
-                        type="checkbox"
-                        class="checkbox"
-                    />
-                    {{ $t("options.separate_completed") }}
-                </label>
-            </fieldset>
-        </div>
-    </div>
+        v-model:sort-type="sortType"
+        v-model:sort-reverse="sortReverse"
+        v-model:show-last-checked="showLastChecked"
+        v-model:show-next-reset="showNextReset"
+        v-model:separate-completed="separateCompleted"
+        v-model:show-missed="showMissed"
+        class="mt-4 -mb-4"
+        @change-sort="reSortTasks"
+    />
 </template>