Merge branch '859-include-dynamic-titles-in-app-bar-of-new-spa' into 'master'

Resolve "Include dynamic titles in app bar of new SPA"

Closes #859

See merge request !1243

CHANGELOG.rst

@@ -9,6 +9,10 @@ and this project adheres to `Semantic Versioning`_.
 Unreleased
 ----------
 
+Changes
+~~~~~~~
+* The frontend is now able to display headings in the main toolbar.
+
 Fixed
 ~~~~~
 

aleksis/core/frontend/components/app/App.vue

@@ -25,7 +25,7 @@
           class="white--text text-decoration-none"
           @click="$router.push({ name: 'dashboard' })"
         >
-          {{ systemProperties.sitePreferences.generalTitle }}
+          {{ $root.toolbarTitle }}
         </v-toolbar-title>
 
         <v-progress-linear

aleksis/core/frontend/components/authorized_oauth_applications/AuthorizedApplications.vue

 <template>
   <div>
-    <h1 class="mb-4">{{ $t("oauth.authorized_application.title") }}</h1>
     <div v-if="$apollo.queries.accessTokens.loading">
       <v-skeleton-loader type="card"></v-skeleton-loader>
     </div>

aleksis/core/frontend/components/two_factor/TwoFactor.vue

 <template>
   <div>
-    <h1 class="mb-4">{{ $t("accounts.two_factor.title") }}</h1>
     <div v-if="$apollo.queries.twoFactor.loading">
       <v-skeleton-loader type="card,card"></v-skeleton-loader>
     </div>

aleksis/core/frontend/index.js

@@ -71,6 +71,7 @@ const app = new Vue({
     backgroundActive: true,
     invalidation: false,
     snackbarItems: [],
+    toolbarTitle: "AlekSIS®",
     permissions: [],
   }),
   computed: {

aleksis/core/frontend/plugins/aleksis.js

@@ -105,6 +105,33 @@ AleksisVue.install = function (Vue) {
     document.title = newTitle;
   };
 
+  /**
+   * Set the toolbar title visible on the page.
+   *
+   * This will automatically add the base title discovered at app loading time.
+   *
+   * @param {string} title Specific title to set, or null.
+   * @param {Object} route Route to discover title from, or null.
+   */
+  Vue.prototype.$setToolBarTitle = function (title, route) {
+    let newTitle;
+
+    if (title) {
+      newTitle = title;
+    } else {
+      if (!route) {
+        route = this.$route;
+      }
+      if (route.meta.toolbarTitle) {
+        newTitle = this.$t(route.meta.toolbarTitle);
+      }
+    }
+
+    newTitle = newTitle || Vue.$pageBaseTitle;
+    console.debug(`Setting toolbar title: ${newTitle}`);
+    this.$root.toolbarTitle = newTitle;
+  };
+
   /**
    * Load i18n messages from all known AlekSIS apps.
    */
@@ -160,6 +187,7 @@ AleksisVue.install = function (Vue) {
     this.$router.afterEach((to, from, next) => {
       console.debug("Setting new page title due to route change");
       vm.$setPageTitle(null, to);
+      vm.$setToolBarTitle(null, to);
     });
 
     // eslint-disable-next-line no-unused-vars

aleksis/core/frontend/routes.js

@@ -735,6 +735,7 @@ const routes = [
     meta: {
       inAccountMenu: true,
       titleKey: "accounts.two_factor.menu_title",
+      toolbarTitle: "accounts.two_factor.title",
       icon: "mdi-two-factor-authentication",
       permission: "core.manage_2fa_rule",
     },
@@ -929,6 +930,7 @@ const routes = [
     meta: {
       inAccountMenu: true,
       titleKey: "oauth.authorized_application.menu_title",
+      toolbarTitle: "oauth.authorized_application.title",
       icon: "mdi-gesture-tap-hold",
       permission: "core.manage_authorized_tokens_rule",
     },