Client - update language labels

fittrackee_client/src/components/Common/Dropdown.vue

@@ -18,7 +18,8 @@
 </template>
 
 <script lang="ts">
-  import { PropType, defineComponent, ref } from 'vue'
+  import { PropType, defineComponent, ref, watch } from 'vue'
+  import { useRoute } from 'vue-router'
 
   import { IDropdownOption, TDropdownOptions } from '@/types/forms'
 
@@ -38,6 +39,7 @@
       selected: (option: IDropdownOption) => option,
     },
     setup(props, { emit }) {
+      const route = useRoute()
       let isOpen = ref(false)
       let dropdownOptions = props.options.map((option) => option)
 
@@ -49,6 +51,11 @@
         isOpen.value = false
       }
 
+      watch(
+        () => route.path,
+        () => (isOpen.value = false)
+      )
+
       return {
         dropdownOptions,
         isOpen,
@@ -64,14 +71,17 @@
     list-style-type: none;
     background-color: #ffffff;
     padding: 0;
-    margin: 5px 0;
+    margin-top: 5px;
+    margin-left: -20px !important;
     position: absolute;
     text-align: left;
     border: solid 1px lightgrey;
     box-shadow: 2px 2px 5px lightgrey;
+    width: auto !important;
 
     li {
       padding-top: 5px;
+      padding-right: 5px;
     }
     li:last-child {
       padding-bottom: 5px;

fittrackee_client/src/components/NavBar.vue

@@ -16,13 +16,13 @@
             class="fa fa-close close-icon nav-item"
             :class="{ 'menu-closed': !isMenuOpen }"
             @click="closeMenu()"
-          ></i>
+          />
         </div>
         <div class="nav-items-app-menu" @click="closeMenu()">
           <div class="nav-items-group" v-if="isAuthenticated">
-            <router-link class="nav-item" to="/">{{
-              $t('dashboard.DASHBOARD')
-            }}</router-link>
+            <router-link class="nav-item" to="/">
+              {{ $t('dashboard.DASHBOARD') }}
+            </router-link>
             <router-link class="nav-item" to="/workouts">
               {{ capitalize($t('workouts.WORKOUT', 2)) }}
             </router-link>
@@ -55,12 +55,12 @@
             </div>
           </div>
           <div class="nav-items-group" v-else>
-            <router-link class="nav-item" to="/login" @click="closeMenu">{{
-              $t('user.LOGIN')
-            }}</router-link>
-            <router-link class="nav-item" to="/register" @click="closeMenu">{{
-              $t('user.REGISTER')
-            }}</router-link>
+            <router-link class="nav-item" to="/login" @click="closeMenu">
+              {{ $t('user.LOGIN') }}
+            </router-link>
+            <router-link class="nav-item" to="/register" @click="closeMenu">
+              {{ $t('user.REGISTER') }}
+            </router-link>
           </div>
           <Dropdown
             v-if="availableLanguages && language"
@@ -87,6 +87,7 @@
   import { IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
   import { getApiUrl } from '@/utils'
+  import { availableLanguages } from '@/utils/locales'
 
   export default defineComponent({
     name: 'NavBar',
@@ -95,12 +96,9 @@
     },
     emits: ['menuInteraction'],
     setup(props, { emit }) {
-      const { locale, availableLocales } = useI18n()
+      const { locale } = useI18n()
       const store = useStore()
 
-      const availableLanguages = availableLocales.map((l) => {
-        return { label: l.toUpperCase(), value: l }
-      })
       const authUser: ComputedRef<IUserProfile> = computed(
         () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
       )

fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue

@@ -21,6 +21,7 @@
   import { PropType, computed, defineComponent } from 'vue'
 
   import { IUserProfile } from '@/types/user'
+  import { languageLabels } from '@/utils/locales'
 
   export default defineComponent({
     name: 'UserPreferences',
@@ -32,7 +33,9 @@
     },
     setup(props) {
       const language = computed(() =>
-        props.user.language ? props.user.language.toUpperCase() : 'EN'
+        props.user.language
+          ? languageLabels[props.user.language]
+          : languageLabels['en']
       )
       const fistDayOfWeek = computed(() =>
         props.user.weekm ? 'MONDAY' : 'SUNDAY'

fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue

@@ -60,11 +60,11 @@
     reactive,
     onMounted,
   } from 'vue'
-  import { useI18n } from 'vue-i18n'
 
   import { ROOT_STORE, USER_STORE } from '@/store/constants'
   import { IUserProfile, IUserPreferencesPayload } from '@/types/user'
   import { useStore } from '@/use/useStore'
+  import { availableLanguages } from '@/utils/locales'
 
   export default defineComponent({
     name: 'UserPreferencesEdition',
@@ -75,16 +75,12 @@
       },
     },
     setup(props) {
-      const { availableLocales } = useI18n()
       const store = useStore()
       const userForm: IUserPreferencesPayload = reactive({
         language: '',
         timezone: 'Europe/Paris',
         weekm: false,
       })
-      const availableLanguages = availableLocales.map((l) => {
-        return { label: l.toUpperCase(), value: l }
-      })
       const weekStart = [
         {
           label: 'MONDAY',

fittrackee_client/src/utils/locales.ts

@@ -2,7 +2,19 @@
 import { Locale } from 'date-fns'
 import { enUS, fr } from 'date-fns/locale'
 
+import createI18n from '@/i18n'
+
 export const localeFromLanguage: Record<string, Locale> = {
   en: enUS,
   fr: fr,
 }
+
+export const languageLabels: Record<string, string> = {
+  en: 'English',
+  fr: 'Français',
+}
+
+const { availableLocales } = createI18n.global
+export const availableLanguages = availableLocales.map((l) => {
+  return { label: languageLabels[l], value: l }
+})