2 files changed, 223 insertions, 0 deletions
diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue
new file mode 100644
index 00000000000..73300756472
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue
@@ -0,0 +1,157 @@
+<!--
+  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div class="locale">
+		<NcSelect :aria-label-listbox="t('settings', 'Locales')"
+			class="locale__select"
+			:clearable="false"
+			:input-id="inputId"
+			label="name"
+			label-outside
+			:options="allLocales"
+			:value="locale"
+			@option:selected="updateLocale" />
+
+		<div class="example">
+			<MapClock :size="20" />
+			<div class="example__text">
+				<p>
+					<span>{{ example.date }}</span>
+					<span>{{ example.time }}</span>
+				</p>
+				<p>
+					{{ t('settings', 'Week starts on {firstDayOfWeek}', { firstDayOfWeek: example.firstDayOfWeek }) }}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import moment from '@nextcloud/moment'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import MapClock from 'vue-material-design-icons/MapClock.vue'
+
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
+import { handleError } from '../../../utils/handlers.ts'
+
+export default {
+	name: 'Locale',
+
+	components: {
+		MapClock,
+		NcSelect,
+	},
+
+	props: {
+		inputId: {
+			type: String,
+			default: null,
+		},
+		locale: {
+			type: Object,
+			required: true,
+		},
+		localesForLanguage: {
+			type: Array,
+			required: true,
+		},
+		otherLocales: {
+			type: Array,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			initialLocale: this.locale,
+			intervalId: 0,
+			example: {
+				date: moment().format('L'),
+				time: moment().format('LTS'),
+				firstDayOfWeek: window.dayNames[window.firstDay],
+			},
+		}
+	},
+
+	computed: {
+		/**
+		 * All available locale, sorted like: current, common, other
+		 */
+		allLocales() {
+			const common = this.localesForLanguage.filter(l => l.code !== this.locale.code)
+			const other = this.otherLocales.filter(l => l.code !== this.locale.code)
+			return [this.locale, ...common, ...other]
+		},
+	},
+
+	mounted() {
+		this.intervalId = window.setInterval(this.refreshExample, 1000)
+	},
+
+	beforeDestroy() {
+		window.clearInterval(this.intervalId)
+	},
+
+	methods: {
+		async updateLocale(locale) {
+			try {
+				const responseData = await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE, locale.code)
+				this.handleResponse({
+					locale,
+					status: responseData.ocs?.meta?.status,
+				})
+				window.location.reload()
+			} catch (e) {
+				this.handleResponse({
+					errorMessage: t('settings', 'Unable to update locale'),
+					error: e,
+				})
+			}
+		},
+
+		handleResponse({ locale, status, errorMessage, error }) {
+			if (status === 'ok') {
+				this.initialLocale = locale
+			} else {
+				this.$emit('update:locale', this.initialLocale)
+				handleError(error, errorMessage)
+			}
+		},
+
+		refreshExample() {
+			this.example = {
+				date: moment().format('L'),
+				time: moment().format('LTS'),
+				firstDayOfWeek: window.dayNames[window.firstDay],
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.locale {
+	display: grid;
+
+	#{&}__select {
+		margin-top: 6px; // align with other inputs
+	}
+}
+
+.example {
+	margin: 10px 0;
+	display: flex;
+	gap: 0 10px;
+	color: var(--color-text-maxcontrast);
+
+	&:deep(.material-design-icon) {
+		align-self: flex-start;
+		margin-top: 2px;
+	}
+}
+</style>
diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue b/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue
new file mode 100644
index 00000000000..d4488e77efd
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue
@@ -0,0 +1,66 @@
+<!--
+  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<section>
+		<HeaderBar :input-id="inputId"
+			:readable="propertyReadable" />
+
+		<Locale v-if="isEditable"
+			:input-id="inputId"
+			:locales-for-language="localesForLanguage"
+			:other-locales="otherLocales"
+			:locale.sync="locale" />
+
+		<span v-else>
+			{{ t('settings', 'No locale set') }}
+		</span>
+	</section>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+
+import Locale from './Locale.vue'
+import HeaderBar from '../shared/HeaderBar.vue'
+
+import { ACCOUNT_SETTING_PROPERTY_ENUM, ACCOUNT_SETTING_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js'
+
+const { localeMap: { activeLocale, localesForLanguage, otherLocales } } = loadState('settings', 'personalInfoParameters', {})
+
+export default {
+	name: 'LocaleSection',
+
+	components: {
+		Locale,
+		HeaderBar,
+	},
+
+	data() {
+		return {
+			propertyReadable: ACCOUNT_SETTING_PROPERTY_READABLE_ENUM.LOCALE,
+			localesForLanguage,
+			otherLocales,
+			locale: activeLocale,
+		}
+	},
+
+	computed: {
+		inputId() {
+			return `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE}`
+		},
+
+		isEditable() {
+			return Boolean(this.locale)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+section {
+	padding: 10px 10px;
+}
+</style>