From 79071a19096650348ce580c787fb6db12d31ef3b Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 14 Jan 2025 11:46:17 +0000
Subject: [PATCH] feat: reactive flatpicker language (#2628)

Reviewed-on: https://kolaente.dev/vikunja/vikunja/pulls/2628
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-committed-by: Dominik Pschenitschni <mail@celement.de>
---
 .../components/date/DatepickerWithRange.vue   |  4 ++--
 .../components/date/DatepickerWithValues.vue  |  4 ++--
 .../src/components/input/DatepickerInline.vue |  4 ++--
 .../components/project/views/ProjectGantt.vue |  8 +++----
 .../components/tasks/partials/DeferTask.vue   |  4 ++--
 frontend/src/helpers/flatpickrLanguage.ts     | 15 -------------
 frontend/src/helpers/useFlatpickrLanguage.ts  | 22 +++++++++++++++++++
 .../src/views/user/settings/ApiTokens.vue     |  4 ++--
 8 files changed, 36 insertions(+), 29 deletions(-)
 delete mode 100644 frontend/src/helpers/flatpickrLanguage.ts
 create mode 100644 frontend/src/helpers/useFlatpickrLanguage.ts

diff --git a/frontend/src/components/date/DatepickerWithRange.vue b/frontend/src/components/date/DatepickerWithRange.vue
index 63d2c1872..47e5efbdf 100644
--- a/frontend/src/components/date/DatepickerWithRange.vue
+++ b/frontend/src/components/date/DatepickerWithRange.vue
@@ -112,7 +112,7 @@ import Popup from '@/components/misc/Popup.vue'
 import {DATE_RANGES} from '@/components/date/dateRanges'
 import BaseButton from '@/components/base/BaseButton.vue'
 import DatemathHelp from '@/components/date/DatemathHelp.vue'
-import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
+import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 
 const props = defineProps<{
 	modelValue: {
@@ -137,7 +137,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: false,
 	wrap: true,
 	mode: 'range',
-	locale: getFlatpickrLanguage(),
+	locale: useFlatpickrLanguage().value,
 }))
 
 const showHowItWorks = ref(false)
diff --git a/frontend/src/components/date/DatepickerWithValues.vue b/frontend/src/components/date/DatepickerWithValues.vue
index 09d0b6f62..bf2000510 100644
--- a/frontend/src/components/date/DatepickerWithValues.vue
+++ b/frontend/src/components/date/DatepickerWithValues.vue
@@ -89,7 +89,7 @@ import Popup from '@/components/misc/Popup.vue'
 import {DATE_VALUES} from '@/components/date/dateRanges'
 import BaseButton from '@/components/base/BaseButton.vue'
 import DatemathHelp from '@/components/date/DatemathHelp.vue'
-import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
+import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 
 const props = withDefaults(defineProps<{
 	modelValue: string | Date | null,
@@ -112,7 +112,7 @@ const flatPickerConfig = computed(() => ({
 	dateFormat: 'Y-m-d H:i',
 	enableTime: false,
 	wrap: true,
-	locale: getFlatpickrLanguage(),
+	locale: useFlatpickrLanguage().value,
 }))
 
 const showHowItWorks = ref(false)
diff --git a/frontend/src/components/input/DatepickerInline.vue b/frontend/src/components/input/DatepickerInline.vue
index 99635d86c..bee2f3e85 100644
--- a/frontend/src/components/input/DatepickerInline.vue
+++ b/frontend/src/components/input/DatepickerInline.vue
@@ -82,7 +82,7 @@ import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
 import {useI18n} from 'vue-i18n'
-import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
+import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 
 const props = withDefaults(defineProps<{
 	modelValue: Date | null | string
@@ -114,7 +114,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: true,
 	time_24hr: true,
 	inline: true,
-	locale: getFlatpickrLanguage(),
+	locale: useFlatpickrLanguage().value,
 }))
 
 // Since flatpickr dates are strings, we need to convert them to native date objects.
diff --git a/frontend/src/components/project/views/ProjectGantt.vue b/frontend/src/components/project/views/ProjectGantt.vue
index 6f459ecf8..50a4b5337 100644
--- a/frontend/src/components/project/views/ProjectGantt.vue
+++ b/frontend/src/components/project/views/ProjectGantt.vue
@@ -77,7 +77,7 @@ import {useI18n} from 'vue-i18n'
 import type {RouteLocationNormalized} from 'vue-router'
 
 import {useBaseStore} from '@/stores/base'
-import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
+import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 
 import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
 import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
@@ -153,14 +153,14 @@ const flatPickerDateRange = computed<Date[]>({
 const initialDateRange = [filters.value.dateFrom, filters.value.dateTo]
 
 const {t} = useI18n({useScope: 'global'})
-const flatPickerConfig = computed<Options>(() => ({
+const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatShort'),
 	altInput: true,
 	defaultDate: initialDateRange,
 	enableTime: false,
 	mode: 'range',
-	locale: getFlatpickrLanguage(),
-}))
+	locale: useFlatpickrLanguage().value,
+} as Options))
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/tasks/partials/DeferTask.vue b/frontend/src/components/tasks/partials/DeferTask.vue
index 3d475dfa5..c88b23c06 100644
--- a/frontend/src/components/tasks/partials/DeferTask.vue
+++ b/frontend/src/components/tasks/partials/DeferTask.vue
@@ -44,7 +44,7 @@ import flatPickr from 'vue-flatpickr-component'
 
 import TaskService from '@/services/task'
 import type {ITask} from '@/modelTypes/ITask'
