From 3d3a24959a6b1c44a14bffc678887dfc58c45ec1 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Thu, 21 Jul 2022 15:48:08 +0200
Subject: [PATCH 01/30] wip

---
 src/App.vue                     |  2 +
 src/components/ToastSection.vue | 82 +++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 src/components/ToastSection.vue

diff --git a/src/App.vue b/src/App.vue
index 641f751a1..501da10af 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <login-overlay>
     <template #default="{ onLogout }">
+      <toast-section />
       <header :class="{ contactmomentLoopt: contactmoment.contactmomentLoopt }">
         <global-search>
           <template #articleFooter="{ id, title }">
@@ -26,6 +27,7 @@ import { GlobalSearch } from "./features/search";
 import { useContactmomentStore } from "@/stores/contactmoment";
 import SearchFeedback from "./features/feedback/SearchFeedback.vue";
 import { logoutUrl, LoginOverlay } from "./features/login";
+import ToastSection from "./components/ToastSection.vue";
 
 const contactmoment = useContactmomentStore();
 </script>
diff --git a/src/components/ToastSection.vue b/src/components/ToastSection.vue
new file mode 100644
index 000000000..74b7d7ed4
--- /dev/null
+++ b/src/components/ToastSection.vue
@@ -0,0 +1,82 @@
+<template>
+  <!-- https://web.dev/building-a-toast-component/ -->
+  <section>
+    <output
+      v-for="({ message, type, show }, i) in messages"
+      :key="i"
+      role="status"
+      :class="[type, { show }]"
+      >{{ message }}</output
+    >
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, reactive } from "vue";
+type Message = {
+  message: string;
+  type: "confirm" | "error";
+};
+
+const messages = reactive<(Message & { show: boolean })[]>([]);
+
+function pushMessage(message: Message) {
+  const m = reactive({
+    ...message,
+    show: false,
+  });
+  messages.unshift(m);
+  nextTick(() => {
+    m.show = true;
+  });
+  setTimeout(() => {
+    m.show = false;
+    setTimeout(() => {
+      const index = messages.indexOf(m);
+      if (index !== -1) {
+        messages.splice(index, 1);
+      }
+    }, 1000);
+  }, 3000);
+}
+
+setInterval(() => {
+  pushMessage({
+    message: "Item added to cart",
+    type: "confirm",
+  });
+}, 6000);
+</script>
+
+<style scoped lang="scss">
+section {
+  position: fixed;
+  z-index: 1;
+  inset-block-end: 0;
+  inset-inline: 0;
+  padding-block-end: 5vh;
+  display: grid;
+  justify-items: center;
+  justify-content: center;
+  gap: 1vh;
+  pointer-events: none;
+}
+
+output {
+  max-inline-size: min(25ch, 90vw);
+  padding: var(--spacing-default);
+  border-radius: var(--radius-default);
+  font-size: 1rem;
+  color: white;
+  opacity: 0;
+  transition: opacity 500ms ease;
+
+  &.show {
+    opacity: 100;
+  }
+}
+
+.confirm {
+  background-color: var(--color-accent);
+}
+</style>

From 963ce692b8aa93f3ba3bae03c939ac04b0e24de5 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Thu, 21 Jul 2022 16:02:39 +0200
Subject: [PATCH 02/30] wip

---
 src/components/ToastSection.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/ToastSection.vue b/src/components/ToastSection.vue
index 74b7d7ed4..d29716c69 100644
--- a/src/components/ToastSection.vue
+++ b/src/components/ToastSection.vue
@@ -2,8 +2,8 @@
   <!-- https://web.dev/building-a-toast-component/ -->
   <section>
     <output
-      v-for="({ message, type, show }, i) in messages"
-      :key="i"
+      v-for="({ message, type, show, key }, i) in messages"
+      :key="key"
       role="status"
       :class="[type, { show }]"
       >{{ message }}</output
@@ -18,15 +18,16 @@ type Message = {
   type: "confirm" | "error";
 };
 
-const messages = reactive<(Message & { show: boolean })[]>([]);
+const messages = reactive<(Message & { show: boolean; key: number })[]>([]);
 
 function pushMessage(message: Message) {
   const m = reactive({
     ...message,
     show: false,
+    key: Math.random(),
   });
   messages.unshift(m);
-  nextTick(() => {
+  setTimeout(() => {
     m.show = true;
   });
   setTimeout(() => {
@@ -36,16 +37,16 @@ function pushMessage(message: Message) {
       if (index !== -1) {
         messages.splice(index, 1);
       }
-    }, 1000);
+    }, 250);
   }, 3000);
 }
 
 setInterval(() => {
   pushMessage({
-    message: "Item added to cart",
+    message: Math.random().toString(),
     type: "confirm",
   });
-}, 6000);
+}, 2000);
 </script>
 
 <style scoped lang="scss">

From 4af57d956f0d5998690033acfcc17ede07497149 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 09:06:13 +0200
Subject: [PATCH 03/30] wip

---
 src/App.vue                        |  4 +-
 src/components/TheToastSection.vue | 86 ++++++++++++++++++++++++++++++
 src/components/ToastSection.vue    | 83 ----------------------------
 3 files changed, 88 insertions(+), 85 deletions(-)
 create mode 100644 src/components/TheToastSection.vue
 delete mode 100644 src/components/ToastSection.vue

diff --git a/src/App.vue b/src/App.vue
index 501da10af..8d1dd2c09 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <login-overlay>
     <template #default="{ onLogout }">
-      <toast-section />
+      <the-toast-section />
       <header :class="{ contactmomentLoopt: contactmoment.contactmomentLoopt }">
         <global-search>
           <template #articleFooter="{ id, title }">
@@ -27,7 +27,7 @@ import { GlobalSearch } from "./features/search";
 import { useContactmomentStore } from "@/stores/contactmoment";
 import SearchFeedback from "./features/feedback/SearchFeedback.vue";
 import { logoutUrl, LoginOverlay } from "./features/login";
-import ToastSection from "./components/ToastSection.vue";
+import TheToastSection from "./components/TheToastSection.vue";
 
 const contactmoment = useContactmomentStore();
 </script>
