feat: home view and list per url

resources/ts/views/HomeView.vue

@@ -1,3 +1,37 @@
+<script setup lang="ts">
+import { ArrowBigRightDashIcon, DicesIcon } from "@lucide/vue";
+import { generateSlug } from "random-word-slugs";
+import { ref } from "vue";
+
+const listNameInput = ref<string>(generateSlug(4));
+
+function onRandom() {
+    listNameInput.value = generateSlug(4);
+}
+</script>
+
 <template>
-    TODO
+    <div class="p-4">
+        <div class="mb-4 italic text-xl font-extralight" v-html="$t('home')">
+        </div>
+        <div class="flex gap-2 mb-4">
+            <input
+                v-model="listNameInput"
+                type="text"
+                :placeholder="$t('new_task_hint')"
+                class="input grow"
+            />
+            <button
+                class="btn btn-square"
+                @click="onRandom"
+            >
+                <dices-icon />
+            </button>
+        </div>
+        <div class="w-full px-4">
+            <router-link class="btn btn-lg" :to="`/${listNameInput}`">
+                <arrow-big-right-dash-icon class="inline" /> {{ $t('home_button') }}
+            </router-link>
+        </div>
+    </div>
 </template>

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>

resources/ts/views/NotFoundView.vue

@@ -3,8 +3,10 @@ import { CircleQuestionMarkIcon } from "@lucide/vue";
 </script>
 
 <template>
-    <div class="italic text-xl font-extralight mb-2">
+    <div class="italic text-xl font-extralight mb-4">
         <circle-question-mark-icon class="inline" /> {{ $t('not_found') }}
     </div>
-    <router-link to="/" class="btn mb-4">{{ $t('not_found_button') }}</router-link>
+    <div class="w-full px-4">
+        <router-link to="/" class="btn mb-4">{{ $t('not_found_button') }}</router-link>
+    </div>
 </template>