chore: 1.7.3

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "tout-doux",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tout-doux",
-    "version": "1.6.1",
+    "version": "1.7.3",
     "private": true,
     "type": "module",
     "engines": {

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "tout-doux"
-version = "1.6.1"
+version = "1.7.3"
 description = ""
 requires-python = ">=3.14"
 dependencies = [

resources/lang/en.json

@@ -44,7 +44,8 @@
             "October",
             "November",
             "December"
-        ]
+        ],
+        "rrule_start": "Start:"
     },
     "checked": "Checked",
     "resets": "Resets",

resources/lang/fr.json

@@ -44,7 +44,8 @@
             "Octobre",
             "Novembre",
             "Décembre"
-        ]
+        ],
+        "rrule_start": "Début :"
     },
     "checked": "Complété",
     "resets": "Reviens",

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-96 bg-base-100 rounded-box shadow-md p-4"
+                    class="max-w-96 min-w-screen sm:min-w-96 bg-base-100 rounded-box shadow-md p-4"
                 >
                     <router-link
                         to="/"

resources/ts/components/AlertsContainer.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { useAlertStore } from "@/stores/alerts";
-import { defineAsyncComponent } from "vue";
-const AlertItem = defineAsyncComponent(
-    () => import("@/components/AlertItem.vue"),
-);
+import AlertItem from "@/components/AlertItem.vue";
 
 const { alerts } = useAlertStore();
 </script>

resources/ts/components/CronInput.vue

@@ -2,6 +2,7 @@
 import { ref, onBeforeMount, watch } from "vue";
 import { getCron, parseCron, validCron } from "@/lib/recurrence";
 import { CronType } from "@/enums";
+import DateInput from "@/components/DateInput.vue";
 
 const DEFAULT_CRON = "0 0 * * *";
 
@@ -11,23 +12,30 @@ const valid = ref<boolean>(true);
 const props = defineProps<{ editMode: boolean }>();
 
 const cronType = ref<CronType>(CronType.MANUAL);