diff --git a/src/components/TheToastSection.vue b/src/components/TheToastSection.vue
new file mode 100644
index 000000000..3ee62a0b5
--- /dev/null
+++ b/src/components/TheToastSection.vue
@@ -0,0 +1,86 @@
+<template>
+  <!-- https://web.dev/building-a-toast-component/ -->
+  <transition-group name="toast">
+    <section>
+      <output
+        v-for="({ message, type }, key) in messages"
+        :key="key"
+        role="status"
+        :class="type"
+        >{{ message }}</output
+      >
+    </section>
+  </transition-group>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from "vue";
+type Message = {
+  message: string;
+  type: "confirm" | "error";
+};
+
+const messages = reactive<Message[]>([]);
+
+function pushMessage(m: Message) {
+  messages.push(m);
+  setTimeout(() => {
+    const index = messages.indexOf(m);
+    if (index !== -1) {
+      messages.splice(index, 1);
+    }
+  }, 3000);
+}
+
+setInterval(() => {
+  pushMessage({
+    message: Math.random().toString(),
+    type: "confirm",
+  });
+}, 2000);
+</script>
+
+<style scoped lang="scss">
+section {
+  position: fixed;
+  z-index: 1;
+  inset-block-end: 0;
+  inset-inline: 0;
+  padding-block-end: 5vh;
+  display: grid;
+  justify-items: center;
+  justify-content: center;
+  gap: 1vh;
+  pointer-events: none;
+}
+
+output {
+  max-inline-size: min(25ch, 90vw);
+  padding: var(--spacing-default);
+  border-radius: var(--radius-default);
+  font-size: 1rem;
+  color: white;
+}
+
+.confirm {
+  background-color: var(--color-accent);
+}
+
+.toast-move, /* apply transition to moving elements */
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.5s ease;
+}
+
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+  // transform: translateX(30px);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.toast-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/src/components/ToastSection.vue b/src/components/ToastSection.vue
deleted file mode 100644
index d29716c69..000000000
--- a/src/components/ToastSection.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <!-- https://web.dev/building-a-toast-component/ -->
-  <section>
-    <output
-      v-for="({ message, type, show, key }, i) in messages"
-      :key="key"
-      role="status"
-      :class="[type, { show }]"
-      >{{ message }}</output
-    >
-  </section>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, reactive } from "vue";
-type Message = {
-  message: string;
-  type: "confirm" | "error";
-};
-
-const messages = reactive<(Message & { show: boolean; key: number })[]>([]);
-
-function pushMessage(message: Message) {
-  const m = reactive({
-    ...message,
-    show: false,
-    key: Math.random(),
-  });
-  messages.unshift(m);
-  setTimeout(() => {
-    m.show = true;
-  });
-  setTimeout(() => {
-    m.show = false;
-    setTimeout(() => {
-      const index = messages.indexOf(m);
-      if (index !== -1) {
-        messages.splice(index, 1);
-      }
-    }, 250);
-  }, 3000);
-}
-
-setInterval(() => {
-  pushMessage({
-    message: Math.random().toString(),
-    type: "confirm",
-  });
-}, 2000);
-</script>
-
-<style scoped lang="scss">
-section {
-  position: fixed;
-  z-index: 1;
-  inset-block-end: 0;
-  inset-inline: 0;
-  padding-block-end: 5vh;
-  display: grid;
-  justify-items: center;
-  justify-content: center;
-  gap: 1vh;
-  pointer-events: none;
-}
-
-output {
-  max-inline-size: min(25ch, 90vw);
-  padding: var(--spacing-default);
-  border-radius: var(--radius-default);
-  font-size: 1rem;
-  color: white;
-  opacity: 0;
-  transition: opacity 500ms ease;
-
-  &.show {
-    opacity: 100;
-  }
-}
-
-.confirm {
-  background-color: var(--color-accent);
-}
-</style>

From 8829d42c694884e6365d7bef6d082c7ef5ebcd23 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 11:09:39 +0200
Subject: [PATCH 04/30] cleanup

---
 package-lock.json                             | 35 +++++++++++----
 package.json                                  |  1 +
 src/components/TheToastSection.vue            | 45 +++++--------------
 .../ContactmomentAfhandelForm.vue             | 26 +----------
 src/stores/toast.ts                           | 43 ++++++++++++++++++
 src/views/AfhandelingView.vue                 | 22 ++++-----
 6 files changed, 90 insertions(+), 82 deletions(-)
 create mode 100644 src/stores/toast.ts

diff --git a/package-lock.json b/package-lock.json
index 8cf558c28..7752c6aec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@vueuse/core": "^8.6.0",
         "dompurify": "^2.3.8",
+        "nanoid": "^4.0.0",
         "pinia": "^2.0.14",
         "swrv": "^1.0.0-beta.8",
         "vue": "^3.2.33",
