Client - update language labels

fittrackee/dist/precache-manifest.270aa73e5830a623ad4ac1a46bb6e66e.js

@@ -64,7 +64,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/img/workouts/mountains.svg"
   },
   {
-    "revision": "1681d9bfc3e483492adc3bc03b2e53a7",
+    "revision": "d31c98a045a9575934a29b6870e4155f",
     "url": "/index.html"
   },
   {
@@ -80,8 +80,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/static/css/admin.c784857e.css"
   },
   {
-    "revision": "d87f7b928b3d3d7e1e28",
+    "revision": "62a8f1fddcb801ef130d",
-    "url": "/static/css/app.975b8eaa.css"
+    "url": "/static/css/app.6f17ce7a.css"
   },
   {
     "revision": "82c1118c918377daaa71a320ab8eea42",
@@ -196,8 +196,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/static/js/admin.b2c267a7.js"
   },
   {
-    "revision": "d87f7b928b3d3d7e1e28",
+    "revision": "62a8f1fddcb801ef130d",
-    "url": "/static/js/app.91708248.js"
+    "url": "/static/js/app.ccf74644.js"
   },
   {
     "revision": "bd7d183c9f68e5f4027d",
@@ -220,8 +220,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/static/js/chunk-2d22523a.4b710d99.js"
   },
   {
-    "revision": "a615d4d8fb84bb83ba6f",
+    "revision": "9c1366622a8bb7c99e50",
-    "url": "/static/js/chunk-vendors.55c26bde.js"
+    "url": "/static/js/chunk-vendors.17cfd9a1.js"
   },
   {
     "revision": "1f78bd1a76f3d72fb765",

fittrackee/dist/service-worker.js

@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "/precache-manifest.fb4e4dd9eb3e3aa1a16fb718a17d6ae4.js"
+  "/precache-manifest.270aa73e5830a623ad4ac1a46bb6e66e.js"
 );
 
 workbox.core.setCacheNameDetails({prefix: "fittrackee_client"});

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="/">{{
+            <router-link class="nav-item" to="/">
-              $t('dashboard.DASHBOARD')
+              {{ $t('dashboard.DASHBOARD') }}
-            }}</router-link>
+            </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">{{
+            <router-link class="nav-item" to="/login" @click="closeMenu">
-              $t('user.LOGIN')
+              {{ $t('user.LOGIN') }}
-            }}</router-link>
+            </router-link>
-            <router-link class="nav-item" to="/register" @click="closeMenu">{{
+            <router-link class="nav-item" to="/register" @click="closeMenu">
-              $t('user.REGISTER')
+              {{ $t('user.REGISTER') }}
-            }}</router-link>
+            </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 }
+})