From 0590a7642fbae451c4beef2fdc9acc1952cb8bae Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Mon, 14 Mar 2022 10:36:52 +0100
Subject: [PATCH] Page title

---
 .eslintrc.js         |  1 +
 src/boot/i18n.ts     | 12 +++++++-----
 src/i18n/en/index.ts | 18 ++++++++++++------
 src/router/index.ts  | 30 ++++++++++++++++++++++++++++++
 src/router/routes.ts |  4 ++++
 5 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index f51cd2502..122e7927a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -85,6 +85,7 @@ module.exports = {
 
         '@typescript-eslint/no-unsafe-assignment': 'off',
         '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
         '@typescript-eslint/no-floating-promises': 'off',
 
         // allow debugger during development only
diff --git a/src/boot/i18n.ts b/src/boot/i18n.ts
index d0ec37ed8..d6b558657 100644
--- a/src/boot/i18n.ts
+++ b/src/boot/i18n.ts
@@ -3,12 +3,14 @@ import { createI18n } from 'vue-i18n';
 
 import messages from 'src/i18n';
 
-export default boot(({ app }) => {
-    const i18n = createI18n({
-        locale: 'en',
-        messages,
-    });
+const i18n = createI18n({
+    locale: 'en',
+    messages,
+});
 
+export default boot(({ app }) => {
     // Set i18n instance on app
     app.use(i18n);
 });
+
+export { i18n };
\ No newline at end of file
diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts
index 54b480a87..8d91d8d21 100644
--- a/src/i18n/en/index.ts
+++ b/src/i18n/en/index.ts
@@ -1,15 +1,15 @@
 export default {
-    'globals': {
-        'lang': {
+    globals: {
+        lang: {
             'es': 'Spanish',
             'en': 'English'
         }
     },
-    'errors': {
+    errors: {
         'statusUnauthorized': 'Access denied',
         'statusInternalServerError': 'An internal server error has ocurred'
     },
-    'login': {
+    login: {
         'title': 'Login',
         'username': 'Username',
         'password': 'Password',
@@ -18,12 +18,18 @@ export default {
         'loginSuccess': 'You have successfully logged in',
         'loginError': 'Invalid username or password'
     },
-    'customer': {},
-    'components': {
+    customer: {},
+    components: {
         'topbar': {},
         'userPanel': {
             'settings': 'Settings',
             'logOut': 'Log Out'
         }
+    },
+    pages: {
+        'logIn': 'Log In',
+        'dashboard': 'Dashboard',
+        'customers': 'Customers',
+        'list': 'List',
     }
 };
diff --git a/src/router/index.ts b/src/router/index.ts
index 0455b515d..5c9e8f23c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,6 +6,7 @@ import {
     createWebHistory,
 } from 'vue-router';
 import routes from './routes';
+import { i18n } from 'src/boot/i18n';
 import { useSession } from 'src/composables/useSession';
 const session = useSession();
 /*
@@ -47,5 +48,34 @@ export default route(function (/* { store, ssrContext } */) {
         }
     });
 
+    Router.afterEach((to) => {
+        interface Meta {
+            title?: string;
+        }
+
+        const { t } = i18n.global;
+        let title = '';
+
+
+        const parent = to.matched[1];
+        if (parent) {
+            const parentMeta: Meta = parent.meta;
+            if (parentMeta && parentMeta.title) {
+                title += t(`pages.${parentMeta.title}`);
+            }
+        }
+        //const childTitle: string = childMeta.title;
+
+        const childMeta: Meta = to.meta;
+        if (childMeta && childMeta.title) {
+            if (title != '') title += ' - ';
+
+            title += t(`pages.${childMeta.title}`);
+        }
+
+        document.title = title;
+    });
+
+
     return Router;
 });
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 7d3bacf55..7b71f5b0b 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -4,6 +4,7 @@ const routes: RouteRecordRaw[] = [
     {
         path: '/login',
         name: 'Login',
+        meta: { title: 'logIn' },
         component: () => import('../pages/Login/Login.vue'),
     },
     {
@@ -15,17 +16,20 @@ const routes: RouteRecordRaw[] = [
             {
                 path: '/dashboard',
                 name: 'Dashboard',
+                meta: { title: 'dashboard' },
                 component: () => import('../pages/Dashboard/Dashboard.vue'),
             },
             {
                 path: '/customer',
                 name: 'Customer',
+                meta: { title: 'customers' },
                 component: () => import('../pages/Customer/Customer.vue'),
                 redirect: { name: 'List' },
                 children: [
                     {
                         path: 'list',
                         name: 'List',
+                        meta: { title: 'list' },
                         component: () => import('../pages/Customer/List.vue'),
                     },
                     {