Merge branch 'dev' into oauth2

fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue

@@ -6,9 +6,13 @@
         {{ sportTranslatedLabel }}
       </template>
       <template #content>
-        <div class="record" v-for="record in records.records" :key="record.id">
+        <div
+          class="record"
+          v-for="record in getTranslatedRecords(records.records)"
+          :key="record.id"
+        >
           <span class="record-type">
-            {{ $t(`workouts.RECORD_${record.record_type}`) }}
+            {{ record.label }}
           </span>
           <span class="record-value">{{ record.value }}</span>
           <span class="record-date">
@@ -29,8 +33,10 @@
 
 <script setup lang="ts">
   import { toRefs } from 'vue'
+  import { useI18n } from 'vue-i18n'
 
-  import { IRecordsBySports } from '@/types/workouts'
+  import { ICardRecord, IRecord, IRecordsBySports } from '@/types/workouts'
+  import { sortRecords } from '@/utils/records'
 
   interface Props {
     records: IRecordsBySports
@@ -39,6 +45,19 @@
   const props = defineProps<Props>()
 
   const { records, sportTranslatedLabel } = toRefs(props)
+
+  const { t } = useI18n()
+
+  function getTranslatedRecords(records: IRecord[]): ICardRecord[] {
+    const translatedRecords: ICardRecord[] = []
+    records.map((record) => {
+      translatedRecords.push({
+        ...record,
+        label: t(`workouts.RECORD_${record.record_type}`),
+      })
+    })
+    return translatedRecords.sort(sortRecords)
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -64,6 +83,7 @@
         padding: $default-padding;
         .record {
           display: flex;
+          align-items: center;
           justify-content: space-between;
           span {
             padding: 2px 5px;
@@ -73,6 +93,7 @@
           }
           .record-value {
             font-weight: bold;
+            white-space: nowrap;
             padding-right: $default-padding * 2;
           }
         }

fittrackee_client/src/components/Dashboard/UserRecords/index.vue

@@ -25,13 +25,13 @@
 
   import RecordsCard from '@/components/Dashboard/UserRecords/RecordsCard.vue'
   import { ISport } from '@/types/sports'
-  import { IUserProfile } from '@/types/user'
+  import { IAuthUserProfile } from '@/types/user'
   import { getRecordsBySports } from '@/utils/records'
   import { translateSports } from '@/utils/sports'
 
   interface Props {
     sports: ISport[]
-    user: IUserProfile
+    user: IAuthUserProfile
   }
   const props = defineProps<Props>()
 

fittrackee_client/src/components/NavBar.vue

@@ -79,7 +79,6 @@
 
 <script setup lang="ts">
   import { ComputedRef, computed, ref, capitalize } from 'vue'
-  import { useI18n } from 'vue-i18n'
 
   import UserPicture from '@/components/User/UserPicture.vue'
   import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
@@ -90,7 +89,6 @@
 
   const emit = defineEmits(['menuInteraction'])
 
-  const { locale } = useI18n()
   const store = useStore()
 
   const authUser: ComputedRef<IAuthUserProfile> = computed(
@@ -113,8 +111,10 @@
     emit('menuInteraction', false)
   }
   function updateLanguage(option: IDropdownOption) {
-    locale.value = option.value.toString()
-    store.commit(ROOT_STORE.MUTATIONS.UPDATE_LANG, option.value)
+    store.dispatch(
+      ROOT_STORE.ACTIONS.UPDATE_APPLICATION_LANGUAGE,
+      option.value.toString()
+    )
   }
   function logout() {
     store.dispatch(AUTH_USER_STORE.ACTIONS.LOGOUT)

fittrackee_client/src/components/User/UserAuthForm.vue

@@ -191,6 +191,9 @@
   const appConfig: ComputedRef<TAppConfig> = computed(
     () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
   )
+  const language: ComputedRef<string> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
+  )
   const registration_disabled: ComputedRef<boolean> = computed(
     () =>
       props.action === 'register' && !appConfig.value.is_registration_enabled
@@ -245,6 +248,7 @@
           }
         )
       default:
+        formData['language'] = language.value
         store.dispatch(AUTH_USER_STORE.ACTIONS.LOGIN_OR_REGISTER, {
           actionType,
           formData,

fittrackee_client/src/components/Workouts/WorkoutsList.vue

@@ -25,7 +25,7 @@
           :query="query"
         />
         <table>
-          <thead>
+          <thead :class="{ smaller: 'de' === currentLanguage }">
             <tr>
               <th class="sport-col" />
               <th>{{ capitalize($t('workouts.WORKOUT', 1)) }}</th>
@@ -79,7 +79,7 @@
                   :display-hover="true"
                 />
               </td>
-              <td>
+              <td class="workout-date">
                 <span class="cell-heading">
                   {{ $t('workouts.DATE') }}
                 </span>
@@ -179,7 +179,7 @@
   import Pagination from '@/components/Common/Pagination.vue'
   import StaticMap from '@/components/Common/StaticMap.vue'
   import NoWorkouts from '@/components/Workouts/NoWorkouts.vue'
-  import { WORKOUTS_STORE } from '@/store/constants'
+  import { ROOT_STORE, WORKOUTS_STORE } from '@/store/constants'
   import { IPagination } from '@/types/api'
   import { ITranslatedSport } from '@/types/sports'
   import { IAuthUserProfile } from '@/types/user'
@@ -214,6 +214,9 @@
   const pagination: ComputedRef<IPagination> = computed(
     () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUTS_PAGINATION]
   )
+  const currentLanguage: ComputedRef<string> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
+  )
   let query: TWorkoutsPayload = getWorkoutsQuery(route.query)
   const hoverWorkoutId: Ref<string | null> = ref(null)
 
@@ -238,9 +241,14 @@
   }
 
   function getWorkoutsQuery(newQuery: LocationQuery): TWorkoutsPayload {
-    const workoutQuery = getQuery(newQuery, orderByList, defaultOrder.order_by, {
-      defaultSort: defaultOrder.order,
-    })
+    const workoutQuery = getQuery(
+      newQuery,
+      orderByList,
+      defaultOrder.order_by,
+      {
+        defaultSort: defaultOrder.order,
+      }
+    )
     Object.keys(newQuery)
       .filter((k) => workoutsPayloadKeys.includes(k))
       .map((k) => {
@@ -287,7 +295,7 @@
     width: 100%;
 
     .box {
-      padding: $default-padding $default-padding * 2;
+      padding: $default-padding $default-padding * 1.5;
       @media screen and (max-width: $small-limit) {
         &.empty-table {
           display: none;
@@ -318,11 +326,22 @@
       }
 
       .workouts-table {
+        .smaller {
+          th {
+            font-size: 0.95em;
+            padding: $default-padding 0;
+            max-width: 100px;
+          }
+        }
+        td {
+          text-align: right;
+        }
         .sport-col {
-          padding-right: 0;
+          padding: 0;
         }
         .workout-title {
-          max-width: 90px;
+          text-align: left;
+          width: 100px;
           position: relative;
           .fa-map-o {
             font-size: 0.75em;
@@ -347,14 +366,27 @@
           height: 20px;
           width: 20px;
         }
+        .workout-date {
+          max-width: 60px;
+          text-align: left;
+        }
         @media screen and (max-width: $small-limit) {
+          td,
+          .workout-date,
+          .workout-title {
+            text-align: center;
+          }
           .sport-col {
             display: flex;
             justify-content: center;
             padding: $default-padding;
           }
+          .workout-date {
+            max-width: initial;
+          }
           .workout-title {
             max-width: initial;
+            width: 100%;
           }
           .workout-title:hover .static-map {
             display: none;