From 421ff9a1886b1f7e35cedbc1567e61a373d8b0dd Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 23 Aug 2021 21:18:29 +0200
Subject: [PATCH] feat: use new async component definition

- fix see: https://v3.vuejs.org/guide/migration/async-components.html
- put async editor in separate component
---
 src/components/input/AsyncEditor.js           | 12 ++++++++++++
 src/components/tasks/edit-task.vue            | 11 +++--------
 src/components/tasks/partials/comments.vue    | 11 +++--------
 src/components/tasks/partials/description.vue | 10 ++--------
 src/views/filters/CreateSavedFilter.vue       | 11 +++--------
 src/views/filters/settings/edit.vue           | 11 +++--------
 src/views/labels/ListLabels.vue               | 13 ++++---------
 src/views/list/settings/edit.vue              | 11 +++--------
 src/views/namespaces/settings/edit.vue        | 11 +++--------
 src/views/teams/EditTeam.vue                  | 11 ++---------
 10 files changed, 38 insertions(+), 74 deletions(-)
 create mode 100644 src/components/input/AsyncEditor.js

diff --git a/src/components/input/AsyncEditor.js b/src/components/input/AsyncEditor.js
new file mode 100644
index 000000000..30278c292
--- /dev/null
+++ b/src/components/input/AsyncEditor.js
@@ -0,0 +1,12 @@
+import { defineAsyncComponent } from 'vue'
+import ErrorComponent from '@/components/misc/error.vue'
+import LoadingComponent from '@/components/misc/loading.vue'
+
+const Editor = () => import('@/components/input/editor.vue')
+
+export default defineAsyncComponent({
+	loader: Editor,
+	loadingComponent: LoadingComponent,
+	errorComponent: ErrorComponent,
+	timeout: 60000,
+})
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 574b42743..dc92cfba8 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -69,6 +69,8 @@
 </template>
 
 <script>
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import ListService from '../../services/list'
 import TaskService from '../../services/task'
 import TaskModel from '../../models/task'
@@ -76,8 +78,6 @@ import priorities from '../../models/constants/priorities'
 import EditLabels from './partials/editLabels'
 import Reminders from './partials/reminders'
 import ColorPicker from '../input/colorPicker'
