feat: move from life cycle to data or watcher

- remove from created / mounted
- initialize component services in data
- use immediate watcher where appropriate
- deep watch for route changes

src/views/filters/CreateSavedFilter.vue

@@ -80,8 +80,8 @@ export default {
 				filter_concat: 'and',
 				filter_include_nulls: true,
 			},
-			savedFilterService: SavedFilterService,
-			savedFilter: SavedFilterModel,
+			savedFilterService: new SavedFilterService(),
+			savedFilter: new SavedFilterModel(),
 		}
 	},
 	components: {
@@ -96,9 +96,6 @@ export default {
 	created() {
 		this.editorActive = false
 		this.$nextTick(() => this.editorActive = true)
-
-		this.savedFilterService = new SavedFilterService()
-		this.savedFilter = new SavedFilterModel()
 	},
 	methods: {
 		create() {

src/views/filters/settings/delete.vue

@@ -20,12 +20,9 @@ export default {
 	name: 'filter-settings-delete',
 	data() {
 		return {
-			filterService: SavedFilterService,
+			filterService: new SavedFilterService(),
 		}
 	},
-	created() {
-		this.filterService = new SavedFilterService()
-	},
 	methods: {
 		deleteSavedFilter() {
 			// We assume the listId in the route is the pseudolist

src/views/filters/settings/edit.vue

@@ -67,7 +67,7 @@ export default {
 	data() {
 		return {
 			filter: SavedFilterModel,
-			filterService: SavedFilterService,
+			filterService: new SavedFilterService(),
 			filters: {
 				sort_by: ['done', 'id'],
 				order_by: ['asc', 'desc'],
@@ -91,13 +91,13 @@ export default {
 			timeout: 60000,
 		}),
 	},
-	created() {
-		this.filterService = new SavedFilterService()
-		this.loadSavedFilter()
-	},
 	watch: {
 		// call again the method if the route changes
-		'$route': 'loadSavedFilter',
+		'$route': {
+			handler: 'loadSavedFilter',
+			deep: true,
+			immediate: true,
+		},
 	},
 	methods: {
 		loadSavedFilter() {

src/views/labels/ListLabels.vue

@@ -118,13 +118,12 @@ export default {
 	},
 	data() {
 		return {
-			labelEditLabel: LabelModel,
+			labelEditLabel: new LabelModel(),
 			isLabelEdit: false,
 			editorActive: false,
 		}
 	},
 	created() {
-		this.labelEditLabel = new LabelModel()
 		this.loadLabels()
 	},
 	mounted() {

src/views/labels/NewLabel.vue

@@ -35,7 +35,6 @@
 </template>
 
 <script>
-import labelModel from '../../models/label'
 import LabelModel from '../../models/label'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import ColorPicker from '../../components/input/colorPicker'
@@ -46,7 +45,7 @@ export default {
 	name: 'NewLabel',
 	data() {
 		return {
-			label: labelModel,
+			label: new LabelModel(),
 			showError: false,
 		}
 	},
@@ -54,9 +53,6 @@ export default {
 		CreateEdit,
 		ColorPicker,
 	},
-	created() {
-		this.label = new LabelModel()
-	},
 	mounted() {
 		this.setTitle(this.$t('label.create.title'))
 	},

src/views/list/NewList.vue

@@ -42,18 +42,14 @@ export default {
 	data() {
 		return {
 			showError: false,
-			list: ListModel,
-			listService: ListService,
+			list: new ListModel(),
+			listService: new ListService(),
 		}
 	},
 	components: {
 		CreateEdit,
 		ColorPicker,
 	},
-	created() {
-		this.list = new ListModel()
-		this.listService = new ListService()
-	},
 	mounted() {
 		this.setTitle(this.$t('list.create.header'))
 	},

src/views/list/ShowList.vue

@@ -47,21 +47,20 @@ import {saveListToHistory} from '../../modules/listHistory'
 export default {
 	data() {
 		return {
-			listService: ListService,
-			list: ListModel,
+			listService: new ListService(),
+			list: new ListModel(),
 			listLoaded: 0,
 		}
 	},
-	created() {
-		this.listService = new ListService()
-		this.list = new ListModel()
-	},
 	mounted() {
 		this.loadList()
 	},
 	watch: {
 		// call again the method if the route changes
-		'$route.path': 'loadList',
+		'$route.path': {
+			handler: 'loadList',
+			immediate: true,
+		},
 	},
 	computed: {
 		// Computed property to let "listId" always have a value

src/views/list/settings/archive.vue

@@ -18,21 +18,25 @@ export default {
 	name: 'list-setting-archive',
 	data() {
 		return {
-			listService: ListService,
-			list: null,
+			listService: new ListService(),
 		}
 	},
 	created() {
-		this.listService = new ListService()
-		this.list = this.$store.getters['lists/getListById'](this.$route.params.listId)
 		this.setTitle(this.$t('list.archive.title', {list: this.list.title}))
 	},
+	computed: {
+		list() {
+			return this.$store.getters['lists/getListById'](this.$route.params.listId)
+		},
+	},
 	methods: {
 		archiveList() {
+			const newList = {
+				...this.list,
+				isArchived: !this.list.isArchived,
+			}
 
-			this.list.isArchived = !this.list.isArchived
-
-			this.listService.update(this.list)
+			this.listService.update(newList)
 				.then(r => {
 					this.$store.commit('currentList', r)
 					this.$store.commit('namespaces/setListInNamespaceById', r)

src/views/list/settings/background.vue

@@ -78,13 +78,13 @@ export default {
 		return {
 			backgroundSearchTerm: '',
 			backgroundSearchResult: [],
-			backgroundService: null,
+			backgroundService: new BackgroundUnsplashService(),
 			backgroundThumbs: {},
 			currentPage: 1,
 			backgroundSearchTimeout: null,
 
-			backgroundUploadService: null,
-			listService: null,
+			backgroundUploadService: new BackgroundUploadService(),
+			listService: new ListService(),
 		}
 	},
 	computed: mapState({
@@ -94,9 +94,6 @@ export default {
 		hasBackground: state => state.background !== null,
 	}),
 	created() {
-		this.backgroundService = new BackgroundUnsplashService()
-		this.backgroundUploadService = new BackgroundUploadService()
-		this.listService = new ListService()
 		this.setTitle(this.$t('list.background.title'))
 		// Show the default collection of backgrounds
 		this.newBackgroundSearch()

src/views/list/settings/delete.vue

@@ -16,14 +16,16 @@
 export default {
 	name: 'list-setting-delete',
 	created() {
-		const list = this.$store.getters['lists/getListById'](this.$route.params.listId)
-		this.setTitle(this.$t('list.delete.title', {list: list.title}))
+		this.setTitle(this.$t('list.delete.title', {list: this.list.title}))
+	},
+	computed: {
+		list() {
+			return this.$store.getters['lists/getListById'](this.$route.params.listId)
+		},
 	},
 	methods: {
 		deleteList() {
-			const list = this.$store.getters['lists/getListById'](this.$route.params.listId)
-
-			this.$store.dispatch('lists/deleteList', list)
+			this.$store.dispatch('lists/deleteList', this.list)
 				.then(() => {
 					this.$message.success({message: this.$t('list.delete.success')})
 					this.$router.push({name: 'home'})

src/views/list/settings/duplicate.vue

@@ -23,7 +23,7 @@ export default {
 	name: 'list-setting-duplicate',
 	data() {
 		return {
-			listDuplicateService: ListDuplicateService,
+			listDuplicateService: new ListDuplicateService(),
 			selectedNamespace: null,
 		}
 	},
@@ -32,7 +32,6 @@ export default {
 		NamespaceSearch,
 	},
 	created() {
-		this.listDuplicateService = new ListDuplicateService()
 		this.setTitle(this.$t('list.duplicate.title'))
 	},
 	methods: {

src/views/list/settings/edit.vue

@@ -80,7 +80,8 @@ export default {
 	data() {
 		return {
 			list: ListModel,
-			listService: ListService,
+			listService: new ListService(),
+			listDuplicateService: new ListDuplicateService(),
 		}
 	},
 	components: {
@@ -93,10 +94,11 @@ export default {
 			timeout: 60000,
 		}),
 	},
-	created() {
-		this.listService = new ListService()
-		this.listDuplicateService = new ListDuplicateService()
-		this.loadList()
+	watch: {
+		'$route.params.listId': {
+			handler: 'loadList',
+			immediate: true,
+		},
 	},
 	methods: {
 		loadList() {

src/views/list/settings/share.vue

@@ -34,7 +34,7 @@ export default {
 	data() {
 		return {
 			list: ListModel,
-			listService: ListService,
+			listService: new ListService(),
 			manageUsersComponent: '',
 			manageTeamsComponent: '',
 		}
@@ -53,7 +53,6 @@ export default {
 		},
 	},
 	created() {
-		this.listService = new ListService()
 		this.loadList()
 	},
 	methods: {

src/views/list/views/Gantt.vue

@@ -83,8 +83,8 @@ export default {
 		return {
 			showTaskswithoutDates: false,
 			dayWidth: 35,
-			dateFrom: null,
-			dateTo: null,
+			dateFrom: new Date((new Date()).setDate((new Date()).getDate() - 15)),
+			dateTo: new Date((new Date()).setDate((new Date()).getDate() + 30)),
 		}
 	},
 	computed: {
@@ -100,9 +100,5 @@ export default {
 			}
 		},
 	},
-	beforeMount() {
-		this.dateFrom = new Date((new Date()).setDate((new Date()).getDate() - 15))
-		this.dateTo = new Date((new Date()).setDate((new Date()).getDate() + 30))
-	},
 }
 </script>

src/views/list/views/List.vue

@@ -158,7 +158,7 @@ export default {
 	name: 'List',
 	data() {
 		return {
-			taskService: TaskService,
+			taskService: new TaskService(),
 			isTaskEdit: false,
 			taskEditTask: TaskModel,
 			ctaVisible: false,
@@ -184,8 +184,6 @@ export default {
 		Pagination,
 	},
 	created() {
-		this.taskService = new TaskService()
-
 		// Save the current list view to local storage
 		// We use local storage and not vuex here to make it persistent across reloads.
 		saveListView(this.$route.params.listId, this.$route.name)

src/views/namespaces/ListNamespaces.vue

@@ -78,12 +78,9 @@ export default {
 	},
 	data() {
 		return {
-			showArchived: false,
+			showArchived: JSON.parse(localStorage.getItem('showArchived')) ?? false,
 		}
 	},
-	created() {
-		this.showArchived = JSON.parse(localStorage.getItem('showArchived')) ?? false
-	},
 	mounted() {
 		this.setTitle(this.$t('namespace.title'))
 	},

src/views/namespaces/NewNamespace.vue

@@ -51,18 +51,14 @@ export default {
 	data() {
 		return {
 			showError: false,
-			namespace: NamespaceModel,
-			namespaceService: NamespaceService,
+			namespace: new NamespaceModel(),
+			namespaceService: new NamespaceService(),
 		}
 	},
 	components: {
 		ColorPicker,
 		CreateEdit,
 	},
-	created() {
-		this.namespace = new NamespaceModel()
-		this.namespaceService = new NamespaceService()
-	},
 	mounted() {
 		this.setTitle(this.$t('namespace.create.title'))
 	},

src/views/namespaces/settings/archive.vue

@@ -18,13 +18,12 @@ export default {
 	name: 'namespace-setting-archive',
 	data() {
 		return {
-			namespaceService: NamespaceService,
+			namespaceService: new NamespaceService(),
 			namespace: null,
 			title: '',
 		}
 	},
 	created() {
-		this.namespaceService = new NamespaceService()
 		this.namespace = this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
 		this.title = this.namespace.isArchived ?
 			this.$t('namespace.archive.titleUnarchive', { namespace: this.namespace.title }) :

src/views/namespaces/settings/delete.vue

@@ -19,13 +19,11 @@ export default {
 	name: 'namespace-setting-delete',
 	data() {
 		return {
-			namespaceService: NamespaceService,
+			namespaceService: new NamespaceService(),
 			title: '',
 		}
 	},
 	created() {
-		this.namespaceService = new NamespaceService()
-
 		const namespace = this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
 		this.title = this.$t('namespace.delete.title', {namespace: namespace.title})
 		this.setTitle(this.title)

src/views/namespaces/settings/edit.vue

@@ -69,8 +69,8 @@ export default {
 	name: 'namespace-setting-edit',
 	data() {
 		return {
-			namespaceService: NamespaceService,
-			namespace: NamespaceModel,
+			namespaceService: new NamespaceService(),
+			namespace: new NamespaceModel(),
 			editorActive: false,
 			title: '',
 		}
@@ -89,14 +89,13 @@ export default {
 	beforeMount() {
 		this.namespace.id = this.$route.params.id
 	},
-	created() {
-		this.namespaceService = new NamespaceService()
-		this.namespace = new NamespaceModel()
-		this.loadNamespace()
-	},
 	watch: {
 		// call again the method if the route changes
-		'$route': 'loadNamespace',
+		'$route': {
+			handler: 'loadNamespace',
+			deep: true,
+			immediate: true,
+		},
 	},
 	methods: {
 		loadNamespace() {

src/views/namespaces/settings/share.vue

@@ -29,8 +29,8 @@ export default {
 	name: 'namespace-setting-share',
 	data() {
 		return {
-			namespaceService: NamespaceService,
-			namespace: NamespaceModel,
+			namespaceService: new NamespaceService(),
+			namespace: new NamespaceModel(),
 			manageUsersComponent: '',
 			manageTeamsComponent: '',
 			title: '',
@@ -43,14 +43,13 @@ export default {
 	beforeMount() {
 		this.namespace.id = this.$route.params.id
 	},
-	created() {
-		this.namespaceService = new NamespaceService()
-		this.namespace = new NamespaceModel()
-		this.loadNamespace()
-	},
 	watch: {
 		// call again the method if the route changes
-		'$route': 'loadNamespace',
+		'$route': {
+			handler: 'loadNamespace',
+			deep: true,
+			immediate: true,
+		},
 	},
 	computed: {
 		userIsAdmin() {

src/views/tasks/ShowTasks.vue

@@ -97,7 +97,10 @@ export default {
 		setTimeout(() => this.showNothingToDo = true, 100)
 	},
 	watch: {
-		'$route': 'loadPendingTasks',
+		'$route': {
+			handler: 'loadPendingTasks',
+			deep: true,
+		},
 		startDate(newVal) {
 			this.cStartDate = newVal
 		},

src/views/tasks/ShowTasksInRange.vue

@@ -10,6 +10,10 @@
 <script>
 import ShowTasks from './ShowTasks'
 
+function getNextWeekDate() {
+	return new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
+}
+
 export default {
 	name: 'ShowTasksInRange',
 	components: {
@@ -17,18 +21,9 @@ export default {
 	},
 	data() {
 		return {
-			startDate: null,
-			endDate: null,
+			startDate: new Date(),
+			endDate: getNextWeekDate(),
 		}
 	},
-	created() {
-		this.setDatesToNextWeek()
-	},
-	methods: {
-		setDatesToNextWeek() {
-			this.startDate = new Date()
-			this.endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
-		},
-	},
 }
 </script>

src/views/tasks/TaskDetailView.vue

@@ -468,8 +468,8 @@ export default {
 	data() {
 		return {
 			taskId: Number(this.$route.params.id),
-			taskService: TaskService,
-			task: TaskModel,
+			taskService: new TaskService(),
+			task: new TaskModel(),
 			relationKinds: relationKinds,
 			// We doubled the task color property here because verte does not have a real change property, leading
 			// to the color property change being triggered when the # is removed from it, leading to an update,
@@ -503,14 +503,11 @@ export default {
 		}
 	},
 	watch: {
-		'$route': 'loadTask',
-	},
-	created() {
-		this.taskService = new TaskService()
-		this.task = new TaskModel()
-	},
-	mounted() {
-		this.loadTask()
+		'$route': {
+			handler: 'loadTask',
+			deep: true,
+			immediate: true,
+		},
 	},
 	computed: {
 		currentList() {

src/views/teams/EditTeam.vue

@@ -180,8 +180,8 @@ export default {
 	name: 'EditTeam',
 	data() {
 		return {
-			teamService: TeamService,
-			teamMemberService: TeamMemberService,
+			teamService: new TeamService(),
+			teamMemberService: new TeamMemberService(),
 			team: TeamModel,
 			teamId: this.$route.params.id,
 			member: TeamMemberModel,
@@ -191,7 +191,7 @@ export default {
 
 			newMember: UserModel,
 			foundUsers: [],
-			userService: UserService,
+			userService: new UserService(),
 
 			showError: false,
 			title: '',
@@ -206,15 +206,13 @@ export default {
 			timeout: 60000,
 		}),
 	},
-	created() {
-		this.teamService = new TeamService()
-		this.teamMemberService = new TeamMemberService()
-		this.userService = new UserService()
-		this.loadTeam()
-	},
 	watch: {
 		// call again the method if the route changes
-		$route: 'loadTeam',
+		'$route': {
+			handler: 'loadTeam',
+			deep: true,
+			immediate: true,
+		},
 	},
 	computed: {
 		userIsAdmin() {

src/views/teams/ListTeams.vue

@@ -32,12 +32,11 @@ export default {
 	name: 'ListTeams',
 	data() {
 		return {
-			teamService: TeamService,
+			teamService: new TeamService(),
 			teams: [],
 		}
 	},
 	created() {
-		this.teamService = new TeamService()
 		this.loadTeams()
 	},
 	mounted() {

src/views/teams/NewTeam.vue

@@ -37,18 +37,14 @@ export default {
 	name: 'NewTeam',
 	data() {
 		return {
-			teamService: TeamService,
-			team: TeamModel,
+			teamService: new TeamService(),
+			team: new TeamModel(),
 			showError: false,
 		}
 	},
 	components: {
 		CreateEdit,
 	},
-	created() {
-		this.teamService = new TeamService()
-		this.team = new TeamModel()
-	},
 	mounted() {
 		this.setTitle(this.$t('team.create.title'))
 	},

src/views/user/PasswordReset.vue

@@ -76,7 +76,7 @@ export default {
 	},
 	data() {
 		return {
-			passwordResetService: PasswordResetService,
+			passwordResetService: new PasswordResetService(),
 			credentials: {
 				password: '',
 				password2: '',
@@ -85,9 +85,6 @@ export default {
 			successMessage: '',
 		}
 	},
-	created() {
-		this.passwordResetService = new PasswordResetService()
-	},
 	mounted() {
 		this.setTitle(this.$t('user.auth.resetPassword'))
 	},

src/views/user/RequestPasswordReset.vue

@@ -59,16 +59,12 @@ export default {
 	},
 	data() {
 		return {
-			passwordResetService: PasswordResetService,
-			passwordReset: PasswordResetModel,
+			passwordResetService: new PasswordResetService(),
+			passwordReset: new PasswordResetModel(),
 			errorMsg: '',
 			isSuccess: false,
 		}
 	},
-	created() {
-		this.passwordResetService = new PasswordResetService()
-		this.passwordReset = new PasswordResetModel()
-	},
 	mounted() {
 		this.setTitle(this.$t('user.auth.resetPassword'))
 	},

src/views/user/Settings.vue

@@ -302,15 +302,15 @@ export default {
 	name: 'Settings',
 	data() {
 		return {
-			passwordUpdateService: PasswordUpdateService,
-			passwordUpdate: PasswordUpdateModel,
+			passwordUpdateService: new PasswordUpdateService(),
+			passwordUpdate: new PasswordUpdateModel(),
 			passwordConfirm: '',
 
-			emailUpdateService: EmailUpdateService,
-			emailUpdate: EmailUpdateModel,
+			emailUpdateService: new EmailUpdateService(),
+			emailUpdate: new EmailUpdateModel(),
 
-			totpService: TotpService,
-			totp: TotpModel,
+			totpService: new TotpService(),
+			totp: new TotpModel(),
 			totpQR: '',
 			totpEnrolled: false,
 			totpConfirmPasscode: '',
@@ -320,7 +320,7 @@ export default {
 			language: getCurrentLanguage(),
 
 			settings: UserSettingsModel,
-			userSettingsService: UserSettingsService,
+			userSettingsService: new UserSettingsService(),
 
 			defaultList: null,
 		}
@@ -332,16 +332,6 @@ export default {
 		DataExport,
 	},
 	created() {
-		this.passwordUpdateService = new PasswordUpdateService()
-		this.passwordUpdate = new PasswordUpdateModel()
-
-		this.emailUpdateService = new EmailUpdateService()
-		this.emailUpdate = new EmailUpdateModel()
-
-		this.totpService = new TotpService()
-		this.totp = new TotpModel()
-
-		this.userSettingsService = new UserSettingsService()
 		this.settings = this.$store.state.auth.settings
 
 		this.playSoundWhenDone = localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null