Translate frontend sidebar and translate some registry entries

premium/web-frontend/modules/baserow_premium/plugin.js

@@ -16,9 +16,9 @@ export default ({ store, app }) => {
   store.registerModule('row_comments', rowCommentsStore)
 
   app.$registry.register('plugin', new PremiumPlugin())
-  app.$registry.register('admin', new DashboardType())
+  app.$registry.register('admin', new DashboardType({ app }))
-  app.$registry.register('admin', new UsersAdminType())
+  app.$registry.register('admin', new UsersAdminType({ app }))
-  app.$registry.register('admin', new GroupsAdminType())
+  app.$registry.register('admin', new GroupsAdminType({ app }))
   app.$registry.register('exporter', new JSONTableExporter())
   app.$registry.register('exporter', new XMLTableExporter())
 
@@ -26,5 +26,8 @@ export default ({ store, app }) => {
 
   // Overwrite the existing database application type with the one customized for
   // premium use.
-  app.$registry.register('application', new PremiumDatabaseApplicationType())
+  app.$registry.register(
+    'application',
+    new PremiumDatabaseApplicationType({ app })
+  )
 }

web-frontend/locales/en.js

@@ -4,6 +4,15 @@ export default {
     backToLogin: 'Back to login',
     signUp: 'Sign up',
     signIn: 'Sign in',
+    createNew: 'Create new',
+    delete: 'Delete',
+    rename: 'Rename',
+  },
+  adminType: {
+    settings: 'Settings',
+  },
+  applicationType: {
+    database: 'Database',
   },
   field: {
     emailAddress: 'E-mail address',

web-frontend/locales/fr.js

@@ -4,6 +4,15 @@ export default {
     backToLogin: "Retour à l'identification",
     signUp: 'Créer un compte',
     signIn: "S'identifier",
+    createNew: 'Nouveau',
+    delete: 'Supprimer',
+    rename: 'Renomer',
+  },
+  adminType: {
+    settings: 'Paramètres',
+  },
+  applicationType: {
+    database: 'Base de données',
   },
   field: {
     emailAddress: 'Adresse électronique',

web-frontend/modules/core/adminTypes.js

@@ -35,11 +35,10 @@ export class AdminType extends Registerable {
     throw new Error('The route name of an admin type must be set.')
   }
 
-  constructor() {
+  constructor({ app }) {
-    super()
+    super({ app })
     this.type = this.getType()
     this.iconClass = this.getIconClass()
-    this.name = this.getName()
     this.routeName = this.getRouteName()
 
     if (this.type === null) {
@@ -60,7 +59,7 @@ export class AdminType extends Registerable {
     return {
       type: this.type,
       iconClass: this.iconClass,
-      name: this.name,
+      name: this.getName(),
       routeName: this.routeName,
     }
   }
@@ -76,7 +75,8 @@ export class SettingsAdminType extends AdminType {
   }
 
   getName() {
-    return 'Settings'
+    const { i18n } = this.app
+    return i18n.t('adminType.settings')
   }
 
   getRouteName() {

web-frontend/modules/core/applicationTypes.js

@@ -92,11 +92,10 @@ export class ApplicationType extends Registerable {
     return []
   }
 
-  constructor() {
+  constructor({ app }) {
-    super()
+    super({ app })
     this.type = this.getType()
     this.iconClass = this.getIconClass()
-    this.name = this.getName()
 
     if (this.type === null) {
       throw new Error('The type name of an application type must be set.')
@@ -116,7 +115,7 @@ export class ApplicationType extends Registerable {
     return {
       type: this.type,
       iconClass: this.iconClass,
-      name: this.name,
+      name: this.getName(),
       routeName: this.routeName,
       hasSidebarComponent: this.getSidebarComponent() !== null,
     }

web-frontend/modules/core/components/LangPicker.vue

@@ -1,16 +1,16 @@
 <template>
   <div v-if="$env.ENABLE_I18N" class="lang-picker">
     <a
-      class="lang-picker__link"
       ref="dropdownLink"
+      class="lang-picker__link"
       @click="$refs.dropdown.toggle($refs.dropdownLink)"
     >
       {{ visibleLanguageName }}
       <i class="fa fa-caret-down lang-picker__icon"></i>
     </a>
     <LanguageSwitcherDropdown
-      class="lang-picker__dropdown"
       ref="dropdown"
+      class="lang-picker__dropdown"
       :show-input="false"
     />
   </div>

web-frontend/modules/core/components/application/CreateApplicationContext.vue

@@ -10,7 +10,7 @@
             class="context__menu-icon fas fa-fw"
             :class="'fa-' + applicationType.iconClass"
           ></i>
-          {{ applicationType.name }}
+          {{ applicationType.getName() }}
         </a>
         <CreateApplicationModal
           :ref="'createApplicationModal' + type"
@@ -22,7 +22,7 @@
       <li>
         <a @click=";[$refs.templateModal.show(), hide()]">
           <i class="context__menu-icon fas fa-fw fa-file-alt"></i>
-          From template
+          {{ $t('createApplicationContext.fromTemplate') }}
         </a>
         <TemplateModal ref="templateModal" :group="group"></TemplateModal>
       </li>
@@ -61,3 +61,18 @@ export default {
   },
 }
 </script>
+
+<i18n>
+{
+  "en": {
+    "createApplicationContext":{
+      "fromTemplate": "From template"
+    }
+  },
+  "fr": {
+    "createApplicationContext":{
+      "fromTemplate": "À partir d'un modèle"
+    }
+  }
+}
+</i18n>

web-frontend/modules/core/components/application/CreateApplicationModal.vue

@@ -1,7 +1,7 @@
 <template>
   <Modal>
     <h2 class="box__title">
-      Create new {{ applicationType.name | lowercase }}
+      Create new {{ applicationType.getName() | lowercase }}
     </h2>
     <Error :error="error"></Error>
     <component
@@ -16,7 +16,7 @@
             :class="{ 'button--loading': loading }"
             :disabled="loading"
           >
-            Add {{ applicationType.name | lowercase }}
+            Add {{ applicationType.getName() | lowercase }}
           </button>
         </div>
       </div>

web-frontend/modules/core/components/group/GroupContext.vue

@@ -5,25 +5,25 @@
       <li v-if="group.permissions === 'ADMIN'">
         <a @click="$emit('rename')">
           <i class="context__menu-icon fas fa-fw fa-pen"></i>
-          Rename group
+          {{ $t('groupContext.renameGroup') }}
         </a>
       </li>
       <li v-if="group.permissions === 'ADMIN'">
         <a @click=";[$refs.groupMembersModal.show(), hide()]">
           <i class="context__menu-icon fas fa-fw fa-users"></i>
-          Members
+          {{ $t('groupContext.members') }}
         </a>
       </li>
       <li v-if="group.permissions === 'ADMIN'">
         <a @click="showGroupTrashModal">
           <i class="context__menu-icon fas fa-fw fa-recycle"></i>
-          View trash
+          {{ $t('groupContext.viewTrash') }}
         </a>
       </li>
       <li>
         <a @click="$refs.leaveGroupModal.show()">
           <i class="context__menu-icon fas fa-fw fa-door-open"></i>
-          Leave group
+          {{ $t('groupContext.leaveGroup') }}
         </a>
       </li>
       <li v-if="group.permissions === 'ADMIN'">
@@ -32,7 +32,7 @@
           @click="deleteGroup"
         >
           <i class="context__menu-icon fas fa-fw fa-trash"></i>
-          Delete group
+          {{ $t('groupContext.deleteGroup') }}
         </a>
       </li>
     </ul>
@@ -100,3 +100,26 @@ export default {
   },
 }
 </script>
+
+<i18n>
+{
+  "en": {
+    "groupContext": {
+      "renameGroup": "Rename group",
+      "members": "Members",
+      "viewTrash": "View trash",
+      "leaveGroup": "Leave group",
+      "deleteGroup": "Delete group"
+    }
+  },
+  "fr": {
+    "groupContext": {
+      "renameGroup": "Renommer le groupe",
+      "members": "Membres",
+      "viewTrash": "Voir la corbeille",
+      "leaveGroup": "Quitter le groupe",
+      "deleteGroup": "Supprimer le group"
+    }
+  }
+}
+</i18n>

web-frontend/modules/core/components/group/GroupsContext.vue

@@ -6,7 +6,7 @@
         v-model="query"
         type="text"
         class="select__search-input"
-        placeholder="Search groups"
+        :placeholder="$t('groupsContext.search')"
       />
     </div>
     <div v-if="isLoading" class="context--loading">
@@ -29,12 +29,12 @@
       v-if="!isLoading && isLoaded && groups.length == 0"
       class="context__description"
     >
-      No results found
+      {{ $t('groupsContext.noResults') }}
     </div>
     <div class="select__footer">
       <a class="select__footer-button" @click="$refs.createGroupModal.show()">
         <i class="fas fa-plus"></i>
-        Create group
+        {{ $t('groupsContext.createGroup') }}
       </a>
     </div>
     <CreateGroupModal ref="createGroupModal"></CreateGroupModal>
@@ -104,3 +104,22 @@ export default {
   },
 }
 </script>
+
+<i18n>
+{
+  "en": {
+    "groupsContext": {
+      "search": "Search groups",
+      "noResults": "No results found",
+      "createGroup": "Create group"
+    }
+  },
+  "fr": {
+    "groupsContext": {
+      "search": "Rechercher",
+      "noResults": "Aucun résultat",
+      "createGroup": "Créer un groupe"
+    }
+  }
+}
+</i18n>

web-frontend/modules/core/components/sidebar/Sidebar.vue

@@ -40,14 +40,14 @@
               "
             >
               <i class="context__menu-icon fas fa-fw fa-cogs"></i>
-              Settings
+              {{ $t('sidebar.settings') }}
             </a>
             <SettingsModal ref="settingsModal"></SettingsModal>
           </li>
           <li>
             <a @click="logoff()">
               <i class="context__menu-icon fas fa-fw fa-sign-out-alt"></i>
-              Logoff
+              {{ $t('sidebar.logoff') }}
             </a>
           </li>
         </ul>
@@ -64,7 +64,9 @@
               <nuxt-link :to="{ name: 'dashboard' }" class="tree__link">
                 <div>
                   <i class="tree__icon fas fa-tachometer-alt"></i>
-                  <span class="sidebar__item-name">Dashboard</span>
+                  <span class="sidebar__item-name">{{
+                    $t('sidebar.dashboard')
+                  }}</span>
                 </div>
               </nuxt-link>
             </div>
@@ -74,7 +76,9 @@
               <a class="tree__link" @click="$refs.trashModal.show()">
                 <div>
                   <i class="tree__icon fas fa-trash"></i>
-                  <span class="sidebar__item-name">Trash</span>
+                  <span class="sidebar__item-name">{{
+                    $t('sidebar.trash')
+                  }}</span>
                 </div>
               </a>
               <TrashModal ref="trashModal"></TrashModal>
@@ -87,7 +91,9 @@
             >
               <a class="tree__link" @click.prevent="admin()">
                 <i class="tree__icon fas fa-users-cog"></i>
-                <span class="sidebar__item-name">Admin</span>
+                <span class="sidebar__item-name">{{
+                  $t('sidebar.admin')
+                }}</span>
               </a>
             </div>
             <ul v-show="isAdminPage" class="tree sidebar__tree">
@@ -110,7 +116,9 @@
                       class="tree__icon fas"
                       :class="'fa-' + adminType.iconClass"
                     ></i>
-                    <span class="sidebar__item-name">{{ adminType.name }}</span>
+                    <span class="sidebar__item-name">{{
+                      adminType.getName()
+                    }}</span>
                   </nuxt-link>
                 </div>
               </li>
@@ -139,7 +147,8 @@
               <div class="tree__action">
                 <a class="tree__link" @click="$refs.groupMembersModal.show()">
                   <i class="tree__icon tree__icon--type fas fa-users"></i>
-                  Invite others
+
+                  {{ $t('sidebar.inviteOthers') }}
                 </a>
                 <GroupMembersModal
                   ref="groupMembersModal"
@@ -173,7 +182,7 @@
                 "
               >
                 <i class="fas fa-plus"></i>
-                Create new
+                {{ $t('action.createNew') }}
               </a>
             </li>
             <CreateApplicationContext
@@ -183,7 +192,7 @@
           </template>
           <template v-else-if="!hasSelectedGroup && !isCollapsed">
             <li v-if="groups.length === 0" class="tree_item margin-top-2">
-              <p>You don’t have any groups.</p>
+              <p>{{ $t('sidebar.errorNoGroup') }}</p>
             </li>
             <li
               v-for="(group, index) in groups"
@@ -203,7 +212,7 @@
             <li class="sidebar__new-wrapper">
               <a class="sidebar__new" @click="$refs.createGroupModal.show()">
                 <i class="fas fa-plus"></i>
-                Create group
+                {{ $t('sidebar.createGroup') }}
               </a>
             </li>
             <CreateGroupModal ref="createGroupModal"></CreateGroupModal>
@@ -339,3 +348,32 @@ export default {
   },
 }
 </script>
+
+<i18n>
+{
+  "en":{
+    "sidebar":{
+      "createGroup": "Create group",
+      "inviteOthers": "Invite others",
+      "logoff": "Logoff",
+      "errorNoGroup": "You don’t have any groups.",
+      "admin": "Admin",
+      "dashboard": "Dashboard",
+      "trash": "Trash",
+      "settings": "Settings"
+    }
+  },
+  "fr":{
+    "sidebar":{
+      "createGroup": "Créer un groupe",
+      "inviteOthers": "Envoyer une invitation",
+      "logoff": "Se déconnecter",
+      "errorNoGroup": "Vous n'avez aucun groupe.",
+      "admin": "Administration",
+      "dashboard": "Accueil",
+      "trash": "Corbeille",
+      "settings": "Profil"
+    }
+  }
+}
+</i18n>

web-frontend/modules/core/components/sidebar/SidebarApplication.vue

@@ -33,13 +33,17 @@
           <li>
             <a @click="enableRename()">
               <i class="context__menu-icon fas fa-fw fa-pen"></i>
-              Rename {{ application._.type.name | lowercase }}
+              {{
+                $t('sidebarApplication.renameApplication', {
+                  type: application._.type.name.toLowerCase(),
+                })
+              }}
             </a>
           </li>
           <li>
             <a @click="showApplicationTrashModal">
               <i class="context__menu-icon fas fa-fw fa-recycle"></i>
-              View trash
+              {{ $t('sidebarApplication.viewTrash') }}
             </a>
           </li>
           <li>
@@ -48,7 +52,11 @@
               @click="deleteApplication()"
             >
               <i class="context__menu-icon fas fa-fw fa-trash"></i>
-              Delete {{ application._.type.name | lowercase }}
+              {{
+                $t('sidebarApplication.deleteApplication', {
+                  type: application._.type.name.toLowerCase(),
+                })
+              }}
             </a>
           </li>
         </ul>
@@ -136,3 +144,22 @@ export default {
   },
 }
 </script>
+
+<i18n>
+{
+  "en":{
+    "sidebarApplication": {
+      "renameApplication": "Rename {type}",
+      "viewTrash": "View trash",
+      "deleteApplication": "Delete {type}"
+    }
+  },
+  "fr":{
+    "sidebarApplication": {
+      "renameApplication": "Renommer {type}",
+      "viewTrash": "Voir la corbeille",
+      "deleteApplication": "Supprimer {type}"
+    }
+  }
+}
+</i18n>

web-frontend/modules/core/module.js

@@ -5,7 +5,7 @@ import serveStatic from 'serve-static'
 import { routes } from './routes'
 import head from './head'
 
-export default function DatabaseModule(options) {
+export default function CoreModule(options) {
   /**
    * This function adds a plugin, but rather then prepending it to the list it will
    * be appended.
@@ -112,7 +112,10 @@ export default function DatabaseModule(options) {
     ssr: false,
   })
   this.addPlugin({ src: path.resolve(__dirname, 'middleware.js') })
-  this.addPlugin({ src: path.resolve(__dirname, 'plugin.js') })
+
+  // Some plugins depends on i18n instance so the plugin must be added
+  // after the nuxt-i18n module's plugin
+  this.appendPlugin({ src: path.resolve(__dirname, 'plugin.js') })
 
   // The client handler depends on environment variables so the plugin must be added
   // after the nuxt-env module's plugin.

web-frontend/modules/core/plugin.js

@@ -29,7 +29,7 @@ export default ({ store, app }, inject) => {
   registry.register('settings', new PasswordSettingsType())
   registry.register('userFileUpload', new UploadFileUserFileUploadType())
   registry.register('userFileUpload', new UploadViaURLUserFileUploadType())
-  registry.register('admin', new SettingsAdminType())
+  registry.register('admin', new SettingsAdminType({ app }))
   inject('registry', registry)
 
   store.registerModule('settings', settingsStore)

web-frontend/modules/core/registry.js

@@ -3,6 +3,10 @@
  * registry.
  */
 export class Registerable {
+  constructor({ app } = {}) {
+    this.app = app
+  }
+
   /**
    * Must return a string with the unique name, this must be the same as the
    * type used in the backend.

web-frontend/modules/database/applicationTypes.js

@@ -36,7 +36,8 @@ export class DatabaseApplicationType extends ApplicationType {
   }
 
   getName() {
-    return 'Database'
+    const { i18n } = this.app
+    return i18n.t('applicationType.database')
   }
 
   getSidebarComponent() {

web-frontend/modules/database/components/sidebar/Sidebar.vue

@@ -15,7 +15,7 @@
           }"
         >
           <i class="context__menu-icon fas fa-fw fa-book"></i>
-          View API docs
+          {{ $t('sidebar.viewAPI') }}
         </nuxt-link>
       </li>
     </template>
@@ -37,7 +37,7 @@
       </ul>
       <a class="tree__sub-add" @click="$refs.createTableModal.show()">
         <i class="fas fa-plus"></i>
-        Create table
+        {{ $t('sidebar.createTable') }}
       </a>
       <CreateTableModal
         ref="createTableModal"
@@ -95,3 +95,20 @@ export default {
   },
 }
 </script>
+
+<i18n>
+{
+  "en":{
+    "sidebar": {
+      "viewAPI": "View API Docs",
+      "createTable": "Create table"
+    }
+  },
+  "fr":{
+    "sidebar": {
+      "viewAPI": "Documentation de l'API",
+      "createTable": "Ajouter une table"
+    }
+  }
+}
+</i18n>

web-frontend/modules/database/components/sidebar/SidebarItem.vue

@@ -21,13 +21,13 @@
         <li>
           <a @click="exportTable()">
             <i class="context__menu-icon fas fa-fw fa-file-export"></i>
-            Export table
+            {{ $t('sidebarItem.exportTable') }}
           </a>
         </li>
         <li>
           <a @click="enableRename()">
             <i class="context__menu-icon fas fa-fw fa-pen"></i>
-            Rename
+            {{ $t('action.rename') }}
           </a>
         </li>
         <li>
@@ -36,7 +36,7 @@
             @click="deleteTable()"
           >
             <i class="context__menu-icon fas fa-fw fa-trash"></i>
-            Delete
+            {{ $t('action.delete') }}
           </a>
         </li>
       </ul>
@@ -140,3 +140,18 @@ export default {
   },
 }
 </script>
+
+<i18n>
+{
+  "en":{
+    "sidebarItem":{
+      "exportTable": "Export table"
+    }
+  },
+  "fr":{
+    "sidebarItem":{
+      "exportTable": "Exporter la table"
+    }
+  }
+}
+</i18n>

web-frontend/modules/database/plugin.js

@@ -64,7 +64,7 @@ export default ({ store, app }) => {
   store.registerModule('template/view/grid', gridStore)
   store.registerModule('template/view/form', formStore)
 
-  app.$registry.register('application', new DatabaseApplicationType())
+  app.$registry.register('application', new DatabaseApplicationType({ app }))
   app.$registry.register('view', new GridViewType())
   app.$registry.register('view', new FormViewType())
   app.$registry.register('viewFilter', new EqualViewFilterType())

web-frontend/test/helpers/testApp.js

@@ -14,6 +14,7 @@ import flushPromises from 'flush-promises'
  */
 function _createBaserowStoreAndRegistry(app, vueContext) {
   const store = new vueContext.vuex.Store({})
+
   setupCore({ store, app }, (name, dep) => {
     app[`$${name}`] = dep
   })
@@ -76,6 +77,10 @@ export class TestApp {
       $env: {
         PUBLIC_WEB_FRONTEND_URL: 'https://localhost/',
       },
+      i18n: {
+        t: (key) => key,
+        tc: (key) => key,
+      },
     }
     this._vueContext = bootstrapVueContext()
     this.store = _createBaserowStoreAndRegistry(this._app, this._vueContext)