From f958962a424c48f74a8462ea2d273b78455a0dd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20=C3=96sterlund?= <tom.osterlund1@gmail.com>
Date: Sat, 9 Dec 2023 10:24:47 +0100
Subject: [PATCH] fix: add mapping for translation keys for mode

---
 src/components/header/Header.vue | 15 +++++++++------
 src/typings/types.ts             |  8 ++++++++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index 2816e69b..0962cb11 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -58,7 +58,7 @@
               :class="'is-' + calendarMode + '-mode'"
               @click="$emit('change-mode', calendarMode)"
             >
-              {{ getLanguage(languageKeys[calendarMode], time.CALENDAR_LOCALE) }}
+              {{ getTranslationForMode(calendarMode) }}
             </div>
           </template>
         </div>
@@ -79,7 +79,7 @@ import { type configInterface } from '../../typings/config.interface';
 import Time from '../../helpers/Time';
 import { type periodInterface } from '../../typings/interfaces/period.interface';
 import getLanguage from '../../language';
-import { type modeType } from '../../typings/types';
+import {ModeTranslationMapping, type modeType} from '../../typings/types';
 
 export default defineComponent({
   name: 'AppHeader',
@@ -157,10 +157,7 @@ export default defineComponent({
     },
 
     modeName() {
-      return this.getLanguage(
-        this.languageKeys[this.mode],
-        this.time?.CALENDAR_LOCALE
-      );
+      return this.getTranslationForMode(this.mode)
     },
 
     onlyDayModeIsEnabled() {
@@ -191,6 +188,12 @@ export default defineComponent({
     goToPeriod(direction: 'previous' | 'next') {
       (this.$refs.periodSelect as typeof DatePicker).goToPeriod(direction);
     },
+
+    getTranslationForMode(mode: modeType) {
+      const modeTranslationKey = ModeTranslationMapping[mode as keyof typeof ModeTranslationMapping]
+
+      return this.getLanguage(this.languageKeys[modeTranslationKey], this.time?.CALENDAR_LOCALE)
+    }
   }
 });
 </script>
diff --git a/src/typings/types.ts b/src/typings/types.ts
index 6569a4b5..07205d7c 100644
--- a/src/typings/types.ts
+++ b/src/typings/types.ts
@@ -21,3 +21,11 @@ export type DayInfo = {
   thisDayIndex: number,
   dateTimeString: string
 }
+
+// Since the agenda doesn't need its own translations, we map it to the month mode
+export enum ModeTranslationMapping {
+  month = "month",
+  agenda = "month",
+  week = "week",
+  day = "day",
+}