Adapt router.js for setting document title.

Adapt store to store Promise for dynamic requested categories.
Create new constants file to store category name with associated translation.

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

1 files changed, 34 insertions, 2 deletions

diff --git a/apps/settings/src/router.js b/apps/settings/src/router.js
index 912e031c0d7..121a9c90a2b 100644
--- a/apps/settings/src/router.js
+++ b/apps/settings/src/router.js
@@ -25,6 +25,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
+import { APPS_SECTION_ENUM } from './constants/AppsConstants.js'
+import store from './store/index.js'
 
 // Dynamic loading
 const Users = () => import(/* webpackChunkName: 'settings-users' */'./views/Users')
@@ -40,8 +42,8 @@ Vue.use(Router)
  * ensure the proper route.
  * ⚠️ Routes needs to match the php routes.
  */
-
-export default new Router({
+const baseTitle = document.title
+const router = new Router({
 	mode: 'history',
 	// if index.php is in the url AND we got this far, then it's working:
 	// let's keep using index.php in the url
@@ -66,10 +68,29 @@ export default new Router({
 			component: Apps,
 			props: true,
 			name: 'apps',
+			meta: {
+				title: () => {
+					return t('settings', 'Your apps')
+				},
+			},
 			children: [
 				{
 					path: ':category',
 					name: 'apps-category',
+					meta: {
+						title: async (to) => {
+							if (to.name === 'apps') {
+								return t('settings', 'Your apps')
+							} else if (APPS_SECTION_ENUM[to.params.category]) {
+								return APPS_SECTION_ENUM[to.params.category]
+							}
+							await store.dispatch('getCategories')
+							const category = store.getters.getCategoryById(to.params.category)
+							if (category.displayName) {
+								return category.displayName
+							}
+						},
+					},
 					component: Apps,
 					children: [
 						{
@@ -83,3 +104,14 @@ export default new Router({
 		},
 	],
 })
+
+router.afterEach(async (to) => {
+	const metaTitle = await to.meta.title?.(to)
+	if (metaTitle) {
+		document.title = `${metaTitle} - ${baseTitle}`
+	} else {
+		document.title = baseTitle
+	}
+})
+
+export default router