Add setting for the first day of the week

src/components/input/datepicker.vue

@@ -118,6 +118,7 @@ import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
+import {mapState} from 'vuex'
 
 export default {
 	name: 'datepicker',
@@ -127,14 +128,6 @@ export default {
 			show: false,
 			changed: false,
 
-			flatPickerConfig: {
-				altFormat: 'j M Y H:i',
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				time_24hr: true,
-				inline: true,
-			},
 			// Since flatpickr dates are strings, we need to convert them to native date objects.
 			// To make that work, we need a separate variable since flatpickr does not have a change event.
 			flatPickrDate: null,
@@ -172,6 +165,19 @@ export default {
 			this.updateData()
 		},
 	},
+	computed: mapState({
+		flatPickerConfig: state => ({
+			altFormat: 'j M Y H:i',
+			altInput: true,
+			dateFormat: 'Y-m-d H:i',
+			enableTime: true,
+			time_24hr: true,
+			inline: true,
+			locale: {
+				firstDayOfWeek: state.auth.settings.weekStart,
+			},
+		})
+	}),
 	methods: {
 		setDateValue(newVal) {
 			if(newVal === null) {

src/components/list/partials/filters.vue

@@ -205,6 +205,7 @@ import UserService from '@/services/user'
 import LabelService from '@/services/label'
 import ListService from '@/services/list'
 import NamespaceService from '@/services/namespace'
+import {mapState} from 'vuex'
 
 export default {
 	name: 'filters',
@@ -243,14 +244,6 @@ export default {
 				list_id: '',
 				namespace: '',
 			},
-			flatPickerConfig: {
-				altFormat: 'j M Y H:i',
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				time_24hr: true,
-				mode: 'range',
-			},
 
 			usersService: UserService,
 			foundusers: [],
@@ -291,6 +284,19 @@ export default {
 			this.prepareFilters()
 		},
 	},
+	computed: mapState({
+		flatPickerConfig: state => ({
+			altFormat: 'j M Y H:i',
+			altInput: true,
+			dateFormat: 'Y-m-d H:i',
+			enableTime: true,
+			time_24hr: true,
+			mode: 'range',
+			locale: {
+				firstDayOfWeek: state.auth.settings.weekStart,
+			},
+		})
+	}),
 	methods: {
 		change() {
 			this.$emit('input', this.params)

src/components/tasks/edit-task.vue

@@ -94,14 +94,6 @@ export default {
 			newTask: TaskModel,
 			isTaskEdit: false,
 			taskEditTask: TaskModel,
-			flatPickerConfig: {
-				altFormat: 'j M Y H:i',
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				onOpen: this.updateLastReminderDate,
-				onClose: this.addReminderDate,
-			},
 		}
 	},
 	components: {

src/components/tasks/partials/defer-task.vue

@@ -40,6 +40,7 @@
 <script>
 import TaskService from '../../../services/task'
 import flatPickr from 'vue-flatpickr-component'
+import {mapState} from 'vuex'
 
 export default {
 	name: 'defer-task',
@@ -51,15 +52,6 @@ export default {
 			dueDate: null,
 			lastValue: null,
 			changeInterval: null,
-
-			flatPickerConfig: {
-				altFormat: 'j M Y H:i',
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				time_24hr: true,
-				inline: true,
-			},
 		}
 	},
 	components: {
@@ -102,6 +94,19 @@ export default {
 			this.lastValue = this.dueDate
 		},
 	},
+	computed: mapState({
+		flatPickerConfig: state => ({
+			altFormat: 'j M Y H:i',
+			altInput: true,
+			dateFormat: 'Y-m-d H:i',
+			enableTime: true,
+			time_24hr: true,
+			inline: true,
+			locale: {
+				firstDayOfWeek: state.auth.settings.weekStart,
+			},
+		})
+	}),
 	methods: {
 		deferDays(days) {
 			this.dueDate = new Date(this.dueDate)

src/models/userSettings.js

@@ -9,6 +9,7 @@ export default class UserSettingsModel extends AbstractModel {
 			discoverableByName: false,
 			discoverableByEmail: false,
 			overdueTasksRemindersEnabled: true,
+			weekStart: 0,
 		}
 	}
 }

src/store/modules/auth.js

@@ -2,6 +2,13 @@ import {HTTPFactory} from '@/http-common'
 import {ERROR_MESSAGE, LOADING} from '../mutation-types'
 import UserModel from '../../models/user'
 
+const defaultSettings = settings => {
+	if (typeof settings.weekStart === 'undefined' || settings.weekStart === '') {
+		settings.weekStart = 0
+	}
+	return settings
+}
+
 export default {
 	namespaced: true,
 	state: () => ({
@@ -20,12 +27,12 @@ export default {
 				state.avatarUrl = info.getAvatarUrl()
 
 				if (info.settings) {
-					state.settings = info.settings
+					state.settings = defaultSettings(info.settings)
 				}
 			}
 		},
 		setUserSettings(state, settings) {
-			state.settings = settings
+			state.settings = defaultSettings(settings)
 			const info = state.info !== null ? state.info : {}
 			info.name = settings.name
 			state.info = info

src/views/list/views/Gantt.vue

@@ -66,6 +66,7 @@ import GanttChart from '../../../components/tasks/gantt-component'
 import flatPickr from 'vue-flatpickr-component'
 import Fancycheckbox from '../../../components/input/fancycheckbox'
 import {saveListView} from '@/helpers/saveListView'
+import {mapState} from 'vuex'
 
 export default {
 	name: 'Gantt',
@@ -85,14 +86,19 @@ export default {
 			dayWidth: 35,
 			dateFrom: null,
 			dateTo: null,
-			flatPickerConfig: {
+		}
+	},
+	computed: mapState({
+		flatPickerConfig: state => ({
 			altFormat: 'j M Y',
 			altInput: true,
 			dateFormat: 'Y-m-d',
 			enableTime: false,
+			locale: {
+				firstDayOfWeek: state.auth.settings.weekStart,
 			},
-		}
-	},
+		})
+	}),
 	beforeMount() {
 		this.dateFrom = new Date((new Date()).setDate((new Date()).getDate() - 15))
 		this.dateTo = new Date((new Date()).setDate((new Date()).getDate() + 30))

src/views/tasks/ShowTasks.vue

@@ -81,14 +81,6 @@ export default {
 			cEndDate: null,
 
 			showNothingToDo: false,
-
-			flatPickerConfig: {
-				altFormat: 'j M Y H:i',
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				time_24hr: true,
-			},
 		}
 	},
 	props: {
@@ -116,6 +108,16 @@ export default {
 	},
 	computed: mapState({
 		userAuthenticated: state => state.auth.authenticated,
+		flatPickerConfig: state => ({
+			altFormat: 'j M Y H:i',
+			altInput: true,
+			dateFormat: 'Y-m-d H:i',
+			enableTime: true,
+			time_24hr: true,
+			locale: {
+				firstDayOfWeek: state.auth.settings.weekStart,
+			},
+		})
 	}),
 	methods: {
 		setDate() {

src/views/user/Settings.vue

@@ -132,6 +132,19 @@
 					Play a sound when marking tasks as done
 				</label>
 			</div>
+			<div class="field">
+				<label class="is-flex is-align-items-center">
+					<span>
+						Week starts on
+					</span>
+					<div class="select ml-2">
+						<select v-model.number="settings.weekStart">
+							<option value="0">Sunday</option>
+							<option value="1">Monday</option>
+						</select>
+					</div>
+				</label>
+			</div>
 
 			<x-button
 				:loading="userSettingsService.loading"