feat: toasts

resources/ts/components/TaskList.vue

@@ -7,6 +7,8 @@ const TaskItem = defineAsyncComponent(() => import("@/components/TaskItem.vue"))
 import { taskCompleted, sortTasks } from "@/lib/tasks";
 import { SortType } from "@/enums";
 import { booleanCookieRef, enumCookieRef } from "@/lib/cookies";
+import { useAlertStore } from "@/stores/alerts";
+import { useI18n } from "vue-i18n";
 
 const taskInput = ref<string>("");
 const tasks = ref<Task[]>([]);
@@ -22,13 +24,23 @@ const hasCompleted = computed<boolean>(() => tasks.value.some(taskCompleted));
 const empty = computed<boolean>(() => tasks.value.length === 0);
 const allCompleted = computed<boolean>(() => tasks.value.every(taskCompleted));
 
+const i18n = useI18n();
+
+const { alertSuccess, alertError, alertWarning } = useAlertStore();
+
 function fetchTasks() {
-    void getTasks(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() {
@@ -37,13 +49,17 @@ function reSortTasks() {
 
 function onNewTask() {
     if (taskInput.value.trim()) {
-        void createTask(list.value, {
+        createTask(list.value, {
             name: taskInput.value.trim(),
             reset_cron: null,
         })
             .then((data: Task) => {
                 tasks.value.push(data);
                 reSortTasks();
+                alertSuccess(i18n.t('alerts.task_created'));
+            })
+            .catch(() => {
+                alertError(i18n.t('alerts.task_create_error'))
             })
             .finally(() => {
                 taskInput.value = "";
@@ -52,16 +68,24 @@ function onNewTask() {
 }
 
 function onCloneTask(task: Task) {
-    void createTask(list.value, {
+    createTask(list.value, {
         name: task.name,
         reset_cron: task.reset_cron,
     }).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) {
-    void deleteTask(task.id);
+    deleteTask(task.id)
+        .then(() => {
+            alertSuccess(i18n.t('alerts.task_deleted'));
+        }).catch(() => {
+            alertError(i18n.t('alerts.task_delete_error'))
+        })
 
     tasks.value.splice(tasks.value.indexOf(task), 1);
 }