feat: add direct use of i18n for page title and navigation breadcrumb

ICIJ · Oct 8, 2024 · a554dd2 · a554dd2
1 parent 425d284
commit a554dd2
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 34 deletions.
diff --git a/src/components/NavigationBreadcrumb/NavigationBreadcrumbLink.vue b/src/components/NavigationBreadcrumb/NavigationBreadcrumbLink.vue
@@ -64,17 +64,13 @@ const routeHref = computed(() => {
 })
 
 const { core } = useCore()
-const i18n = useI18n()
+const { t } = useI18n()
 
-const display = ref(null)
-
-const setDisplay = async () => {
+const title = computed(() => {
   const name = route.value?.name.split('.').pop()
-  const fn = castFunction(props.title ?? route.value?.meta?.title ?? capitalize(name))
-  display.value = await fn({ route: route.value, core, i18n })
-}
-
-onMounted(setDisplay)
+  const fn = castFunction(props.title ?? t(route.value?.meta?.title) ?? capitalize(name))
+  return fn({ route: route.value, core })
+})
 
 const icon = computed(() => {
   return props.icon ?? route.value?.meta?.icon
@@ -96,7 +92,7 @@ const classList = computed(() => {
     <span class="navigation-breadcrumb-link__label">
       <phosphor-icon v-if="icon" class="navigation-breadcrumb-link__label__icon me-2" :name="icon" />
       <span class="navigation-breadcrumb-link__label__content">
-        <slot>{{ display }}</slot>
+        <slot>{{ title }}</slot>
       </span>
     </span>
     <phosphor-icon

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -1156,7 +1156,7 @@
       "searchPlaceholder": "Filter the list",
       "noResults": "No matching result for the query '%{query}'"
     },
-    "title": {"title": "Settings"},
+    "title": "Settings",
     "description": {"title": "Don't change these settings if you don't know what you're doing."},
     "general":{
       "title": "General" ,

diff --git a/src/lang/fr.json b/src/lang/fr.json
@@ -854,7 +854,7 @@
     "noAccess": "Vous n'avez pas accès à cette page en mode serveur."
   },
   "settings": {
-    "title": {"title": "Paramètres"},
+    "title":  "Paramètres",
     "general":{
       "title": "Général"
     },

diff --git a/src/router/guards.js b/src/router/guards.js
@@ -41,7 +41,10 @@ export default ({ router, auth, store, config, i18n, setPageTitle }) => {
 
   async function setPageTitleFromMeta({ meta }, _from, next) {
     const params = { router, auth, store, config, i18n }
-    const title = isFunction(meta.title) ? await meta.title(params) : meta.title
+    let title
+    if (meta.title) {
+      title = isFunction(meta.title) ? await meta.title(params) : i18n.global.t(meta.title)
+    }
     setPageTitle(title)
     next()
   }

diff --git a/src/router/index.js b/src/router/index.js
@@ -32,7 +32,7 @@ export const routes = [
         name: 'search',
         path: '',
         meta: {
-          title: ({ i18n }) => i18n.global.t('search.title'),
+          title: 'search.title',
           docs: [
             {
               title: 'Search documents',
@@ -64,7 +64,7 @@ export const routes = [
             component: () => import('@/views/DocumentView'),
             props: true,
             meta: {
-              title: ({ i18n }) => i18n.global.t('document.title'),
+              title: 'document.title',
               docs: [
                 {
                   title: 'Star a document',
@@ -103,7 +103,7 @@ export const routes = [
           name: 'task.batch-search.list'
         },
         meta: {
-          title: ({ i18n }) => i18n.global.t('tasks.title')
+          title: 'tasks.title'
         },
         children: [
           {
@@ -117,7 +117,7 @@ export const routes = [
             path: 'analysis',
             component: () => import('@/views/TaskAnalysis'),
             meta: {
-              title: ({ i18n }) => i18n.global.t('indexing.title'),
+              title: 'indexing.title',
               allowedModes: ['LOCAL', 'EMBEDDED']
             },
             children: [
@@ -126,7 +126,7 @@ export const routes = [
                 path: '',
                 component: () => import('@/views/TaskAnalysisList'),
                 meta: {
-                  title: ({ i18n }) => i18n.global.t('indexing.title'),
+                  title: 'indexing.title',
                   allowedModes: ['LOCAL', 'EMBEDDED'],
                   docs: [
                     {
@@ -152,7 +152,7 @@ export const routes = [
                 path: '',
                 component: () => import('@/views/TaskBatchDownloadList'),
                 meta: {
-                  title: ({ i18n }) => i18n.global.t('batchDownload.title'),
+                  title: 'batchDownload.title',
                   docs: [
                     {
                       title: 'Add documents to Datashare',
@@ -182,7 +182,7 @@ export const routes = [
                   default: () => import('@/views/TaskBatchSearchList')
                 },
                 meta: {
-                  title: ({ i18n }) => i18n.global.t('batchSearch.title'),
+                  title: 'batchSearch.title',
                   docs: [
                     {
                       title: 'How to use batch searches',
@@ -198,7 +198,7 @@ export const routes = [
                   default: () => import('@/views/TaskBatchSearchNew')
                 },
                 meta: {
-                  title: ({ i18n }) => i18n.global.t('newBatchSearch.title'),
+                  title: 'newBatchSearch.title',
                   docs: [
                     {
                       title: 'How to use batch searches',
@@ -223,7 +223,7 @@ export const routes = [
                   }
                 ],
                 meta: {
-                  title: ({ i18n }) => i18n.global.t('batchSearchResults.title')
+                  title: 'batchSearchResults.title'
                 }
               }
             ]
@@ -382,15 +382,15 @@ export const routes = [
           name: 'user-history.document.list'
         },
         meta: {
-          title: ({ i18n }) => i18n.global.t('userHistory.heading')
+          title: 'userHistory.heading'
         },
         children: [
           {
             name: 'user-history.document.list',
             path: 'document',
             component: () => import('@/views/UserHistoryDocumentList'),
             meta: {
-              title: ({ i18n }) => i18n.global.t('userHistory.heading')
+              title: 'userHistory.heading'
             }
           },
           {
@@ -404,7 +404,7 @@ export const routes = [
             path: 'saved-search',
             component: () => import('@/views/UserHistorySavedSearchList'),
             meta: {
-              title: ({ i18n }) => i18n.global.t('userHistory.heading')
+              title: 'userHistory.heading'
             }
           }
         ]
@@ -413,10 +413,7 @@ export const routes = [
         name: 'settings',
         path: '/settings',
         meta: {
-          title: ({ i18n }) => {
-            const key = 'server.title'
-            return i18n.global?.t(key) ?? i18n.t(key)
-          }
+          title: 'settings.title'
         },
         component: () => import('@/views/Settings/SettingsView/SettingsView'),
         children: [
@@ -429,7 +426,7 @@ export const routes = [
             path: 'general',
             component: () => import('@/views/Settings/SettingsView/SettingsViewGeneral'),
             meta: {
-              title: 'General',
+              title: 'settings.general.title',
               breadcrumb: false
             }
           },
@@ -438,7 +435,7 @@ export const routes = [
             path: 'appearance',
             component: () => import('@/views/Settings/SettingsView/SettingsViewAppearance'),
             meta: {
-              title: 'Appearance',
+              title: 'settings.appearance.title',
               breadcrumb: false
             }
           },
@@ -447,7 +444,7 @@ export const routes = [
             path: 'languages',
             component: () => import('@/views/Settings/SettingsView/SettingsViewLanguages'),
             meta: {
-              title: 'Languages',
+              title: 'settings.languages.title',
               breadcrumb: false
             }
           },
@@ -457,7 +454,7 @@ export const routes = [
             component: () => import('@/views/Settings/SettingsView/SettingsViewAddons'),
             props: { addonsType: 'plugins' },
             meta: {
-              title: 'Plugins',
+              title: 'settings.addons.extensions.title',
               breadcrumb: false
             }
           },
@@ -467,7 +464,7 @@ export const routes = [
             component: () => import('@/views/Settings/SettingsView/SettingsViewAddons'),
             props: { addonsType: 'extensions' },
             meta: {
-              title: 'Extensions',
+              title: 'settings.addons.plugins.title',
               breadcrumb: false
             }
           }