-import LoadingComponent from '../misc/loading'
-import ErrorComponent from '../misc/error'
 
 export default {
 	name: 'edit-task',
@@ -99,12 +99,7 @@ export default {
 		ColorPicker,
 		Reminders,
 		EditLabels,
-		editor: () => ({
-			component: import('../../components/input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	props: {
 		task: {
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index 9aead9995..b217ea105 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -152,22 +152,17 @@
 </template>
 
 <script>
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import TaskCommentService from '../../../services/taskComment'
 import TaskCommentModel from '../../../models/taskComment'
-import LoadingComponent from '../../misc/loading'
-import ErrorComponent from '../../misc/error'
 import {uploadFile} from '@/helpers/attachments'
 import {mapState} from 'vuex'
 
 export default {
 	name: 'comments',
 	components: {
-		editor: () => ({
-			component: import('../../input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	props: {
 		taskId: {
diff --git a/src/components/tasks/partials/description.vue b/src/components/tasks/partials/description.vue
index 86ce4316d..fe7211580 100644
--- a/src/components/tasks/partials/description.vue
+++ b/src/components/tasks/partials/description.vue
@@ -30,8 +30,7 @@
 </template>
 
 <script>
-import LoadingComponent from '@/components/misc/loading.vue'
-import ErrorComponent from '@/components/misc/error.vue'
+import AsyncEditor from '@/components/input/AsyncEditor'
 
 import {LOADING} from '@/store/mutation-types'
 import {mapState} from 'vuex'
@@ -39,12 +38,7 @@ import {mapState} from 'vuex'
 export default {
 	name: 'description',
 	components: {
-		editor: () => ({
-			component: import('@/components/input/editor.vue'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	data() {
 		return {
diff --git a/src/views/filters/CreateSavedFilter.vue b/src/views/filters/CreateSavedFilter.vue
index 8a0ca6e66..fe45f1cdc 100644
--- a/src/views/filters/CreateSavedFilter.vue
+++ b/src/views/filters/CreateSavedFilter.vue
@@ -60,8 +60,8 @@
 </template>
 
 <script>
-import LoadingComponent from '@/components/misc/loading.vue'
-import ErrorComponent from '@/components/misc/error.vue'
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import Filters from '@/components/list/partials/filters.vue'
 import SavedFilterService from '@/services/savedFilter'
 import SavedFilterModel from '@/models/savedFilter'
@@ -86,12 +86,7 @@ export default {
 	},
 	components: {
 		Filters,
-		editor: () => ({
-			component: import('../../components/input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	created() {
 		this.editorActive = false
diff --git a/src/views/filters/settings/edit.vue b/src/views/filters/settings/edit.vue
index 03a595cf2..6a6c48e21 100644
--- a/src/views/filters/settings/edit.vue
+++ b/src/views/filters/settings/edit.vue
@@ -52,8 +52,8 @@
 </template>
 
 <script>
-import ErrorComponent from '@/components/misc/error.vue'
-import LoadingComponent from '@/components/misc/loading.vue'
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import CreateEdit from '@/components/misc/create-edit.vue'
 
 import SavedFilterModel from '@/models/savedFilter'
@@ -84,12 +84,7 @@ export default {
 	components: {
 		CreateEdit,
 		Filters,
-		editor: () => ({
-			component: import('@/components/input/editor.vue'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	watch: {
 		// call again the method if the route changes
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index 22bb07f88..b1bd5993a 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -100,21 +100,16 @@
 import {mapState} from 'vuex'
 
 import LabelModel from '../../models/label'
-import ColorPicker from '../../components/input/colorPicker'
-import LoadingComponent from '../../components/misc/loading'
-import ErrorComponent from '../../components/misc/error'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
+import AsyncEditor from '@/components/input/AsyncEditor'
+import ColorPicker from '@/components/input/colorPicker'
+
 export default {
 	name: 'ListLabels',
 	components: {
 		ColorPicker,
-		editor: () => ({
-			component: import('../../components/input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	data() {
 		return {
diff --git a/src/views/list/settings/edit.vue b/src/views/list/settings/edit.vue
index 8f566b948..8cbbfc5f1 100644
--- a/src/views/list/settings/edit.vue
+++ b/src/views/list/settings/edit.vue
@@ -66,11 +66,11 @@
 </template>
 
 <script>
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import ListModel from '@/models/list'
 import ListService from '@/services/list'
 import ColorPicker from '@/components/input/colorPicker.vue'
-import LoadingComponent from '@/components/misc/loading.vue'
-import ErrorComponent from '@/components/misc/error.vue'
 import ListDuplicateService from '@/services/listDuplicateService'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import CreateEdit from '@/components/misc/create-edit.vue'
@@ -87,12 +87,7 @@ export default {
 	components: {
 		CreateEdit,
 		ColorPicker,
-		editor: () => ({
-			component: import('@/components/input/editor.vue'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	watch: {
 		'$route.params.listId': {
diff --git a/src/views/namespaces/settings/edit.vue b/src/views/namespaces/settings/edit.vue
index c1b19a997..6e4e01ce1 100644
--- a/src/views/namespaces/settings/edit.vue
+++ b/src/views/namespaces/settings/edit.vue
@@ -57,12 +57,12 @@
 </template>
 
 <script>
+import AsyncEditor from '@/components/input/AsyncEditor'
+
 import NamespaceService from '@/services/namespace'
 import NamespaceModel from '@/models/namespace'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import ColorPicker from '@/components/input/colorPicker.vue'
-import LoadingComponent from '@/components/misc/loading.vue'
-import ErrorComponent from '@/components/misc/error.vue'
 import CreateEdit from '@/components/misc/create-edit.vue'
 
 export default {
@@ -79,12 +79,7 @@ export default {
 		CreateEdit,
 		ColorPicker,
 		Fancycheckbox,
-		editor: () => ({
-			component: import('@/components/input/editor.vue'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	beforeMount() {
 		this.namespace.id = this.$route.params.id
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index b5198259d..d2e9e272d 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -161,6 +161,7 @@
 </template>
 
 <script>
+import AsyncEditor from '@/components/input/AsyncEditor'
 import {mapState} from 'vuex'
 
 import TeamService from '../../services/team'
@@ -171,9 +172,6 @@ import UserModel from '../../models/user'
 import UserService from '../../services/user'
 import Rights from '../../models/constants/rights.json'
 
-import LoadingComponent from '../../components/misc/loading'
-import ErrorComponent from '../../components/misc/error'
-
 import Multiselect from '@/components/input/multiselect.vue'
 
 export default {
@@ -199,12 +197,7 @@ export default {
 	},
 	components: {
 		Multiselect,
-		editor: () => ({
-			component: import('../../components/input/editor'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		editor: AsyncEditor,
 	},
 	watch: {
 		// call again the method if the route changes