feat: last checked and next refresh

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>