Merge pull request #4116 from nextcloud/enh/dateTime-handling

Use locale code instead of language code for luxon

Author: dartcafe

CHANGELOG.md

@@ -9,6 +9,8 @@ All notable changes to this project will be documented in this file.
 ## [8.0.1] - 2025-06-22
 ### Fix
  - Fixed display of the list view mode
+ - Use locale instead of language for date and time representation
+ - Fixed representation of time interval when adding a date option with a duration
 
 ## [8.0.0] - 2025-06-22
 ### Changes

lib/Model/UserBase.php

@@ -168,7 +168,7 @@ public function getLanguageCode(): string {
 	}
 
 	public function getLanguageCodeIntl(): string {
-		return str_replace('_', '-', $this->languageCode);
+		return str_replace('_', '-', $this->getLanguageCode());
 	}
 
 	public function getLocaleCode(): string {
@@ -179,6 +179,10 @@ public function getLocaleCode(): string {
 		return $this->localeCode;
 	}
 
+	public function getLocaleCodeIntl(): string {
+		return str_replace('_', '-', $this->getLocaleCode());
+	}
+
 	public function getTimeZone(): DateTimeZone {
 		if ($this->timeZoneName) {
 			return new DateTimeZone($this->timeZoneName);
@@ -329,6 +333,7 @@ public function getRichUserArray(): array {
 			'languageCode' => $this->getLanguageCode(),
 			'languageCodeIntl' => $this->getLanguageCodeIntl(),
 			'localeCode' => $this->getLocaleCode(),
+			'localeCodeIntl' => $this->getLocaleCodeIntl(),
 			'organisation' => $this->getOrganisation(),
 			'subname' => $this->getSubName(),
 			'subtitle' => $this->getDescription(),

src/Types/index.ts

@@ -166,6 +166,7 @@ export type User = {
 	languageCode: string
 	languageCodeIntl: string
 	localeCode: string | null
+	localeCodeIntl: string | null
 	timeZone: string | null
 	categories: string[] | null
 }

src/components/Base/modules/DateBox.vue

@@ -6,65 +6,54 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { DateTime, Duration, Interval } from 'luxon'
-import { useSessionStore } from '../../../stores/session.ts'
 
 interface Props {
 	dateTime: DateTime
 	duration?: Duration
 }
-const { dateTime: luxonDate, duration: luxonDuration = Duration.fromMillis(0) } =
-	defineProps<Props>()
+const { dateTime, duration = Duration.fromMillis(0) } = defineProps<Props>()
 
-const from = computed(() =>
-	luxonDate.setLocale(sessionStore.currentUser.languageCodeIntl),
-)
-
-const sessionStore = useSessionStore()
 // the dates span one or more entire days
 // do not display the time in this case
 const allDay = computed(
 	() =>
-		from.value.startOf('day').toSeconds() === from.value.toSeconds()
-		&& luxonDuration.as('seconds') % 86400 === 0,
+		dateTime.startOf('day').toSeconds() === dateTime.toSeconds()
+		&& duration.as('seconds') % 86400 === 0,
 )
 
 // 'to' is 'from' plus the duration
 // subtract a day if allDay is true and luxonDuration is greater than 0 to match the
 // end of the day after the duration instead of the beginning of the next day
 const to = computed(() =>
-	from.value
-		.plus(luxonDuration)
-		.minus({ day: allDay.value && luxonDuration.as('seconds') > 0 ? 1 : 0 }),
+	dateTime
+		.plus(duration)
+		.minus({ day: allDay.value && duration.as('seconds') > 0 ? 1 : 0 }),
 )
 
 // to and from dates have the same month (and year)
 // suppress the 'to' month if they are the same
 const isSameMonth = computed(
-	() => from.value.month === to.value.month && from.value.year === to.value.year,
+	() => dateTime.month === to.value.month && dateTime.year === to.value.year,
 )
 
 // to and from dates have the same day (in the same month and year)
 // suppress the 'to' day if they are the same
 // display the interval as timespan inside the same day
-const isSameDay = computed(
-	() => from.value.day === to.value.day && isSameMonth.value,
-)
+const isSameDay = computed(() => dateTime.day === to.value.day && isSameMonth.value)
 
 // Shortcut: 'to' and 'from' are identical
 // suppress the 'to' time if they are the same
-const isSameTime = computed(() => luxonDuration.as('seconds') === 0)
+const isSameTime = computed(() => duration.as('seconds') === 0)
 
-const interval = computed(() =>
-	Interval.fromDateTimes(from.value.toUTC(), to.value.toUTC()),
-)
+const interval = computed(() => Interval.fromDateTimes(dateTime, to.value))
 </script>
 
 <template>
 	<div :title="interval.toISO()" class="datebox">
 		<div class="month from" :class="{ span: isSameMonth }">
 			{{
-				from.toLocaleString(
-					DateTime.now().year === from.year
+				dateTime.toLocaleString(
+					DateTime.now().year === dateTime.year
 						? { month: 'short' }
 						: { month: 'short', year: '2-digit' },
 				)
@@ -74,15 +63,15 @@ const interval = computed(() =>
 		<div v-if="!isSameMonth" class="month to">
 			{{
 				to.toLocaleString(
-					DateTime.now().year === from.year
+					DateTime.now().year === dateTime.year
 						? { month: 'short' }
 						: { month: 'short', year: '2-digit' },
 				)
 			}}
 		</div>
 
 		<div class="day from" :class="{ span: isSameDay }">
-			{{ from.toLocaleString({ weekday: 'short', day: 'numeric' }) }}
+			{{ dateTime.toLocaleString({ weekday: 'short', day: 'numeric' }) }}
 		</div>
 
 		<span v-if="!isSameDay" class="day divider">–</span>
@@ -95,7 +84,7 @@ const interval = computed(() =>
 			{{
 				isSameDay && !isSameTime
 					? interval.toLocaleString(DateTime.TIME_SIMPLE)
-					: from.toLocaleString(DateTime.TIME_SIMPLE)
+					: dateTime.toLocaleString(DateTime.TIME_SIMPLE)
 			}}
 		</div>
 

src/components/Export/ExportPoll.vue

@@ -29,7 +29,6 @@ import { Answer, AnswerSymbol, useVotesStore } from '../../stores/votes.ts'
 import { Option, useOptionsStore } from '../../stores/options.ts'
 import { AxiosError } from '@nextcloud/axios'
 import { DateTime, Interval } from 'luxon'
-import { useSessionStore } from '../../stores/session.ts'
 
 enum ArrayStyle {
 	Symbols = 'symbols',
@@ -48,7 +47,6 @@ const route = useRoute()
 const pollStore = usePollStore()
 const votesStore = useVotesStore()
 const optionsStore = useOptionsStore()
-const sessionStore = useSessionStore()
 
 const regex = /[:\\/?*[\]]/g
 
@@ -211,9 +209,9 @@ function getIntervalRaw(option: Option): string {
  * @param option - option
  */
 function getFromFormatted(option: Option): string {
-	return DateTime.fromSeconds(option.timestamp)
-		.setLocale(sessionStore.currentUser.languageCodeIntl)
-		.toLocaleString(DateTime.DATETIME_MED_WITH_WEEKDAY)
+	return DateTime.fromSeconds(option.timestamp).toLocaleString(
+		DateTime.DATETIME_MED_WITH_WEEKDAY,
+	)
 }
 
 /**
@@ -222,7 +220,6 @@ function getFromFormatted(option: Option): string {
  */
 function getToFormatted(option: Option): string {
 	return DateTime.fromSeconds(option.timestamp)
-		.setLocale(sessionStore.currentUser.languageCodeIntl)
 		.plus({ seconds: option.duration })
 		.toLocaleString(DateTime.DATETIME_MED_WITH_WEEKDAY)
 }

src/components/Options/OptionItemDateBox.vue

@@ -5,22 +5,17 @@
 
 <script setup lang="ts">
 import { DateTime, Duration } from 'luxon'
-import { useSessionStore } from '../../stores/session.ts'
 import DateBox from '../Base/modules/DateBox.vue'
 
 interface Props {
 	timeStamp: number
 	durationSeconds?: number
 }
 
-const sessionStore = useSessionStore()
-
 const { timeStamp, durationSeconds = 0 } = defineProps<Props>()
 
 // computed from as DateTime from Luxon
-const from = DateTime.fromSeconds(timeStamp).setLocale(
-	sessionStore.currentUser.languageCodeIntl,
-)
+const from = DateTime.fromSeconds(timeStamp)
 
 const duration = Duration.fromMillis(durationSeconds * 1000)
 </script>

src/components/Options/OptionsDateAddDialog.vue

@@ -15,7 +15,6 @@ import CheckIcon from 'vue-material-design-icons/Check.vue'
 
 import { InputDiv } from '../Base/index.ts'
 import DateTimePicker from '../Base/modules/DateTimePicker.vue'
-import { useSessionStore } from '../../stores/session'
 import { useOptionsStore, Sequence } from '../../stores/options'
 import { StatusResults } from '../../Types'
 import { DurationType, dateTimeUnitsKeyed } from '../../constants/dateUnits.ts'
@@ -28,7 +27,6 @@ import DateBox from '../Base/modules/DateBox.vue'
 
 const { isBelowWidthOffset } = useResizeObserver('add-date-options-container', 355)
 
-const sessionStore = useSessionStore()
 const optionsStore = useOptionsStore()
 
 const timeStepMinutes = 15
@@ -85,14 +83,10 @@ const dateTimeOptionsFiltered = computed(() => {
 
 // computed from as DateTime from Luxon
 const from = computed(() => {
-	const dateFrom = DateTime.fromJSDate(fromInput.value).setLocale(
-		sessionStore.currentUser.languageCodeIntl,
-	)
+	const dateFrom = DateTime.fromJSDate(fromInput.value)
 	// if the option is an all day option, the time is set to 00:00
 	if (allDay.value) {
-		return dateFrom
-			.startOf('day')
-			.setLocale(sessionStore.currentUser.languageCodeIntl)
+		return dateFrom.startOf('day')
 	}
 	return dateFrom
 })

src/composables/context.ts

@@ -7,13 +7,18 @@ import { RouteLocationNormalized } from 'vue-router'
 import { useSessionStore } from '../stores/session.ts'
 import { usePreferencesStore } from '../stores/preferences.ts'
 import { Logger } from '../helpers/index.ts'
+import { Settings } from 'luxon'
 
 async function loadContext(to: RouteLocationNormalized) {
 	const sessionStore = useSessionStore()
 	const preferencesStore = usePreferencesStore()
 
 	await sessionStore.load(to)
 
+	Settings.defaultLocale =
+		sessionStore.currentUser.localeCodeIntl
+		|| sessionStore.currentUser.languageCodeIntl
+
 	if (sessionStore.userStatus.isLoggedin) {
 		await preferencesStore.load()
 	}