From e37145cd43b6081605c7f0ad6e711bb0892d75c8 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 3 Jun 2021 18:12:40 +0200
Subject: [PATCH] Add setting for the first day of the week

---
 src/components/input/datepicker.vue          | 22 ++++++++++++-------
 src/components/list/partials/filters.vue     | 22 ++++++++++++-------
 src/components/tasks/edit-task.vue           |  8 -------
 src/components/tasks/partials/defer-task.vue | 23 ++++++++++++--------
 src/models/userSettings.js                   |  1 +
 src/store/modules/auth.js                    | 11 ++++++++--
 src/views/list/views/Gantt.vue               | 18 ++++++++++-----
 src/views/tasks/ShowTasks.vue                | 18 ++++++++-------
 src/views/user/Settings.vue                  | 13 +++++++++++
 9 files changed, 87 insertions(+), 49 deletions(-)

diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index ec395cd3a..2260d67dd 100644
--- a/src/components/input/datepicker.vue
+++ b/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) {
diff --git a/src/components/list/partials/filters.vue b/src/components/list/partials/filters.vue
index a58638ce2..478c4f0b2 100644
--- a/src/components/list/partials/filters.vue
+++ b/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)
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 922401350..0e4f63939 100644
--- a/src/components/tasks/edit-task.vue
+++ b/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: {
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index d1ed87887..0f6c0c474 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/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)
diff --git a/src/models/userSettings.js b/src/models/userSettings.js
index b936d8b73..71166534c 100644
--- a/src/models/userSettings.js
+++ b/src/models/userSettings.js
@@ -9,6 +9,7 @@ export default class UserSettingsModel extends AbstractModel {
 			discoverableByName: false,
 			discoverableByEmail: false,
 			overdueTasksRemindersEnabled: true,
+			weekStart: 0,
 		}
 	}
 }
\ No newline at end of file
diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
index 37d6002f6..1f9aea6b6 100644
--- a/src/store/modules/auth.js
+++ b/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
diff --git a/src/views/list/views/Gantt.vue b/src/views/list/views/Gantt.vue
index 1164b04c6..395f0c43f 100644
--- a/src/views/list/views/Gantt.vue
+++ b/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: {
-				altFormat: 'j M Y',
-				altInput: true,
-				dateFormat: 'Y-m-d',
-				enableTime: false,
-			},
 		}
 	},
+	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))
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index 50e83dbf5..bf0b976f0 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/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() {
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index 38d0e82d3..956515705 100644
--- a/src/views/user/Settings.vue
+++ b/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"