feat: add setting for time zone to user settings

src/i18n/lang/en.json

@@ -85,7 +85,8 @@
         "weekStartSunday": "Sunday",
         "weekStartMonday": "Monday",
         "language": "Language",
-        "defaultList": "Default List"
+        "defaultList": "Default List",
+        "timezone": "Time Zone"
       },
       "totp": {
         "title": "Two Factor Authentication",

src/models/userSettings.js

@@ -11,6 +11,7 @@ export default class UserSettingsModel extends AbstractModel {
 			overdueTasksRemindersEnabled: true,
 			defaultListId: undefined,
 			weekStart: 0,
+			timezone: '',
 		}
 	}
 }

src/views/user/settings/General.vue

@@ -92,9 +92,9 @@
 		</div>
 		<div class="field">
 			<label class="is-flex is-align-items-center">
-					<span>
-						{{ $t('user.settings.appearance.title') }}
-					</span>
+				<span>
+					{{ $t('user.settings.appearance.title') }}
+				</span>
 				<div class="select ml-2">
 					<select v-model="activeColorSchemeSetting">
 						<!-- TODO: use the Vikunja logo in color scheme as option buttons -->
@@ -105,6 +105,20 @@
 				</div>
 			</label>
 		</div>
+		<div class="field">
+			<label class="is-flex is-align-items-center">
+				<span>
+					{{ $t('user.settings.general.timezone') }}
+				</span>
+				<div class="select ml-2">
+					<select v-model="settings.timezone">
+						<option v-for="tz in availableTimezones" :key="tz">
+							{{ tz }}
+						</option>
+					</select>
+				</div>
+			</label>
+		</div>
 
 		<x-button
 			:loading="loading"
@@ -118,7 +132,7 @@
 </template>
 
 <script>
-import {computed, watch} from 'vue'
+import {computed, watch, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import {playSoundWhenDoneKey, playPop} from '@/helpers/playPop'
@@ -129,6 +143,7 @@ import ListSearch from '@/components/tasks/partials/listSearch'
 import {createRandomID} from '@/helpers/randomId'
 import {useColorScheme} from '@/composables/useColorScheme'
 import {success} from '@/message'
+import {AuthenticatedHTTPFactory} from '@/http-common'
 
 const DEFAULT_LIST_ID = 0
 
@@ -155,6 +170,18 @@ function useColorSchemeSetting() {
 	}
 }
 
+function useAvailableTimezones() {
+	const availableTimezones = ref([])
+
+	const HTTP = AuthenticatedHTTPFactory()
+	HTTP.get('user/timezones')
+		.then(r => {
+			availableTimezones.value = r.data.sort()
+		})
+
+	return availableTimezones
+}
+
 function getPlaySoundWhenDoneSetting() {
 	return localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null
 }
@@ -193,6 +220,7 @@ export default {
 	setup() {
 		return {
 			...useColorSchemeSetting(),
+			availableTimezones: useAvailableTimezones(),
 		}
 	},