feat: sort list

resources/ts/components/TaskList.vue

@@ -4,11 +4,14 @@ import type { Task } from "@/types";
 import { getTasks, createTask, deleteTask } from "@/api/tasks";
 import { CirclePlus } from "@lucide/vue";
 import TaskItem from "@/components/TaskItem.vue";
-import { taskCompleted } from "@/lib/tasks";
+import { taskCompleted, sortTasks } from "@/lib/tasks";
+import { SortType } from "@/enums";
 
 const taskInput = ref<string>("");
 const tasks = ref<Task[]>([]);
 const list = ref<string>("test");
+const sortType = ref<SortType>(SortType.RESET_DATE);
+const sortReverse = ref<boolean>(false);
 const showLastChecked = ref<boolean>(false);
 const showNextReset = ref<boolean>(false);
 const separateCompleted = ref<boolean>(false);
@@ -19,10 +22,15 @@ function fetchTasks() {
     void getTasks(list.value)
         .then((data: Task[]) => {
             tasks.value = data;
+            reSortTasks();
             setTimeout(fetchTasks, 10000);
         });
 }
 
+function reSortTasks() {
+    tasks.value = sortTasks(tasks.value, sortType.value, sortReverse.value);
+}
+
 function onNewTask() {
     if (taskInput.value.trim()) {
         void createTask(list.value, {
@@ -31,6 +39,7 @@ function onNewTask() {
         })
             .then((data: Task) => {
                 tasks.value.push(data);
+                reSortTasks();
             })
             .finally(() => {
                 taskInput.value = "";
@@ -53,6 +62,14 @@ function onDeleteTask(task: Task) {
     tasks.value.splice(tasks.value.indexOf(task), 1);
 }
 
+function onChangeSortType() {
+    reSortTasks();
+}
+
+function onChangeSortReverse() {
+    reSortTasks();
+}
+
 onBeforeMount(fetchTasks);
 </script>
 
@@ -114,6 +131,20 @@ onBeforeMount(fetchTasks);
       <div class="collapse-title">Options</div>
       <div class="collapse-content text-sm">
           <fieldset class="fieldset flex flex-col gap-2">
+              <label class="label">
+                Sort by
+                <select v-model="sortType" class="select" @change="onChangeSortType">
+                <option :value="SortType.CREATED_AT">Creation date</option>
+                <option :value="SortType.UPDATED_AT">Creation or update date</option>
+                <option :value="SortType.CHECK_DATE">Last check date</option>
+                <option :value="SortType.RESET_DATE">Next reset date</option>
+                <option :value="SortType.NAME">Name</option>
+                </select>
+            </label>
+            <label class="label">
+              <input v-model="sortReverse" type="checkbox" class="checkbox" @change="onChangeSortReverse" />
+              Reverse sort
+            </label>
             <label class="label">
               <input v-model="showLastChecked" type="checkbox" class="checkbox" />
               Show last checked time