Updated usage of vue-i18n (#1372)

* Updated usage of vue-i18n Any translations are now used by importing the useI18n function and then mapping out the t function and in some cases the locale variable. Something to look into is the test warnings for $vuetify.open not having the open translation.. as well as a better way to handle isRTL however there may not be a better way. * Fixed BaseInternationalization Test and file have been fixed. In the file, moved the title search to a computed value. * Update style.scss removed empty v-select block from scss * Update BaseAuthButton.vue made the auth buttons height match the internationalization height * Update ManageForm.vue fixed missing locale in ManageForm
bcgov · Jun 26, 2024 · b8cb79b · b8cb79b
1 parent 8e2cc9f
commit b8cb79b
Show file tree

Hide file tree

Showing 104 changed files with 1,326 additions and 1,049 deletions.
diff --git a/app/frontend/src/assets/scss/style.scss b/app/frontend/src/assets/scss/style.scss
@@ -556,4 +556,19 @@ a,
 
 .v-data-table, .v-data-table-server, .v-table {
   font-size: 16px !important;
+}
+
+.v-select .v-field__input {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.v-select .v-list-item--density-default {
+  min-height: 38px !important;
+}
+
+.vselect .v-label {
+  opacity: 1 !important;
 }
diff --git a/app/frontend/src/components/admin/AddOwner.vue b/app/frontend/src/components/admin/AddOwner.vue
@@ -1,9 +1,9 @@
 <script>
-import { mapActions, mapState } from 'pinia';
+import { mapActions } from 'pinia';
 import { version as uuidVersion, validate as uuidValidate } from 'uuid';
+import { useI18n } from 'vue-i18n';
 
 import { useAdminStore } from '~/store/admin';
-import { useFormStore } from '~/store/form';
 import { FormRoleCodes } from '~/utils/constants';
 
 export default {
@@ -13,6 +13,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   data() {
     return {
       userGuid: '',
@@ -27,7 +32,6 @@ export default {
   },
   methods: {
     ...mapActions(useAdminStore, ['addFormUser', 'readRoles']),
-    ...mapState(useFormStore, ['lang']),
     async addOwner() {
       if (this.$refs.addUserForm.validate()) {
         await this.addFormUser({
@@ -43,7 +47,7 @@ export default {
 
 <template>
   <v-form ref="addUserForm" v-model="valid">
-    <p :lang="lang">
+    <p :lang="locale">
       {{ $t('trans.addOwner.infoA') }}
     </p>
     <v-row class="mt-4">
@@ -54,7 +58,7 @@ export default {
           :rules="userGuidRules"
           :hint="$t('trans.addOwner.hint')"
           persistent-hint
-          :lang="lang"
+          :lang="locale"
         />
       </v-col>
       <v-col cols="3" md="2">
@@ -64,7 +68,7 @@ export default {
           :title="$t('trans.addOwner.addowner')"
           @click="addOwner"
         >
-          <span :lang="lang">{{ $t('trans.addOwner.addowner') }}</span>
+          <span :lang="locale">{{ $t('trans.addOwner.addowner') }}</span>
         </v-btn>
       </v-col>
     </v-row>

diff --git a/app/frontend/src/components/admin/AdminFormsTable.vue b/app/frontend/src/components/admin/AdminFormsTable.vue
@@ -1,11 +1,16 @@
 <script>
 import { mapActions, mapState } from 'pinia';
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
 
 import { useAdminStore } from '~/store/admin';
 import { useFormStore } from '~/store/form';
 
 export default {
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       showDeleted: false,
@@ -15,7 +20,7 @@ export default {
   },
   computed: {
     ...mapState(useAdminStore, ['formList']),
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
     calcHeaders() {
       return this.headers.filter(
         (x) => x.key !== 'updatedAt' || this.showDeleted
@@ -24,22 +29,22 @@ export default {
     headers() {
       return [
         {
-          title: i18n.t('trans.adminFormsTable.formTitle'),
+          title: this.$t('trans.adminFormsTable.formTitle'),
           align: 'start',
           key: 'name',
         },
         {
-          title: i18n.t('trans.adminFormsTable.created'),
+          title: this.$t('trans.adminFormsTable.created'),
           align: 'start',
           key: 'createdAt',
         },
         {
-          title: i18n.t('trans.adminFormsTable.deleted'),
+          title: this.$t('trans.adminFormsTable.deleted'),
           align: 'start',
           key: 'updatedAt',
         },
         {
-          title: i18n.t('trans.adminFormsTable.actions'),
+          title: this.$t('trans.adminFormsTable.actions'),
           align: 'end',
           key: 'actions',
           filterable: false,
@@ -76,11 +81,11 @@ export default {
           class="pl-3"
           data-test="checkbox-show-deleted"
           :class="isRTL ? 'float-right' : 'float-left'"
-          :label="$t('trans.adminFormsTable.showDeletedForms')"
+          :label="t('trans.adminFormsTable.showDeletedForms')"
         >
           <template #label>
-            <span :class="{ 'mr-2': isRTL }" :lang="lang">
-              {{ $t('trans.adminFormsTable.showDeletedForms') }}
+            <span :class="{ 'mr-2': isRTL }" :lang="locale">
+              {{ t('trans.adminFormsTable.showDeletedForms') }}
             </span>
           </template>
         </v-checkbox>
@@ -96,8 +101,8 @@ export default {
             v-model="search"
             density="compact"
             variant="underlined"
-            :lang="lang"
-            :label="$t('trans.adminFormsTable.search')"
+            :lang="locale"
+            :label="t('trans.adminFormsTable.search')"
             append-inner-icon="mdi-magnify"
             single-line
             hide-details
@@ -117,9 +122,9 @@ export default {
       :items="formList"
       :search="search"
       :loading="loading"
-      :lang="lang"
-      :loading-text="$t('trans.adminFormsTable.loadingText')"
-      :no-data-text="$t('trans.adminFormsTable.noDataText')"
+      :lang="locale"
+      :loading-text="t('trans.adminFormsTable.loadingText')"
+      :no-data-text="t('trans.adminFormsTable.noDataText')"
     >
       <template #item.createdAt="{ item }">
         {{ $filters.formatDateLong(item.createdAt) }} -
@@ -138,8 +143,8 @@ export default {
             :title="$t('trans.adminFormsTable.admin')"
           >
             <v-icon class="mr-1" icon="mdi:mdi-wrench"></v-icon>
-            <span class="d-none d-sm-flex" :lang="lang">{{
-              $t('trans.adminFormsTable.admin')
+            <span class="d-none d-sm-flex" :lang="locale">{{
+              t('trans.adminFormsTable.admin')
             }}</span>
           </v-btn>
         </router-link>
@@ -158,8 +163,8 @@ export default {
             :title="$t('trans.adminFormsTable.launch')"
           >
             <v-icon class="mr-1" icon="mdi:mdi-note-plus"></v-icon>
-            <span class="d-none d-sm-flex" :lang="lang">{{
-              $t('trans.adminFormsTable.launch')
+            <span class="d-none d-sm-flex" :lang="locale">{{
+              t('trans.adminFormsTable.launch')
             }}</span>
           </v-btn>
         </router-link>

diff --git a/app/frontend/src/components/admin/AdminPage.vue b/app/frontend/src/components/admin/AdminPage.vue
@@ -1,5 +1,7 @@
 <script>
 import { mapState } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import AdminFormsTable from '~/components/admin/AdminFormsTable.vue';
 import AdminUsersTable from '~/components/admin/AdminUsersTable.vue';
 import AdminAPIsTable from '~/components/admin/AdminAPIsTable.vue';
@@ -19,14 +21,19 @@ export default {
     Developer,
     FormComponentsProactiveHelp,
   },
+  setup() {
+    const { locale } = useI18n({ useScope: 'global' });
+
+    return { locale };
+  },
   data() {
     return {
       tab: null,
     };
   },
   computed: {
     ...mapState(useAppStore, ['config']),
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
     adminDashboardUrl() {
       return this.config.adminDashboardUrl;
     },
@@ -41,16 +48,20 @@ export default {
 
 <template>
   <v-tabs v-model="tab" :class="{ 'dir-rtl': isRTL }">
-    <v-tab value="forms" :lang="lang">{{ $t('trans.adminPage.forms') }}</v-tab>
-    <v-tab value="users" :lang="lang">{{ $t('trans.adminPage.users') }}</v-tab>
-    <v-tab value="apis" :lang="lang">{{ $t('trans.adminPage.apis') }}</v-tab>
-    <v-tab value="developer" :lang="lang">{{
+    <v-tab value="forms" :lang="locale">{{
+      $t('trans.adminPage.forms')
+    }}</v-tab>
+    <v-tab value="users" :lang="locale">{{
+      $t('trans.adminPage.users')
+    }}</v-tab>
+    <v-tab value="apis" :lang="locale">{{ $t('trans.adminPage.apis') }}</v-tab>
+    <v-tab value="developer" :lang="locale">{{
       $t('trans.adminPage.developer')
     }}</v-tab>
-    <v-tab value="infoLinks" :lang="lang">{{
+    <v-tab value="infoLinks" :lang="locale">{{
       $t('trans.adminPage.infoLinks')
     }}</v-tab>
-    <v-tab v-if="adminDashboardUrl" value="dashboard" :lang="lang">{{
+    <v-tab v-if="adminDashboardUrl" value="dashboard" :lang="locale">{{
       $t('trans.adminPage.metrics')
     }}</v-tab>
   </v-tabs>

diff --git a/app/frontend/src/components/admin/AdminUsersTable.vue b/app/frontend/src/components/admin/AdminUsersTable.vue
@@ -1,12 +1,16 @@
 <script>
 import { mapActions, mapState } from 'pinia';
-
-import { i18n } from '~/internationalization';
+import { useI18n } from 'vue-i18n';
 
 import { useAdminStore } from '~/store/admin';
 import { useFormStore } from '~/store/form';
 
 export default {
+  setup() {
+    const { t, locale } = useI18n({ useScope: 'global' });
+
+    return { t, locale };
+  },
   data() {
     return {
       loading: true,
@@ -15,26 +19,26 @@ export default {
   },
   computed: {
     ...mapState(useAdminStore, ['userList']),
-    ...mapState(useFormStore, ['isRTL', 'lang']),
+    ...mapState(useFormStore, ['isRTL']),
     headers() {
       return [
         {
-          title: i18n.t('trans.adminUsersTable.fullName'),
+          title: this.$t('trans.adminUsersTable.fullName'),
           align: 'start',
           key: 'fullName',
         },
         {
-          title: i18n.t('trans.adminUsersTable.userID'),
+          title: this.$t('trans.adminUsersTable.userID'),
           align: 'start',
           key: 'username',
         },
         {
-          title: i18n.t('trans.adminUsersTable.created'),
+          title: this.$t('trans.adminUsersTable.created'),
           align: 'start',
           key: 'created',
         },
         {
-          title: i18n.t('trans.adminUsersTable.actions'),
+          title: this.$t('trans.adminUsersTable.actions'),
           align: 'end',
           key: 'actions',
           filterable: false,
@@ -73,7 +77,7 @@ export default {
             hide-details
             class="pb-5"
             :class="{ 'dir-rtl': isRTL, label: isRTL }"
-            :lang="lang"
+            :lang="locale"
           />
         </div>
       </v-col>
@@ -89,7 +93,7 @@ export default {
       :search="search"
       :loading="loading"
       :loading-text="$t('trans.adminUsersTable.loadingText')"
-      :lang="lang"
+      :lang="locale"
     >
       <template #item.created="{ item }">
         {{ $filters.formatDate(item.createdAt) }}
@@ -103,7 +107,7 @@ export default {
             :title="$t('trans.adminUsersTable.admin')"
           >
             <v-icon class="mr-1" icon="mdi:mdi-wrench"></v-icon>
-            <span class="d-none d-sm-flex" :lang="lang">{{
+            <span class="d-none d-sm-flex" :lang="locale">{{
               $t('trans.adminUsersTable.admin')
             }}</span>
           </v-btn>