feat: toasts

resources/ts/components/AlertItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Alert } from '@/types';
+import { computed, ref, onBeforeMount } from 'vue';
+import { CircleX, CircleAlert, CircleCheck, Info } from '@lucide/vue';
+
+const props = defineProps<{ alert: Alert }>();
+const dismissed = ref<boolean>(false);
+const refreshKey = ref<number>(1);
+const visible = computed<boolean>(() => refreshKey.value > 0 && !dismissed.value && (new Date().getTime() - props.alert.created.getTime()) <= props.alert.seconds * 1000);
+
+function onDismiss() {
+    dismissed.value = true;
+}
+
+onBeforeMount(() => {
+    setInterval(() => {
+        refreshKey.value++;
+    }, 500);
+});
+</script>
+
+<template>
+    <div v-if="visible" class="alert alert-info alert-soft cursor-pointer" :class="`alert-${alert.type}`" @click="onDismiss">
+        <CircleX v-if="alert.type === 'error'" /> <!-- alert-error -->
+        <CircleAlert v-if="alert.type === 'warning'" /> <!-- alert-warning -->
+        <CircleCheck v-if="alert.type === 'success'" /> <!-- alert-success -->
+        <Info v-if="alert.type === 'info'" /> <!-- alert-info -->
+        <span>{{ alert.message }}</span>
+    </div>
+</template>

resources/ts/components/AlertsContainer.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useAlertStore } from '@/stores/alerts';
+import { defineAsyncComponent } from 'vue';
+const AlertItem = defineAsyncComponent(() => import("@/components/AlertItem.vue"));
+
+const { alerts } = useAlertStore();
+</script>
+
+<template>
+    <div class="toast select-none">
+        <alert-item v-for="alert in alerts" :key="alert.created.getTime()" :alert="alert" />
+    </div>
+</template>

resources/ts/components/TaskItem.vue

@@ -6,6 +6,8 @@ import { updateTask } from "@/api/tasks";
 const CronInput = defineAsyncComponent(() => import("@/components/CronInput.vue"));
 import { taskCompleted, taskNextReset } from "@/lib/tasks";
 import { relativeTime } from "@/lib/dates";
+import { useAlertStore } from "@/stores/alerts";
+import { useI18n } from "vue-i18n";
 
 const emit = defineEmits<(e: 'clone' | 'delete', task: Task) => void>();
 
@@ -20,15 +22,22 @@ const refreshKey = ref<number>(0);
 const checked = computed<boolean>(() => taskCompleted(task.value));
 const nextReset = computed<Date | null>(() => taskNextReset(task.value));
 
+const i18n = useI18n();
+
+const { alertSuccess, alertError } = useAlertStore();
+
 function onClose() {
     editMode.value = false;
 }
 
 function onSave() {
-    void updateTask(task.value.id, { name: editName.value, reset_cron: editCron.value })
+    updateTask(task.value.id, { name: editName.value, reset_cron: editCron.value })
         .then((newTask) => {
             task.value = newTask;
-        });
+            alertSuccess(i18n.t('alerts.task_updated'));
+        }).catch(() => {
+            alertError(i18n.t('alerts.task_update_error'))
+        })
     task.value.name = editName.value;
     task.value.reset_cron = editCron.value;
     editMode.value = false;
@@ -36,14 +45,18 @@ function onSave() {
 
 function onCheck() {
     if (!checked.value) {
-        void updateTask(task.value.id, { check_date: (new Date()).toISOString(), previous_check_date: task.value.check_date?.toISOString() })
+        updateTask(task.value.id, { check_date: (new Date()).toISOString(), previous_check_date: task.value.check_date?.toISOString() })
             .then((newTask) => {
                 task.value = newTask;
+            }).catch(() => {
+                alertError(i18n.t('alerts.task_update_error'))
             });
     } else {
-        void updateTask(task.value.id, { check_date: null, previous_check_date: task.value.check_date?.toISOString() })
+        updateTask(task.value.id, { check_date: null, previous_check_date: task.value.check_date?.toISOString() })
             .then((newTask) => {
                 task.value = newTask;
+            }).catch(() => {
+                alertError(i18n.t('alerts.task_update_error'))
             });
     }
 }

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);
 }