feat: home view and list per url

resources/ts/views/ListView.vue

@@ -11,10 +11,13 @@ import { SortType } from "@/enums";
 import { booleanCookieRef, enumCookieRef } from "@/lib/cookies";
 import { useAlertStore } from "@/stores/alerts";
 import { useI18n } from "vue-i18n";
+import { onBeforeRouteUpdate, useRoute } from 'vue-router'
 
+const route = useRoute();
+
+const list = ref<string|null>(null);
 const taskInput = ref<string>("");
 const tasks = ref<Task[]>([]);
-const list = ref<string>("test");
 
 const sortType = enumCookieRef<SortType>(
     "toutDouxSortType",
@@ -34,19 +37,21 @@ const i18n = useI18n();
 const { alertSuccess, alertError, alertWarning } = useAlertStore();
 
 function fetchTasks() {
-    getTasks(list.value)
-        .then((data: Task[]) => {
-            tasks.value = data;
-            reSortTasks();
-            setTimeout(fetchTasks, 10000);
-        })
-        .catch(() => {
-            if (tasks.value.length !== 0) {
-                alertWarning(i18n.t("alerts.task_refresh_error"));
-            } else {
-                alertError(i18n.t("alerts.task_fetch_error"));
-            }
-        });
+    if (list.value) {
+        getTasks(list.value)
+            .then((data: Task[]) => {
+                tasks.value = data;
+                reSortTasks();
+                setTimeout(fetchTasks, 10000);
+            })
+            .catch(() => {
+                if (tasks.value.length !== 0) {
+                    alertWarning(i18n.t("alerts.task_refresh_error"));
+                } else {
+                    alertError(i18n.t("alerts.task_fetch_error"));
+                }
+            });
+    }
 }
 
 function reSortTasks() {
@@ -54,7 +59,7 @@ function reSortTasks() {
 }
 
 function onNewTask() {
-    if (taskInput.value.trim()) {
+    if (taskInput.value.trim() && list.value) {
         createTask(list.value, {
             name: taskInput.value.trim(),
             reset_cron: null,
@@ -74,17 +79,19 @@ function onNewTask() {
 }
 
 function onCloneTask(task: Task) {
-    createTask(list.value, {
-        name: task.name,
-        reset_cron: task.reset_cron,
-    })
-        .then((data: Task) => {
-            tasks.value.push(data);
-            alertSuccess(i18n.t("alerts.task_cloned"));
+    if (list.value) {
+        createTask(list.value, {
+            name: task.name,
+            reset_cron: task.reset_cron,
         })
-        .catch(() => {
-            alertError(i18n.t("alerts.task_create_error"));
-        });
+            .then((data: Task) => {
+                tasks.value.push(data);
+                alertSuccess(i18n.t("alerts.task_cloned"));
+            })
+            .catch(() => {
+                alertError(i18n.t("alerts.task_create_error"));
+            });
+    }
 }
 
 function onDeleteTask(task: Task) {
@@ -107,7 +114,15 @@ function onChangeSortReverse() {
     reSortTasks();
 }
 
-onBeforeMount(fetchTasks);
+onBeforeMount(() => {
+    list.value = route.params.list as string;
+    fetchTasks();
+});
+
+onBeforeRouteUpdate((to) => {
+    list.value = to.params.list as string;
+    fetchTasks();
+})
 </script>
 
 <template>