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>