update datepicker locale

src/components/date/datepickerWithRange.vue

@@ -81,11 +81,8 @@ 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 {useAuthStore} from '@/stores/auth'
-import FlatpickrLanguages from 'flatpickr/dist/l10n'
-import {TRANS_LOCALES} from '@/i18n'
+import { getFlatLanguage } from '@/helpers/dayLocale'
 
-const authStore = useAuthStore()
 const {t} = useI18n({useScope: 'global'})
 
 const emit = defineEmits(['update:modelValue'])
@@ -96,9 +93,6 @@ const props = defineProps({
 })
 
 // FIXME: This seems to always contain the default value - that breaks the picker
-const weekStart = computed(() => authStore.settings.weekStart ?? 0)
-const locLang = FlatpickrLanguages[TRANS_LOCALES[authStore.settings.language]]
-locLang.firstDayOfWeek = weekStart.value
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@@ -106,7 +100,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: false,
 	wrap: true,
 	mode: 'range',
-	locale: locLang,
+	locale: getFlatLanguage(),
 }))
 
 const showHowItWorks = ref(false)

src/components/input/datepickerInline.vue

@@ -80,10 +80,8 @@ import {formatDate} from '@/helpers/time/formatDate'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
-import {useAuthStore} from '@/stores/auth'
 import {useI18n} from 'vue-i18n'
-import FlatpickrLanguages from 'flatpickr/dist/l10n'
-import {TRANS_LOCALES} from '@/i18n'
+import { getFlatLanguage } from '@/helpers/dayLocale'
 
 const props = defineProps({
 	modelValue: {
@@ -107,10 +105,6 @@ watch(
 	{immediate: true},
 )
 
-const authStore = useAuthStore()
-const weekStart = computed(() => authStore.settings.weekStart)
-const locLang = FlatpickrLanguages[TRANS_LOCALES[authStore.settings.language]]
-locLang.firstDayOfWeek = weekStart.value
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@@ -118,7 +112,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: true,
 	time_24hr: true,
 	inline: true,
-	locale: locLang,
+	locale: getFlatLanguage(),
 }))
 
 // Since flatpickr dates are strings, we need to convert them to native date objects.

src/components/tasks/partials/defer-task.vue

@@ -44,9 +44,7 @@ import flatPickr from 'vue-flatpickr-component'
 
 import TaskService from '@/services/task'
 import type {ITask} from '@/modelTypes/ITask'
