The HTML <Title> element is not useful for navigation

[auspex]

Version

1.12.9

What browsers are you seeing the problem on?

Chrome, This problem isn't browser related

What happened?

On the login page, the <title> element is:

<title>LedgerSMB 1.12.9</title>

Once logged in, my title becomes:

<title>LedgerSMB 1.12.9 -- derek -- coastalvoices</title>

on every page. This is not useful for those of us who routinely use the back button to navigate.

What should have happened?

I expect the HTML Title to reflect where I am within a website.

The current title is a lot of text and most of it not useful.

If you're the site admin, you really should know what version of LSMB you're running, and users don't care. Most websites would put that info in a page footer or an 'About' page.

Similarly, I probably know who I'm logged in as. Most people won't log in under more than one name, an admin like me might log in as 'admin' and under my own name, but rarely anything else. If you really need to check who you are, it should be in the preferences page (most websites would have a User icon where those would be set).

Now, it may well be a good idea to put the database name there — I suspect a lot of people using LSMB are bookkeeping for multiple companies — but I suggest a much better use of the title tag would be:

<title>LedgerSMB—{DB NAME}—{MENU ENTRY}</title>

[ehuelsmann]

I've tried this patch:

diff --git a/UI/src/views/LsmbMain.vue b/UI/src/views/LsmbMain.vue
index fd1fcd59e..ff4cb4e80 100644
--- a/UI/src/views/LsmbMain.vue
+++ b/UI/src/views/LsmbMain.vue
@@ -103,12 +103,23 @@ export default {
         }
     },
     async mounted() {
-        window.__lsmbLoadLink = (url) => {
+        window.__lsmbLoadLink = (url, options) => {
             let tgt = url.replace(/^https?:\/\/(?:[^@/]+)/, "");
             if (!tgt.startsWith("/")) {
                 tgt = "/" + tgt;
             }
-            this.$router.push(tgt);
+            let { title } = options;
+            this.$router.push(
+                tgt,
+                () => {
+                    console.log('navigation done');
+                    if (title) {
+                        document.title = title;
+                    }
+                },
+                () => {
+                    console.log('navigation aborted?');
+            });
         };
         await Promise.all([
             this.menuStore.initialize(),
@@ -183,7 +194,7 @@ export default {
                     if (url.charAt(0) !== "/") {
                         url = "/" + url;
                     }
-                    window.__lsmbLoadLink(url);
+                    window.__lsmbLoadLink(url, { title: n.label });
                 }
             }
         }

However, neither "console" statement is being called, which makes this a little less than trivial to solve problem...

[ehuelsmann]

Ok. the above patch is based on old documentation. this.$router.push() returns a promise on Vue-Router 4.x and doesn't take an onComplete argument anymore.

[ehuelsmann]

The patch below produces: "LedgerSMB () | MenuLevel1 > MenuLevel2 > ... > MenuLevelN"; e.g. "LedgerSMB (test) | Contacts > Add Entity".

diff --git a/UI/src/views/LsmbMain.vue b/UI/src/views/LsmbMain.vue
index fd1fcd59e..e7f80cf08 100644
--- a/UI/src/views/LsmbMain.vue
+++ b/UI/src/views/LsmbMain.vue
@@ -103,12 +103,21 @@ export default {
         }
     },
     async mounted() {
-        window.__lsmbLoadLink = (url) => {
+        window.__lsmbLoadLink = (url, options) => {
             let tgt = url.replace(/^https?:\/\/(?:[^@/]+)/, "");
             if (!tgt.startsWith("/")) {
                 tgt = "/" + tgt;
             }
-            this.$router.push(tgt);
+            let { title } = options;
+            this.$router
+                .push(tgt)
+                .then(
+                    () => {
+                        console.log('navigation done');
+                        if (title) {
+                            document.title = `LedgerSMB (${lsmbConfig.company}) | ${title}`;
+                        }
+                });
         };
         await Promise.all([
             this.menuStore.initialize(),
@@ -183,7 +192,14 @@ export default {
                     if (url.charAt(0) !== "/") {
                         url = "/" + url;
                     }
-                    window.__lsmbLoadLink(url);
+                    let label = n.label;
+                    let p = n.parent;
+                    while (p) {
+                        let parent = this.menuStore.nodeById(p);
+                        label = `${parent.label} > ${label}`;
+                        p = parent.parent;
+                    }
+                    window.__lsmbLoadLink(url, { title: label });
                 }
             }
         }

[auspex]

I thought I'd give it a try, but I'm not at all familiar with Vue and it's definitely not as simple as injecting that LsmbMain.vue file into my docker container.