@@ -3365,14 +3366,14 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
+      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==",
       "bin": {
-        "nanoid": "bin/nanoid.cjs"
+        "nanoid": "bin/nanoid.js"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": "^14 || ^16 || >=18"
       }
     },
     "node_modules/natural-compare": {
@@ -3755,6 +3756,17 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -7451,9 +7463,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
+      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -7652,6 +7664,13 @@
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "3.3.4",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+          "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+        }
       }
     },
     "postcss-html": {
diff --git a/package.json b/package.json
index 4b7e41332..54fb8110b 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@vueuse/core": "^8.6.0",
     "dompurify": "^2.3.8",
+    "nanoid": "^4.0.0",
     "pinia": "^2.0.14",
     "swrv": "^1.0.0-beta.8",
     "vue": "^3.2.33",
diff --git a/src/components/TheToastSection.vue b/src/components/TheToastSection.vue
index 3ee62a0b5..41ca94f09 100644
--- a/src/components/TheToastSection.vue
+++ b/src/components/TheToastSection.vue
@@ -1,43 +1,19 @@
 <template>
   <!-- https://web.dev/building-a-toast-component/ -->
-  <transition-group name="toast">
-    <section>
-      <output
-        v-for="({ message, type }, key) in messages"
-        :key="key"
-        role="status"
-        :class="type"
-        >{{ message }}</output
-      >
-    </section>
+  <transition-group name="toast" tag="section">
+    <output
+      v-for="{ message, type, key } in messages"
+      :key="key"
+      role="status"
+      :class="type"
+      >{{ message }}</output
+    >
   </transition-group>
 </template>
 
 <script lang="ts" setup>
-import { reactive } from "vue";
-type Message = {
-  message: string;
-  type: "confirm" | "error";
-};
-
-const messages = reactive<Message[]>([]);
-
-function pushMessage(m: Message) {
-  messages.push(m);
-  setTimeout(() => {
-    const index = messages.indexOf(m);
-    if (index !== -1) {
-      messages.splice(index, 1);
-    }
-  }, 3000);
-}
-
-setInterval(() => {
-  pushMessage({
-    message: Math.random().toString(),
-    type: "confirm",
-  });
-}, 2000);
+import { useToast } from "@/stores/toast";
+const { messages } = useToast();
 </script>
 
 <style scoped lang="scss">
@@ -75,7 +51,6 @@ output {
 .toast-enter-from,
 .toast-leave-to {
   opacity: 0;
-  // transform: translateX(30px);
 }
 
 /* ensure leaving items are taken out of layout flow so that moving
diff --git a/src/features/contactmoment/ContactmomentAfhandelForm.vue b/src/features/contactmoment/ContactmomentAfhandelForm.vue
index b5b01be63..f09795f36 100644
--- a/src/features/contactmoment/ContactmomentAfhandelForm.vue
+++ b/src/features/contactmoment/ContactmomentAfhandelForm.vue
@@ -10,7 +10,7 @@
       contactmomentStore.contactmomentLoopt &&
       gespresResultatenServiceResult.state === 'success'
     "
-    @submit.prevent="submitDialog.reveal"
+    @submit.prevent="submit"
   >
     <fieldset class="utrecht-form-fieldset">
       <legend
@@ -99,26 +99,6 @@
       >
     </template>
   </modal-template>
-
-  <!-- Submit Dialog -->
-
-  <modal-template v-if="submitDialogRevealed">
-    <template #message>
-      <p>Weet u zeker dat u het contactmoment wilt opslaan?</p>
-    </template>
-    <template #menu>
-      <utrecht-button
-        modelValue
-        @click="submitDialog.cancel"
-        appearance="secondary-action-button"
-        >Nee</utrecht-button
-      >
-      <utrecht-button modelValue @click="submitDialog.confirm"
-        >Ja</utrecht-button
-      >
-    </template>
-    >
-  </modal-template>
 </template>
 
 <script lang="ts" setup>
@@ -141,9 +121,7 @@ const contactmomentStore = useContactmomentStore();
 const service = useContactmomentService();
 
 const cancelDialogRevealed = ref(false);
-const submitDialogRevealed = ref(false);
 const cancelDialog = useConfirmDialog(cancelDialogRevealed);
-const submitDialog = useConfirmDialog(submitDialogRevealed);
 const contactmoment: Contactmoment = reactive({
   vorigContactmoment: null,
   voorkeurskanaal: "",
@@ -169,8 +147,6 @@ const emit = defineEmits(["save"]);
 
 cancelDialog.onConfirm(() => annuleren());
 
-submitDialog.onConfirm(() => submit());
-
 // voorkeurs kanaal voorselecteren
 // organisatieId instellen, nb een medewerker kan voor meerdere organisaties tegelijk werken. vooralsnog is er geen mogelijkheid om een organisatie te selecteren. we kiezen altijd de eerste
 onMounted(() => (contactmoment.kanaal = user.preferences.kanaal));
diff --git a/src/stores/toast.ts b/src/stores/toast.ts
new file mode 100644
index 000000000..1fb79ed23
--- /dev/null
+++ b/src/stores/toast.ts
@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { readonly } from "vue";
+import { nanoid } from "nanoid";
+type MessageType = "confirm" | "error";
+
+type ToastParams = {
+  message: string;
+  type?: MessageType;
+  timeout?: number;
+};
+
+type Message = {
+  message: string;
+  type: MessageType;
+  key: string;
+};
+
+const useStore = defineStore("toast", {
+  state: () => ({
+    messages: [] as Array<Message>,
+  }),
+  actions: {
+    toast(message: ToastParams) {
+      const m = {
+        ...message,
+        type: message.type || "confirm",
+        key: nanoid(),
+      };
+      this.messages.push(m);
+      setTimeout(() => {
+        const index = this.messages.indexOf(m);
+        if (index !== -1) {
+          this.messages.splice(index, 1);
+        }
+      }, message.timeout || 3000);
+    },
+  },
+});
+
+export const useToast = () => {
+  const store = useStore();
+  return readonly(store);
+};
diff --git a/src/views/AfhandelingView.vue b/src/views/AfhandelingView.vue
index 2cdc0de62..989a6a70a 100644
--- a/src/views/AfhandelingView.vue
+++ b/src/views/AfhandelingView.vue
@@ -1,6 +1,6 @@
 <template>
   <main>
-    <utrecht-heading :level="1">Afhandeling</utrecht-heading>
+    <utrecht-heading :level="1" modelValue>Afhandeling</utrecht-heading>
     <router-link
       v-if="contactmoment.contactmomentLoopt"
       :to="{ name: 'contactmoment' }"
@@ -8,13 +8,6 @@
     >
     <section>
       <section v-if="saving"><simple-spinner></simple-spinner></section>
-
-      <application-message v-else-if="saved" messageType="confirm">
-        <span
-          >Het contactmoment is opgeslagen. Ga terug naar het
-          <router-link :to="{ name: 'home' }">startscherm</router-link></span
-        >
-      </application-message>
       <application-message
         v-else-if="errorMessage != ''"
         messageType="error"
@@ -45,19 +38,21 @@ import { useContactmomentService } from "@/features/contactmoment";
 import type { Contactmoment } from "@/features/contactmoment/types";
 import SimpleSpinner from "@/components/SimpleSpinner.vue";
 import ApplicationMessage from "@/components/ApplicationMessage.vue";
+import { useToast } from "@/stores/toast";
+import { useRouter } from "vue-router";
 
+const { toast } = useToast();
+const router = useRouter();
 const contactmoment = useContactmomentStore();
 const saving = ref(false);
 const service = useZaaksysteemService();
 const contactmomentService = useContactmomentService();
 const errorMessage = ref("");
-const saved = ref(false);
 
 const zakenToevoegenAanContactmoment = (id: string) => {
   contactmoment?.zaken.forEach((zaak) => {
     const data = {
-      contactmoment:
-        window.contactmomentenBaseUri + "/objectcontactmomenten/" + id, //todo de hele url zou uit de response van het aanmaken contactmoment moeten komen
+      contactmoment: window.gatewayBaseUri + "/api/objectcontactmomenten/" + id, //todo de hele url zou uit de response van het aanmaken contactmoment moeten komen
       object: zaak.url,
       objectType: "zaak",
     } as ContactmomentObject;
@@ -82,9 +77,8 @@ const saveContact = (contactmoment: Contactmoment) => {
     .then((savedContactmoment) => {
       // nu ook de zaken opslaan bij het contactmoment
       zakenToevoegenAanContactmoment(savedContactmoment.id);
-
-      //status bijwekren
-      saved.value = true;
+      toast({ message: "Het contactmoment is opgeslagen" });
+      router.push("/");
     })
     .catch(() => {
       errorMessage.value =

From cc8a8eb3a1b4e623992fb250e117cb32d1119102 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 11:19:35 +0200
Subject: [PATCH 05/30] cleanup

---
 src/stores/toast.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index 1fb79ed23..2012f500b 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -39,5 +39,8 @@ const useStore = defineStore("toast", {
 
 export const useToast = () => {
   const store = useStore();
-  return readonly(store);
+  return {
+    messages: readonly(store.messages),
+    toast: store.toast,
+  };
 };

From d15441bcf163a42099853ac7b91e3c2d691792cb Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 15:28:09 +0200
Subject: [PATCH 06/30] cleanup

---
 src/stores/toast.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index 2012f500b..f51c583c0 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -20,10 +20,10 @@ const useStore = defineStore("toast", {
     messages: [] as Array<Message>,
   }),
   actions: {
-    toast(message: ToastParams) {
+    toast(params: ToastParams) {
       const m = {
-        ...message,
-        type: message.type || "confirm",
+        message: params.message,
+        type: params.type || "confirm",
         key: nanoid(),
       };
       this.messages.push(m);
@@ -32,7 +32,7 @@ const useStore = defineStore("toast", {
         if (index !== -1) {
           this.messages.splice(index, 1);
         }
-      }, message.timeout || 3000);
+      }, params.timeout || 3000);
     },
   },
 });

From 2bc3f9712ecb6d661f3967491a18ba1834ded686 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 15:31:15 +0200
Subject: [PATCH 07/30] cleanup

---
 package-lock.json   | 17 -----------------
 package.json        |  1 -
 src/stores/toast.ts |  5 +++--
 3 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7752c6aec..1ee387add 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
       "dependencies": {
         "@vueuse/core": "^8.6.0",
         "dompurify": "^2.3.8",
-        "nanoid": "^4.0.0",
         "pinia": "^2.0.14",
         "swrv": "^1.0.0-beta.8",
         "vue": "^3.2.33",
@@ -3365,17 +3364,6 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
-    "node_modules/nanoid": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
-      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==",
-      "bin": {
-        "nanoid": "bin/nanoid.js"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18"
-      }
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -7462,11 +7450,6 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
-    "nanoid": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
-      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
-    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
diff --git a/package.json b/package.json
index 54fb8110b..4b7e41332 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
   "dependencies": {
     "@vueuse/core": "^8.6.0",
     "dompurify": "^2.3.8",
-    "nanoid": "^4.0.0",
     "pinia": "^2.0.14",
     "swrv": "^1.0.0-beta.8",
     "vue": "^3.2.33",
diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index f51c583c0..cdc92dada 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -12,19 +12,20 @@ type ToastParams = {
 type Message = {
   message: string;
   type: MessageType;
-  key: string;
+  key: number;
 };
 
 const useStore = defineStore("toast", {
   state: () => ({
     messages: [] as Array<Message>,
+    key: 0,
   }),
   actions: {
     toast(params: ToastParams) {
       const m = {
         message: params.message,
         type: params.type || "confirm",
-        key: nanoid(),
+        key: (this.key += 1),
       };
       this.messages.push(m);
       setTimeout(() => {

From 51473cece7dfb675d7ec628887eed9d073c23e13 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 15:34:02 +0200
Subject: [PATCH 08/30] cleanup

---
 src/components/TheToastSection.vue | 4 ++--
 src/stores/toast.ts                | 8 ++++----
 src/views/AfhandelingView.vue      | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/TheToastSection.vue b/src/components/TheToastSection.vue
index 41ca94f09..a9e45ec1e 100644
--- a/src/components/TheToastSection.vue
+++ b/src/components/TheToastSection.vue
@@ -2,11 +2,11 @@
   <!-- https://web.dev/building-a-toast-component/ -->
   <transition-group name="toast" tag="section">
     <output
-      v-for="{ message, type, key } in messages"
+      v-for="{ text, type, key } in messages"
       :key="key"
       role="status"
       :class="type"
-      >{{ message }}</output
+      >{{ text }}</output
     >
   </transition-group>
 </template>
diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index cdc92dada..e7b705623 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -1,16 +1,16 @@
 import { defineStore } from "pinia";
 import { readonly } from "vue";
-import { nanoid } from "nanoid";
+
 type MessageType = "confirm" | "error";
 
 type ToastParams = {
-  message: string;
+  text: string;
   type?: MessageType;
   timeout?: number;
 };
 
 type Message = {
-  message: string;
+  text: string;
   type: MessageType;
   key: number;
 };
@@ -23,7 +23,7 @@ const useStore = defineStore("toast", {
   actions: {
     toast(params: ToastParams) {
       const m = {
-        message: params.message,
+        text: params.text,
         type: params.type || "confirm",
         key: (this.key += 1),
       };
diff --git a/src/views/AfhandelingView.vue b/src/views/AfhandelingView.vue
index 989a6a70a..58eb7e885 100644
--- a/src/views/AfhandelingView.vue
+++ b/src/views/AfhandelingView.vue
@@ -77,7 +77,7 @@ const saveContact = (contactmoment: Contactmoment) => {
     .then((savedContactmoment) => {
       // nu ook de zaken opslaan bij het contactmoment
       zakenToevoegenAanContactmoment(savedContactmoment.id);
-      toast({ message: "Het contactmoment is opgeslagen" });
+      toast({ text: "Het contactmoment is opgeslagen" });
       router.push("/");
     })
     .catch(() => {

From 7bdd459d478d5ebbcf17b1a10c12a4c534fdfe3e Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 15:41:11 +0200
Subject: [PATCH 09/30] cleanup

---
 src/stores/toast.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index e7b705623..cbbd99e5e 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -1,5 +1,4 @@
 import { defineStore } from "pinia";
-import { readonly } from "vue";
 
 type MessageType = "confirm" | "error";
 
@@ -15,6 +14,13 @@ type Message = {
   key: number;
 };
 
+type ToastStore = {
+  messages: ReadonlyArray<Readonly<Message>>;
+  toast: (params: ToastParams) => void;
+};
+
+type UseToastStore = () => ToastStore;
+
 const useStore = defineStore("toast", {
   state: () => ({
     messages: [] as Array<Message>,
@@ -38,10 +44,4 @@ const useStore = defineStore("toast", {
   },
 });
 
-export const useToast = () => {
-  const store = useStore();
-  return {
-    messages: readonly(store.messages),
-    toast: store.toast,
-  };
-};
+export const useToast = useStore as UseToastStore;

From e6a811b8f5474cc436e54aa520a94bb7a9e8b169 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 16:08:47 +0200
Subject: [PATCH 10/30] cleanup

---
 src/stores/toast.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index cbbd99e5e..f0843d2ae 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -2,22 +2,22 @@ import { defineStore } from "pinia";
 
 type MessageType = "confirm" | "error";
 
-type ToastParams = {
+interface ToastParams {
   text: string;
   type?: MessageType;
   timeout?: number;
-};
+}
 
-type Message = {
-  text: string;
-  type: MessageType;
-  key: number;
-};
+interface Message {
+  readonly text: string;
+  readonly type: MessageType;
+  readonly key: number;
+}
 
-type ToastStore = {
-  messages: ReadonlyArray<Readonly<Message>>;
+interface ToastStore {
+  messages: readonly Message[];
   toast: (params: ToastParams) => void;
-};
+}
 
 type UseToastStore = () => ToastStore;
 

From 391fea7e2454bd819b7429533f755f11057d7e59 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 16:13:37 +0200
Subject: [PATCH 11/30] cleanup

---
 src/stores/toast.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index f0843d2ae..fecbdd502 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -15,8 +15,8 @@ interface Message {
 }
 
 interface ToastStore {
-  messages: readonly Message[];
-  toast: (params: ToastParams) => void;
+  readonly messages: readonly Message[];
+  readonly toast: (params: ToastParams) => void;
 }
 
 type UseToastStore = () => ToastStore;

From b9b069c3cc48bd1ef36667bd91264a0f181b4809 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 16:47:48 +0200
Subject: [PATCH 12/30] cleanup

---
 src/stores/toast.ts | 19 ++++++++-----------
 src/stores/types.ts |  9 +++++++++
 2 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 src/stores/types.ts

diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index fecbdd502..477bf8f31 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import type { ReadonlyStoreDefinition } from "./types";
 
 type MessageType = "confirm" | "error";
 
@@ -9,18 +10,11 @@ interface ToastParams {
 }
 
 interface Message {
-  readonly text: string;
-  readonly type: MessageType;
-  readonly key: number;
-}
-
-interface ToastStore {
-  readonly messages: readonly Message[];
-  readonly toast: (params: ToastParams) => void;
+  text: string;
+  type: MessageType;
+  key: number;
 }
 
-type UseToastStore = () => ToastStore;
-
 const useStore = defineStore("toast", {
   state: () => ({
     messages: [] as Array<Message>,
@@ -44,4 +38,7 @@ const useStore = defineStore("toast", {
   },
 });
 
-export const useToast = useStore as UseToastStore;
+export const useToast = useStore as ReadonlyStoreDefinition<
+  typeof useStore,
+  "messages" | "toast"
+>;
diff --git a/src/stores/types.ts b/src/stores/types.ts
new file mode 100644
index 000000000..c5e522ee9
--- /dev/null
+++ b/src/stores/types.ts
@@ -0,0 +1,9 @@
+import type { StoreDefinition } from "pinia";
+import type { DeepReadonly } from "vue";
+
+export type ReadonlyStoreDefinition<
+  T extends StoreDefinition,
+  K extends keyof ReturnType<T> = keyof ReturnType<T>
+> = T extends StoreDefinition<string, infer S, infer G, infer A>
+  ? () => Pick<DeepReadonly<S> & G & A, K>
+  : never;

From fbd523a559d09a07436c2f8fef67f04e3cb1e6ef Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 16:49:44 +0200
Subject: [PATCH 13/30] cleanup

---
 src/stores/toast.ts |  6 +++---
 src/stores/types.ts | 10 ++++------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index 477bf8f31..90b324a48 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -38,7 +38,7 @@ const useStore = defineStore("toast", {
   },
 });
 
-export const useToast = useStore as ReadonlyStoreDefinition<
-  typeof useStore,
-  "messages" | "toast"
+export const useToast = useStore as Omit<
+  ReadonlyStoreDefinition<typeof useStore>,
+  "key"
 >;
diff --git a/src/stores/types.ts b/src/stores/types.ts
index c5e522ee9..727ede518 100644
--- a/src/stores/types.ts
+++ b/src/stores/types.ts
@@ -1,9 +1,7 @@
 import type { StoreDefinition } from "pinia";
 import type { DeepReadonly } from "vue";
 
-export type ReadonlyStoreDefinition<
-  T extends StoreDefinition,
-  K extends keyof ReturnType<T> = keyof ReturnType<T>
-> = T extends StoreDefinition<string, infer S, infer G, infer A>
-  ? () => Pick<DeepReadonly<S> & G & A, K>
-  : never;
+export type ReadonlyStoreDefinition<T extends StoreDefinition> =
+  T extends StoreDefinition<string, infer S, infer G, infer A>
+    ? () => DeepReadonly<S> & G & A
+    : never;

From 8424a4bd5985664187c4aa544c90b4f50f452a51 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 17:02:39 +0200
Subject: [PATCH 14/30] cleanup

---
 src/stores/toast.ts |  4 ++--
 src/stores/types.ts | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index 90b324a48..5d0b7609e 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -38,7 +38,7 @@ const useStore = defineStore("toast", {
   },
 });
 
-export const useToast = useStore as Omit<
-  ReadonlyStoreDefinition<typeof useStore>,
+export const useToast = useStore as ReadonlyStoreDefinition<
+  typeof useStore,
   "key"
 >;
diff --git a/src/stores/types.ts b/src/stores/types.ts
index 727ede518..321fb3de5 100644
--- a/src/stores/types.ts
+++ b/src/stores/types.ts
@@ -1,7 +1,11 @@
 import type { StoreDefinition } from "pinia";
 import type { DeepReadonly } from "vue";
 
-export type ReadonlyStoreDefinition<T extends StoreDefinition> =
-  T extends StoreDefinition<string, infer S, infer G, infer A>
+export type ReadonlyStoreDefinition<
+  T extends StoreDefinition,
+  K extends keyof ReturnType<T> | never = never
+> = T extends StoreDefinition<string, infer S, infer G, infer A>
+  ? K extends never
     ? () => DeepReadonly<S> & G & A
-    : never;
+    : () => Omit<DeepReadonly<S> & G & A, K>
+  : never;

From d92f9078400dfe316b199d50ccad5a38d74ba3db Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 17:08:41 +0200
Subject: [PATCH 15/30] cleanup

---
 src/stores/toast.ts | 10 ++++------
 src/stores/types.ts | 10 +++-------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index 5d0b7609e..c015ed814 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -15,17 +15,18 @@ interface Message {
   key: number;
 }
 
+let key = 0;
+
 const useStore = defineStore("toast", {
   state: () => ({
     messages: [] as Array<Message>,
-    key: 0,
   }),
   actions: {
     toast(params: ToastParams) {
       const m = {
         text: params.text,
         type: params.type || "confirm",
-        key: (this.key += 1),
+        key: (key += 1),
       };
       this.messages.push(m);
       setTimeout(() => {
@@ -38,7 +39,4 @@ const useStore = defineStore("toast", {
   },
 });
 
-export const useToast = useStore as ReadonlyStoreDefinition<
-  typeof useStore,
-  "key"
->;
+export const useToast = useStore as ReadonlyStoreDefinition<typeof useStore>;
diff --git a/src/stores/types.ts b/src/stores/types.ts
index 321fb3de5..727ede518 100644
--- a/src/stores/types.ts
+++ b/src/stores/types.ts
@@ -1,11 +1,7 @@
 import type { StoreDefinition } from "pinia";
 import type { DeepReadonly } from "vue";
 
-export type ReadonlyStoreDefinition<
-  T extends StoreDefinition,
-  K extends keyof ReturnType<T> | never = never
-> = T extends StoreDefinition<string, infer S, infer G, infer A>
-  ? K extends never
+export type ReadonlyStoreDefinition<T extends StoreDefinition> =
+  T extends StoreDefinition<string, infer S, infer G, infer A>
     ? () => DeepReadonly<S> & G & A
-    : () => Omit<DeepReadonly<S> & G & A, K>
-  : never;
+    : never;

From 93c37bf6c283cfc5a9069209ad02c68cc159adbd Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 17:24:01 +0200
Subject: [PATCH 16/30] cleanup

---
 src/stores/helpers.ts | 13 +++++++++++++
 src/stores/toast.ts   |  4 ++--
 src/stores/types.ts   |  7 -------
 3 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 src/stores/helpers.ts
 delete mode 100644 src/stores/types.ts

diff --git a/src/stores/helpers.ts b/src/stores/helpers.ts
new file mode 100644
index 000000000..bcbd3dcb8
--- /dev/null
+++ b/src/stores/helpers.ts
@@ -0,0 +1,13 @@
+import type { StoreDefinition } from "pinia";
+import type { DeepReadonly } from "vue";
+
+type ReadonlyStoreDefinition<T extends StoreDefinition> =
+  T extends StoreDefinition<string, infer S, infer G, infer A>
+    ? () => DeepReadonly<S> & G & A
+    : never;
+
+export function asReadOnly<T extends StoreDefinition>(
+  storeDefinition: T
+): ReadonlyStoreDefinition<T> {
+  return storeDefinition as unknown as ReadonlyStoreDefinition<T>;
+}
diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index c015ed814..f2b618bfc 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import type { ReadonlyStoreDefinition } from "./types";
+import { asReadOnly } from "./helpers";
 
 type MessageType = "confirm" | "error";
 
@@ -39,4 +39,4 @@ const useStore = defineStore("toast", {
   },
 });
 
-export const useToast = useStore as ReadonlyStoreDefinition<typeof useStore>;
+export const useToast = asReadOnly(useStore);
diff --git a/src/stores/types.ts b/src/stores/types.ts
deleted file mode 100644
index 727ede518..000000000
--- a/src/stores/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { StoreDefinition } from "pinia";
-import type { DeepReadonly } from "vue";
-
-export type ReadonlyStoreDefinition<T extends StoreDefinition> =
-  T extends StoreDefinition<string, infer S, infer G, infer A>
-    ? () => DeepReadonly<S> & G & A
-    : never;

From 07db5cf8403d6a2d6c020d667cdb806abd30b09d Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 17:37:18 +0200
Subject: [PATCH 17/30] cleanup

---
 src/stores/helpers.ts | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/stores/helpers.ts b/src/stores/helpers.ts
index bcbd3dcb8..37bf38dee 100644
--- a/src/stores/helpers.ts
+++ b/src/stores/helpers.ts
@@ -1,13 +1,18 @@
-import type { StoreDefinition } from "pinia";
+import type { StoreDefinition, StateTree, _GettersTree } from "pinia";
 import type { DeepReadonly } from "vue";
 
-type ReadonlyStoreDefinition<T extends StoreDefinition> =
-  T extends StoreDefinition<string, infer S, infer G, infer A>
-    ? () => DeepReadonly<S> & G & A
-    : never;
+type ReadonlyStoreDefinition<
+  S extends StateTree,
+  G extends _GettersTree<S>,
+  A
+> = () => DeepReadonly<S> & G & A;
 
-export function asReadOnly<T extends StoreDefinition>(
-  storeDefinition: T
-): ReadonlyStoreDefinition<T> {
-  return storeDefinition as unknown as ReadonlyStoreDefinition<T>;
+/**
+ * Cast a store definition as readonly, so the only way to modify state is using mutations
+ * @param storeDefinition
+ */
+export function asReadOnly<S extends StateTree, G extends _GettersTree<S>, A>(
+  storeDefinition: StoreDefinition<string, S, G, A>
+) {
+  return storeDefinition as ReadonlyStoreDefinition<S, G, A>;
 }

From 47c1fdf84d4ba9a3608d3addff67ee189600f674 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 17:38:33 +0200
Subject: [PATCH 18/30] cleanup

---
 src/stores/helpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/helpers.ts b/src/stores/helpers.ts
index 37bf38dee..cf1dfe200 100644
--- a/src/stores/helpers.ts
+++ b/src/stores/helpers.ts
@@ -8,7 +8,7 @@ type ReadonlyStoreDefinition<
 > = () => DeepReadonly<S> & G & A;
 
 /**
- * Cast a store definition as readonly, so the only way to modify state is using mutations
+ * Cast a store definition as readonly, so the only way to modify state is by using actions
  * @param storeDefinition
  */
 export function asReadOnly<S extends StateTree, G extends _GettersTree<S>, A>(

From dbc5d04115f8bedc2beb4e07bd5861a8d4b136b2 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 17:40:50 +0200
Subject: [PATCH 19/30] cleanup

---
 src/stores/helpers.ts | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/stores/helpers.ts b/src/stores/helpers.ts
index cf1dfe200..b29d691d5 100644
--- a/src/stores/helpers.ts
+++ b/src/stores/helpers.ts
@@ -1,18 +1,12 @@
-import type { StoreDefinition, StateTree, _GettersTree } from "pinia";
+import type { StoreDefinition } from "pinia";
 import type { DeepReadonly } from "vue";
 
-type ReadonlyStoreDefinition<
-  S extends StateTree,
-  G extends _GettersTree<S>,
-  A
-> = () => DeepReadonly<S> & G & A;
-
 /**
  * Cast a store definition as readonly, so the only way to modify state is by using actions
  * @param storeDefinition
  */
-export function asReadOnly<S extends StateTree, G extends _GettersTree<S>, A>(
+export function asReadOnly<S, G, A>(
   storeDefinition: StoreDefinition<string, S, G, A>
 ) {
-  return storeDefinition as ReadonlyStoreDefinition<S, G, A>;
+  return storeDefinition as () => DeepReadonly<S> & G & A;
 }

From 0816f5bbbe1f473b8c4ea02a7db61d24e4d35fe2 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 17:44:55 +0200
Subject: [PATCH 20/30] cleanup

---
 src/stores/toast.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index f2b618bfc..9ef6030d1 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -17,7 +17,7 @@ interface Message {
 
 let key = 0;
 
-const useStore = defineStore("toast", {
+const storeDefinition = defineStore("toast", {
   state: () => ({
     messages: [] as Array<Message>,
   }),
@@ -39,4 +39,4 @@ const useStore = defineStore("toast", {
   },
 });
 
-export const useToast = asReadOnly(useStore);
+export const useToast = asReadOnly(storeDefinition);

From a3f391bf6985eca86f5b91e90ed80632c5081032 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 17:47:05 +0200
Subject: [PATCH 21/30] cleanup

---
 src/stores/helpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/helpers.ts b/src/stores/helpers.ts
index b29d691d5..aad5def5a 100644
--- a/src/stores/helpers.ts
+++ b/src/stores/helpers.ts
@@ -8,5 +8,5 @@ import type { DeepReadonly } from "vue";
 export function asReadOnly<S, G, A>(
   storeDefinition: StoreDefinition<string, S, G, A>
 ) {
-  return storeDefinition as () => DeepReadonly<S> & G & A;
+  return storeDefinition as () => DeepReadonly<S & G & A>;
 }

From 7745c0bd8bb49e7e694ec08ae740b839bfbaaf18 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 18:04:38 +0200
Subject: [PATCH 22/30] cleanup

---
 src/views/AfhandelingView.vue | 39 +++++++++++++++--------------------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/views/AfhandelingView.vue b/src/views/AfhandelingView.vue
index 58eb7e885..e58745bd8 100644
--- a/src/views/AfhandelingView.vue
+++ b/src/views/AfhandelingView.vue
@@ -2,7 +2,7 @@
   <main>
     <utrecht-heading :level="1" modelValue>Afhandeling</utrecht-heading>
     <router-link
-      v-if="contactmoment.contactmomentLoopt"
+      v-if="contactmomentStore.contactmomentLoopt"
       :to="{ name: 'contactmoment' }"
       >terug</router-link
     >
@@ -14,9 +14,9 @@
         :message="errorMessage"
       ></application-message>
 
-      <template v-else-if="contactmoment.contactmomentLoopt">
-        <section v-if="contactmoment.zaken.length > 0">
-          <zaken-overzicht :zaken="contactmoment.zaken"></zaken-overzicht>
+      <template v-else-if="contactmomentStore.contactmomentLoopt">
+        <section v-if="contactmomentStore.zaken.length > 0">
+          <zaken-overzicht :zaken="contactmomentStore.zaken"></zaken-overzicht>
         </section>
         <section>
           <contactmoment-afhandel-form @save="saveContact" />
@@ -43,28 +43,22 @@ import { useRouter } from "vue-router";
 
 const { toast } = useToast();
 const router = useRouter();
-const contactmoment = useContactmomentStore();
+const contactmomentStore = useContactmomentStore();
 const saving = ref(false);
 const service = useZaaksysteemService();
 const contactmomentService = useContactmomentService();
 const errorMessage = ref("");
 
-const zakenToevoegenAanContactmoment = (id: string) => {
-  contactmoment?.zaken.forEach((zaak) => {
-    const data = {
-      contactmoment: window.gatewayBaseUri + "/api/objectcontactmomenten/" + id, //todo de hele url zou uit de response van het aanmaken contactmoment moeten komen
+const zakenToevoegenAanContactmoment = (contactMoment: { url: string }) => {
+  const promises = contactmomentStore?.zaken.map((zaak) =>
+    service.saveZaak({
+      contactmoment: contactMoment.url,
       object: zaak.url,
       objectType: "zaak",
-    } as ContactmomentObject;
-
-    service.saveZaak(data).catch(() => {
-      errorMessage.value =
-        "Er is een fout opgetreden bij het toevoegen van een zaak bij het contactmoment";
-    });
-  });
+    })
+  );
 
-  //klaar
-  contactmoment.stop();
+  return Promise.all(promises ?? []);
 };
 
 const saveContact = (contactmoment: Contactmoment) => {
@@ -72,11 +66,12 @@ const saveContact = (contactmoment: Contactmoment) => {
 
   errorMessage.value = "";
 
-  contactmomentService
+  return contactmomentService
     .save(contactmoment)
-    .then((savedContactmoment) => {
-      // nu ook de zaken opslaan bij het contactmoment
-      zakenToevoegenAanContactmoment(savedContactmoment.id);
+    .then(zakenToevoegenAanContactmoment)
+    .then(() => {
+      //klaar
+      contactmomentStore.stop();
       toast({ text: "Het contactmoment is opgeslagen" });
       router.push("/");
     })

From 7eef7533dbda9d38f30defd4cc4382410580bf0b Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Mon, 25 Jul 2022 18:04:57 +0200
Subject: [PATCH 23/30] cleanup

---
 src/views/AfhandelingView.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/AfhandelingView.vue b/src/views/AfhandelingView.vue
index e58745bd8..119c383c5 100644
--- a/src/views/AfhandelingView.vue
+++ b/src/views/AfhandelingView.vue
@@ -32,7 +32,6 @@ import { ContactmomentAfhandelForm } from "@/features/contactmoment";
 import { useContactmomentStore } from "@/stores/contactmoment";
 import ZakenOverzicht from "@/features/zaaksysteem/ZakenOverzicht.vue";
 import { ref } from "vue";
-import type { ContactmomentObject } from "@/features/zaaksysteem/types";
 import { useZaaksysteemService } from "@/features/zaaksysteem/service";
 import { useContactmomentService } from "@/features/contactmoment";
 import type { Contactmoment } from "@/features/contactmoment/types";

From e3529ec8922d741461bed6b7ddb5170ef1c5e7ee Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Tue, 26 Jul 2022 08:52:31 +0200
Subject: [PATCH 24/30] cleanup

---
 package-lock.json | 36 +++++++++++++++++-------------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1ee387add..6bff5217a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3364,6 +3364,17 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -3744,17 +3755,6 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
-    "node_modules/postcss/node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -7450,6 +7450,11 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -7647,13 +7652,6 @@
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
-      },
-      "dependencies": {
-        "nanoid": {
-          "version": "3.3.4",
-          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-          "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
-        }
       }
     },
     "postcss-html": {
@@ -8643,4 +8641,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file

From 2ae72f93126e760ef8ad0e0c23758d919a379152 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Tue, 26 Jul 2022 08:53:48 +0200
Subject: [PATCH 25/30] cleanup

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 6bff5217a..8cf558c28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8641,4 +8641,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}

From 1eb874aa8a7db85edb2a303eb50a8c489b18e06e Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Tue, 26 Jul 2022 11:26:58 +0200
Subject: [PATCH 26/30] feedback

---
 src/views/AfhandelingView.vue | 39 +++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/views/AfhandelingView.vue b/src/views/AfhandelingView.vue
index 119c383c5..78f8bbbe2 100644
--- a/src/views/AfhandelingView.vue
+++ b/src/views/AfhandelingView.vue
@@ -2,7 +2,7 @@
   <main>
     <utrecht-heading :level="1" modelValue>Afhandeling</utrecht-heading>
     <router-link
-      v-if="contactmomentStore.contactmomentLoopt"
+      v-if="contactmoment.contactmomentLoopt"
       :to="{ name: 'contactmoment' }"
       >terug</router-link
     >
@@ -14,9 +14,9 @@
         :message="errorMessage"
       ></application-message>
 
-      <template v-else-if="contactmomentStore.contactmomentLoopt">
-        <section v-if="contactmomentStore.zaken.length > 0">
-          <zaken-overzicht :zaken="contactmomentStore.zaken"></zaken-overzicht>
+      <template v-else-if="contactmoment.contactmomentLoopt">
+        <section v-if="contactmoment.zaken.length > 0">
+          <zaken-overzicht :zaken="contactmoment.zaken"></zaken-overzicht>
         </section>
         <section>
           <contactmoment-afhandel-form @save="saveContact" />
@@ -39,25 +39,32 @@ import SimpleSpinner from "@/components/SimpleSpinner.vue";
 import ApplicationMessage from "@/components/ApplicationMessage.vue";
 import { useToast } from "@/stores/toast";
 import { useRouter } from "vue-router";
+import type { ContactmomentObject } from "@/features/zaaksysteem/types";
 
 const { toast } = useToast();
 const router = useRouter();
-const contactmomentStore = useContactmomentStore();
+const contactmoment = useContactmomentStore();
 const saving = ref(false);
 const service = useZaaksysteemService();
 const contactmomentService = useContactmomentService();
 const errorMessage = ref("");
 
-const zakenToevoegenAanContactmoment = (contactMoment: { url: string }) => {
-  const promises = contactmomentStore?.zaken.map((zaak) =>
-    service.saveZaak({
-      contactmoment: contactMoment.url,
+const zakenToevoegenAanContactmoment = (id: string) => {
+  contactmoment?.zaken.forEach((zaak) => {
+    const data = {
+      contactmoment: window.gatewayBaseUri + "/api/objectcontactmomenten/" + id, //todo de hele url zou uit de response van het aanmaken contactmoment moeten komen
       object: zaak.url,
       objectType: "zaak",
-    })
-  );
+    } as ContactmomentObject;
 
-  return Promise.all(promises ?? []);
+    service.saveZaak(data).catch(() => {
+      errorMessage.value =
+        "Er is een fout opgetreden bij het toevoegen van een zaak bij het contactmoment";
+    });
+
+    //klaar
+    contactmoment.stop();
+  });
 };
 
 const saveContact = (contactmoment: Contactmoment) => {
@@ -67,10 +74,10 @@ const saveContact = (contactmoment: Contactmoment) => {
 
   return contactmomentService
     .save(contactmoment)
-    .then(zakenToevoegenAanContactmoment)
-    .then(() => {
-      //klaar
-      contactmomentStore.stop();
+    .then((savedContactmoment) => {
+      // nu ook de zaken opslaan bij het contactmoment
+      zakenToevoegenAanContactmoment(savedContactmoment.id);
+
       toast({ text: "Het contactmoment is opgeslagen" });
       router.push("/");
     })

From 92450f577ac7403a2969188d06c2206d0f779f49 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Tue, 26 Jul 2022 11:30:23 +0200
Subject: [PATCH 27/30] cleanup

---
 src/views/AfhandelingView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/AfhandelingView.vue b/src/views/AfhandelingView.vue
index 78f8bbbe2..8dac59f05 100644
--- a/src/views/AfhandelingView.vue
+++ b/src/views/AfhandelingView.vue
@@ -61,10 +61,10 @@ const zakenToevoegenAanContactmoment = (id: string) => {
       errorMessage.value =
         "Er is een fout opgetreden bij het toevoegen van een zaak bij het contactmoment";
     });
-
-    //klaar
-    contactmoment.stop();
   });
+
+  //klaar
+  contactmoment.stop();
 };
 
 const saveContact = (contactmoment: Contactmoment) => {

From 0e3f1fb01cf968665e731def9894a5cd06babf35 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Tue, 26 Jul 2022 11:31:23 +0200
Subject: [PATCH 28/30] cleanup

---
 src/views/AfhandelingView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/AfhandelingView.vue b/src/views/AfhandelingView.vue
index 8dac59f05..003b93354 100644
--- a/src/views/AfhandelingView.vue
+++ b/src/views/AfhandelingView.vue
@@ -32,6 +32,7 @@ import { ContactmomentAfhandelForm } from "@/features/contactmoment";
 import { useContactmomentStore } from "@/stores/contactmoment";
 import ZakenOverzicht from "@/features/zaaksysteem/ZakenOverzicht.vue";
 import { ref } from "vue";
+import type { ContactmomentObject } from "@/features/zaaksysteem/types";
 import { useZaaksysteemService } from "@/features/zaaksysteem/service";
 import { useContactmomentService } from "@/features/contactmoment";
 import type { Contactmoment } from "@/features/contactmoment/types";
@@ -39,7 +40,6 @@ import SimpleSpinner from "@/components/SimpleSpinner.vue";
 import ApplicationMessage from "@/components/ApplicationMessage.vue";
 import { useToast } from "@/stores/toast";
 import { useRouter } from "vue-router";
-import type { ContactmomentObject } from "@/features/zaaksysteem/types";
 
 const { toast } = useToast();
 const router = useRouter();

From f5c5820f9a5499dd364d17636465d3c818356728 Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Tue, 26 Jul 2022 11:31:57 +0200
Subject: [PATCH 29/30] cleanup

---
 src/views/AfhandelingView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/AfhandelingView.vue b/src/views/AfhandelingView.vue
index 003b93354..18255ee8e 100644
--- a/src/views/AfhandelingView.vue
+++ b/src/views/AfhandelingView.vue
@@ -72,7 +72,7 @@ const saveContact = (contactmoment: Contactmoment) => {
 
   errorMessage.value = "";
 
-  return contactmomentService
+  contactmomentService
     .save(contactmoment)
     .then((savedContactmoment) => {
       // nu ook de zaken opslaan bij het contactmoment

From 7a2fb86aff7ee4d4c760848b484dd0aa1ca32f0e Mon Sep 17 00:00:00 2001
From: Felix Cornelissen <felix.cornelissen@icatt.nl>
Date: Tue, 26 Jul 2022 12:19:26 +0200
Subject: [PATCH 30/30] feedback

---
 src/components/TheToastSection.vue |  3 +-
 src/stores/helpers.ts              | 12 --------
 src/stores/toast.ts                | 48 +++++++++++++-----------------
 src/views/AfhandelingView.vue      |  3 +-
 4 files changed, 23 insertions(+), 43 deletions(-)
 delete mode 100644 src/stores/helpers.ts

diff --git a/src/components/TheToastSection.vue b/src/components/TheToastSection.vue
index a9e45ec1e..f15aedb6a 100644
--- a/src/components/TheToastSection.vue
+++ b/src/components/TheToastSection.vue
@@ -12,8 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useToast } from "@/stores/toast";
-const { messages } = useToast();
+import { messages } from "@/stores/toast";
 </script>
 
 <style scoped lang="scss">
diff --git a/src/stores/helpers.ts b/src/stores/helpers.ts
deleted file mode 100644
index aad5def5a..000000000
--- a/src/stores/helpers.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { StoreDefinition } from "pinia";
-import type { DeepReadonly } from "vue";
-
-/**
- * Cast a store definition as readonly, so the only way to modify state is by using actions
- * @param storeDefinition
- */
-export function asReadOnly<S, G, A>(
-  storeDefinition: StoreDefinition<string, S, G, A>
-) {
-  return storeDefinition as () => DeepReadonly<S & G & A>;
-}
diff --git a/src/stores/toast.ts b/src/stores/toast.ts
index 9ef6030d1..42e6a75f9 100644
--- a/src/stores/toast.ts
+++ b/src/stores/toast.ts
@@ -1,5 +1,4 @@
-import { defineStore } from "pinia";
-import { asReadOnly } from "./helpers";
+import { reactive } from "vue";
 
 type MessageType = "confirm" | "error";
 
@@ -10,33 +9,28 @@ interface ToastParams {
 }
 
 interface Message {
-  text: string;
-  type: MessageType;
-  key: number;
+  readonly text: string;
+  readonly type: MessageType;
+  readonly key: number;
 }
 
 let key = 0;
 
-const storeDefinition = defineStore("toast", {
-  state: () => ({
-    messages: [] as Array<Message>,
-  }),
-  actions: {
-    toast(params: ToastParams) {
-      const m = {
-        text: params.text,
-        type: params.type || "confirm",
-        key: (key += 1),
-      };
-      this.messages.push(m);
-      setTimeout(() => {
-        const index = this.messages.indexOf(m);
-        if (index !== -1) {
-          this.messages.splice(index, 1);
-        }
-      }, params.timeout || 3000);
-    },
-  },
-});
+const _messages = reactive<Message[]>([]);
+
+export const messages = _messages as readonly Message[];
 
-export const useToast = asReadOnly(storeDefinition);
+export function toast(params: ToastParams) {
+  const m = {
+    text: params.text,
+    type: params.type || "confirm",
+    key: (key += 1),
+  };
+  _messages.push(m);
+  setTimeout(() => {
+    const index = _messages.indexOf(m);
+    if (index !== -1) {
+      _messages.splice(index, 1);
+    }
+  }, params.timeout || 3000);
+}
diff --git a/src/views/AfhandelingView.vue b/src/views/AfhandelingView.vue
index 18255ee8e..db24384cf 100644
--- a/src/views/AfhandelingView.vue
+++ b/src/views/AfhandelingView.vue
@@ -38,10 +38,9 @@ import { useContactmomentService } from "@/features/contactmoment";
 import type { Contactmoment } from "@/features/contactmoment/types";
 import SimpleSpinner from "@/components/SimpleSpinner.vue";
 import ApplicationMessage from "@/components/ApplicationMessage.vue";
-import { useToast } from "@/stores/toast";
+import { toast } from "@/stores/toast";
 import { useRouter } from "vue-router";
 
-const { toast } = useToast();
 const router = useRouter();
 const contactmoment = useContactmomentStore();
 const saving = ref(false);