diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue index c04922537..919de8811 100644 --- a/src/components/date/datepickerWithRange.vue +++ b/src/components/date/datepickerWithRange.vue @@ -81,9 +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 { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage' -const authStore = useAuthStore() const {t} = useI18n({useScope: 'global'}) const emit = defineEmits(['update:modelValue']) @@ -93,8 +92,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 flatPickerConfig = computed(() => ({ altFormat: t('date.altFormatLong'), altInput: true, @@ -102,9 +99,7 @@ const flatPickerConfig = computed(() => ({ enableTime: false, wrap: true, mode: 'range', - locale: { - firstDayOf7Days: weekStart.value, - }, + locale: getFlatpickrLanguage(), })) const showHowItWorks = ref(false) diff --git a/src/components/input/datepickerInline.vue b/src/components/input/datepickerInline.vue index d060ab66d..041483331 100644 --- a/src/components/input/datepickerInline.vue +++ b/src/components/input/datepickerInline.vue @@ -80,8 +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 { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage' const props = defineProps({ modelValue: { @@ -105,8 +105,6 @@ watch( {immediate: true}, ) -const authStore = useAuthStore() -const weekStart = computed(() => authStore.settings.weekStart) const flatPickerConfig = computed(() => ({ altFormat: t('date.altFormatLong'), altInput: true, @@ -114,9 +112,7 @@ const flatPickerConfig = computed(() => ({ enableTime: true, time_24hr: true, inline: true, - locale: { - firstDayOfWeek: weekStart.value, - }, + locale: getFlatpickrLanguage(), })) // Since flatpickr dates are strings, we need to convert them to native date objects. diff --git a/src/components/tasks/GanttChart.vue b/src/components/tasks/GanttChart.vue index d536c6467..1a51fc9fa 100644 --- a/src/components/tasks/GanttChart.vue +++ b/src/components/tasks/GanttChart.vue @@ -61,6 +61,8 @@ import { import Loading from '@/components/misc/loading.vue' import {MILLISECONDS_A_DAY} from '@/constants/date' import {useWeekDayFromDate} from '@/helpers/time/formatDate' +import dayjs from 'dayjs' +import {useDayjsLanguageSync} from '@/i18n/useDayjsLanguageSync' export interface GanttChartProps { isLoading: boolean, @@ -81,8 +83,8 @@ const emit = defineEmits<{ const {tasks, filters} = toRefs(props) // setup dayjs for vue-ganttastic -const dayjsLanguageLoading = ref(false) -// const dayjsLanguageLoading = useDayjsLanguageSync(dayjs) +// const dayjsLanguageLoading = ref(false) +const dayjsLanguageLoading = useDayjsLanguageSync(dayjs) extendDayjs() const ganttContainer = ref(null) diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue index 16fc59d57..b9911a2ea 100644 --- a/src/components/tasks/partials/defer-task.vue +++ b/src/components/tasks/partials/defer-task.vue @@ -44,7 +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 { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage' const { modelValue, @@ -55,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() @@ -102,9 +101,7 @@ const flatPickerConfig = computed(() => ({ enableTime: true, time_24hr: true, inline: true, - locale: { - firstDayOfWeek: authStore.settings.weekStart, - }, + locale: getFlatpickrLanguage(), })) function deferDays(days: number) { diff --git a/src/helpers/flatpickrLanguage.ts b/src/helpers/flatpickrLanguage.ts new file mode 100644 index 000000000..e6b1546c6 --- /dev/null +++ b/src/helpers/flatpickrLanguage.ts @@ -0,0 +1,15 @@ +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/src/views/project/ProjectGantt.vue b/src/views/project/ProjectGantt.vue index ef270a6ed..cf9e1c8a6 100644 --- a/src/views/project/ProjectGantt.vue +++ b/src/views/project/ProjectGantt.vue @@ -54,7 +54,7 @@ import {useI18n} from 'vue-i18n' import type {RouteLocationNormalized} from 'vue-router' import {useBaseStore} from '@/stores/base' -import {useAuthStore} from '@/stores/auth' +import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage' import Foo from '@/components/misc/flatpickr/Flatpickr.vue' import ProjectWrapper from '@/components/project/ProjectWrapper.vue' @@ -126,16 +126,13 @@ const flatPickerDateRange = computed({ const initialDateRange = [filters.value.dateFrom, filters.value.dateTo] const {t} = useI18n({useScope: 'global'}) -const authStore = useAuthStore() const flatPickerConfig = computed(() => ({ altFormat: t('date.altFormatShort'), altInput: true, defaultDate: initialDateRange, enableTime: false, mode: 'range', - locale: { - firstDayOfWeek: authStore.settings.weekStart, - }, + locale: getFlatpickrLanguage(), })) diff --git a/src/views/user/settings/ApiTokens.vue b/src/views/user/settings/ApiTokens.vue index 5a56e1a48..63c0d176a 100644 --- a/src/views/user/settings/ApiTokens.vue +++ b/src/views/user/settings/ApiTokens.vue @@ -10,9 +10,9 @@ 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 { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage' const service = new ApiTokenService() const tokens = ref([]) @@ -32,18 +32,16 @@ const showDeleteModal = ref(false) const tokenToDelete = ref() const {t} = useI18n() -const authStore = useAuthStore() const now = new Date() + const flatPickerConfig = computed(() => ({ altFormat: t('date.altFormatLong'), altInput: true, dateFormat: 'Y-m-d H:i', enableTime: true, time_24hr: true, - locale: { - firstDayOfWeek: authStore.settings.weekStart, - }, + locale: getFlatpickrLanguage(), minDate: now, }))