From f51371bbe0c3daf4de7bc9f987c9094bada2adcf Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Wed, 8 Sep 2021 11:59:38 +0200 Subject: [PATCH] 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/components/home/contentAuth.vue | 5 ++- src/components/input/colorPicker.vue | 10 +++--- src/components/input/datepicker.vue | 6 ++-- src/components/input/fancycheckbox.vue | 16 +++++----- src/components/input/multiselect.vue | 8 +++-- src/components/list/partials/filter-popup.vue | 8 +++-- src/components/list/partials/filters.vue | 22 ++++++------- src/components/list/partials/list-card.vue | 8 ++--- src/components/misc/subscription.vue | 5 +-- .../notifications/notifications.vue | 5 +-- .../quick-actions/quick-actions.vue | 8 ++--- src/components/sharing/linkSharing.vue | 15 +++------ src/components/tasks/add-task.vue | 5 +-- src/components/tasks/edit-task.vue | 22 ++++++------- src/components/tasks/gantt-component.vue | 14 +++------ src/components/tasks/partials/attachments.vue | 5 +-- src/components/tasks/partials/comments.vue | 31 +++++++------------ src/components/tasks/partials/defer-task.vue | 24 ++++++-------- src/components/tasks/partials/description.vue | 10 +++--- .../tasks/partials/editAssignees.vue | 19 +++++------- src/components/tasks/partials/editLabels.vue | 13 ++++---- src/components/tasks/partials/heading.vue | 1 - src/components/tasks/partials/listSearch.vue | 18 +++++------ .../tasks/partials/prioritySelect.vue | 10 +++--- .../tasks/partials/relatedTasks.vue | 21 +++++-------- src/components/tasks/partials/repeatAfter.vue | 19 +++++------- .../tasks/partials/singleTaskInList.vue | 8 ++--- src/components/user/avatar-settings.vue | 3 +- src/components/user/settings/deletion.vue | 5 +-- src/views/filters/CreateSavedFilter.vue | 7 ++--- src/views/filters/settings/delete.vue | 5 +-- src/views/filters/settings/edit.vue | 12 +++---- src/views/labels/ListLabels.vue | 3 +- src/views/labels/NewLabel.vue | 6 +--- src/views/list/NewList.vue | 8 ++--- src/views/list/ShowList.vue | 13 ++++---- src/views/list/settings/archive.vue | 18 ++++++----- src/views/list/settings/background.vue | 9 ++---- src/views/list/settings/delete.vue | 12 ++++--- src/views/list/settings/duplicate.vue | 3 +- src/views/list/settings/edit.vue | 12 ++++--- src/views/list/settings/share.vue | 3 +- src/views/list/views/Gantt.vue | 8 ++--- src/views/list/views/List.vue | 4 +-- src/views/namespaces/ListNamespaces.vue | 5 +-- src/views/namespaces/NewNamespace.vue | 8 ++--- src/views/namespaces/settings/archive.vue | 3 +- src/views/namespaces/settings/delete.vue | 4 +-- src/views/namespaces/settings/edit.vue | 15 +++++---- src/views/namespaces/settings/share.vue | 15 +++++---- src/views/tasks/ShowTasks.vue | 5 ++- src/views/tasks/ShowTasksInRange.vue | 17 ++++------ src/views/tasks/TaskDetailView.vue | 17 +++++----- src/views/teams/EditTeam.vue | 18 +++++------ src/views/teams/ListTeams.vue | 3 +- src/views/teams/NewTeam.vue | 8 ++--- src/views/user/PasswordReset.vue | 5 +-- src/views/user/RequestPasswordReset.vue | 8 ++--- src/views/user/Settings.vue | 24 +++++--------- 59 files changed, 246 insertions(+), 376 deletions(-) diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue index b2a72b1a..a8972d42 100644 --- a/src/components/home/contentAuth.vue +++ b/src/components/home/contentAuth.vue @@ -49,7 +49,10 @@ export default { name: 'contentAuth', components: {QuickActions, Navigation}, watch: { - '$route': 'doStuffAfterRoute', + '$route': { + handler: 'doStuffAfterRoute', + deep: true, + }, }, created() { this.renewTokenOnFocus() diff --git a/src/components/input/colorPicker.vue b/src/components/input/colorPicker.vue index 7ac118d3..080089a9 100644 --- a/src/components/input/colorPicker.vue +++ b/src/components/input/colorPicker.vue @@ -48,16 +48,16 @@ export default { }, }, watch: { - value(newVal) { - this.color = newVal + value: { + handler(value) { + this.color = value + }, + immediate: true, }, color() { this.update() }, }, - mounted() { - this.color = this.value - }, computed: { empty() { return this.color === '#000000' || this.color === '' diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue index 5501287c..f5aa3247 100644 --- a/src/components/input/datepicker.vue +++ b/src/components/input/datepicker.vue @@ -151,15 +151,15 @@ export default { }, }, mounted() { - this.setDateValue(this.value) document.addEventListener('click', this.hideDatePopup) }, beforeDestroy() { document.removeEventListener('click', this.hideDatePopup) }, watch: { - value(newVal) { - this.setDateValue(newVal) + value: { + handler: 'setDateValue', + immediate: true, }, flatPickrDate(newVal) { this.date = createDateFromString(newVal) diff --git a/src/components/input/fancycheckbox.vue b/src/components/input/fancycheckbox.vue index 7e788495..b39a7736 100644 --- a/src/components/input/fancycheckbox.vue +++ b/src/components/input/fancycheckbox.vue @@ -26,7 +26,7 @@ export default { data() { return { checked: false, - checkBoxId: '', + checkBoxId: 'fancycheckbox' + Math.random(), } }, props: { @@ -40,16 +40,14 @@ export default { }, }, watch: { - value(newVal) { - this.checked = newVal + value: { + handler(value) { + this.checked = value + + }, + immediate: true, }, }, - mounted() { - this.checked = this.value - }, - created() { - this.checkBoxId = 'fancycheckbox' + Math.random() - }, methods: { updateData(checked) { this.checked = checked diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue index 503e9a17..f5965ee4 100644 --- a/src/components/input/multiselect.vue +++ b/src/components/input/multiselect.vue @@ -190,14 +190,16 @@ export default { }, mounted() { document.addEventListener('click', this.hideSearchResultsHandler) - this.setSelectedObject(this.value) }, beforeDestroy() { document.removeEventListener('click', this.hideSearchResultsHandler) }, watch: { - value(newVal) { - this.setSelectedObject(newVal) + value: { + handler(value) { + this.setSelectedObject(value) + }, + immediate: true, }, }, computed: { diff --git a/src/components/list/partials/filter-popup.vue b/src/components/list/partials/filter-popup.vue index 952f75c1..011b5912 100644 --- a/src/components/list/partials/filter-popup.vue +++ b/src/components/list/partials/filter-popup.vue @@ -25,15 +25,17 @@ export default { Filters, }, mounted() { - this.params = this.value document.addEventListener('click', this.hidePopup) }, beforeDestroy() { document.removeEventListener('click', this.hidePopup) }, watch: { - value(newVal) { - this.$set(this, 'params', newVal) + value: { + handler(value) { + this.params = value + }, + immediate: true, }, visible() { this.visibleInternal = !this.visibleInternal diff --git a/src/components/list/partials/filters.vue b/src/components/list/partials/filters.vue index e07a2b90..67e53562 100644 --- a/src/components/list/partials/filters.vue +++ b/src/components/list/partials/filters.vue @@ -234,31 +234,24 @@ export default { params: DEFAULT_PARAMS, filters: DEFAULT_FILTERS, - usersService: UserService, + usersService: new UserService(), foundusers: [], users: [], labelQuery: '', labels: [], - listsService: ListService, + listsService: new ListService(), foundlists: [], lists: [], - namespaceService: NamespaceService, + namespaceService: new NamespaceService(), foundnamespace: [], namespace: [], } }, - created() { - this.usersService = new UserService() - this.listsService = new ListService() - this.namespaceService = new NamespaceService() - }, mounted() { - this.params = this.value this.filters.requireAllFilters = this.params.filter_concat === 'and' - this.prepareFilters() }, props: { value: { @@ -266,9 +259,12 @@ export default { }, }, watch: { - value(newVal) { - this.$set(this, 'params', newVal) - this.prepareFilters() + value: { + handler(value) { + this.params = value + this.prepareFilters() + }, + immediate: true, }, }, computed: { diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue index 90241f75..ec9109f7 100644 --- a/src/components/list/partials/list-card.vue +++ b/src/components/list/partials/list-card.vue @@ -50,13 +50,11 @@ export default { }, }, watch: { - list() { - this.loadBackground() + list: { + handler: 'loadBackground', + immediate: true, }, }, - created() { - this.loadBackground() - }, methods: { loadBackground() { if (this.list === null || !this.list.backgroundInformation || this.backgroundLoading) { diff --git a/src/components/misc/subscription.vue b/src/components/misc/subscription.vue index a9514a87..294aeee4 100644 --- a/src/components/misc/subscription.vue +++ b/src/components/misc/subscription.vue @@ -30,7 +30,7 @@ export default { name: 'task-subscription', data() { return { - subscriptionService: SubscriptionService, + subscriptionService: new SubscriptionService(), } }, props: { @@ -49,9 +49,6 @@ export default { default: true, }, }, - created() { - this.subscriptionService = new SubscriptionService() - }, computed: { tooltipText() { if (this.disabled) { diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index a04226b2..df55df04 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -61,15 +61,12 @@ export default { components: {User}, data() { return { - notificationService: NotificationService, + notificationService: new NotificationService(), allNotifications: [], showNotifications: false, interval: null, } }, - created() { - this.notificationService = new NotificationService() - }, mounted() { this.loadNotifications() document.addEventListener('click', this.hidePopup) diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue index 0181793a..0d3091ae 100644 --- a/src/components/quick-actions/quick-actions.vue +++ b/src/components/quick-actions/quick-actions.vue @@ -90,11 +90,11 @@ export default { foundTasks: [], taskSearchTimeout: null, - taskService: null, + taskService: new TaskService(), foundTeams: [], teamSearchTimeout: null, - teamService: null, + teamService: new TeamService(), } }, mixins: [ @@ -261,10 +261,6 @@ export default { return this.selectedCmd !== null && this.selectedCmd.action === CMD_NEW_TASK }, }, - created() { - this.taskService = new TaskService() - this.teamService = new TeamService() - }, methods: { search() { this.searchTasks() diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue index 34fa44ee..2f66e2e0 100644 --- a/src/components/sharing/linkSharing.vue +++ b/src/components/sharing/linkSharing.vue @@ -195,7 +195,7 @@ export default { data() { return { linkShares: [], - linkShareService: LinkShareService, + linkShareService: new LinkShareService(), rights: rights, selectedRight: rights.READ, name: '', @@ -205,17 +205,10 @@ export default { showNewForm: false, } }, - beforeMount() { - this.linkShareService = new LinkShareService() - }, - created() { - this.linkShareService = new LinkShareService() - this.load() - }, watch: { - listId() { - // watch it - this.load() + listId: { + handler: 'load', + immediate: true, }, }, computed: mapState({ diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue index 231b5641..befb9916 100644 --- a/src/components/tasks/add-task.vue +++ b/src/components/tasks/add-task.vue @@ -45,7 +45,7 @@ export default { data() { return { newTaskTitle: '', - taskService: TaskService, + taskService: new TaskService(), errorMessage: '', } }, @@ -55,9 +55,6 @@ export default { components: { QuickAddMagic, }, - created() { - this.taskService = new TaskService() - }, props: { defaultPosition: { type: Number, diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue index 7e03f07d..b29d5846 100644 --- a/src/components/tasks/edit-task.vue +++ b/src/components/tasks/edit-task.vue @@ -84,13 +84,13 @@ export default { data() { return { listId: this.$route.params.id, - listService: ListService, - taskService: TaskService, + listService: new ListService(), + taskService: new TaskService(), priorities: priorities, list: {}, editorActive: false, - newTask: TaskModel, + newTask: new TaskModel(), isTaskEdit: false, taskEditTask: TaskModel, } @@ -113,18 +113,14 @@ export default { }, }, watch: { - task() { - this.taskEditTask = this.task - this.initTaskFields() + task: { + handler() { + this.taskEditTask = this.task + this.initTaskFields() + }, + immediate: true, }, }, - created() { - this.listService = new ListService() - this.taskService = new TaskService() - this.newTask = new TaskModel() - this.taskEditTask = this.task - this.initTaskFields() - }, methods: { initTaskFields() { this.taskEditTask.dueDate = diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index bf1804ff..fd17b83d 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -232,17 +232,17 @@ export default { endDate: null, theTasks: [], // Pretty much a copy of the prop, since we cant mutate the prop directly tasksWithoutDates: [], - taskService: TaskService, + taskService: new TaskService(), taskDragged: null, // Saves to currently dragged task to be able to update it fullWidth: 0, - now: null, + now: new Date(), dayOffsetUntilToday: 0, isTaskEdit: false, taskToEdit: null, newTaskTitle: '', newTaskFieldActive: false, - priorities: {}, - taskCollectionService: TaskCollectionService, + priorities: priorities, + taskCollectionService: new TaskCollectionService(), showTaskFilter: false, params: { @@ -260,12 +260,6 @@ export default { dateTo: 'buildTheGanttChart', listId: 'parseTasks', }, - created() { - this.now = new Date() - this.taskCollectionService = new TaskCollectionService() - this.taskService = new TaskService() - this.priorities = priorities - }, mounted() { this.buildTheGanttChart() }, diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue index 3637b733..0c03778a 100644 --- a/src/components/tasks/partials/attachments.vue +++ b/src/components/tasks/partials/attachments.vue @@ -151,7 +151,7 @@ export default { }, data() { return { - attachmentService: AttachmentService, + attachmentService: new AttachmentService(), showDropzone: false, showDeleteModal: false, @@ -173,9 +173,6 @@ export default { default: true, }, }, - created() { - this.attachmentService = new AttachmentService() - }, computed: mapState({ attachments: (state) => state.attachments.attachments, }), diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue index 8bfb861d..af096cbe 100644 --- a/src/components/tasks/partials/comments.vue +++ b/src/components/tasks/partials/comments.vue @@ -180,13 +180,13 @@ export default { comments: [], showDeleteModal: false, - commentToDelete: TaskCommentModel, + commentToDelete: new TaskCommentModel(), isCommentEdit: false, - commentEdit: TaskCommentModel, + commentEdit: new TaskCommentModel(), - taskCommentService: TaskCommentService, - newComment: TaskCommentModel, + taskCommentService: new TaskCommentService(), + newComment: new TaskCommentModel(), editorActive: true, actions: {}, @@ -195,22 +195,15 @@ export default { creating: false, } }, - created() { - this.taskCommentService = new TaskCommentService() - this.newComment = new TaskCommentModel({taskId: this.taskId}) - this.commentEdit = new TaskCommentModel({taskId: this.taskId}) - this.commentToDelete = new TaskCommentModel({taskId: this.taskId}) - this.comments = [] - }, - mounted() { - this.loadComments() - }, watch: { - taskId() { - this.loadComments() - this.newComment.taskId = this.taskId - this.commentEdit.taskId = this.taskId - this.commentToDelete.taskId = this.taskId + taskId: { + handler(taskId) { + this.loadComments() + this.newComment.taskId = taskId + this.commentEdit.taskId = taskId + this.commentToDelete.taskId = taskId + }, + immediate: true, }, canWrite() { this.makeActions() diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue index 5c3209d3..4a6ccf95 100644 --- a/src/components/tasks/partials/defer-task.vue +++ b/src/components/tasks/partials/defer-task.vue @@ -45,7 +45,7 @@ export default { name: 'defer-task', data() { return { - taskService: TaskService, + taskService: new TaskService(), task: null, // We're saving the due date seperately to prevent null errors in very short periods where the task is null. dueDate: null, @@ -61,14 +61,17 @@ export default { required: true, }, }, - created() { - this.taskService = new TaskService() + watch: { + value: { + handler(value) { + this.task = value + this.dueDate = value.dueDate + this.lastValue = value.dueDate + }, + immediate: true, + }, }, mounted() { - this.task = this.value - this.dueDate = this.task.dueDate - this.lastValue = this.dueDate - // Because we don't really have other ways of handling change since if we let flatpickr // change events trigger updates, it would trigger a flatpickr change event which would trigger // an update which would trigger a change event and so on... @@ -86,13 +89,6 @@ export default { } this.updateDueDate() }, - watch: { - value(newVal) { - this.task = newVal - this.dueDate = this.task.dueDate - this.lastValue = this.dueDate - }, - }, computed: { flatPickerConfig() { return { diff --git a/src/components/tasks/partials/description.vue b/src/components/tasks/partials/description.vue index 2e401974..89b5ec72 100644 --- a/src/components/tasks/partials/description.vue +++ b/src/components/tasks/partials/description.vue @@ -68,13 +68,13 @@ export default { }, }, watch: { - value(newVal) { - this.task = newVal + value: { + handler(value) { + this.task = value + }, + immediate: true, }, }, - mounted() { - this.task = this.value - }, methods: { save() { this.saving = true diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue index fe32f7a4..9a666ee8 100644 --- a/src/components/tasks/partials/editAssignees.vue +++ b/src/components/tasks/partials/editAssignees.vue @@ -61,22 +61,19 @@ export default { }, data() { return { - newAssignee: UserModel, - listUserService: ListUserService, + newAssignee: new UserModel(), + listUserService: new ListUserService(), foundUsers: [], assignees: [], - taskAssigneeService: TaskAssigneeService, + taskAssigneeService: new TaskAssigneeService(), } }, - created() { - this.assignees = this.value - this.listUserService = new ListUserService() - this.newAssignee = new UserModel() - this.taskAssigneeService = new TaskAssigneeService() - }, watch: { - value(newVal) { - this.assignees = newVal + value: { + handler(value) { + this.assignees = value + }, + immediate: true, }, }, methods: { diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue index e4711e5b..838ca25e 100644 --- a/src/components/tasks/partials/editLabels.vue +++ b/src/components/tasks/partials/editLabels.vue @@ -64,7 +64,7 @@ export default { }, data() { return { - labelTaskService: LabelTaskService, + labelTaskService: new LabelTaskService(), labelTimeout: null, labels: [], query: '', @@ -74,14 +74,13 @@ export default { Multiselect, }, watch: { - value(newLabels) { - this.labels = newLabels + value: { + handler(value) { + this.labels = value + }, + immediate: true, }, }, - created() { - this.labelTaskService = new LabelTaskService() - this.labels = this.value - }, computed: { foundLabels() { const labels = (Object.values(this.$store.state.labels.labels).filter(l => { diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue index 4dae8420..96f76d44 100644 --- a/src/components/tasks/partials/heading.vue +++ b/src/components/tasks/partials/heading.vue @@ -9,7 +9,6 @@ @keydown.enter.prevent.stop="$event.target.blur()" :contenteditable="canWrite ? 'true' : 'false'" spellcheck="false" - ref="taskTitle" > {{ task.title.trim() }} diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue index 7c648c16..9e0e7da1 100644 --- a/src/components/tasks/partials/listSearch.vue +++ b/src/components/tasks/partials/listSearch.vue @@ -26,8 +26,8 @@ export default { name: 'listSearch', data() { return { - listSerivce: ListService, - list: ListModel, + listSerivce: new ListService(), + list: new ListModel(), foundLists: [], } }, @@ -39,18 +39,14 @@ export default { components: { Multiselect, }, - beforeMount() { - this.listSerivce = new ListService() - this.list = new ListModel() - }, watch: { - value(newVal) { - this.list = newVal + value: { + handler(value) { + this.list = value + }, + immeditate: true, }, }, - mounted() { - this.list = this.value - }, methods: { findLists(query) { if (query === '') { diff --git a/src/components/tasks/partials/prioritySelect.vue b/src/components/tasks/partials/prioritySelect.vue index a3e98442..02094b3e 100644 --- a/src/components/tasks/partials/prioritySelect.vue +++ b/src/components/tasks/partials/prioritySelect.vue @@ -33,13 +33,13 @@ export default { }, watch: { // Set the priority to the :value every time it changes from the outside - value(newVal) { - this.priority = newVal + value: { + handler(value) { + this.priority = value + }, + immediate: true, }, }, - mounted() { - this.priority = this.value - }, methods: { updateData() { this.$emit('input', this.priority) diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue index 2cb7a381..94b580f4 100644 --- a/src/components/tasks/partials/relatedTasks.vue +++ b/src/components/tasks/partials/relatedTasks.vue @@ -134,12 +134,12 @@ export default { data() { return { relatedTasks: {}, - taskService: TaskService, + taskService: new TaskService(), foundTasks: [], relationKinds: relationKinds, - newTaskRelationTask: TaskModel, + newTaskRelationTask: new TaskModel(), newTaskRelationKind: 'related', - taskRelationService: TaskRelationService, + taskRelationService: new TaskRelationService(), showDeleteModal: false, relationToDelete: {}, saved: false, @@ -171,19 +171,14 @@ export default { default: true, }, }, - created() { - this.taskService = new TaskService() - this.taskRelationService = new TaskRelationService() - this.newTaskRelationTask = new TaskModel() - }, watch: { - initialRelatedTasks(newVal) { - this.relatedTasks = newVal + initialRelatedTasks: { + handler(value) { + this.relatedTasks = value + }, + immediate: true, }, }, - mounted() { - this.relatedTasks = this.initialRelatedTasks - }, computed: { showCreate() { return Object.keys(this.relatedTasks).length === 0 || this.showNewRelationForm diff --git a/src/components/tasks/partials/repeatAfter.vue b/src/components/tasks/partials/repeatAfter.vue index b2c2ec57..b6fe0751 100644 --- a/src/components/tasks/partials/repeatAfter.vue +++ b/src/components/tasks/partials/repeatAfter.vue @@ -75,19 +75,16 @@ export default { }, }, watch: { - value(newVal) { - this.task = newVal - if (typeof newVal.repeatAfter !== 'undefined') { - this.repeatAfter = newVal.repeatAfter - } + value: { + handler(value) { + this.task = value + if (typeof value.repeatAfter !== 'undefined') { + this.repeatAfter = value.repeatAfter + } + }, + immediate: true, }, }, - mounted() { - this.task = this.value - if (typeof this.value.repeatAfter !== 'undefined') { - this.repeatAfter = this.value.repeatAfter - } - }, methods: { updateData() { if (this.task.repeatMode !== repeatModes.REPEAT_MODE_DEFAULT && this.repeatAfter.amount === 0) { diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue index 51a04801..294e77af 100644 --- a/src/components/tasks/partials/singleTaskInList.vue +++ b/src/components/tasks/partials/singleTaskInList.vue @@ -99,8 +99,8 @@ export default { name: 'singleTaskInList', data() { return { - taskService: TaskService, - task: TaskModel, + taskService: new TaskService(), + task: new TaskModel(), showDefer: false, } }, @@ -146,10 +146,6 @@ export default { this.task = this.theTask document.addEventListener('click', this.hideDeferDueDatePopup) }, - created() { - this.task = new TaskModel() - this.taskService = new TaskService() - }, beforeDestroy() { document.removeEventListener('click', this.hideDeferDueDatePopup) }, diff --git a/src/components/user/avatar-settings.vue b/src/components/user/avatar-settings.vue index f8485816..8fb03565 100644 --- a/src/components/user/avatar-settings.vue +++ b/src/components/user/avatar-settings.vue @@ -74,14 +74,13 @@ export default { data() { return { avatarProvider: '', - avatarService: AvatarService, + avatarService: new AvatarService(), isCropAvatar: false, avatarToCrop: null, loading: false, // Seperate variable because some things we're doing in browser take a bit } }, created() { - this.avatarService = new AvatarService() this.avatarStatus() }, components: { diff --git a/src/components/user/settings/deletion.vue b/src/components/user/settings/deletion.vue index 878a23e5..a769d737 100644 --- a/src/components/user/settings/deletion.vue +++ b/src/components/user/settings/deletion.vue @@ -91,14 +91,11 @@ export default { name: 'user-settings-deletion', data() { return { - accountDeleteService: AccountDeleteService, + accountDeleteService: new AccountDeleteService(), password: '', errPasswordRequired: false, } }, - created() { - this.accountDeleteService = new AccountDeleteService() - }, computed: mapState({ userDeletionEnabled: state => state.config.userDeletionEnabled, deletionScheduledAt: state => parseDateOrNull(state.auth.info.deletionScheduledAt), diff --git a/src/views/filters/CreateSavedFilter.vue b/src/views/filters/CreateSavedFilter.vue index 889c35d4..0ed3ff9c 100644 --- a/src/views/filters/CreateSavedFilter.vue +++ b/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() { diff --git a/src/views/filters/settings/delete.vue b/src/views/filters/settings/delete.vue index 489d5c6d..a95ba565 100644 --- a/src/views/filters/settings/delete.vue +++ b/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 diff --git a/src/views/filters/settings/edit.vue b/src/views/filters/settings/edit.vue index 5af865a4..a625e0a0 100644 --- a/src/views/filters/settings/edit.vue +++ b/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() { diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue index 1f5adcc4..22bb07f8 100644 --- a/src/views/labels/ListLabels.vue +++ b/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() { diff --git a/src/views/labels/NewLabel.vue b/src/views/labels/NewLabel.vue index 35ba726d..87506bba 100644 --- a/src/views/labels/NewLabel.vue +++ b/src/views/labels/NewLabel.vue @@ -35,7 +35,6 @@ \ No newline at end of file diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue index 4c3f8333..7fc31ba7 100644 --- a/src/views/list/views/List.vue +++ b/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) diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue index 6ef4cc58..21f68cd7 100644 --- a/src/views/namespaces/ListNamespaces.vue +++ b/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')) }, diff --git a/src/views/namespaces/NewNamespace.vue b/src/views/namespaces/NewNamespace.vue index 52996a63..e4c55670 100644 --- a/src/views/namespaces/NewNamespace.vue +++ b/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')) }, diff --git a/src/views/namespaces/settings/archive.vue b/src/views/namespaces/settings/archive.vue index aef98415..0a7d4a1e 100644 --- a/src/views/namespaces/settings/archive.vue +++ b/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 }) : diff --git a/src/views/namespaces/settings/delete.vue b/src/views/namespaces/settings/delete.vue index 143f6502..de04b63a 100644 --- a/src/views/namespaces/settings/delete.vue +++ b/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) diff --git a/src/views/namespaces/settings/edit.vue b/src/views/namespaces/settings/edit.vue index f2f8bead..f91850b7 100644 --- a/src/views/namespaces/settings/edit.vue +++ b/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() { diff --git a/src/views/namespaces/settings/share.vue b/src/views/namespaces/settings/share.vue index 1fb61b98..5096bb7f 100644 --- a/src/views/namespaces/settings/share.vue +++ b/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() { diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue index 08eb51bd..3cb3d33b 100644 --- a/src/views/tasks/ShowTasks.vue +++ b/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 }, diff --git a/src/views/tasks/ShowTasksInRange.vue b/src/views/tasks/ShowTasksInRange.vue index e9431ca5..e833a688 100644 --- a/src/views/tasks/ShowTasksInRange.vue +++ b/src/views/tasks/ShowTasksInRange.vue @@ -10,6 +10,10 @@ \ No newline at end of file diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue index e45541d7..a740a951 100644 --- a/src/views/tasks/TaskDetailView.vue +++ b/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() { diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue index 7d4f4f21..af70f3d6 100644 --- a/src/views/teams/EditTeam.vue +++ b/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() { diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue index 0d3c78ce..7712a277 100644 --- a/src/views/teams/ListTeams.vue +++ b/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() { diff --git a/src/views/teams/NewTeam.vue b/src/views/teams/NewTeam.vue index 27705149..a92f50b3 100644 --- a/src/views/teams/NewTeam.vue +++ b/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')) }, diff --git a/src/views/user/PasswordReset.vue b/src/views/user/PasswordReset.vue index 66942612..2773a955 100644 --- a/src/views/user/PasswordReset.vue +++ b/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')) }, diff --git a/src/views/user/RequestPasswordReset.vue b/src/views/user/RequestPasswordReset.vue index 28e725ec..a4468271 100644 --- a/src/views/user/RequestPasswordReset.vue +++ b/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')) }, diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue index 98adfede..580b2e98 100644 --- a/src/views/user/Settings.vue +++ b/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