Fix #5104

app/Http/Controllers/Account/ShowController.php

@@ -116,6 +116,12 @@ class ShowController extends Controller
         $firstTransaction = $this->repository->oldestJournalDate($account) ?? $start;
         $periods          = $this->getAccountPeriodOverview($account, $firstTransaction, $end);
 
+        // if layout = v2, overrule the page title.
+        if('v1'!==config('firefly.layout')) {
+            $subTitle         = (string)trans('firefly.all_journals_for_account', ['name' => $account->name]);
+        }
+
+
         /** @var GroupCollectorInterface $collector */
         $collector = app(GroupCollectorInterface::class);
         $collector

frontend/src/components/accounts/Show.vue

@@ -106,6 +106,7 @@ export default {
       perPage: 51,
       locale: 'en-US',
       api: null,
+      nameLoading:false
     }
   },
   created() {
@@ -117,11 +118,30 @@ export default {
     let params = new URLSearchParams(window.location.search);
     this.currentPage = params.get('page') ? parseInt(params.get('page')) : 1;
     this.getTransactions();
+    this.updatePageTitle();
   },
   components: {TransactionListLarge},
   methods: {
+    updatePageTitle: function () {
+      if (this.showReady && !this.nameLoading) {
+        // update page title.
+        this.nameLoading = true;
+        configureAxios().then(async (api) => {
+          let url = './api/v1/accounts/' + this.accountId;
+          api.get(url)
+              .then(response => {
+                let start = new Intl.DateTimeFormat(this.locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(this.start);
+                let end = new Intl.DateTimeFormat(this.locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(this.end);
+                document.getElementById('page-subTitle').innerText = this.$t('firefly.journals_in_period_for_account_js', {start: start, end: end, title: response.data.data.attributes.name});
+              });
+        });
+
+      }
+    },
     getTransactions: function () {
       if (this.showReady && !this.loading) {
+
+
         this.loading = true;
         configureAxios().then(async (api) => {
           // console.log('Now getTransactions() x Start');
@@ -153,9 +173,11 @@ export default {
   watch: {
     start: function () {
       this.getTransactions();
+      this.updatePageTitle();
     },
     end: function () {
       this.getTransactions();
+      this.updatePageTitle();
     },
   }
 

frontend/src/locales/en.json

@@ -70,6 +70,7 @@
         "daily_budgets": "Daily budgets",
         "weekly_budgets": "Weekly budgets",
         "monthly_budgets": "Monthly budgets",
+        "journals_in_period_for_account_js": "All transactions for account {title} between {start} and {end}",
         "quarterly_budgets": "Quarterly budgets",
         "create_new_expense": "Create new expense account",
         "create_new_revenue": "Create new revenue account",

resources/views/v2/layout/default.twig

@@ -51,7 +51,7 @@
                             {{ title }} <small class="text-muted">
                                 {% if subTitleIcon|default(false) %}<span
                                     class="fa fas {{ subTitleIcon }}"></span>{% endif %}
-                                {{ subTitle|default('') }}</small></h1>
+                                <span id="page-subTitle">{{ subTitle|default('') }}</span></small></h1>
                     </div><!-- /.col -->
                     <div class="col-sm-6">
                         {% block breadcrumbs %}{% endblock %}