feat: last checked and next refresh

README.md

@@ -7,13 +7,16 @@
 - [x] clone task
 - [x] delete task
 - [ ] list option: sort
-- [ ] list option: show last completion
-- [ ] list option: show next refresh
+- [x] list option: show last completion
+- [x] list option: show next refresh
+- [ ] list option: move completed below
 - [ ] list option: hide completed
+- [ ] options in cookies
 - [ ] list per URL
 - [ ] Empty list message
 - [ ] home screen
 - [ ] change lang
+- [ ] lang in cookies
 - [ ] toasts
 - [ ] handle errors
 - [ ] simple view

bun.lock

@@ -6,6 +6,7 @@
       "dependencies": {
         "@lucide/vue": "^1.23.0",
         "cron-parser": "^5.6.1",
+        "date-fns": "^4.4.0",
         "vue": "^3.5.38",
       },
       "devDependencies": {
@@ -420,6 +421,8 @@
 
     "daisyui": ["daisyui@5.6.6", "", {}, "sha512-UFiuIZYucF7ylrnY3PT1SqwaEbVB10mqTZRyeRchZk0bud+HihYLLhXdxGDVmR/ftrM9G9YVr9FFPRVVIZJ5hA=="],
 
+    "date-fns": ["date-fns@4.4.0", "", {}, "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w=="],
+
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],

package.json

@@ -22,6 +22,7 @@
     "dependencies": {
         "@lucide/vue": "^1.23.0",
         "cron-parser": "^5.6.1",
+        "date-fns": "^4.4.0",
         "vue": "^3.5.38"
     },
     "devDependencies": {

resources/ts/components/TaskItem.vue

@@ -4,11 +4,13 @@ import type { Task } from "@/types";
 import { Copy, Trash, Save, X } from "@lucide/vue";
 import { updateTask } from "@/api/tasks";
 import CronInput from "@/components/CronInput.vue";
-import { taskCompleted } from "@/lib/tasks";
+import { taskCompleted, taskNextReset } from "@/lib/tasks";
+import { relativeTime } from "@/lib/dates";
 
 const emit = defineEmits<(e: 'clone' | 'delete', task: Task) => void>();
 
 const task = defineModel<Task>({ required: true });
+defineProps<{ showLastChecked: boolean; showNextReset: boolean }>();
 
 const editMode = ref<boolean>(false);
 const editName = ref<string>('');
@@ -16,6 +18,7 @@ const editCron = ref<string|null>(null);
 const refreshKey = ref<number>(0);
 
 const checked = computed<boolean>(() => taskCompleted(task.value));
+const nextReset = computed<Date | null>(() => taskNextReset(task.value));
 
 function onClose() {
     editMode.value = false;
@@ -80,7 +83,13 @@ watch(task, () => {
             class="cursor-pointer text-lg select-none"
             @click.prevent="editMode = true"
         >
-            {{ task.name }}
+            <div>{{ task.name }}</div>
+            <div v-if="showLastChecked && !checked && task.check_date" class="font-light text-xs italic">
+                Checked {{ relativeTime(task.check_date) }}
+            </div>
+            <div v-if="showNextReset && checked && nextReset" class="font-light text-xs italic">
+                Resets {{ relativeTime(nextReset) }}
+            </div>
         </div>
         <template v-else>
             <div class="flex flex-col gap-2">

resources/ts/components/TaskList.vue

@@ -8,6 +8,8 @@ import TaskItem from "@/components/TaskItem.vue";
 const taskInput = ref<string>("");
 const tasks = ref<Task[]>([]);
 const list = ref<string>("test");
+const showLastChecked = ref<boolean>(false);
+const showNextReset = ref<boolean>(false);
 
 function fetchTasks() {
     void getTasks(list.value)
@@ -53,7 +55,14 @@ onBeforeMount(fetchTasks);
 <template>
     <ul class="list ">
         <li v-for="(task, i) in tasks" :key="task.id">
-            <task-item v-if="tasks[i]" v-model="tasks[i]" @clone="onCloneTask" @delete="onDeleteTask" />
+            <task-item
+                v-if="tasks[i]"
+                v-model="tasks[i]"
+                :show-last-checked="showLastChecked"
+                :show-next-reset="showNextReset"
+                @clone="onCloneTask"
+                @delete="onDeleteTask"
+            />
         </li>
         <li class="list-row">
             <div class="list-col-grow">
@@ -76,4 +85,20 @@ onBeforeMount(fetchTasks);
             </div>
         </li>
     </ul>
+    <div class="collapse collapse-arrow  font-light text-sm">
+      <input type="checkbox" />
+      <div class="collapse-title">Options</div>
+      <div class="collapse-content text-sm">
+          <fieldset class="fieldset flex flex-col gap-2">
+            <label class="label">
+              <input v-model="showLastChecked" type="checkbox" class="checkbox" />
+              Show last checked time
+            </label>
+            <label class="label">
+              <input v-model="showNextReset" type="checkbox" class="checkbox" />
+              Show next reset time
+            </label>
+          </fieldset>
+      </div>
+    </div>
 </template>

resources/ts/lib/cron.ts

@@ -1,6 +1,6 @@
 
 import { CronType } from "@/enums";
-import CronExpressionParser from "cron-parser";
+import {CronExpressionParser} from "cron-parser";
 
 export function parseCron(cron: string | null): { type: CronType, value: number } {
     let value: RegExpMatchArray | null;

resources/ts/lib/dates.ts

@@ -0,0 +1,6 @@
+import { formatDistanceToNow } from "date-fns";
+
+
+export function relativeTime(date: Date): string {
+    return formatDistanceToNow(date, {addSuffix: true, includeSeconds: false});
+}

resources/ts/lib/tasks.ts

@@ -1,5 +1,5 @@
 import type { RawTask, Task } from "@/types";
-import CronExpressionParser from "cron-parser";
+import {CronExpressionParser} from "cron-parser";
 
 export function parseTask(task: RawTask): Task {
     return {
@@ -13,18 +13,22 @@ export function parseTask(task: RawTask): Task {
     };
 }
 
-export function taskCompleted(task: Task): boolean {
-    if (task.check_date === null) {
-        return false;
-    }
-    if (task.reset_cron === null) {
-        return true;
+export function taskNextReset(task: Task): Date | null {
+    if (task.check_date === null || task.reset_cron === null) {
+        return null;
     }
     try {
         const interval = CronExpressionParser.parse(task.reset_cron, {currentDate: task.check_date});
-        const nextDate = interval.next();
-        return nextDate.getTime() > (new Date()).getTime();
+        return interval.next().toDate();
     } catch {
-        return false;
+        return null;
     }
 }
+
+export function taskCompleted(task: Task): boolean {
+    const nextReset = taskNextReset(task);
+    if (nextReset === null) {
+        return task.check_date !== null;
+    }
+    return nextReset.getTime() > (new Date()).getTime();
+}