feat: show missed tasks

resources/lang/en.json

@@ -65,7 +65,8 @@
         "reverse_sort": "Reverse sort",
         "last_checked": "Show last checked time",
         "next_reset": "Show next reset time",
-        "separate_completed": "Separate completed tasks below"
+        "separate_completed": "Separate completed tasks below",
+        "missed": "Show in red missed tasks (reset without check)"
     },
     "alerts": {
         "task_updated": "Task updated",

resources/lang/fr.json

@@ -65,7 +65,8 @@
         "reverse_sort": "Inverser le tri",
         "last_checked": "Afficher la dernière completion",
         "next_reset": "Afficher la prochaine réinitialisation",
-        "separate_completed": "Séparer les tâches complétées plus bas"
+        "separate_completed": "Séparer les tâches complétées plus bas",
+        "missed": "Indiquer en rouge les tâches manquées (réinitialisées sans completion)"
     },
     "alerts": {
         "task_updated": "Tâche mise a jour",

resources/ts/App.vue

@@ -25,7 +25,7 @@ onMounted(() => {
         <div class="hero bg-hero grow">
             <div class="hero-content text-center p-0">
                 <div
-                    class="max-w-md min-w-96 bg-base-100 rounded-box shadow-md p-4"
+                    class="max-w-96 min-w-96 bg-base-100 rounded-box shadow-md p-4"
                 >
                     <router-link
                         to="/"

resources/ts/components/ListOptions.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ArrowDownUpIcon, Settings2Icon } from "@lucide/vue";
+import { SortType } from "@/enums";
+
+defineEmits<(e: "changeSort") => void>();
+
+const sortType = defineModel<SortType>("sortType", { required: true });
+const sortReverse = defineModel<boolean>("sortReverse", { required: true });
+const showLastChecked = defineModel<boolean>("showLastChecked", {
+    required: true,
+});
+const showNextReset = defineModel<boolean>("showNextReset", { required: true });
+const separateCompleted = defineModel<boolean>("separateCompleted", {
+    required: true,
+});
+const showMissed = defineModel<boolean>("showMissed", { required: true });
+</script>
+
+<template>
+    <div class="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">
+            <div class="w-full flex flex-col gap-2 text-left overflow-scroll">
+                <label class="label">
+                    <arrow-down-up-icon class="inline" />
+                    {{ $t("options.sort_by") }}
+                    <select
+                        v-model="sortType"
+                        class="select"
+                        @change="$emit('changeSort')"
+                    >
+                        <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 text-wrap">
+                    <input
+                        v-model="sortReverse"
+                        type="checkbox"
+                        class="checkbox"
+                        @change="$emit('changeSort')"
+                    />
+                    {{ $t("options.reverse_sort") }}
+                </label>
+                <label class="label text-wrap">
+                    <input
+                        v-model="showLastChecked"
+                        type="checkbox"
+                        class="checkbox"
+                    />
+                    {{ $t("options.last_checked") }}
+                </label>
+                <label class="label text-wrap">
+                    <input
+                        v-model="showNextReset"
+                        type="checkbox"
+                        class="checkbox"
+                    />
+                    {{ $t("options.next_reset") }}
+                </label>
+                <label class="label text-wrap">
+                    <input
+                        v-model="separateCompleted"
+                        type="checkbox"
+                        class="checkbox"
+                    />
+                    {{ $t("options.separate_completed") }}
+                </label>
+                <label class="label text-wrap">
+                    <input
+                        v-model="showMissed"
+                        type="checkbox"
+                        class="checkbox"
+                    />
+                    {{ $t("options.missed") }}
+                </label>
+            </div>
+        </div>
+    </div>
+</template>

resources/ts/components/TaskItem.vue

@@ -13,7 +13,12 @@ import { updateTask } from "@/api/tasks";
 const CronInput = defineAsyncComponent(
     () => import("@/components/CronInput.vue"),
 );
-import { isTemporary, taskCompleted, taskNextReset } from "@/lib/tasks";
+import {
+    isTemporary,
+    taskCompleted,
+    taskFutureReset,
+    taskNextReset,
+} from "@/lib/tasks";
 import { relativeTime } from "@/lib/dates";
 import { useAlertStore } from "@/stores/alerts";
 import { useI18n } from "vue-i18n";
@@ -23,7 +28,11 @@ const emit =
     defineEmits<(e: "clone" | "delete" | "updated", task: Task) => void>();
 
 const task = defineModel<Task>({ required: true });
-defineProps<{ showLastChecked: boolean; showNextReset: boolean }>();
+defineProps<{
+    showLastChecked: boolean;
+    showNextReset: boolean;
+    showMissed: boolean;
+}>();
 
 const editMode = ref<boolean>(false);
 const editName = ref<string>("");
@@ -33,6 +42,13 @@ const editNameInput = ref<HTMLInputElement | null>(null);
 
 const checked = computed<boolean>(() => taskCompleted(task.value));
 const nextReset = computed<Date | null>(() => taskNextReset(task.value));
+const futureReset = computed<Date | null>(() => taskFutureReset(task.value));
+const missed = computed<boolean>(
+    () =>
+        !checked.value &&
+        futureReset.value !== null &&
+        futureReset.value.getTime() < new Date().getTime(),
+);
 
 const i18n = useI18n();
 
@@ -157,6 +173,7 @@ watch(task, () => {
             </div>
             <div
                 class="cursor-pointer text-lg select-none"
+                :class="showMissed && missed ? 'text-error' : ''"
                 @click.prevent="onOpen"
             >
                 <div>{{ task.name }}</div>

resources/ts/lib/recurrence.ts

@@ -41,7 +41,7 @@ export function parseCron(cron: string | null): {
             type: CronType.EVERY_MONTH,
             value: 32,
         };
-    } else if ((value = /^0 0 \* \* (\d+)\#1$/i.exec(cron)) !== null) {
+    } else if ((value = /^0 0 \* \* (\d+)#1$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_MONTH,
             value: -parseInt(value[1] ?? ""),
@@ -49,7 +49,7 @@ export function parseCron(cron: string | null): {
     } else if ((value = /^0 0 \* \* (\d+)L$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_MONTH,
-            value: -parseInt(value[1] ?? "")-7,
+            value: -parseInt(value[1] ?? "") - 7,
         };
     } else if ((value = /^0 0 1 (\d+) \*$/i.exec(cron)) !== null) {
         return {
@@ -121,7 +121,7 @@ export function getCron(
                 return `0 0 * * ${(-value).toFixed(0)}#1`;
             }
             if (value < -7 && value >= -14) {
-                return `0 0 * * ${(-value-7).toFixed(0)}L`;
+                return `0 0 * * ${(-value - 7).toFixed(0)}L`;
             }
             return `0 0 ${value.toFixed(0)} * *`;
         case CronType.EVERY_YEAR:

resources/ts/lib/tasks.ts

@@ -38,6 +38,10 @@ export function taskNextReset(task: Task): Date | null {
     return nextCronReset(task.check_date, task.reset_cron, task.id);
 }
 
+export function taskFutureReset(task: Task): Date | null {
+    return nextCronReset(taskNextReset(task), task.reset_cron, task.id);
+}
+
 export function taskCompleted(task: Task): boolean {
     const nextReset = taskNextReset(task);
     if (nextReset === null) {

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"
+        v-model:sort-type="sortType"
-    >
+        v-model:sort-reverse="sortReverse"
-        <input id="options-dropdown p-0" type="checkbox" />
+        v-model:show-last-checked="showLastChecked"
-        <div class="collapse-title p-0 content-center">
+        v-model:show-next-reset="showNextReset"
-            <settings-2-icon class="inline" :size="16" />
+        v-model:separate-completed="separateCompleted"
-            {{ $t("options.title") }}
+        v-model:show-missed="showMissed"
-        </div>
+        class="mt-4 -mb-4"
-        <div class="collapse-content">
+        @change-sort="reSortTasks"
-            <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>
 </template>