-import {useAuthStore} from '@/stores/auth'
-import FlatpickrLanguages from 'flatpickr/dist/l10n'
-import {TRANS_LOCALES} from '@/i18n'
+import { getFlatLanguage } from '@/helpers/dayLocale'
 
 const {
 	modelValue,
@@ -57,7 +55,6 @@ const {
 const emit = defineEmits(['update:modelValue'])
 
 const {t} = useI18n({useScope: 'global'})
-const authStore = useAuthStore()
 
 const taskService = shallowReactive(new TaskService())
 const task = ref<ITask>()
@@ -97,9 +94,6 @@ onBeforeUnmount(() => {
 	updateDueDate()
 })
 
-const locLang = FlatpickrLanguages[TRANS_LOCALES[authStore.settings.language]]
-locLang.firstDayOfWeek = authStore.settings.weekStart
-
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@@ -107,7 +101,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: true,
 	time_24hr: true,
 	inline: true,
-	locale: locLang,
+	locale: getFlatLanguage(),
 }))
 
 function deferDays(days: number) {

src/helpers/dayLocale.ts

@@ -0,0 +1,22 @@
+import {useAuthStore} from '@/stores/auth'
+import FlatpickrLanguages from 'flatpickr/dist/l10n'
+import type { CustomLocale } from 'flatpickr/dist/types/locale'
+
+export function getFlatLanguage(): CustomLocale {
+	const authStore = useAuthStore()
+	const lang = authStore.settings.language
+	const entries = Object.entries(FlatpickrLanguages).filter(([langKey]) => {
+		if (lang === 'vi-VN') {
+			return langKey === 'vn'
+		} else {
+			return langKey === lang || lang.startsWith(langKey + '-')
+		}
+	})
+	let language = entries.at(0)?.[1]
+	// default english
+	if (language == undefined) {
+		language = FlatpickrLanguages['en']
+	}
+	language.firstDayOfWeek = authStore.settings.weekStart ?? 0
+	return language
+}

src/i18n/index.ts

@@ -23,28 +23,6 @@ export const SUPPORTED_LOCALES = {
 	'sl-SI': 'Slovenščina',
 } as const
 
-export const TRANS_LOCALES = {
-	'en': 'en',
-	'de-DE': 'de',
-	'de-swiss': 'de',
-	'ru-RU': 'ru',
-	'fr-FR': 'fr',
-	'vi-VN': 'vn',
-	'it-IT': 'it',
-	'cs-CZ': 'cs',
-	'pl-PL': 'pl',
-	'nl-NL': 'nl',
-	'pt-PT': 'pt',
-	'zh-CN': 'zh',
-	'no-NO': 'no',
-	'es-ES': 'es',
-	'da-DK': 'da',
-	'ja-JP': 'ja',
-	'hu-HU': 'hu',
-	'ar-SA': 'ar',
-	'sl-SI': 'sl',
-} as const
-
 export type SupportedLocale = keyof typeof SUPPORTED_LOCALES
 
 export const DEFAULT_LANGUAGE: SupportedLocale= 'en'

src/views/project/ProjectGantt.vue

@@ -50,13 +50,11 @@
 <script setup lang="ts">
 import {computed, ref, toRefs} from 'vue'
 import type Flatpickr from 'flatpickr'
-import FlatpickrLanguages from 'flatpickr/dist/l10n'
-import {TRANS_LOCALES} from '@/i18n'
 import {useI18n} from 'vue-i18n'
 import type {RouteLocationNormalized} from 'vue-router'
 
 import {useBaseStore} from '@/stores/base'
-import {useAuthStore} from '@/stores/auth'
+import { getFlatLanguage } from '@/helpers/dayLocale'
 
 import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
 import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
@@ -128,16 +126,13 @@ const flatPickerDateRange = computed<Date[]>({
 const initialDateRange = [filters.value.dateFrom, filters.value.dateTo]
 
 const {t} = useI18n({useScope: 'global'})
-const authStore = useAuthStore()
-const locLang = FlatpickrLanguages[TRANS_LOCALES[authStore.settings.language]]
-locLang.firstDayOfWeek = authStore.settings.weekStart
 const flatPickerConfig = computed<Options>(() => ({
 	altFormat: t('date.altFormatShort'),
 	altInput: true,
 	defaultDate: initialDateRange,
 	enableTime: false,
 	mode: 'range',
-	locale: locLang,
+	locale: getFlatLanguage(),
 }))
 </script>
 

src/views/user/settings/ApiTokens.vue

@@ -10,11 +10,10 @@ import {MILLISECONDS_A_DAY} from '@/constants/date'
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import {useI18n} from 'vue-i18n'
-import {useAuthStore} from '@/stores/auth'
 import Message from '@/components/misc/message.vue'
 import type {IApiToken} from '@/modelTypes/IApiToken'
 import FlatpickrLanguages from 'flatpickr/dist/l10n'
-import {TRANS_LOCALES} from '@/i18n'
+import { getFlatLanguage } from '@/helpers/dayLocale'
 
 const service = new ApiTokenService()
 const tokens = ref<IApiToken[]>([])
@@ -34,11 +33,8 @@ const showDeleteModal = ref<boolean>(false)
 const tokenToDelete = ref<IApiToken>()
 
 const {t} = useI18n()
-const authStore = useAuthStore()
 
 const now = new Date()
-const locLang = FlatpickrLanguages[TRANS_LOCALES[authStore.settings.language]]
-locLang.firstDayOfWeek = authStore.settings.weekStart
 
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
@@ -46,7 +42,7 @@ const flatPickerConfig = computed(() => ({
 	dateFormat: 'Y-m-d H:i',
 	enableTime: true,
 	time_24hr: true,
-	locale: locLang,
+	locale: getFlatLanguage(),
 	minDate: now,
 }))