Merge pull request #46592 from nextcloud/feat/first-day-of-week-user-setting

feat: let users configure their first day of week

6 files changed, 137 insertions, 1 deletions

diff --git a/apps/settings/lib/Settings/Personal/PersonalInfo.php b/apps/settings/lib/Settings/Personal/PersonalInfo.php
index 1c34bc52d40..f79f7d52665 100644
--- a/apps/settings/lib/Settings/Personal/PersonalInfo.php
+++ b/apps/settings/lib/Settings/Personal/PersonalInfo.php
@@ -11,6 +11,7 @@ namespace OCA\Settings\Settings\Personal;
 
 use OC\Profile\ProfileManager;
 use OCA\FederatedFileSharing\FederatedShareProvider;
+use OCA\Provisioning_API\Controller\AUserData;
 use OCP\Accounts\IAccount;
 use OCP\Accounts\IAccountManager;
 use OCP\Accounts\IAccountProperty;
@@ -141,6 +142,7 @@ class PersonalInfo implements ISettings {
 			'headline' => $this->getProperty($account, IAccountManager::PROPERTY_HEADLINE),
 			'biography' => $this->getProperty($account, IAccountManager::PROPERTY_BIOGRAPHY),
 			'birthdate' => $this->getProperty($account, IAccountManager::PROPERTY_BIRTHDATE),
+			'firstDayOfWeek' => $this->config->getUserValue($uid, 'core', AUserData::USER_FIELD_FIRST_DAY_OF_WEEK),
 		];
 
 		$accountParameters = [
diff --git a/apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue b/apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue
new file mode 100644
index 00000000000..32c49c52254
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue
@@ -0,0 +1,126 @@
+<!--
+ - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+ -->
+
+<template>
+	<section class="fdow-section">
+		<HeaderBar :input-id="inputId"
+			:readable="propertyReadable" />
+
+		<NcSelect :aria-label-listbox="t('settings', 'Days to use as the first day of week')"
+			class="fdow-section__day-select"
+			:clearable="false"
+			:input-id="inputId"
+			label="label"
+			label-outside
+			:options="dayOptions"
+			:value="valueOption"
+			@option:selected="updateFirstDayOfWeek" />
+	</section>
+</template>
+
+<script lang="ts">
+import HeaderBar from './shared/HeaderBar.vue'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import {
+	ACCOUNT_SETTING_PROPERTY_ENUM,
+	ACCOUNT_SETTING_PROPERTY_READABLE_ENUM,
+} from '../../constants/AccountPropertyConstants'
+import { getDayNames, getFirstDay } from '@nextcloud/l10n'
+import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService'
+import { handleError } from '../../utils/handlers.ts'
+import { loadState } from '@nextcloud/initial-state'
+
+interface DayOption {
+	value: number,
+	label: string,
+}
+
+const { firstDayOfWeek } = loadState<{firstDayOfWeek?: string}>(
+	'settings',
+	'personalInfoParameters',
+	{},
+)
+
+export default {
+	name: 'FirstDayOfWeekSection',
+	components: {
+		HeaderBar,
+		NcSelect,
+	},
+	data() {
+		let firstDay = -1
+		if (firstDayOfWeek) {
+			firstDay = parseInt(firstDayOfWeek)
+		}
+
+		return {
+			firstDay,
+		}
+	},
+	computed: {
+		inputId(): string {
+			return 'account-property-fdow'
+		},
+		propertyReadable(): string {
+			return ACCOUNT_SETTING_PROPERTY_READABLE_ENUM.FIRST_DAY_OF_WEEK
+		},
+		dayOptions(): DayOption[] {
+			const options = [{
+				value: -1,
+				label: t('settings', 'Derived from your locale ({weekDayName})', {
+					weekDayName: getDayNames()[getFirstDay()],
+				}),
+			}]
+			for (const [index, dayName] of getDayNames().entries()) {
+				options.push({ value: index, label: dayName })
+			}
+			return options
+		},
+		valueOption(): DayOption | undefined {
+			return this.dayOptions.find((option) => option.value === this.firstDay)
+		},
+	},
+	methods: {
+		async updateFirstDayOfWeek(option: DayOption): Promise<void> {
+			try {
+				const responseData = await savePrimaryAccountProperty(
+					ACCOUNT_SETTING_PROPERTY_ENUM.FIRST_DAY_OF_WEEK,
+					option.value.toString(),
+				)
+				this.handleResponse({
+					value: option.value,
+					status: responseData.ocs?.meta?.status,
+				})
+				window.location.reload()
+			} catch (e) {
+				this.handleResponse({
+					errorMessage: t('settings', 'Unable to update first day of week'),
+					error: e,
+				})
+			}
+		},
+
+		handleResponse({ value, status, errorMessage, error }): void {
+			if (status === 'ok') {
+				this.firstDay = value
+			} else {
+				this.$emit('update:value', this.firstDay)
+				handleError(error, errorMessage)
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.fdow-section {
+	padding: 10px;
+
+	&__day-select {
+		width: 100%;
+		margin-top: 6px; // align with other inputs
+	}
+}
+</style>
diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
index ca41db2a454..1dd11c2b6cc 100644
--- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -130,7 +130,7 @@ export default {
 		}
 
 		&.setting-property {
-			height: 44px;
+			height: 34px;
 		}
 
 		label {
diff --git a/apps/settings/src/constants/AccountPropertyConstants.js b/apps/settings/src/constants/AccountPropertyConstants.js
index 3aee0006bc6..8ddfc867ec5 100644
--- a/apps/settings/src/constants/AccountPropertyConstants.js
+++ b/apps/settings/src/constants/AccountPropertyConstants.js
@@ -99,12 +99,14 @@ export const PROPERTY_READABLE_KEYS_ENUM = Object.freeze({
 export const ACCOUNT_SETTING_PROPERTY_ENUM = Object.freeze({
 	LANGUAGE: 'language',
 	LOCALE: 'locale',
+	FIRST_DAY_OF_WEEK: 'first_day_of_week',
 })
 
 /** Enum of account setting properties to human readable setting properties */
 export const ACCOUNT_SETTING_PROPERTY_READABLE_ENUM = Object.freeze({
 	LANGUAGE: t('settings', 'Language'),
 	LOCALE: t('settings', 'Locale'),
+	FIRST_DAY_OF_WEEK: t('settings', 'First day of week'),
 })
 
 /** Enum of scopes */
diff --git a/apps/settings/src/main-personal-info.js b/apps/settings/src/main-personal-info.js
index 7519b00b4d8..2fe7d97b069 100644
--- a/apps/settings/src/main-personal-info.js
+++ b/apps/settings/src/main-personal-info.js
@@ -26,6 +26,7 @@ import HeadlineSection from './components/PersonalInfo/HeadlineSection.vue'
 import BiographySection from './components/PersonalInfo/BiographySection.vue'
 import ProfileVisibilitySection from './components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue'
 import BirthdaySection from './components/PersonalInfo/BirthdaySection.vue'
+import FirstDayOfWeekSection from './components/PersonalInfo/FirstDayOfWeekSection.vue'
 
 __webpack_nonce__ = btoa(getRequestToken())
 
@@ -49,6 +50,7 @@ const FediverseView = Vue.extend(FediverseSection)
 const LanguageView = Vue.extend(LanguageSection)
 const LocaleView = Vue.extend(LocaleSection)
 const BirthdayView = Vue.extend(BirthdaySection)
+const FirstDayOfWeekView = Vue.extend(FirstDayOfWeekSection)
 
 new AvatarView().$mount('#vue-avatar-section')
 new DetailsView().$mount('#vue-details-section')
@@ -61,6 +63,7 @@ new TwitterView().$mount('#vue-twitter-section')
 new FediverseView().$mount('#vue-fediverse-section')
 new LanguageView().$mount('#vue-language-section')
 new LocaleView().$mount('#vue-locale-section')
+new FirstDayOfWeekView().$mount('#vue-fdow-section')
 new BirthdayView().$mount('#vue-birthday-section')
 
 if (profileEnabledGlobally) {
diff --git a/apps/settings/templates/settings/personal/personal.info.php b/apps/settings/templates/settings/personal/personal.info.php
index bed6f8aa5f9..92b29961baf 100644
--- a/apps/settings/templates/settings/personal/personal.info.php
+++ b/apps/settings/templates/settings/personal/personal.info.php
@@ -62,6 +62,9 @@ script('settings', [
 		<div id="vue-locale-section"></div>
 	</div>
 	<div class="personal-settings-setting-box">
+		<div id="vue-fdow-section"></div>
+	</div>
+	<div class="personal-settings-setting-box">
 		<div id="vue-website-section"></div>
 	</div>
 	<div class="personal-settings-setting-box">