-import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
+import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 
 const props = defineProps<{
 	modelValue: ITask,
@@ -101,7 +101,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: true,
 	time_24hr: true,
 	inline: true,
-	locale: getFlatpickrLanguage(),
+	locale: useFlatpickrLanguage().value,
 }))
 
 function deferDays(days: number) {
diff --git a/frontend/src/helpers/flatpickrLanguage.ts b/frontend/src/helpers/flatpickrLanguage.ts
deleted file mode 100644
index e6b1546c6..000000000
--- a/frontend/src/helpers/flatpickrLanguage.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import {useAuthStore} from '@/stores/auth'
-import FlatpickrLanguages from 'flatpickr/dist/l10n'
-import type { CustomLocale, key } from 'flatpickr/dist/types/locale'
-
-export function getFlatpickrLanguage(): CustomLocale {
-	const authStore = useAuthStore()
-	const lang = authStore.settings.language
-	const langPair = lang.split('-')
-	let language = FlatpickrLanguages[lang === 'vi-vn' ? 'vn' : 'en']
-	if (langPair.length > 0 && FlatpickrLanguages[langPair[0] as key] !== undefined) {
-		language = FlatpickrLanguages[langPair[0] as key]
-	}
-	language.firstDayOfWeek = authStore.settings.weekStart ?? language.firstDayOfWeek
-	return language
-}
\ No newline at end of file
diff --git a/frontend/src/helpers/useFlatpickrLanguage.ts b/frontend/src/helpers/useFlatpickrLanguage.ts
new file mode 100644
index 000000000..fae42eaa0
--- /dev/null
+++ b/frontend/src/helpers/useFlatpickrLanguage.ts
@@ -0,0 +1,22 @@
+import {useAuthStore} from '@/stores/auth'
+// TODO: only import needed languages
+import FlatpickrLanguages from 'flatpickr/dist/l10n'
+import type { key } from 'flatpickr/dist/types/locale'
+import { computed } from 'vue'
+
+export function useFlatpickrLanguage() {
+	const authStore = useAuthStore()
+
+	return computed(() => {
+		const userLanguage = authStore.settings.language
+		if (!userLanguage) {
+			return FlatpickrLanguages.en
+		}
+
+		const langPair = userLanguage.split('-')
+		const code = userLanguage === 'vi-VN' ? 'vn' : 'en'
+		const language = FlatpickrLanguages?.[langPair?.[0] as key] || FlatpickrLanguages[code]
+		language.firstDayOfWeek = authStore.settings.weekStart ?? language.firstDayOfWeek
+		return language
+	})
+}
\ No newline at end of file
diff --git a/frontend/src/views/user/settings/ApiTokens.vue b/frontend/src/views/user/settings/ApiTokens.vue
index 10293f68f..70b474c35 100644
--- a/frontend/src/views/user/settings/ApiTokens.vue
+++ b/frontend/src/views/user/settings/ApiTokens.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ApiTokenService from '@/services/apiToken'
 import {computed, onMounted, ref} from 'vue'
+import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import XButton from '@/components/input/Button.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -12,7 +13,6 @@ import 'flatpickr/dist/flatpickr.css'
 import {useI18n} from 'vue-i18n'
 import Message from '@/components/misc/Message.vue'
 import type {IApiToken} from '@/modelTypes/IApiToken'
-import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
 
 const service = new ApiTokenService()
 const tokens = ref<IApiToken[]>([])
@@ -42,7 +42,7 @@ const flatPickerConfig = computed(() => ({
 	dateFormat: 'Y-m-d H:i',
 	enableTime: true,
 	time_24hr: true,
-	locale: getFlatpickrLanguage(),
+	locale: useFlatpickrLanguage().value,
 	minDate: now,
 }))