-const cronValue = ref<string>('0');
+const cronValue = ref<string>("0");
+const cronDate = ref<Date>(new Date());
 
 function onCronChanged() {
     const data = parseCron(cron.value);
     rawCron.value = cron.value ?? DEFAULT_CRON;
     cronType.value = data.type;
     cronValue.value = data.value.toFixed(0);
+    cronDate.value = data.date ?? new Date();
 }
 
 function updateCron() {
-    cron.value = getCron(cronType.value, parseInt(cronValue.value), rawCron.value);
+    cron.value = getCron(
+        cronType.value,
+        parseInt(cronValue.value),
+        cronDate.value,
+        rawCron.value,
+    );
 }
 
 function onChangeCronType() {
     switch (cronType.value) {
         case CronType.EVERY_DAY:
-            cronValue.value = '0';
+            cronValue.value = "0";
             break;
         case CronType.EVERY_WEEK:
         case CronType.EVERY_MONTH:
@@ -35,7 +43,7 @@ function onChangeCronType() {
         case CronType.EVERY_N_DAYS:
         case CronType.EVERY_N_WEEKS:
         case CronType.EVERY_N_MONTHS:
-            cronValue.value = '1';
+            cronValue.value = "1";
             break;
         case CronType.CUSTOM:
             cron.value ??= DEFAULT_CRON;
@@ -48,6 +56,10 @@ function onChangeCronValue() {
     updateCron();
 }
 
+function onChangeCronDate() {
+    updateCron();
+}
+
 function onInputRawCron() {
     valid.value = validCron(rawCron.value);
     if (valid.value) {
@@ -65,8 +77,12 @@ watch(cron, () => {
 </script>
 
 <template>
-    <div class="flex gap-2">
-        <select v-model="cronType" class="select flex-1" @change="onChangeCronType">
+    <div class="flex gap-2 flex-wrap">
+        <select
+            v-model="cronType"
+            class="select flex-1"
+            @change="onChangeCronType"
+        >
             <option :value="CronType.MANUAL">
                 {{ $t("cron.type.manual") }}
             </option>
@@ -98,20 +114,6 @@ watch(cron, () => {
                 {{ $t("cron.type.one_time") }}
             </option>
         </select>
-        <select
-            v-if="cronType === CronType.EVERY_DAY"
-            v-model="cronValue"
-            class="select flex-1"
-            @change="onChangeCronValue"
-        >
-            <option
-                v-for="i in Array.from(Array(24).keys())"
-                :key="`h${i+1}`"
-                :value="i"
-            >
-                {{ i.toFixed(0).padStart(2, "0") }}:00
-            </option>
-        </select>
         <select
             v-if="cronType === CronType.EVERY_WEEK"
             v-model="cronValue"
@@ -120,7 +122,7 @@ watch(cron, () => {
         >
             <option
                 v-for="i in Array.from(Array(7).keys())"
-                :key="`w${i+1}`"
+                :key="`w${i + 1}`"
                 :value="i + 1"
             >
                 {{ $t(`cron.week.${i.toFixed(0)}`) }}
@@ -132,35 +134,37 @@ watch(cron, () => {
             class="select flex-1"
             @change="onChangeCronValue"
         >
-            <option :value="1">{{ $t('cron.month.first_day') }}</option>
-            <option :value="32">{{ $t('cron.month.last_day') }}</option>
+            <option :value="1">{{ $t("cron.month.first_day") }}</option>
+            <option :value="32">{{ $t("cron.month.last_day") }}</option>
             <option
                 v-for="i in Array.from(Array(7).keys())"
-                :key="`d${-(i+1)}`"
+                :key="`d${-(i + 1)}`"
                 :value="-(i + 1)"
             >
-                {{ $t("cron.month.first") }} {{ $t(`cron.week.${i.toFixed(0)}`).toLowerCase() }}
+                {{ $t("cron.month.first") }}
+                {{ $t(`cron.week.${i.toFixed(0)}`).toLowerCase() }}
             </option>
             <option
                 v-for="i in Array.from(Array(7).keys())"
-                :key="`d${-(i+8)}`"
+                :key="`d${-(i + 8)}`"
                 :value="-(i + 8)"
             >
-                {{ $t("cron.month.last") }} {{ $t(`cron.week.${i.toFixed(0)}`).toLowerCase() }}
+                {{ $t("cron.month.last") }}
+                {{ $t(`cron.week.${i.toFixed(0)}`).toLowerCase() }}
             </option>
             <option
                 v-for="i in Array.from(Array(30).keys())"
-                :key="`d${i+2}`"
+                :key="`d${i + 2}`"
                 :value="i + 2"
             >
                 {{
-                    (i % 10 == 9 && i !== 9)
-                        ? $t("cron.month.st", [i+2])
-                        : (i % 10 === 0 && i !== 10)
-                          ? $t("cron.month.nd", [i+2])
-                          : (i % 10 === 1 && i !== 11)
-                            ? $t("cron.month.rd", [i+2])
-                            : $t("cron.month.th", [i+2])
+                    i % 10 == 9 && i !== 9
+                        ? $t("cron.month.st", [i + 2])
+                        : i % 10 === 0 && i !== 10
+                          ? $t("cron.month.nd", [i + 2])
+                          : i % 10 === 1 && i !== 11
+                            ? $t("cron.month.rd", [i + 2])
+                            : $t("cron.month.th", [i + 2])
                 }}
             </option>
         </select>
@@ -187,13 +191,33 @@ watch(cron, () => {
             @input="onInputRawCron"
         />
         <input
-            v-if="cronType === CronType.EVERY_N_DAYS || cronType === CronType.EVERY_N_WEEKS || cronType === CronType.EVERY_N_MONTHS"
+            v-if="
+                cronType === CronType.EVERY_N_DAYS ||
+                cronType === CronType.EVERY_N_WEEKS ||
+                cronType === CronType.EVERY_N_MONTHS
+            "
             v-model="cronValue"
             type="number"
             min="1"
             step="1"
             class="input font-mono flex-1"
-            @input="onChangeCronValue"
+            @change="onChangeCronValue"
         />
+        <label
+            v-if="
+                cronType === CronType.EVERY_N_DAYS ||
+                cronType === CronType.EVERY_N_WEEKS ||
+                cronType === CronType.EVERY_N_MONTHS
+            "
+            class="label flex-1 basis-full"
+        >
+            {{ $t("cron.rrule_start") }}
+            <date-input
+                v-model="cronDate"
+                required
+                class="input font-mono"
+                @change="onChangeCronDate"
+            />
+        </label>
     </div>
 </template>

resources/ts/components/DateInput.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const emit = defineEmits<(e: "input"|"change", value: Date) => void>();
+
+const date = defineModel<Date>({ required: true });
+
+function onInput(event: Event) {
+    const inputValue = (event.target as HTMLInputElement).value;
+    date.value =  new Date(inputValue);
+    emit('input', date.value);
+}
+
+function onChange(event: Event) {
+    const inputValue = (event.target as HTMLInputElement).value;
+    date.value =  new Date(inputValue);
+    emit('change', date.value);
+}
+</script>
+
+<template>
+    <input
+        :value="date.toISOString().substring(0, 10)"
+        type="date"
+        @input="onInput"
+        @change="onChange"
+    />
+</template>

resources/ts/components/PageFooter.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
 import { getMetadata } from "@/api/meta";
 import type { Metadata } from "@/types";
-import { defineAsyncComponent, onBeforeMount, ref } from "vue";
+import { onBeforeMount, ref } from "vue";
+import LangInput from "@/components/LangInput.vue";
 
-const metadata = ref<Metadata|null>(null);
-
-const LangInput = defineAsyncComponent(
-    () => import("@/components/LangInput.vue"),
-);
+const metadata = ref<Metadata | null>(null);
 
 function fetchMetadata() {
-    void getMetadata()
-        .then((data) => {
+    void getMetadata().then((data) => {
         metadata.value = data;
         setTimeout(fetchMetadata, 600000);
     });

resources/ts/components/TaskItem.vue

@@ -4,15 +4,12 @@ import {
     ref,
     watch,
     computed,
-    defineAsyncComponent,
     nextTick,
 } from "vue";
 import type { Task } from "@/types";
 import { CopyIcon, TrashIcon, SaveIcon, XIcon } from "@lucide/vue";
 import { updateTask } from "@/api/tasks";
-const CronInput = defineAsyncComponent(
-    () => import("@/components/CronInput.vue"),
-);
+import CronInput from "@/components/CronInput.vue";
 import {
     isTemporary,
     taskCompleted,

resources/ts/lib/recurrence.ts

@@ -7,59 +7,70 @@ const ONE_TIME_VALUE = "@one-time";
 export function parseCron(cron: string | null): {
     type: CronType;
     value: number;
+    date: Date | null;
 } {
     let value: RegExpMatchArray | null;
     if (cron === null) {
         return {
             type: CronType.MANUAL,
             value: 0,
+            date: null,
         };
     } else if (cron === ONE_TIME_VALUE) {
         return {
             type: CronType.ONE_TIME,
             value: 0,
+            date: null,
         };
-    } else if (cron.startsWith("RRULE:")) {
+    } else if (cron.startsWith("RRULE:") || cron.startsWith("DTSTART:")) {
         return parseRrule(cron);
     } else if ((value = /^0 (\d+) \* \* \*$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_DAY,
             value: parseInt(value[1] ?? ""),
+            date: null,
         };
     } else if ((value = /^0 0 \* \* (\d+)$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_WEEK,
             value: parseInt(value[1] ?? ""),
+            date: null,
         };
     } else if ((value = /^0 0 (\d+) \* \*$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_MONTH,
             value: parseInt(value[1] ?? ""),
+            date: null,
         };
     } else if ((value = /^0 0 L \* \*$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_MONTH,
             value: 32,
+            date: null,
         };
     } else if ((value = /^0 0 \* \* (\d+)#1$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_MONTH,
             value: -parseInt(value[1] ?? ""),
+            date: null,
         };
     } else if ((value = /^0 0 \* \* (\d+)L$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_MONTH,
             value: -parseInt(value[1] ?? "") - 7,
+            date: null,
         };
     } else if ((value = /^0 0 1 (\d+) \*$/i.exec(cron)) !== null) {
         return {
             type: CronType.EVERY_YEAR,
             value: parseInt(value[1] ?? ""),
+            date: null,
         };
     } else {
         return {
             type: CronType.CUSTOM,
             value: 0,
+            date: null,
         };
     }
 }
@@ -67,6 +78,7 @@ export function parseCron(cron: string | null): {
 export function parseRrule(rule: string): {
     type: CronType;
     value: number;
+    date: Date | null;
 } {
     try {
         const rrule = RRule.parseString(rule);
@@ -75,21 +87,25 @@ export function parseRrule(rule: string): {
                 return {
                     type: CronType.EVERY_N_MONTHS,
                     value: (rrule.interval ?? 1) * 12,
+                    date: rrule.dtstart ?? null,
                 };
             case RRule.MONTHLY:
                 return {
                     type: CronType.EVERY_N_MONTHS,
                     value: rrule.interval ?? 1,
+                    date: rrule.dtstart ?? null,
                 };
             case RRule.WEEKLY:
                 return {
                     type: CronType.EVERY_N_WEEKS,
                     value: rrule.interval ?? 1,
+                    date: rrule.dtstart ?? null,
                 };
             case RRule.DAILY:
                 return {
                     type: CronType.EVERY_N_DAYS,
                     value: rrule.interval ?? 1,
+                    date: rrule.dtstart ?? null,
                 };
         }
     } catch {
@@ -98,19 +114,21 @@ export function parseRrule(rule: string): {
     return {
         type: CronType.MANUAL,
         value: 0,
+        date: null,
     };
 }
 
 export function getCron(
     type: CronType,
     value: number,
+    date: Date,
     fallback: string,
 ): string | null {
     switch (type) {
         case CronType.ONE_TIME:
             return ONE_TIME_VALUE;
         case CronType.EVERY_DAY:
-            return `0 ${value.toFixed(0)} * * *`;
+            return `0 0 * * *`;
         case CronType.EVERY_WEEK:
             return `0 0 * * ${value.toFixed(0)}`;
         case CronType.EVERY_MONTH:
@@ -127,11 +145,23 @@ export function getCron(
         case CronType.EVERY_YEAR:
             return `0 0 1 ${value.toFixed(0)} *`;
         case CronType.EVERY_N_MONTHS:
-            return `RRULE:FREQ=MONTHLY;INTERVAL=${value.toFixed(0)}`;
+            return new RRule({
+                freq: RRule.MONTHLY,
+                interval: value,
+                dtstart: date,
+            }).toString();
         case CronType.EVERY_N_WEEKS:
-            return `RRULE:FREQ=WEEKLY;INTERVAL=${value.toFixed(0)}`;
+            return new RRule({
+                freq: RRule.WEEKLY,
+                interval: value,
+                dtstart: date,
+            }).toString();
         case CronType.EVERY_N_DAYS:
-            return `RRULE:FREQ=DAILY;INTERVAL=${value.toFixed(0)}`;
+            return new RRule({
+                freq: RRule.DAILY,
+                interval: value,
+                dtstart: date,
+            }).toString();
         case CronType.CUSTOM:
             if (validCron(fallback)) {
                 return fallback;
@@ -155,11 +185,11 @@ export function validCron(cron: string): boolean {
 }
 
 export function nextCronReset(
-    date: Date | null,
+    date: Date,
     cron: string | null,
     hash: string,
 ): Date | null {
-    if (date === null || cron === null || isOneTime(cron)) {
+    if (cron === null || isOneTime(cron)) {
         return null;
     }
     try {
@@ -167,11 +197,10 @@ export function nextCronReset(
             try {
                 const rule = new RRule({
                     ...RRule.parseString(cron),
-                    dtstart: date,
                     count: 2,
                 });
 
-                return rule.all()[1] ?? null;
+                return rule.after(date) ?? null;
             } catch {
                 // ignore
             }

resources/ts/lib/tasks.ts

@@ -35,21 +35,44 @@ export function isTemporary(task: Task): boolean {
 }
 
 export function taskNextReset(task: Task): Date | null {
-    return nextCronReset(task.check_date, task.reset_cron, task.id);
+    return nextCronReset(
+        task.check_date ?? new Date(),
+        task.reset_cron,
+        task.id,
+    );
 }
 
 export function taskFutureReset(task: Task): Date | null {
-    return nextCronReset(taskNextReset(task), task.reset_cron, task.id);
+    return nextCronReset(
+        taskNextReset(task) ?? new Date(),
+        task.reset_cron,
+        task.id,
+    );
 }
 
 export function taskCompleted(task: Task): boolean {
+    if (task.check_date === null) {
+        return false;
+    }
     const nextReset = taskNextReset(task);
     if (nextReset === null) {
-        return task.check_date !== null;
+        return true;
     }
     return nextReset.getTime() > new Date().getTime();
 }
 
+export function fallbackDate(task: Task): Date {
+    return new Date(
+        task.created_at.getFullYear() - 100,
+        task.created_at.getMonth(),
+        task.created_at.getDate(),
+        0,
+        0,
+        0,
+        0,
+    );
+}
+
 export function sortTasks(
     tasks: Task[],
     sortType: SortType,
@@ -78,8 +101,8 @@ export function sortTasks(
                 .sort(
                     (a: Task, b: Task) =>
                         (reverse ? -1 : 1) *
-                        ((a.check_date ?? a.created_at).getTime() -
-                            (b.check_date ?? b.created_at).getTime()),
+                        ((a.check_date ?? fallbackDate(a)).getTime() -
+                            (b.check_date ?? fallbackDate(b)).getTime()),
                 );
         case SortType.RESET_DATE:
             return tasks
@@ -87,8 +110,8 @@ export function sortTasks(
                 .sort(
                     (a: Task, b: Task) =>
                         (reverse ? -1 : 1) *
-                            (taskNextReset(a) ?? a.created_at).getTime() -
-                        (taskNextReset(b) ?? b.created_at).getTime(),
+                            (taskNextReset(a) ?? fallbackDate(a)).getTime() -
+                        (taskNextReset(b) ?? fallbackDate(b)).getTime(),
                 );
         case SortType.NAME:
             return tasks

resources/ts/views/HomeView.vue

@@ -2,11 +2,9 @@
 import { useListStore } from "@/stores/lists";
 import { ArrowBigRightDashIcon, DicesIcon, HistoryIcon } from "@lucide/vue";
 import { generateSlug } from "random-word-slugs";
-import { defineAsyncComponent, onBeforeMount, ref } from "vue";
+import { onBeforeMount, ref } from "vue";
 import { onBeforeRouteUpdate } from "vue-router";
-const RecentItem = defineAsyncComponent(
-    () => import("@/components/RecentItem.vue"),
-);
+import RecentItem from "@/components/RecentItem.vue";
 
 const listNameInput = ref<string>(generateSlug(4));
 

resources/ts/views/ListView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onBeforeMount, computed, defineAsyncComponent } from "vue";
+import { ref, onBeforeMount, computed } from "vue";
 import type { Task } from "@/types";
 import { getTasks, createTask, deleteTask } from "@/api/tasks";
 import {
@@ -9,12 +9,8 @@ import {
     SearchIcon,
     Share2Icon,
 } from "@lucide/vue";
-const TaskItem = defineAsyncComponent(
-    () => import("@/components/TaskItem.vue"),
-);
-const ListOptions = defineAsyncComponent(
-    () => import("@/components/ListOptions.vue"),
-);
+import TaskItem from "@/components/TaskItem.vue";
+import ListOptions from "@/components/ListOptions.vue";
 import { taskCompleted, sortTasks, newTemporaryTask } from "@/lib/tasks";
 import { SortType } from "@/enums";
 import { booleanCookieRef, enumCookieRef } from "@/lib/cookies";

uv.lock

@@ -323,7 +323,7 @@ asyncpg = [
 
 [[package]]
 name = "tout-doux"
-version = "1.6.1"
+version = "1.7.3"
 source = { editable = "." }
 dependencies = [
     { name = "flask", extra = ["async"] },