From 7916d435a0c0472fc0c284cf105105a7e99f5c80 Mon Sep 17 00:00:00 2001
From: Benny Samir Hierl <bennysamir@posteo.de>
Date: Sun, 13 Feb 2022 19:31:45 +0100
Subject: [PATCH] toast added

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
---
 package-lock.json                   | 15 +++++++++++++++
 package.json                        |  1 +
 src/composables/useWishlistStore.ts |  2 +-
 src/config/locales/de-DE.json       |  8 ++++++++
 src/config/locales/en-US.json       |  8 ++++++++
 src/main.ts                         |  3 +++
 src/views/DetailView.vue            | 11 +++++++++--
 7 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 53fa095..ba8b053 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "vue": "^3.2.31",
         "vue-i18n": "^9.2.0-beta.30",
         "vue-router": "^4.0.12",
+        "vue-toastification": "^2.0.0-rc.5",
         "yup": "^0.32.11"
       },
       "devDependencies": {
@@ -6993,6 +6994,14 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "0.31.3",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.31.3.tgz",
@@ -12474,6 +12483,12 @@
         "@vue/devtools-api": "^6.0.0-beta.18"
       }
     },
+    "vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "requires": {}
+    },
     "vue-tsc": {
       "version": "0.31.3",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.31.3.tgz",
diff --git a/package.json b/package.json
index 6cd184f..ace79bf 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "vue": "^3.2.31",
     "vue-i18n": "^9.2.0-beta.30",
     "vue-router": "^4.0.12",
+    "vue-toastification": "^2.0.0-rc.5",
     "yup": "^0.32.11"
   },
   "devDependencies": {
diff --git a/src/composables/useWishlistStore.ts b/src/composables/useWishlistStore.ts
index 11e4920..ecf3250 100644
--- a/src/composables/useWishlistStore.ts
+++ b/src/composables/useWishlistStore.ts
@@ -1,6 +1,6 @@
+import { ref } from 'vue'
 import useAxios, { CustomAxiosError } from '@/composables/useAxios'
 import { Wishlist, WishlistItem } from '@/types'
-import { ref } from 'vue'
 const { client } = useAxios()
 
 //@ts-expect-error ...
diff --git a/src/config/locales/de-DE.json b/src/config/locales/de-DE.json
index 7fbddc0..37fd7d7 100644
--- a/src/config/locales/de-DE.json
+++ b/src/config/locales/de-DE.json
@@ -5,6 +5,14 @@
     },
     "loading": {
       "text": "Lade..."
+    },
+    "wishlist": {
+      "saved": {
+        "text": "Wunschliste gespeichert"
+      },
+      "saving-failed": {
+        "text": "Wunschliste konnte nicht gespeichert werden"
+      }
     }
   },
   "errors": {
diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json
index 16c2fd4..17c1134 100644
--- a/src/config/locales/en-US.json
+++ b/src/config/locales/en-US.json
@@ -5,6 +5,14 @@
     },
     "loading": {
       "text": "Loading..."
+    },
+    "wishlist": {
+      "saved": {
+        "text": "Wishlist saved"
+      },
+      "saving-failed": {
+        "text": "Saving wishlist failed"
+      }
     }
   },
   "errors": {
diff --git a/src/main.ts b/src/main.ts
index d1be3dc..695c686 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
+import Toast from 'vue-toastification'
 import './assets/tailwind.css'
+import 'vue-toastification/dist/index.css'
 
 import App from './App.vue'
 import router from './router'
@@ -10,6 +12,7 @@ const app = createApp(App)
 
 app.use(router)
 app.use(i18n)
+app.use(Toast, {})
 app.component('modalOverlay', Modal)
 
 app.mount('#app')
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 1afb058..fff6cc4 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toastification'
 import { Wishlist, WishlistItem as WishlistItemType } from '@/types'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -13,6 +14,7 @@ const router = useRouter()
 const modal = useModal()
 const { isActive: editModeIsActive } = useEditMode()
 const { t } = useI18n()
+const toast = useToast()
 
 const {
   state,
@@ -47,8 +49,13 @@ const bought = async (item: WishlistItemType): Promise<void> => {
 }
 
 const handleUpdateWishlist = async (values: Wishlist) => {
-  await updateWishlist(values)
-  router.push(`/${state.value?.slugUrlText}`)
+  try {
+    await updateWishlist(values)
+    toast.success(t('common.wishlist.saved.text'))
+    router.push(`/${state.value?.slugUrlText}`)
+  } catch (error) {
+    toast.error(t('common.wishlist.saving-failed.text'))
+  }
 }
 </script>