Refactor localization usage

src/components/EditTrainingDialog.vue

@@ -16,10 +16,13 @@ import useLocalizedActivities from '@/hooks/localizedActivities';
 const scheduleStore = useScheduleStore();
 const {schedule} = storeToRefs(scheduleStore);
 const {addOrEditTraining} = scheduleStore;
+
 const appStateStore = useAppStateStore();
 const {closeEditTrainingDialog} = appStateStore;
 const {trainingDialogOpen, trainingData} = storeToRefs(appStateStore);
+
 const {t} = useI18n();
+
 const {isSmallScreen} = useScreenSize();
 
 const tickLabels = computed(() => ({
@@ -72,10 +75,10 @@ const resetAndClose = () => {
     persistent
   >
     <v-card>
-      <v-card-title>{{ t('editTraining.title') }}</v-card-title>
+      <v-card-title>{{ $t('editTraining.title') }}</v-card-title>
       <v-card-text>
         <v-form>
-          <v-label for="edit-training-activity">{{ t('editTraining.activity') }}</v-label>
+          <v-label for="edit-training-activity">{{ $t('editTraining.activity') }}</v-label>
           <v-select
             id="edit-training-activity"
             v-model="trainingData.activity"
@@ -144,7 +147,7 @@ const resetAndClose = () => {
             @input="v$.description.$touch"
             @blur="v$.description.$touch"
           />
-          <v-label for="edit-training-intensity">{{ t('editTraining.intensity') }}</v-label>
+          <v-label for="edit-training-intensity">{{ $t('editTraining.intensity') }}</v-label>
           <v-slider
             id="edit-training-intensity"
             v-model="trainingData.intensity"
@@ -165,13 +168,13 @@ const resetAndClose = () => {
           color="primary"
           data-test-id="edit-training-save-button"
           @click="handleSave()"
-          >{{ t('editTraining.save') }}</v-btn
+          >{{ $t('editTraining.save') }}</v-btn
         >
         <v-btn
           prepend-icon="mdi-close"
           data-test-id="edit-training-close-button"
           @click="resetAndClose"
-          >{{ t('editTraining.closeDialog') }}</v-btn
+          >{{ $t('editTraining.closeDialog') }}</v-btn
         >
       </v-card-actions>
     </v-card>

src/components/ScheduleSettings.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue';
 import {storeToRefs} from 'pinia';
-import {useI18n} from 'vue-i18n';
 // import useVuelidate from '@vuelidate/core';
 // import {maxLength} from '@vuelidate/validators';
 import {useScheduleStore} from '@/stores/schedule';
@@ -12,11 +11,11 @@ import useScreenSize from '@/hooks/screenSize';
 const scheduleStore = useScheduleStore();
 const {schedule} = storeToRefs(scheduleStore);
 const {addWeek, changeUnitOfTime, toggleLockSchedule} = scheduleStore;
-const {t} = useI18n();
 
 const {isSmallScreen, isMediumScreen} = useScreenSize();
 
 const settingsOpen = ref<number | null>(0);
+
 const {localizedActivities} = useLocalizedActivities();
 
 const selectAll = computed({
@@ -47,7 +46,7 @@ const selectAll = computed({
       <v-expansion-panels v-model="settingsOpen">
         <v-expansion-panel elevation="0" class="bg-transparent">
           <v-expansion-panel-title data-test-id="schedule-settings__heading">
-            <h2 class="text-h5">{{ t('settings.title') }}</h2>
+            <h2 class="text-h5">{{ $t('settings.title') }}</h2>
           </v-expansion-panel-title>
           <v-expansion-panel-text>
             <!-- <v-text-field
@@ -61,42 +60,42 @@ const selectAll = computed({
               @input="v$.name.$touch"
               @blur="v$.name.$touch"
             /> -->
-            <v-label for="schedule-settings-start-of-week">{{ t('settings.startOfWeek') }}</v-label>
+            <v-label for="schedule-settings-start-of-week">{{ $t('settings.startOfWeek') }}</v-label>
             <v-radio-group
               id="schedule-settings-start-of-week"
               v-model="schedule.startsOnSunday"
               inline
             >
               <v-radio
-                :label="t('general.weekdays.monday')"
+                :label="$t('general.weekdays.monday')"
                 :value="false"
                 data-test-id="schedule-settings-start-of-week-monday"
               ></v-radio>
               <v-radio
-                :label="t('general.weekdays.sunday')"
+                :label="$t('general.weekdays.sunday')"
                 :value="true"
                 data-test-id="schedule-settings-start-of-week-sunday"
               ></v-radio>
             </v-radio-group>
-            <v-label for="schedule-settings-unit-of-time">{{ t('settings.unitOfTime') }}</v-label>
+            <v-label for="schedule-settings-unit-of-time">{{ $t('settings.unitOfTime') }}</v-label>
             <v-radio-group
               id="schedule-settings-unit-of-time"
               :model-value="schedule.unitOfTime"
               @update:model-value="changeUnitOfTime"
               inline
             >
               <v-radio
-                :label="t('settings.hours')"
+                :label="$t('settings.hours')"
                 value="h"
                 data-test-id="schedule-settings-unit-of-time-h"
               ></v-radio>
               <v-radio
-                :label="t('settings.minutes')"
+                :label="$t('settings.minutes')"
                 value="m"
                 data-test-id="schedule-settings-unit-of-time-m"
               ></v-radio>
             </v-radio-group>
-            <v-label>{{ t('settings.availableActivities') }}</v-label>
+            <v-label>{{ $t('settings.availableActivities') }}</v-label>
             <v-checkbox-btn
               v-model="selectAll"
               :value="true"
@@ -124,7 +123,7 @@ const selectAll = computed({
               </div>
             </div>
             <!-- <v-label for="schedule-settings-lock-schedule-button">{{
-              t('settings.lockSchedule')
+              $t('settings.lockSchedule')
             }}</v-label>
             <v-switch
               id="schedule-settings-lock-schedule-button"
@@ -143,7 +142,7 @@ const selectAll = computed({
         prepend-icon="mdi-plus"
         data-test-id="schedule-settings-add-week-button"
         @click="addWeek(), settingsOpen = null"
-        >{{ t('settings.addWeek') }}</v-btn
+        >{{ $t('settings.addWeek') }}</v-btn
       >
     </v-card-actions>
   </v-card>

src/components/SimpleTrainingCard.vue

@@ -4,38 +4,36 @@ import {useScheduleStore} from '@/stores/schedule';
 import {Intensity, type Training} from '@/types';
 import {getIcon} from '@/utils';
 import {ACTIVITIES} from '@/constants';
-import {useI18n} from 'vue-i18n';
 
 defineProps<{
   training: Training;
 }>();
 
 const scheduleStore = useScheduleStore();
 const {schedule} = storeToRefs(scheduleStore);
-const {t} = useI18n();
 </script>
 <template>
   <div class="simple-training-card mt-4">
     <div class="simple-training-card__title text-body-1">
       <v-icon
         :icon="getIcon(ACTIVITIES, training.activity)"
-        :title="t(`activities.${training.activity}`)"
-        :aria-label="t(`activities.${training.activity}`)"
+        :title="$t(`activities.${training.activity}`)"
+        :aria-label="$t(`activities.${training.activity}`)"
         class="simple-training-card__activity-icon"
       />
-      {{ training.title || t(`activities.${training.activity}`) }}
+      {{ training.title || $t(`activities.${training.activity}`) }}
     </div>
     <div v-if="training.duration" class="simple-training-card__duration text-body-1">
-      <v-icon icon="mdi-timer" :aria-label="t('trainingCard.duration')" />
+      <v-icon icon="mdi-timer" :aria-label="$t('trainingCard.duration')" />
       {{ training.duration }} {{ schedule.unitOfTime }}
     </div>
     <div v-if="training.location" class="simple-training-card__location text-body-1">
-      <v-icon icon="mdi-map-marker" :aria-label="t('trainingCard.location')" />
+      <v-icon icon="mdi-map-marker" :aria-label="$t('trainingCard.location')" />
       {{ training.location }}
     </div>
     <div class="simple-training-card__intensity text-body-1">
-      <v-icon icon="mdi-speedometer" :aria-label="t('trainingCard.intensity')" />
-      {{ t(`intensities.${Intensity[training.intensity]}`) }}
+      <v-icon icon="mdi-speedometer" :aria-label="$t('trainingCard.intensity')" />
+      {{ $t(`intensities.${Intensity[training.intensity]}`) }}
     </div>
   </div>
 </template>

src/components/TrainingCard.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {storeToRefs} from 'pinia';
-import {useI18n} from 'vue-i18n';
 import {Intensity, type Training} from '@/types';
 import {getIcon, getIntensityColor} from '@/utils';
 import {ACTIVITIES} from '@/constants';
@@ -16,13 +15,12 @@ defineProps<{
 
 const scheduleStore = useScheduleStore();
 const {schedule} = storeToRefs(scheduleStore);
+
 const appStateStore = useAppStateStore();
 const {isSummaryShown} = storeToRefs(appStateStore);
 const {toggleSummaryShown} = appStateStore;
 
 const {isSmallScreen} = useScreenSize();
-
-const {t} = useI18n();
 </script>
 <template>
   <v-card class="training-card mx-2 mt-4 mb-2">
@@ -32,27 +30,27 @@ const {t} = useI18n();
     >
       <v-icon
         :icon="getIcon(ACTIVITIES, training.activity)"
-        :title="t(`activities.${training.activity}`)"
-        :aria-label="t(`activities.${training.activity}`)"
+        :title="$t(`activities.${training.activity}`)"
+        :aria-label="$t(`activities.${training.activity}`)"
         :color="getIntensityColor(training.intensity)"
         class="training-card__activity-icon"
         size="x-large"
       />
       <v-card-title class="d-flex ml-15 flex-column justify-top">
         <div class="training-card__title">
-          {{ training.title || t(`activities.${training.activity}`) }}
+          {{ training.title || $t(`activities.${training.activity}`) }}
         </div>
         <div v-if="training.duration" class="training-card__duration text-subtitle-2">
-          <v-icon icon="mdi-timer" :aria-label="t('trainingCard.duration')" />
+          <v-icon icon="mdi-timer" :aria-label="$t('trainingCard.duration')" />
           {{ training.duration }} {{ schedule.unitOfTime }}
         </div>
         <div v-if="training.location" class="training-card__location text-subtitle-2">
-          <v-icon icon="mdi-map-marker" :aria-label="t('trainingCard.location')" />
+          <v-icon icon="mdi-map-marker" :aria-label="$t('trainingCard.location')" />
           {{ training.location }}
         </div>
         <div class="training-card__intensity text-subtitle-2">
-          <v-icon icon="mdi-speedometer" :aria-label="t('trainingCard.intensity')" />
-          {{ t(`intensities.${Intensity[training.intensity]}`) }}
+          <v-icon icon="mdi-speedometer" :aria-label="$t('trainingCard.intensity')" />
+          {{ $t(`intensities.${Intensity[training.intensity]}`) }}
         </div>
       </v-card-title>
     </v-card-item>
@@ -65,9 +63,7 @@ const {t} = useI18n();
         v-else
         class="training-card__show-summary-button"
         @click="toggleSummaryShown(training.id)"
-        >{{
-          t(isSummaryShown(training.id) ? 'trainingCard.hideSummary' : 'trainingCard.showSummary')
-        }}</v-btn
+        >{{ $t(isSummaryShown(training.id) ? 'trainingCard.hideSummary' : 'trainingCard.showSummary') }}</v-btn
       >
     </v-card-actions>
   </v-card>

src/components/TrainingCardActions.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import {useI18n} from 'vue-i18n';
 import {storeToRefs} from 'pinia';
 import {useAppStateStore} from '@/stores/appState';
 import {useScheduleStore} from '@/stores/schedule';
@@ -9,12 +8,14 @@ import useWeekDays from '@/hooks/weekdays';
 defineProps<{
   training: Training;
 }>();
+
 const scheduleStore = useScheduleStore();
 const {schedule} = storeToRefs(scheduleStore);
 const {deleteTraining, moveTraining, copyTraining} = scheduleStore;
+
 const appStateStore = useAppStateStore();
 const {openEditTrainingDialog} = appStateStore;
-const {t} = useI18n();
+
 const {weekdays} = useWeekDays();
 </script>
 <template>
@@ -23,26 +24,26 @@ const {weekdays} = useWeekDays();
     variant="flat"
     class="training-card__edit-button"
     @click="openEditTrainingDialog(training)"
-    >{{ t('trainingCard.editTraining') }}</v-btn
+    >{{ $t('trainingCard.editTraining') }}</v-btn
   >
   <v-menu location="end" :close-on-content-click="false">
     <template v-slot:activator="{props}">
       <v-btn append-icon="mdi-chevron-right" variant="flat" v-bind="props">
-        {{ t('trainingCard.actions') }}
+        {{ $t('trainingCard.actions') }}
       </v-btn>
     </template>
     <v-list open-strategy="single">
       <v-list-group>
         <template v-slot:activator="{props}">
           <v-list-item
             v-bind="props"
-            :title="t('trainingCard.move')"
+            :title="$t('trainingCard.move')"
             prepend-icon="mdi-arrow-all"
           />
         </template>
         <v-list-group v-for="(week, index) in schedule.weeks" :key="week.id">
           <template v-slot:activator="{props}">
-            <v-list-item v-bind="props" :title="t('weekCalendar.weekTitle', [index + 1])" />
+            <v-list-item v-bind="props" :title="$t('weekCalendar.weekTitle', [index + 1])" />
           </template>
           <v-list-item
             v-for="(day, dayIndex) in weekdays"
@@ -57,13 +58,13 @@ const {weekdays} = useWeekDays();
         <template v-slot:activator="{props}">
           <v-list-item
             v-bind="props"
-            :title="t('trainingCard.copy')"
+            :title="$t('trainingCard.copy')"
             prepend-icon="mdi-content-copy"
           />
         </template>
         <v-list-group v-for="(week, index) in schedule.weeks" :key="week.id">
           <template v-slot:activator="{props}">
-            <v-list-item v-bind="props" :title="t('weekCalendar.weekTitle', [index + 1])" />
+            <v-list-item v-bind="props" :title="$t('weekCalendar.weekTitle', [index + 1])" />
           </template>
           <v-list-item
             v-for="(day, dayIndex) in weekdays"
@@ -81,6 +82,6 @@ const {weekdays} = useWeekDays();
     color="error"
     class="training-card__delete-button"
     @click="deleteTraining(training)"
-    >{{ t('trainingCard.deleteTraining') }}</v-btn
+    >{{ $t('trainingCard.deleteTraining') }}</v-btn
   >
 </template>

src/components/TrainingCardSummary.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import {ref} from 'vue';
-import {useI18n} from 'vue-i18n';
 import {storeToRefs} from 'pinia';
+import useVuelidate from '@vuelidate/core';
+import {maxLength} from '@vuelidate/validators';
 import type {Training} from '@/types';
 import {useScheduleStore} from '@/stores/schedule';
 import {useAppStateStore} from '@/stores/appState';
-import useVuelidate from '@vuelidate/core';
-import {maxLength} from '@vuelidate/validators';
 import {getValidationErrors} from '@/utils';
 
 const props = defineProps<{
@@ -16,9 +15,10 @@ const props = defineProps<{
 const completionSummary = ref(props.training.completionSummary);
 const scheduleStore = useScheduleStore();
 const {saveCompletionSummary} = scheduleStore;
+
 const appStateStore = useAppStateStore();
 const {isSummaryShown} = storeToRefs(appStateStore);
-const {t} = useI18n();
+
 const v$ = useVuelidate(
   {
     completionSummary: {maxLength: maxLength(2000)},
@@ -41,7 +41,7 @@ const handleSave = async () => {
       v-if="isSummaryShown(training.id)"
       v-model="completionSummary"
       :error-messages="getValidationErrors(v$.completionSummary)"
-      :label="t('trainingCard.completionSummary')"
+      :label="$t('trainingCard.completionSummary')"
       maxlength="2000"
       no-resize
       counter