Feature/R-03 na registreren terug startscherm

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <login-overlay>
     <template #default="{ onLogout }">
+      <the-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 TheToastSection from "./components/TheToastSection.vue";
 
 const contactmoment = useContactmomentStore();
 </script>

src/components/TheToastSection.vue

@@ -0,0 +1,61 @@
+<template>
+  <!-- https://web.dev/building-a-toast-component/ -->
+  <transition-group name="toast" tag="section">
+    <output
+      v-for="{ text, type, key } in messages"
+      :key="key"
+      role="status"
+      :class="type"
+      >{{ text }}</output
+    >
+  </transition-group>
+</template>
+
+<script lang="ts" setup>
+import { useToast } from "@/stores/toast";
+const { messages } = useToast();
+</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;
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.toast-leave-active {
+  position: absolute;
+}
+</style>

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

src/stores/helpers.ts

@@ -0,0 +1,12 @@
+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>;
+}

src/stores/toast.ts

@@ -0,0 +1,42 @@
+import { defineStore } from "pinia";
+import { asReadOnly } from "./helpers";
+
+type MessageType = "confirm" | "error";
+
+interface ToastParams {
+  text: string;
+  type?: MessageType;
+  timeout?: number;
+}
+
+interface Message {
+  text: string;
+  type: MessageType;
+  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);
+    },
+  },
+});
+
+export const useToast = asReadOnly(storeDefinition);

src/views/AfhandelingView.vue

@@ -1,29 +1,22 @@
 <template>
   <main>
-    <utrecht-heading :level="1">Afhandeling</utrecht-heading>
+    <utrecht-heading :level="1" modelValue>Afhandeling</utrecht-heading>
     <router-link
-      v-if="contactmoment.contactmomentLoopt"
+      v-if="contactmomentStore.contactmomentLoopt"
       :to="{ name: 'contactmoment' }"
       >terug</router-link
     >
     <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"
         :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" />
@@ -39,52 +32,47 @@ 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";
 import SimpleSpinner from "@/components/SimpleSpinner.vue";
 import ApplicationMessage from "@/components/ApplicationMessage.vue";
+import { useToast } from "@/stores/toast";
+import { useRouter } from "vue-router";
 
-const contactmoment = useContactmomentStore();
+const { toast } = useToast();
+const router = useRouter();
+const contactmomentStore = 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
+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) => {
   saving.value = true;
 
   errorMessage.value = "";
 
-  contactmomentService
+  return contactmomentService
     .save(contactmoment)
-    .then((savedContactmoment) => {
-      // nu ook de zaken opslaan bij het contactmoment
-      zakenToevoegenAanContactmoment(savedContactmoment.id);
-
-      //status bijwekren
-      saved.value = true;
+    .then(zakenToevoegenAanContactmoment)
+    .then(() => {
+      //klaar
+      contactmomentStore.stop();
+      toast({ text: "Het contactmoment is opgeslagen" });
+      router.push("/");
     })
     .catch(() => {
       errorMessage.value =