From cf4d717e05d73d2634f57b4daa06697a29408742 Mon Sep 17 00:00:00 2001 From: Mason Houtz Date: Wed, 26 May 2021 12:04:12 -0700 Subject: [PATCH] standardized vue mount functions in analysis and admin entry points, refined data manager and library sub routers, fixed javascript scoping bug in FormCardTool --- client/src/components/Form/FormCardTool.vue | 2 +- client/src/components/Libraries/index.js | 8 ++++ .../admin/DataManager/DataManager.vue | 45 +++++++++++++------ .../admin/DataManager/DataManagerJobs.vue | 2 +- .../admin/DataManager/DataManagerRouter.js | 12 ++--- .../src/components/admin/DataManager/index.js | 14 ++++++ client/src/entry/admin/AdminRouter.js | 27 +++++------ client/src/entry/analysis/AnalysisRouter.js | 26 +++-------- client/src/entry/analysis/VueRouterMain.vue | 3 -- 9 files changed, 79 insertions(+), 60 deletions(-) create mode 100644 client/src/components/Libraries/index.js create mode 100644 client/src/components/admin/DataManager/index.js delete mode 100644 client/src/entry/analysis/VueRouterMain.vue diff --git a/client/src/components/Form/FormCardTool.vue b/client/src/components/Form/FormCardTool.vue index 6042f538b50..ffc3640f60d 100644 --- a/client/src/components/Form/FormCardTool.vue +++ b/client/src/components/Form/FormCardTool.vue @@ -198,7 +198,7 @@ export default { // add tool menu webhooks Webhooks.load({ type: "tool-menu", - callback: function (webhooks) { + callback: (webhooks) => { webhooks.each((model) => { const webhook = model.toJSON(); if (webhook.activate && webhook.config.function) { diff --git a/client/src/components/Libraries/index.js b/client/src/components/Libraries/index.js new file mode 100644 index 00000000000..036edee3100 --- /dev/null +++ b/client/src/components/Libraries/index.js @@ -0,0 +1,8 @@ +import router from "./LibraryFolderRouter"; + +export const Libraries = { + router, + render: (h) => h("router-view"), +}; + +export default Libraries; diff --git a/client/src/components/admin/DataManager/DataManager.vue b/client/src/components/admin/DataManager/DataManager.vue index b94709efa6d..57a3b492bee 100644 --- a/client/src/components/admin/DataManager/DataManager.vue +++ b/client/src/components/admin/DataManager/DataManager.vue @@ -82,11 +82,15 @@ import { getAppRoot } from "onload/loadConfig"; import axios from "axios"; import Alert from "components/Alert.vue"; +import { debounce } from "underscore"; export default { components: { Alert, }, + props: { + debouncePeriod: { type: Number, required: false, default: 100 }, + }, data() { return { dataManagers: [], @@ -95,7 +99,7 @@ export default { viewOnly: false, message: "", status: "", - loading: true, + loading: false, }; }, computed: { @@ -110,21 +114,34 @@ export default { kebabCase(s) { return s.toLowerCase().replace(/ /g, "-"); }, + load() { + this.loading = true; + axios + .get(`${getAppRoot()}data_manager/data_managers_list`) + .then((response) => { + console.log("response", response); + this.dataManagers = response.data.dataManagers; + this.dataTables = response.data.dataTables; + this.viewOnly = response.data.viewOnly; + this.message = response.data.message; + this.status = response.data.status; + }) + .catch((error) => { + console.error(error); + }) + .finally(() => { + this.loading = false; + }); + }, }, created() { - axios - .get(`${getAppRoot()}data_manager/data_managers_list`) - .then((response) => { - this.dataManagers = response.data.dataManagers; - this.dataTables = response.data.dataTables; - this.viewOnly = response.data.viewOnly; - this.message = response.data.message; - this.status = response.data.status; - this.loading = false; - }) - .catch((error) => { - console.error(error); - }); + console.log("created"); + this.debouncedLoad = debounce(this.load, this.debouncePeriod); + this.debouncedLoad(); + }, + beforeRouteEnter(to, from, next) { + console.log("beforeRouteEnter"); + next((vm) => vm.debouncedLoad()); }, }; diff --git a/client/src/components/admin/DataManager/DataManagerJobs.vue b/client/src/components/admin/DataManager/DataManagerJobs.vue index 8e62b9853d6..5378d2cdee6 100644 --- a/client/src/components/admin/DataManager/DataManagerJobs.vue +++ b/client/src/components/admin/DataManager/DataManagerJobs.vue @@ -117,7 +117,7 @@ export default { return [ { text: "Data Managers", - to: "/", + to: { name: "DataManager" }, }, { text: this.dataManager["name"] + " ( " + this.dataManager["description"] + " )", diff --git a/client/src/components/admin/DataManager/DataManagerRouter.js b/client/src/components/admin/DataManager/DataManagerRouter.js index dabf3fe580c..6e0732c988c 100644 --- a/client/src/components/admin/DataManager/DataManagerRouter.js +++ b/client/src/components/admin/DataManager/DataManagerRouter.js @@ -12,11 +12,6 @@ export default new VueRouter({ mode: "history", base: `${getAppRoot()}admin/data_manager`, routes: [ - { - path: "/", - name: "DataManager", - component: DataManager, - }, { path: "/jobs/:id", name: "DataManagerJobs", @@ -35,9 +30,14 @@ export default new VueRouter({ component: DataManagerTable, props: true, }, + { + path: "/", + name: "DataManager", + component: DataManager, + }, { path: "*", - redirect: "/", + redirect: { name: "DataManager" }, }, ], }); diff --git a/client/src/components/admin/DataManager/index.js b/client/src/components/admin/DataManager/index.js new file mode 100644 index 00000000000..e0d3cad0bcc --- /dev/null +++ b/client/src/components/admin/DataManager/index.js @@ -0,0 +1,14 @@ +import router from "./DataManagerRouter"; +import DataManagerView from "./DataManagerView"; + +export const DataManager = { + router, + render: (h) => h(DataManagerView), + created() { + if (router.currentRoute.name !== "DataManager") { + router.push({ name: "DataManager" }); + } + }, +}; + +export default DataManager; diff --git a/client/src/entry/admin/AdminRouter.js b/client/src/entry/admin/AdminRouter.js index add081b9a42..62a8147de41 100644 --- a/client/src/entry/admin/AdminRouter.js +++ b/client/src/entry/admin/AdminRouter.js @@ -11,15 +11,13 @@ import Jobs from "components/admin/Jobs.vue"; import ActiveInvocations from "components/admin/ActiveInvocations.vue"; import Landing from "components/admin/Dependencies/Landing.vue"; import AdminHome from "components/admin/Home.vue"; -import DataManagerView from "components/admin/DataManager/DataManagerView.vue"; -import DataManagerRouter from "components/admin/DataManager/DataManagerRouter"; +import DataManager from "components/admin/DataManager"; import Register from "components/login/Register.vue"; import ErrorStack from "components/admin/ErrorStack.vue"; import DisplayApplications from "components/admin/DisplayApplications.vue"; import ResetMetadata from "components/admin/ResetMetadata.vue"; import Toolshed from "components/Toolshed/Index.vue"; -import Vue from "vue"; -import store from "store"; +import { mountVueComponent } from "utils/mountVueComponent"; export const getAdminRouter = (Galaxy, options) => { const galaxyRoot = getAppRoot(); @@ -108,10 +106,10 @@ export const getAdminRouter = (Galaxy, options) => { }, _display_vue_helper: function (component, propsData = {}) { - const instance = Vue.extend(component); const container = document.createElement("div"); this.page.display(container); - new instance({ store, propsData }).$mount(container); + const mountFn = mountVueComponent(component); + return mountFn(propsData, container); }, show_data_tables: function () { @@ -146,16 +144,13 @@ export const getAdminRouter = (Galaxy, options) => { this._display_vue_helper(ResetMetadata); }, - show_data_manager: function (path) { - const Galaxy = getGalaxyInstance(); - console.log("show_data_manager"); - const vueMount = document.createElement("div"); - this.page.display(vueMount); - // always set the route back to the base, i.e. - // `${galaxyRoot}admin/data_manager` - Galaxy.debug("show_data_manager: path='" + path + "'"); - DataManagerRouter.replace(path || "/"); - new Vue({ router: DataManagerRouter, render: (h) => h(DataManagerView) }).$mount(vueMount); + // Because this has a router in it, we need to be careful about destroying it properly + dataManagerInstance: null, + show_data_manager: function () { + if (this.dataManagerInstance) { + this.dataManagerInstance.$destroy(); + } + this.dataManagerInstance = this._display_vue_helper(DataManager); }, show_forms: function () { diff --git a/client/src/entry/analysis/AnalysisRouter.js b/client/src/entry/analysis/AnalysisRouter.js index b409c8374fc..63e71476752 100644 --- a/client/src/entry/analysis/AnalysisRouter.js +++ b/client/src/entry/analysis/AnalysisRouter.js @@ -48,10 +48,8 @@ import DisplayStructure from "components/DisplayStructured.vue"; import { CloudAuth } from "components/User/CloudAuth"; import { ExternalIdentities } from "components/User/ExternalIdentities"; import Confirmation from "components/login/Confirmation.vue"; -import LibraryFolderRouter from "components/Libraries/LibraryFolderRouter"; -import Vue from "vue"; -import store from "store"; -import VueRouterMain from "./VueRouterMain.vue"; +import Libraries from "components/Libraries"; +import { mountVueComponent } from "utils/mountVueComponent"; /** Routes */ export const getAnalysisRouter = (Galaxy) => { @@ -110,24 +108,14 @@ export const getAnalysisRouter = (Galaxy) => { }, _display_vue_helper: function (component, propsData = {}, active_tab = null, noPadding = false) { - const instance = Vue.extend(component); const container = document.createElement("div"); if (active_tab) { container.active_tab = active_tab; } this.page.display(container, noPadding); - new instance({ store, propsData }).$mount(container); - }, - _display_vue_router: function (router, propsData = {}, active_tab = null, noPadding = false) { - const container = document.createElement("div"); - if (active_tab) { - container.active_tab = active_tab; - } - this.page.display(container, noPadding); - new Vue({ - router: router, - render: (h) => h(VueRouterMain), - }).$mount(container); + + const mountFn = mountVueComponent(component); + return mountFn(propsData, container); }, show_tours: function (tour_id) { @@ -161,10 +149,10 @@ export const getAnalysisRouter = (Galaxy) => { this._display_vue_helper(InteractiveTools); }, - show_library_folder: function (folder_id) { + show_library_folder: function () { this.page.toolPanel?.component.hide(0); this.page.panels.right.hide(); - this._display_vue_router(LibraryFolderRouter, { folder_id: folder_id }); + this._display_vue_helper(Libraries); }, show_cloud_auth: function () { diff --git a/client/src/entry/analysis/VueRouterMain.vue b/client/src/entry/analysis/VueRouterMain.vue deleted file mode 100644 index 5e1bb628ef0..00000000000 --- a/client/src/entry/analysis/VueRouterMain.vue +++ /dev/null @@ -1,3 +0,0 @@ -