i18n translations

web-app/package.json

@@ -36,7 +36,7 @@
     "watch:lib:types": "yarn workspace @mergin/lib build:types:watch",
     "watch:admin-lib": "yarn workspace @mergin/admin-lib build:lib:watch",
     "watch:admin-lib:types": "yarn workspace @mergin/admin-lib build:types:watch",
-    "lint:all": "yarn workspaces run lint",
+    "lint:all": "yarn workspaces run lint && eslint packages/lang --ext .ts",
     "lint:no-legacy": "yarn workspace @mergin/lib lint && yarn workspace @mergin/app lint"
   },
   "devDependencies": {

web-app/packages/admin-app/package.json

@@ -25,6 +25,7 @@
     "primeflex": "^3.3.1",
     "primevue": "3.43.0",
     "vue": "3.5.12",
+    "vue-i18n": "11",
     "vue-meta": "^3.0.0-alpha.10",
     "vue-router": "4.2.5"
   }

web-app/packages/admin-app/src/App.vue

@@ -63,6 +63,10 @@ import { useToast } from 'primevue/usetoast'
 import { defineComponent, watchEffect } from 'vue'
 import { useMeta } from 'vue-meta'
 
+import returnTranslation from '@/../../lang/translate'
+
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
   name: 'app',
   components: {
@@ -77,13 +81,15 @@ export default defineComponent({
       meta: [
         {
           name: 'description',
-          content:
-            'Store and track changes to your geo-data. Mergin Maps is a repository of geo-data for collaborative work.'
+          content: t(
+            'StoreAndTrackChangesToYourGeoDataMerginMapsIsARepositoryOfGeoDataForCollaborativeWork'
+          )
         },
         {
           property: 'og:title',
-          content:
-            'Store and track changes to your geo-data. Mergin Maps is a repository of geo-data for collaborative work.'
+          content: t(
+            'StoreAndTrackChangesToYourGeoDataMerginMapsIsARepositoryOfGeoDataForCollaborativeWork'
+          )
         },
         { property: 'og:site_name', content: 'Mergin Maps' }
       ]
@@ -122,20 +128,22 @@ export default defineComponent({
   },
   setup() {
     const { title } = useRouterTitle({
-      defaultTitle: 'Mergin Maps Admin Panel'
+      defaultTitle: t('MerginMapsAdminPanel')
     })
     useMeta({
-      title: 'Mergin Maps Admin Panel',
+      title: t('MerginMapsAdminPanel'),
       meta: [
         {
           name: 'description',
-          content:
-            'Store and track changes to your geo-data. Mergin Maps is a repository of geo-data for collaborative work.'
+          content: t(
+            'StoreAndTrackChangesToYourGeoDataMerginMapsIsARepositoryOfGeoDataForCollaborativeWork'
+          )
         },
         {
           property: 'og:title',
-          content:
-            'Store and track changes to your geo-data. Mergin Maps is a repository of geo-data for collaborative work.'
+          content: t(
+            'StoreAndTrackChangesToYourGeoDataMerginMapsIsARepositoryOfGeoDataForCollaborativeWork'
+          )
         },
         { property: 'og:site_name', content: 'Mergin Maps' }
       ]

web-app/packages/admin-app/src/main.ts

@@ -2,32 +2,41 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
-import { AdminModule } from '@mergin/admin-lib'
-import {
-  DialogModule,
-  FormModule,
-  getHttpService,
-  InstanceModule,
-  LayoutModule,
-  moduleUtils,
-  NotificationModule,
-  ProjectModule,
-  UserModule,
-  useInstanceStore,
-  initCsrfToken
-} from '@mergin/lib'
-
 import 'primevue/resources/primevue.min.css'
 import 'primeflex/primeflex.min.css'
 import '@mergin/lib/dist/sass/themes/mm-theme-light/theme.scss'
 import '@tabler/icons-webfont/tabler-icons.min.css'
 import '@mergin/lib/dist/style.css'
 import '@mergin/admin-lib/dist/style.css'
 
-import { createMerginApp } from './app'
-import { createPiniaInstance, getPiniaInstance } from './store'
+import { initializeRuntimeI18n } from '@/../../lang/runtime'
 
 async function main() {
+  const i18n = await initializeRuntimeI18n()
+  const [
+    { AdminModule },
+    {
+      DialogModule,
+      FormModule,
+      getHttpService,
+      InstanceModule,
+      LayoutModule,
+      moduleUtils,
+      NotificationModule,
+      ProjectModule,
+      UserModule,
+      useInstanceStore,
+      initCsrfToken
+    },
+    { createMerginApp },
+    { createPiniaInstance, getPiniaInstance }
+  ] = await Promise.all([
+    import('@mergin/admin-lib'),
+    import('@mergin/lib'),
+    import('./app'),
+    import('./store')
+  ])
+
   createPiniaInstance()
   const pinia = getPiniaInstance()
   const httpService = getHttpService()
@@ -52,7 +61,9 @@ async function main() {
   const instanceStore = useInstanceStore(pinia)
   const response = await instanceStore.initApp()
   initCsrfToken(response)
-  createMerginApp().mount('#app')
+  const app = createMerginApp()
+  app.use(i18n)
+  app.mount('#app')
 }
 
 main()

web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue

@@ -4,35 +4,44 @@ Copyright (C) Lutra Consulting Limited
 SPDX-License-Identifier: LicenseRef-MerginMaps-Commercial
 -->
 
+<script lang="ts">
+export default {
+  name: 'AdminSidebar'
+}
+</script>
+
 <script setup lang="ts">
 import { AdminRoutes, SidebarFooter } from '@mergin/admin-lib'
 import { SideBarItemModel, SideBarTemplate } from '@mergin/lib'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
+import returnTranslation from '@/../../lang/translate'
+
 const route = useRoute()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const sidebarItems = computed<SideBarItemModel[]>(() => [
   {
-    title: 'Overview',
+    title: t('Overview'),
     to: '/overview',
     icon: 'ti ti-layout-dashboard',
     active: route.matched.some((item) => item.name === AdminRoutes.OVERVIEW)
   },
   {
-    title: 'Accounts',
+    title: t('Accounts'),
     to: '/accounts',
     icon: 'ti ti-user-circle',
     active: route.matched.some((item) => item.name === AdminRoutes.ACCOUNTS)
   },
   {
-    title: 'Projects',
+    title: t('Projects'),
     to: '/projects',
     icon: 'ti ti-article',
     active: route.matched.some((item) => item.name === AdminRoutes.PROJECTS)
   },
   {
-    title: 'Settings',
+    title: t('Settings'),
     to: '/settings',
     icon: 'ti ti-settings',
     active: route.matched.some((item) => item.name === AdminRoutes.SETTINGS)
@@ -42,7 +51,7 @@ const sidebarItems = computed<SideBarItemModel[]>(() => [
 
 <template>
   <side-bar-template :sidebarItems="sidebarItems">
-    <template #subtitle>Admin panel</template>
+    <template #subtitle>{{ t('AdminPanel') }}</template>
     <template #footer>
       <sidebar-footer />
     </template>

web-app/packages/admin-lib/package.json

@@ -47,7 +47,8 @@
     "primeflex": "^3.3.1",
     "primevue": "3.43.0",
     "universal-cookie": "^4.0.4",
-    "vue": "3.5.12"
+    "vue": "3.5.12",
+    "vue-i18n": "11"
   },
   "peerDependencies": {
     "pinia": ">=2.x",

web-app/packages/admin-lib/src/modules/admin/components/AccountsTable.vue

@@ -4,15 +4,15 @@
       <app-section ground>
         <template #header>
           <h1 class="headline-h3">
-            Accounts
+            {{ $t('Accounts') }}
             <span class="text-color-medium-green">({{ users.count }})</span>
           </h1>
         </template>
         <template #headerActions>
           <PButton
             icon="ti ti-users-plus"
             @click="createUserDialog"
-            label="Add user"
+            :label="$t('AddUser')"
           />
         </template>
       </app-section>
@@ -22,7 +22,7 @@
         <span class="p-input-icon-left w-full">
           <i class="ti ti-search paragraph-p3"></i>
           <PInputText
-            placeholder="Search accounts"
+            :placeholder="$t('SearchAccounts')"
             data-cy="search-members-field"
             v-model="searchByName"
             class="w-full"
@@ -105,11 +105,11 @@
 
 <script lang="ts">
 import {
+  AppContainer,
+  AppSection,
   PaginatedUsersParams,
-  useDialogStore,
   TableDataHeader,
-  AppContainer,
-  AppSection
+  useDialogStore
 } from '@mergin/lib'
 import debounce from 'lodash/debounce'
 import { mapActions, mapState } from 'pinia'
@@ -120,10 +120,13 @@ import {
 } from 'primevue/datatable'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { AdminRoutes } from '@/modules'
 import CreateUserForm from '@/modules/admin/components/CreateUserForm.vue'
 import { useAdminStore } from '@/modules/admin/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
   name: 'AccountsTable',
   components: {
@@ -141,10 +144,10 @@ export default defineComponent({
       },
       searchByName: '',
       headers: [
-        { field: 'username', header: 'Username', sortable: true },
-        { field: 'email', header: 'Email', sortable: true },
-        { field: 'profile.name', header: 'Full name' },
-        { field: 'active', header: 'Active' }
+        { field: 'username', header: t('Username'), sortable: true },
+        { field: 'email', header: t('Email'), sortable: true },
+        { field: 'profile.name', header: t('FullName') },
+        { field: 'active', header: t('Active') }
       ] as TableDataHeader[]
     }
   },
@@ -207,7 +210,7 @@ export default defineComponent({
     },
 
     createUserDialog() {
-      const dialog = { maxWidth: 500, header: 'Create user' }
+      const dialog = { maxWidth: 500, header: t('CreateUser') }
       const listeners = {
         success: () => {
           this.resetPaging()