From f1cb3b9d083fd0670831be4f285a7a5eec59bff6 Mon Sep 17 00:00:00 2001 From: Micheal Mand Date: Mon, 3 Feb 2020 14:28:42 -0700 Subject: [PATCH 1/3] Catch 'NavigationDuplicated' error and ignore it --- .../js/components/EditButtonComponent.vue | 2 +- .../Core/Assets/js/mixins/ShortcutHelper.js | 14 +- .../Media/Assets/js/components/MediaForm.vue | 6 +- .../Media/Assets/js/components/MediaList.vue | 8 +- .../Page/Assets/js/components/PageForm.vue | 4 +- .../Page/Assets/js/components/PageTable.vue | 2 +- .../User/Assets/js/components/RoleForm.vue | 4 +- .../User/Assets/js/components/RoleTable.vue | 2 +- .../User/Assets/js/components/UserForm.vue | 4 +- .../User/Assets/js/components/UserTable.vue | 2 +- .../modules/core/js/components/CkEditor.vue | 154 +++++++++++++----- .../js/components/EditButtonComponent.vue | 2 +- .../modules/core/js/mixins/ShortcutHelper.js | 14 +- .../modules/media/js/components/MediaForm.vue | 6 +- .../modules/media/js/components/MediaList.vue | 8 +- .../modules/page/js/components/PageForm.vue | 4 +- .../modules/page/js/components/PageTable.vue | 2 +- .../modules/user/js/components/RoleForm.vue | 4 +- .../modules/user/js/components/RoleTable.vue | 2 +- .../modules/user/js/components/UserForm.vue | 4 +- .../modules/user/js/components/UserTable.vue | 2 +- 21 files changed, 170 insertions(+), 80 deletions(-) diff --git a/Modules/Core/Assets/js/components/EditButtonComponent.vue b/Modules/Core/Assets/js/components/EditButtonComponent.vue index 10d7a376e..e5c089156 100644 --- a/Modules/Core/Assets/js/components/EditButtonComponent.vue +++ b/Modules/Core/Assets/js/components/EditButtonComponent.vue @@ -9,7 +9,7 @@ }, methods: { goToEditPage() { - this.$router.push(this.to); + this.pushRoute(this.to); }, }, }; diff --git a/Modules/Core/Assets/js/mixins/ShortcutHelper.js b/Modules/Core/Assets/js/mixins/ShortcutHelper.js index 0f1b921e8..917c8ca75 100644 --- a/Modules/Core/Assets/js/mixins/ShortcutHelper.js +++ b/Modules/Core/Assets/js/mixins/ShortcutHelper.js @@ -1,7 +1,17 @@ export default { methods: { - pushRoute(route) { - this.$router.push(route); + pushRoute(route, onError) { + this.$router.push(route, () => {}, (error, ...args) => { + // vue-router 3.1.0+ push/replace causes NavigationDuplicated error + // for routing to the same location + if (error.name === 'NavigationDuplicated') { + return; + } + + if (typeof onError === 'function') { + onError(error, ...args); + } + }); }, }, }; diff --git a/Modules/Media/Assets/js/components/MediaForm.vue b/Modules/Media/Assets/js/components/MediaForm.vue index a1181e7c0..34dffed42 100644 --- a/Modules/Media/Assets/js/components/MediaForm.vue +++ b/Modules/Media/Assets/js/components/MediaForm.vue @@ -157,7 +157,7 @@ type: 'success', message: response.message, }); - this.$router.push({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } }); + this.pushRoute({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } }); }) .catch((error) => { console.log(error); @@ -170,10 +170,10 @@ }, onCancel() { if (this.media.folder_id === 0) { - this.$router.push({ name: 'admin.media.media.index', query: {} }); + this.pushRoute({ name: 'admin.media.media.index', query: {} }); return; } - this.$router.push({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } }); + this.pushRoute({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } }); }, }, }; diff --git a/Modules/Media/Assets/js/components/MediaList.vue b/Modules/Media/Assets/js/components/MediaList.vue index 3e9c3df93..beb25fa9f 100644 --- a/Modules/Media/Assets/js/components/MediaList.vue +++ b/Modules/Media/Assets/js/components/MediaList.vue @@ -262,7 +262,7 @@ enterFolder(scope) { this.tableIsLoading = true; this.folderId = scope.row.id; - this.$router.push({ query: { folder_id: scope.row.id } }); + this.pushRoute({ query: { folder_id: scope.row.id } }); }, insertMedia(scope) { this.$events.emit(this.eventName, scope.row); @@ -283,9 +283,9 @@ this.tableIsLoading = true; this.folderId = folderId; if (folderId === 0) { - this.$router.push({ query: {} }); + this.pushRoute({ query: {} }); } else { - this.$router.push({ query: { folder_id: folderId } }); + this.pushRoute({ query: { folder_id: folderId } }); } }, batchDelete() { @@ -317,7 +317,7 @@ }); }, goToEdit(scope) { - this.$router.push({ name: 'admin.media.media.edit', params: { mediaId: scope.row.id } }); + this.pushRoute({ name: 'admin.media.media.edit', params: { mediaId: scope.row.id } }); }, }, }; diff --git a/Modules/Page/Assets/js/components/PageForm.vue b/Modules/Page/Assets/js/components/PageForm.vue index f985f41a9..be18236db 100644 --- a/Modules/Page/Assets/js/components/PageForm.vue +++ b/Modules/Page/Assets/js/components/PageForm.vue @@ -220,7 +220,7 @@ type: 'success', message: response.message, }); - this.$router.push({ name: 'admin.page.page.index' }); + this.pushRoute({ name: 'admin.page.page.index' }); }) .catch((error) => { console.log(error); @@ -232,7 +232,7 @@ }); }, onCancel() { - this.$router.push({ name: 'admin.page.page.index' }); + this.pushRoute({ name: 'admin.page.page.index' }); }, fetchTemplates() { axios.get(route('api.page.page-templates.index')) diff --git a/Modules/Page/Assets/js/components/PageTable.vue b/Modules/Page/Assets/js/components/PageTable.vue index 6a2b951b4..7d86664fb 100644 --- a/Modules/Page/Assets/js/components/PageTable.vue +++ b/Modules/Page/Assets/js/components/PageTable.vue @@ -216,7 +216,7 @@ this.selectedPages = selectedPages; }, goToEdit(scope) { - this.$router.push({ name: 'admin.page.page.edit', params: { pageId: scope.row.id } }); + this.pushRoute({ name: 'admin.page.page.edit', params: { pageId: scope.row.id } }); }, editRoute(scope) { return route('admin.page.page.edit', [scope.row.id]); diff --git a/Modules/User/Assets/js/components/RoleForm.vue b/Modules/User/Assets/js/components/RoleForm.vue index c43e4fe9d..206ef8e12 100644 --- a/Modules/User/Assets/js/components/RoleForm.vue +++ b/Modules/User/Assets/js/components/RoleForm.vue @@ -115,7 +115,7 @@ type: 'success', message: response.message, }); - this.$router.push({ name: 'admin.user.role.index' }); + this.pushRoute({ name: 'admin.user.role.index' }); }) .catch((error) => { console.log(error); @@ -127,7 +127,7 @@ }); }, onCancel() { - this.$router.push({ name: 'admin.user.role.index' }); + this.pushRoute({ name: 'admin.user.role.index' }); }, generateSlug() { this.role.slug = this.slugify(this.role.name); diff --git a/Modules/User/Assets/js/components/RoleTable.vue b/Modules/User/Assets/js/components/RoleTable.vue index e1e621735..3e68f686c 100644 --- a/Modules/User/Assets/js/components/RoleTable.vue +++ b/Modules/User/Assets/js/components/RoleTable.vue @@ -161,7 +161,7 @@ this.queryServer({ search: query.target.value }); }, 300), goToEdit(scope) { - this.$router.push({ name: 'admin.user.role.edit', params: { roleId: scope.row.id } }); + this.pushRoute({ name: 'admin.user.role.edit', params: { roleId: scope.row.id } }); }, editRoute(scope) { return route('admin.user.role.edit', [scope.row.id]); diff --git a/Modules/User/Assets/js/components/UserForm.vue b/Modules/User/Assets/js/components/UserForm.vue index afa372aa4..19b032304 100644 --- a/Modules/User/Assets/js/components/UserForm.vue +++ b/Modules/User/Assets/js/components/UserForm.vue @@ -165,7 +165,7 @@ type: 'success', message: response.message, }); - this.$router.push({ name: 'admin.user.user.index' }); + this.pushRoute({ name: 'admin.user.user.index' }); }) .catch((error) => { console.log(error); @@ -177,7 +177,7 @@ }); }, onCancel() { - this.$router.push({ name: 'admin.user.user.index' }); + this.pushRoute({ name: 'admin.user.user.index' }); }, fetchUser() { this.loading = true; diff --git a/Modules/User/Assets/js/components/UserTable.vue b/Modules/User/Assets/js/components/UserTable.vue index b05f60f8e..efd6ba36b 100644 --- a/Modules/User/Assets/js/components/UserTable.vue +++ b/Modules/User/Assets/js/components/UserTable.vue @@ -170,7 +170,7 @@ this.queryServer({ search: query.target.value }); }, 300), goToEdit(scope) { - this.$router.push({ name: 'admin.user.user.edit', params: { userId: scope.row.id } }); + this.pushRoute({ name: 'admin.user.user.edit', params: { userId: scope.row.id } }); }, editRoute(scope) { return route('admin.user.user.edit', [scope.row.id]); diff --git a/public/modules/core/js/components/CkEditor.vue b/public/modules/core/js/components/CkEditor.vue index d26ac3f7c..2f590fafb 100644 --- a/public/modules/core/js/components/CkEditor.vue +++ b/public/modules/core/js/components/CkEditor.vue @@ -5,12 +5,12 @@ :value="value" :types="types" :config="config" + :disabled="readOnlyMode" class="editor" > - - diff --git a/public/modules/core/js/components/EditButtonComponent.vue b/public/modules/core/js/components/EditButtonComponent.vue index 10d7a376e..e5c089156 100644 --- a/public/modules/core/js/components/EditButtonComponent.vue +++ b/public/modules/core/js/components/EditButtonComponent.vue @@ -9,7 +9,7 @@ }, methods: { goToEditPage() { - this.$router.push(this.to); + this.pushRoute(this.to); }, }, }; diff --git a/public/modules/core/js/mixins/ShortcutHelper.js b/public/modules/core/js/mixins/ShortcutHelper.js index 0f1b921e8..917c8ca75 100644 --- a/public/modules/core/js/mixins/ShortcutHelper.js +++ b/public/modules/core/js/mixins/ShortcutHelper.js @@ -1,7 +1,17 @@ export default { methods: { - pushRoute(route) { - this.$router.push(route); + pushRoute(route, onError) { + this.$router.push(route, () => {}, (error, ...args) => { + // vue-router 3.1.0+ push/replace causes NavigationDuplicated error + // for routing to the same location + if (error.name === 'NavigationDuplicated') { + return; + } + + if (typeof onError === 'function') { + onError(error, ...args); + } + }); }, }, }; diff --git a/public/modules/media/js/components/MediaForm.vue b/public/modules/media/js/components/MediaForm.vue index a1181e7c0..34dffed42 100644 --- a/public/modules/media/js/components/MediaForm.vue +++ b/public/modules/media/js/components/MediaForm.vue @@ -157,7 +157,7 @@ type: 'success', message: response.message, }); - this.$router.push({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } }); + this.pushRoute({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } }); }) .catch((error) => { console.log(error); @@ -170,10 +170,10 @@ }, onCancel() { if (this.media.folder_id === 0) { - this.$router.push({ name: 'admin.media.media.index', query: {} }); + this.pushRoute({ name: 'admin.media.media.index', query: {} }); return; } - this.$router.push({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } }); + this.pushRoute({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } }); }, }, }; diff --git a/public/modules/media/js/components/MediaList.vue b/public/modules/media/js/components/MediaList.vue index 3e9c3df93..beb25fa9f 100644 --- a/public/modules/media/js/components/MediaList.vue +++ b/public/modules/media/js/components/MediaList.vue @@ -262,7 +262,7 @@ enterFolder(scope) { this.tableIsLoading = true; this.folderId = scope.row.id; - this.$router.push({ query: { folder_id: scope.row.id } }); + this.pushRoute({ query: { folder_id: scope.row.id } }); }, insertMedia(scope) { this.$events.emit(this.eventName, scope.row); @@ -283,9 +283,9 @@ this.tableIsLoading = true; this.folderId = folderId; if (folderId === 0) { - this.$router.push({ query: {} }); + this.pushRoute({ query: {} }); } else { - this.$router.push({ query: { folder_id: folderId } }); + this.pushRoute({ query: { folder_id: folderId } }); } }, batchDelete() { @@ -317,7 +317,7 @@ }); }, goToEdit(scope) { - this.$router.push({ name: 'admin.media.media.edit', params: { mediaId: scope.row.id } }); + this.pushRoute({ name: 'admin.media.media.edit', params: { mediaId: scope.row.id } }); }, }, }; diff --git a/public/modules/page/js/components/PageForm.vue b/public/modules/page/js/components/PageForm.vue index f985f41a9..be18236db 100644 --- a/public/modules/page/js/components/PageForm.vue +++ b/public/modules/page/js/components/PageForm.vue @@ -220,7 +220,7 @@ type: 'success', message: response.message, }); - this.$router.push({ name: 'admin.page.page.index' }); + this.pushRoute({ name: 'admin.page.page.index' }); }) .catch((error) => { console.log(error); @@ -232,7 +232,7 @@ }); }, onCancel() { - this.$router.push({ name: 'admin.page.page.index' }); + this.pushRoute({ name: 'admin.page.page.index' }); }, fetchTemplates() { axios.get(route('api.page.page-templates.index')) diff --git a/public/modules/page/js/components/PageTable.vue b/public/modules/page/js/components/PageTable.vue index 6a2b951b4..7d86664fb 100644 --- a/public/modules/page/js/components/PageTable.vue +++ b/public/modules/page/js/components/PageTable.vue @@ -216,7 +216,7 @@ this.selectedPages = selectedPages; }, goToEdit(scope) { - this.$router.push({ name: 'admin.page.page.edit', params: { pageId: scope.row.id } }); + this.pushRoute({ name: 'admin.page.page.edit', params: { pageId: scope.row.id } }); }, editRoute(scope) { return route('admin.page.page.edit', [scope.row.id]); diff --git a/public/modules/user/js/components/RoleForm.vue b/public/modules/user/js/components/RoleForm.vue index c43e4fe9d..206ef8e12 100644 --- a/public/modules/user/js/components/RoleForm.vue +++ b/public/modules/user/js/components/RoleForm.vue @@ -115,7 +115,7 @@ type: 'success', message: response.message, }); - this.$router.push({ name: 'admin.user.role.index' }); + this.pushRoute({ name: 'admin.user.role.index' }); }) .catch((error) => { console.log(error); @@ -127,7 +127,7 @@ }); }, onCancel() { - this.$router.push({ name: 'admin.user.role.index' }); + this.pushRoute({ name: 'admin.user.role.index' }); }, generateSlug() { this.role.slug = this.slugify(this.role.name); diff --git a/public/modules/user/js/components/RoleTable.vue b/public/modules/user/js/components/RoleTable.vue index e1e621735..3e68f686c 100644 --- a/public/modules/user/js/components/RoleTable.vue +++ b/public/modules/user/js/components/RoleTable.vue @@ -161,7 +161,7 @@ this.queryServer({ search: query.target.value }); }, 300), goToEdit(scope) { - this.$router.push({ name: 'admin.user.role.edit', params: { roleId: scope.row.id } }); + this.pushRoute({ name: 'admin.user.role.edit', params: { roleId: scope.row.id } }); }, editRoute(scope) { return route('admin.user.role.edit', [scope.row.id]); diff --git a/public/modules/user/js/components/UserForm.vue b/public/modules/user/js/components/UserForm.vue index afa372aa4..19b032304 100644 --- a/public/modules/user/js/components/UserForm.vue +++ b/public/modules/user/js/components/UserForm.vue @@ -165,7 +165,7 @@ type: 'success', message: response.message, }); - this.$router.push({ name: 'admin.user.user.index' }); + this.pushRoute({ name: 'admin.user.user.index' }); }) .catch((error) => { console.log(error); @@ -177,7 +177,7 @@ }); }, onCancel() { - this.$router.push({ name: 'admin.user.user.index' }); + this.pushRoute({ name: 'admin.user.user.index' }); }, fetchUser() { this.loading = true; diff --git a/public/modules/user/js/components/UserTable.vue b/public/modules/user/js/components/UserTable.vue index b05f60f8e..efd6ba36b 100644 --- a/public/modules/user/js/components/UserTable.vue +++ b/public/modules/user/js/components/UserTable.vue @@ -170,7 +170,7 @@ this.queryServer({ search: query.target.value }); }, 300), goToEdit(scope) { - this.$router.push({ name: 'admin.user.user.edit', params: { userId: scope.row.id } }); + this.pushRoute({ name: 'admin.user.user.edit', params: { userId: scope.row.id } }); }, editRoute(scope) { return route('admin.user.user.edit', [scope.row.id]); From 5c38556a391bf2e979459497508f062f68fc4dfe Mon Sep 17 00:00:00 2001 From: Micheal Mand Date: Tue, 4 Feb 2020 16:27:08 -0700 Subject: [PATCH 2/3] Missed some imports of the mixin --- Modules/Core/Assets/js/components/EditButtonComponent.vue | 3 +++ Modules/Media/Assets/js/components/MediaForm.vue | 2 ++ Modules/Media/Assets/js/components/MediaList.vue | 2 ++ public/modules/core/js/components/EditButtonComponent.vue | 3 +++ public/modules/media/js/components/MediaForm.vue | 2 ++ public/modules/media/js/components/MediaList.vue | 2 ++ 6 files changed, 14 insertions(+) diff --git a/Modules/Core/Assets/js/components/EditButtonComponent.vue b/Modules/Core/Assets/js/components/EditButtonComponent.vue index e5c089156..2a0af9763 100644 --- a/Modules/Core/Assets/js/components/EditButtonComponent.vue +++ b/Modules/Core/Assets/js/components/EditButtonComponent.vue @@ -3,7 +3,10 @@