feat: toasts

resources/lang/en.json

@@ -58,5 +58,16 @@
         "last_checked": "Show last checked time",
         "next_reset": "Show next reset time",
         "separate_completed": "Separate completed tasks below"
+    },
+    "alerts": {
+        "task_updated": "Task updated",
+        "task_update_error": "Could not update task",
+        "task_refresh_error": "Could not refresh tasks",
+        "task_fetch_error": "Could not fetch tasks",
+        "task_created": "Task created",
+        "task_create_error": "Could not create task",
+        "task_cloned": "Task cloned",
+        "task_deleted": "Task deleted",
+        "task_delete_error": "Could not delete task"
     }
 }

resources/lang/fr.json

@@ -58,5 +58,16 @@
         "last_checked": "Afficher la dernière completion",
         "next_reset": "Afficher la prochaine réinitialisation",
         "separate_completed": "Séparer les tâches complétées plus bas"
+    },
+    "alerts": {
+        "task_updated": "Tâche mise a jour",
+        "task_update_error": "Impossible de mettre à jour la tâche",
+        "task_refresh_error": "Impossible de rafraîchir la liste",
+        "task_fetch_error": "Impossible de récuperer la liste",
+        "task_created": "Tâche crée",
+        "task_create_error": "Impossible de créer la tâche",
+        "task_cloned": "Tâche clonée",
+        "task_deleted": "Tâche supprimée",
+        "task_delete_error": "Impossible de supprimer la tâche"
     }
 }

resources/ts/App.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted, defineAsyncComponent } from "vue";
 const TaskList = defineAsyncComponent(() => import("@/components/TaskList.vue"));
 const PageFooter = defineAsyncComponent(() => import("@/components/PageFooter.vue"));
+const AlertsContainer = defineAsyncComponent(() => import("@/components/AlertsContainer.vue"));
 
 const visible = ref<boolean>(false);
 
@@ -23,5 +24,6 @@ onMounted(() => {
             </div>
         </div>
         <page-footer />
+        <alerts-container />
     </main>
 </template>

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

resources/ts/main.ts

@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import { createI18n } from "vue-i18n";
 import App from "@/App.vue";
 import { getLang } from "@/lib/lang";
+import { createPinia } from "pinia";
 const en = await import("@lang/en.json");
 const fr = await import("@lang/fr.json");
 
@@ -14,4 +15,6 @@ const i18n = createI18n({
   },
 });
 
-createApp(App).use(i18n).mount("#app");
+const pinia = createPinia();
+
+createApp(App).use(i18n).use(pinia).mount("#app");

resources/ts/stores/alerts.ts

@@ -0,0 +1,29 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import type { Alert } from '@/types';
+
+export const useAlertStore = defineStore('alerts', () => {
+    const alerts = ref<Alert[]>([]);
+
+    function addAlert(message: string, type: 'info' | 'success' | 'warning' | 'error', seconds: number) {
+        alerts.value.push({ message, type, created: new Date(), seconds });
+    }
+
+    function alertSuccess(message: string, seconds = 2) {
+        addAlert(message, 'success', seconds);
+    }
+
+    function alertInfo(message: string, seconds = 3) {
+        addAlert(message, 'info', seconds);
+    }
+
+    function alertWarning(message: string, seconds = 4) {
+        addAlert(message, 'warning', seconds);
+    }
+
+    function alertError(message: string, seconds = 5) {
+        addAlert(message, 'error', seconds);
+    }
+
+    return { alerts, alertSuccess, alertInfo, alertWarning, alertError };
+})

resources/ts/types.ts

@@ -39,3 +39,10 @@ export interface TaskUpdateData {
     check_date?: string | null;
     previous_check_date?: string | null;
 }
+
+export interface Alert {
+    message: string
+    type: 'info' | 'success' | 'warning' | 'error'
+    created: Date
+    seconds: number
+}