From 08f4f641fe973ff42b82faeb862ede5fe79721e9 Mon Sep 17 00:00:00 2001
From: Benny Samir Hierl <bennysamir@posteo.de>
Date: Fri, 18 Feb 2022 20:14:03 +0100
Subject: [PATCH] Set title of page

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
---
 src/config/locales/de-DE.json |  3 +++
 src/config/locales/en-US.json |  3 +++
 src/views/DetailView.vue      | 14 ++++++++++++--
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/config/locales/de-DE.json b/src/config/locales/de-DE.json
index c702742..0678783 100644
--- a/src/config/locales/de-DE.json
+++ b/src/config/locales/de-DE.json
@@ -3,6 +3,9 @@
     "app-title": {
       "text": "Wunschlisten"
     },
+    "title": {
+      "text": "Wunschliste: {title}"
+    },
     "loading": {
       "text": "Lade..."
     },
diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json
index 0706bc4..ba67d6d 100644
--- a/src/config/locales/en-US.json
+++ b/src/config/locales/en-US.json
@@ -3,6 +3,9 @@
     "app-title": {
       "text": "Wishlists"
     },
+    "title": {
+      "text": "Wishlist: {title}"
+    },
     "loading": {
       "text": "Loading..."
     },
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 818fa30..da4ef87 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { Wishlist, WishlistItem as WishlistItemType } from '@/types'
 import { useRoute, useRouter } from 'vue-router'
+import { useTitle } from '@vueuse/core'
 import { useWishlistStore, useModal, useEditMode } from '@/composables'
 import {
   FormWishlist,
@@ -11,6 +12,7 @@ import {
 } from '@/components'
 import { IconNoGift } from '../components/icons'
 import { useToast } from 'vue-toastification'
+import { computed } from 'vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -18,7 +20,6 @@ const modal = useModal()
 const { t } = useI18n()
 const toast = useToast()
 const { isActive: editModeIsActive } = useEditMode()
-
 const {
   state,
   fetch,
@@ -30,7 +31,14 @@ const {
   itemDelete,
   filteredItems,
 } = useWishlistStore()
-await fetch(route.params.slug as string)
+
+const title = computed(() => {
+  return state.value.title
+    ? t('common.title.text', { title: state.value.title })
+    : t('common.loading.text')
+})
+
+useTitle(title)
 
 const handleUpdateWishlist = async (wishlist: Wishlist): Promise<void> => {
   try {
@@ -84,6 +92,8 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
     itemDelete(item)
   }
 }
+
+await fetch(route.params.slug as string)
 </script>
 
 <template>