feat: page title

resources/ts/components/TaskItem.vue

@@ -11,7 +11,7 @@ import { relativeTime } from "@/lib/dates";
 import { useAlertStore } from "@/stores/alerts";
 import { useI18n } from "vue-i18n";
 
-const emit = defineEmits<(e: "clone" | "delete", task: Task) => void>();
+const emit = defineEmits<(e: "clone" | "delete" | "updated", task: Task) => void>();
 
 const task = defineModel<Task>({ required: true });
 defineProps<{ showLastChecked: boolean; showNextReset: boolean }>();
@@ -39,6 +39,7 @@ function onSave() {
     })
         .then((newTask) => {
             task.value = newTask;
+            emit("updated", newTask);
             alertSuccess(i18n.t("alerts.task_updated"));
         })
         .catch(() => {
@@ -57,6 +58,7 @@ function onCheck() {
         })
             .then((newTask) => {
                 task.value = newTask;
+                emit("updated", newTask);
             })
             .catch(() => {
                 alertError(i18n.t("alerts.task_update_error"));
@@ -68,6 +70,7 @@ function onCheck() {
         })
             .then((newTask) => {
                 task.value = newTask;
+                emit("updated", newTask);
             })
             .catch(() => {
                 alertError(i18n.t("alerts.task_update_error"));

resources/ts/views/HomeView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ArrowBigRightDashIcon, DicesIcon } from "@lucide/vue";
 import { generateSlug } from "random-word-slugs";
-import { ref } from "vue";
+import { onBeforeMount, ref } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
 
 const listNameInput = ref<string>(generateSlug(4));
 
@@ -16,6 +17,13 @@ function onInput() {
         .replace(/[^a-z0-9-]/g, "")
         .toLowerCase();
 }
+
+function updateTitle() {
+    document.title = 'Tout Doux';
+}
+
+onBeforeMount(updateTitle)
+onBeforeRouteUpdate(updateTitle);
 </script>
 
 <template>

resources/ts/views/ListView.vue

@@ -66,6 +66,7 @@ function fetchTasks() {
 
 function reSortTasks() {
     tasks.value = sortTasks(tasks.value, sortType.value, sortReverse.value);
+    updateTitle();
 }
 
 function onNewTask() {
@@ -124,6 +125,12 @@ function onChangeSortReverse() {
     reSortTasks();
 }
 
+function updateTitle() {
+    if (list.value !== null) {
+        document.title = `Tout Doux - ${list.value} (${completedCount.value.toFixed(0)}/${taskCount.value.toFixed(0)})`
+    }
+}
+
 onBeforeMount(() => {
     list.value = route.params.list as string;
     fetchTasks();
@@ -147,6 +154,7 @@ onBeforeRouteUpdate((to) => {
                     v-model="tasks[i]"
                     :show-last-checked="showLastChecked"
                     :show-next-reset="showNextReset"
+                    @updated="updateTitle"
                     @clone="onCloneTask"
                     @delete="onDeleteTask"
                 />

resources/ts/views/NotFoundView.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
 import { CircleQuestionMarkIcon } from "@lucide/vue";
+import { onBeforeMount } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
+
+function updateTitle() {
+    document.title = 'Tout Doux - Not Found';
+}
+
+onBeforeMount(updateTitle)
+onBeforeRouteUpdate(updateTitle);
 </script>
 
 <template>