qa: Handle errors with toaster

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,
+         })
      })
  }
 </script>

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,
+         })
      })
  }
 </script>

qa/ui/src/lib/components/Toaster.svelte

@@ -0,0 +1,22 @@
+<script>
+ import {
+     Toast,
+     ToastBody,
+     ToastHeader,
+ } from 'sveltestrap';
+
+ import { ToastsStore } from '$lib/stores/toasts';
+</script>
+
+<div class="toast-container position-fixed top-0 end-0 p-3">
+    {#each $ToastsStore.toasts as toast}
+        <Toast>
+            <ToastHeader toggle={toast.close} icon={toast.color}>
+                {#if toast.title}{toast.title}{:else}Gustus{/if}
+            </ToastHeader>
+            <ToastBody>
+                {toast.msg}
+            </ToastBody>
+        </Toast>
+    {/each}
+</div>

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

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);
 </script>
 
@@ -24,6 +30,7 @@
 
 <Header />
 <slot></slot>
+<Toaster />
 
 <style>
  :global(body) {