toast added

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

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",

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": {

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 ...

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": {

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": {

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

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) => {
+  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>