diff --git a/qa/ui/src/lib/components/QAItem.svelte b/qa/ui/src/lib/components/QAItem.svelte index d52b96da..83c9a121 100644 --- a/qa/ui/src/lib/components/QAItem.svelte +++ b/qa/ui/src/lib/components/QAItem.svelte @@ -17,6 +17,7 @@ import DateFormat from '$lib/components/DateFormat.svelte'; import { getQAComments, QAComment } from '$lib/qa'; import { auth } from '$lib/stores/auth'; + import { ToastsStore } from '$lib/stores/toasts'; import { viewIdx } from '$lib/stores/todo'; const dispatch = createEventDispatcher(); @@ -68,12 +69,21 @@ query_commentsP = getQAComments(query_selected.id); newComment = new QAComment(); submissionInProgress = false; + }).catch((err) => { + submissionInProgress = false; + ToastsStore.addErrorToast({ + msg: err, + }) }) } function updateQA() { query_selected.save().then(() => { dispatch("update-queries"); + }).catch((err) => { + ToastsStore.addErrorToast({ + msg: err, + }) }) } @@ -81,6 +91,10 @@ query_selected.solved = new Date(); query_selected.save().then(() => { dispatch("update-queries"); + }).catch((err) => { + ToastsStore.addErrorToast({ + msg: err, + }) }) } @@ -88,6 +102,10 @@ query_selected.solved = null; query_selected.save().then(() => { dispatch("update-queries"); + }).catch((err) => { + ToastsStore.addErrorToast({ + msg: err, + }) }) } @@ -95,6 +113,10 @@ query_selected.closed = new Date(); query_selected.save().then(() => { dispatch("update-queries"); + }).catch((err) => { + ToastsStore.addErrorToast({ + msg: err, + }) }) } @@ -102,6 +124,10 @@ query_selected.delete().then(() => { query_selected = null; dispatch("update-queries"); + }).catch((err) => { + ToastsStore.addErrorToast({ + msg: err, + }) }) } @@ -117,6 +143,10 @@ function deleteComment(comment) { comment.delete(query_selected.id).then(() => { dispatch("update-queries"); + }).catch((err) => { + ToastsStore.addErrorToast({ + msg: err, + }) }) } diff --git a/qa/ui/src/lib/components/QANewItem.svelte b/qa/ui/src/lib/components/QANewItem.svelte index e3268e1b..4a4d6300 100644 --- a/qa/ui/src/lib/components/QANewItem.svelte +++ b/qa/ui/src/lib/components/QANewItem.svelte @@ -6,7 +6,8 @@ Spinner, } from 'sveltestrap'; - import { QAQuery, QAStates } from '$lib/qa.js'; + import { QAQuery, QAStates } from '$lib/qa'; + import { ToastsStore } from '$lib/stores/toasts'; const dispatch = createEventDispatcher(); @@ -22,6 +23,11 @@ dispatch("new-query"); newQuery = new QAQuery(); creationInProgress = false; + }).catch((err) => { + creationInProgress = false; + ToastsStore.addErrorToast({ + msg: err, + }) }) } diff --git a/qa/ui/src/lib/components/Toaster.svelte b/qa/ui/src/lib/components/Toaster.svelte new file mode 100644 index 00000000..d93c4846 --- /dev/null +++ b/qa/ui/src/lib/components/Toaster.svelte @@ -0,0 +1,22 @@ + + +
+ {#each $ToastsStore.toasts as toast} + + + {#if toast.title}{toast.title}{:else}Gustus{/if} + + + {toast.msg} + + + {/each} +
diff --git a/qa/ui/src/lib/stores/toasts.js b/qa/ui/src/lib/stores/toasts.js new file mode 100644 index 00000000..f6e4d146 --- /dev/null +++ b/qa/ui/src/lib/stores/toasts.js @@ -0,0 +1,41 @@ +import { writable } from 'svelte/store'; + +function createToastsStore() { + const { subscribe, update } = writable({toasts: []}); + + const addToast = (o) => { + o.timestamp = new Date(); + + o.close = () => { + update((i) => { + i.toasts = i.toasts.filter((j) => { + return !(j.title === o.title && j.msg === o.msg && j.timestamp === o.timestamp) + }); + return i; + }); + } + + update((i) => { + i.toasts.unshift(o); + return i; + }); + + o.cancel = setTimeout(o.close, o.dismiss?o.dismiss:5000); + }; + + const addErrorToast = (o) => { + if (!o.title) o.title = 'Une erreur est survenue !'; + if (!o.color) o.color = 'danger'; + + return addToast(o); + }; + + return { + subscribe, + addToast, + addErrorToast, + }; + +} + +export const ToastsStore = createToastsStore(); diff --git a/qa/ui/src/routes/+layout.svelte b/qa/ui/src/routes/+layout.svelte index a7dd5594..3b27ac26 100644 --- a/qa/ui/src/routes/+layout.svelte +++ b/qa/ui/src/routes/+layout.svelte @@ -8,13 +8,19 @@ } from 'sveltestrap'; import Header from '$lib/components/Header.svelte'; + import Toaster from '$lib/components/Toaster.svelte'; import { version } from '$lib/stores/auth'; + import { ToastsStore } from '$lib/stores/toasts'; import { view } from '$lib/stores/todo'; version.refresh(); setInterval(version.refresh, 30000); - view.refresh(); + view.refresh().catch((err) => { + ToastsStore.addErrorToast({ + msg: err, + }) + }); setInterval(view.refresh, 60000); @@ -24,6 +30,7 @@
+