Merge pull request #199 from Klantinteractie-Servicesysteem/feature/R…

…-03_na_registreren_terug_startscherm Feature/R-03 na registreren terug startscherm
Klantinteractie-Servicesysteem · Jul 26, 2022 · b2f7af2 · b2f7af2
2 parents b9287e2 + 6687afa
commit b2f7af2
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 38 deletions.
diff --git a/src/App.vue b/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>

diff --git a/src/components/TheToastSection.vue b/src/components/TheToastSection.vue
@@ -0,0 +1,60 @@
+<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 { messages } from "@/stores/toast";
+</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>
diff --git 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
@@ -0,0 +1,36 @@
+import { reactive } from "vue";
+
+type MessageType = "confirm" | "error";
+
+interface ToastParams {
+  text: string;
+  type?: MessageType;
+  timeout?: number;
+}
+
+interface Message {
+  readonly text: string;
+  readonly type: MessageType;
+  readonly key: number;
+}
+
+let key = 0;
+
+const _messages = reactive<Message[]>([]);
+
+export const messages = _messages as readonly Message[];
+
+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
@@ -1,20 +1,13 @@
 <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' }"
       >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"
@@ -45,19 +38,20 @@ 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 { toast } from "@/stores/toast";
+import { useRouter } from "vue-router";
 
+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;
@@ -83,8 +77,8 @@ const saveContact = (contactmoment: Contactmoment) => {
       // nu ook de zaken opslaan bij het contactmoment
       zakenToevoegenAanContactmoment(savedContactmoment.id);
 
-      //status bijwekren
-      saved.value = true;
+      toast({ text: "Het contactmoment is opgeslagen" });
+      router.push("/");
     })
     .catch(() => {
       errorMessage.value =