Merge pull request #35257 from nextcloud/fix/fix-33854-User_management_pages_-_Window_title_must_change_when_switching_sidebar_sections

Set page titel for each sidebar section through User management pages

4 files changed, 98 insertions, 17 deletions

diff --git a/apps/settings/src/constants/AppsConstants.js b/apps/settings/src/constants/AppsConstants.js
new file mode 100644
index 00000000000..5ede6334231
--- /dev/null
+++ b/apps/settings/src/constants/AppsConstants.js
@@ -0,0 +1,32 @@
+/**
+ * @copyright 2022, Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>
+ *
+ * @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { translate as t } from '@nextcloud/l10n'
+
+/** Enum of verification constants, according to Apps */
+export const APPS_SECTION_ENUM = Object.freeze({
+	enabled: t('settings', 'Active apps'),
+	disabled: t('settings', 'Disabled apps'),
+	updates: t('settings', 'Updates'),
+	'app-bundles': t('settings', 'App bundles'),
+	featured: t('settings', 'Featured apps'),
+})
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
diff --git a/apps/settings/src/store/apps.js b/apps/settings/src/store/apps.js
index 3618fb7919b..29009fc65e0 100644
--- a/apps/settings/src/store/apps.js
+++ b/apps/settings/src/store/apps.js
@@ -34,6 +34,7 @@ const state = {
 	updateCount: 0,
 	loading: {},
 	loadingList: false,
+	gettingCategoriesPromise: null,
 }
 
 const mutations = {
@@ -48,6 +49,10 @@ const mutations = {
 		state.updateCount = updateCount
 	},
 
+	updateCategories(state, categoriesPromise) {
+		state.gettingCategoriesPromise = categoriesPromise
+	},
+
 	setUpdateCount(state, updateCount) {
 		state.updateCount = updateCount
 	},
@@ -156,6 +161,9 @@ const getters = {
 	getUpdateCount(state) {
 		return state.updateCount
 	},
+	getCategoryById: (state) => (selectedCategoryId) => {
+		return state.categories.find((category) => category.id === selectedCategoryId)
+	},
 }
 
 const actions = {
@@ -313,18 +321,25 @@ const actions = {
 			.catch((error) => context.commit('API_FAILURE', error))
 	},
 
-	getCategories(context) {
-		context.commit('startLoading', 'categories')
-		return api.get(generateUrl('settings/apps/categories'))
-			.then((response) => {
-				if (response.data.length > 0) {
-					context.commit('appendCategories', response.data)
+	async getCategories(context, { shouldRefetchCategories = false } = {}) {
+		if (shouldRefetchCategories || !context.state.gettingCategoriesPromise) {
+			context.commit('startLoading', 'categories')
+			try {
+				const categoriesPromise = api.get(generateUrl('settings/apps/categories'))
+				context.commit('updateCategories', categoriesPromise)
+				const categoriesPromiseResponse = await categoriesPromise
+				if (categoriesPromiseResponse.data.length > 0) {
+					context.commit('appendCategories', categoriesPromiseResponse.data)
 					context.commit('stopLoading', 'categories')
 					return true
 				}
+				context.commit('stopLoading', 'categories')
 				return false
-			})
-			.catch((error) => context.commit('API_FAILURE', error))
+			} catch (error) {
+				context.commit('API_FAILURE', error)
+			}
+		}
+		return context.state.gettingCategoriesPromise
 	},
 
 }
diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue
index ff7c05cdcd7..7c998c4b540 100644
--- a/apps/settings/src/views/Apps.vue
+++ b/apps/settings/src/views/Apps.vue
@@ -36,16 +36,16 @@
 				<NcAppNavigationItem id="app-category-enabled"
 					:to="{ name: 'apps-category', params: { category: 'enabled' } }"
 					icon="icon-category-enabled"
-					:title="t('settings', 'Active apps')" />
+					:title="$options.APPS_SECTION_ENUM.enabled" />
 				<NcAppNavigationItem id="app-category-disabled"
 					:to="{ name: 'apps-category', params: { category: 'disabled' } }"
 					icon="icon-category-disabled"
-					:title="t('settings', 'Disabled apps')" />
+					:title="$options.APPS_SECTION_ENUM.disabled" />
 				<NcAppNavigationItem v-if="updateCount > 0"
 					id="app-category-updates"
 					:to="{ name: 'apps-category', params: { category: 'updates' } }"
 					icon="icon-download"
-					:title="t('settings', 'Updates')">
+					:title="$options.APPS_SECTION_ENUM.updates">
 					<NcAppNavigationCounter slot="counter">
 						{{ updateCount }}
 					</NcAppNavigationCounter>
@@ -53,7 +53,7 @@
 				<NcAppNavigationItem id="app-category-your-bundles"
 					:to="{ name: 'apps-category', params: { category: 'app-bundles' } }"
 					icon="icon-category-app-bundles"
-					:title="t('settings', 'App bundles')" />
+					:title="$options.APPS_SECTION_ENUM['app-bundles']" />
 
 				<NcAppNavigationSpacer />
 
@@ -62,7 +62,7 @@
 					<NcAppNavigationItem id="app-category-featured"
 						:to="{ name: 'apps-category', params: { category: 'featured' } }"
 						icon="icon-favorite"
-						:title="t('settings', 'Featured apps')" />
+						:title="$options.APPS_SECTION_ENUM.featured" />
 
 					<NcAppNavigationItem v-for="cat in categories"
 						:key="'icon-category-' + cat.ident"
@@ -154,11 +154,13 @@ import AppManagement from '../mixins/AppManagement'
 import AppScore from '../components/AppList/AppScore'
 import Markdown from '../components/Markdown'
 
+import { APPS_SECTION_ENUM } from './../constants/AppsConstants.js'
+
 Vue.use(VueLocalStorage)
 
 export default {
 	name: 'Apps',
-
+	APPS_SECTION_ENUM,
 	components: {
 		NcAppContent,
 		AppDetails,
@@ -273,7 +275,7 @@ export default {
 	},
 
 	beforeMount() {
-		this.$store.dispatch('getCategories')
+		this.$store.dispatch('getCategories', { shouldRefetchCategories: true })
 		this.$store.dispatch('getAllApps')
 		this.$store.dispatch('getGroups', { offset: 0, limit: 5 })
 		this.$store.commit('setUpdateCount', this.$store.getters.getServerData.updateCount)