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>

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)

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)

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.

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>

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) {

frontend/src/helpers/flatpickrLanguage.ts

@@ -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
-}

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
+	})
+}

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,
 }))