#127 fixed a bug on wrong page URL after script renaming + fixed miss…

…ing navigation on URL change
bugy · Nov 1, 2019 · dbb7a5b · dbb7a5b
1 parent 368532a
commit dbb7a5b
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 69 deletions.
diff --git a/web-src/js/admin.js b/web-src/js/admin.js
@@ -1,43 +1,10 @@
 import Vue from 'vue';
-import VueRouter from 'vue-router';
 import AdminApp from './admin/AdminApp';
-import ExecutionDetails from './admin/executions/execution-details';
-import ExecutionsLog from './admin/executions/executions-log';
-import ExecutionsLogPage from './admin/executions/executions-log-page';
-import ScriptConfig from './admin/scripts-config/ScriptConfig';
-import ScriptConfigListPage from './admin/scripts-config/ScriptConfigListPage';
+import router from './admin/router';
 import './style_imports';
-import ScriptsList from './admin/scripts-config/ScriptsList';
-
-Vue.use(VueRouter);
 
 document.addEventListener('DOMContentLoaded', function () {
 
-    const router = new VueRouter({
-        mode: 'hash',
-        routes: [
-            {
-                path: '/logs',
-                component: ExecutionsLogPage,
-                children: [
-                    {path: '', component: ExecutionsLog},
-                    {path: ':executionId', component: ExecutionDetails}
-                ]
-            },
-            {
-                path: '/scripts',
-                component: ScriptConfigListPage,
-                children: [
-                    {path: '', component: ScriptsList},
-                    {path: ':scriptName', component: ScriptConfig, props: true}
-                ]
-            },
-            {path: '*', redirect: '/logs'}
-        ],
-        linkActiveClass: 'active'
-    });
-
-
     //noinspection JSAnnotator
     new Vue({
         router,

diff --git a/web-src/js/admin/executions/execution-details.vue b/web-src/js/admin/executions/execution-details.vue
@@ -21,32 +21,6 @@
 
     export default {
         name: 'execution-details',
-        mounted: function () {
-            let executionId = this.$route.params.executionId;
-
-            let execution = this.findExecution(executionId);
-            if (isNull(execution)) {
-                execution = {
-                    id: executionId,
-                    user: 'Unknown',
-                    script: 'Unknown'
-                }
-            }
-            this.updateSubheaderFromLog(execution);
-
-            axios.get('admin/execution_log/long/' + executionId).then(({data: incomingLog}) => {
-                const executionLog = translateExecutionLog(incomingLog);
-
-                this.script = executionLog.script;
-                this.user = executionLog.user;
-                this.startTime = executionLog.startTimeString;
-                this.fullStatus = executionLog.fullStatus;
-                this.command = executionLog.command;
-                this.$refs.logPanel.setLog(executionLog.log);
-
-                this.updateSubheaderFromLog(executionLog);
-            });
-        },
 
         data: function () {
             return {
@@ -76,6 +50,36 @@
             ...mapGetters('executions', {
                 findExecution: 'findById'
             })
+        },
+
+        watch: {
+            '$route.params.executionId': {
+                immediate: true,
+                handler(executionId) {
+                    let execution = this.findExecution(executionId);
+                    if (isNull(execution)) {
+                        execution = {
+                            id: executionId,
+                            user: 'Unknown',
+                            script: 'Unknown'
+                        }
+                    }
+                    this.updateSubheaderFromLog(execution);
+
+                    axios.get('admin/execution_log/long/' + executionId).then(({data: incomingLog}) => {
+                        const executionLog = translateExecutionLog(incomingLog);
+
+                        this.script = executionLog.script;
+                        this.user = executionLog.user;
+                        this.startTime = executionLog.startTimeString;
+                        this.fullStatus = executionLog.fullStatus;
+                        this.command = executionLog.command;
+                        this.$refs.logPanel.setLog(executionLog.log);
+
+                        this.updateSubheaderFromLog(executionLog);
+                    });
+                }
+            }
         }
     }
 </script>

diff --git a/web-src/js/admin/router.js b/web-src/js/admin/router.js
@@ -0,0 +1,36 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import ExecutionDetails from './executions/execution-details';
+import ExecutionsLog from './executions/executions-log';
+import ExecutionsLogPage from './executions/executions-log-page';
+import ScriptConfig from './scripts-config/ScriptConfig';
+import ScriptConfigListPage from './scripts-config/ScriptConfigListPage';
+import ScriptsList from './scripts-config/ScriptsList';
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+    mode: 'hash',
+    routes: [
+        {
+            path: '/logs',
+            component: ExecutionsLogPage,
+            children: [
+                {path: '', component: ExecutionsLog},
+                {path: ':executionId', component: ExecutionDetails}
+            ]
+        },
+        {
+            path: '/scripts',
+            component: ScriptConfigListPage,
+            children: [
+                {path: '', component: ScriptsList},
+                {path: ':scriptName', component: ScriptConfig, props: true}
+            ]
+        },
+        {path: '*', redirect: '/logs'}
+    ],
+    linkActiveClass: 'active'
+});
+
+export default router
diff --git a/web-src/js/admin/scripts-config/ScriptConfig.vue b/web-src/js/admin/scripts-config/ScriptConfig.vue
@@ -32,10 +32,6 @@
             }
         },
 
-        mounted: function () {
-            this.init(this.scriptName);
-        },
-
         methods: {
             ...mapActions('script-config', ['init', 'save'])
         },
@@ -45,6 +41,15 @@
                 scriptConfig: 'scriptConfig',
                 loadingError: 'error'
             })
+        },
+
+        watch: {
+            scriptName: {
+                immediate: true,
+                handler(scriptName) {
+                    this.init(scriptName);
+                }
+            }
         }
     }
 

diff --git a/web-src/js/admin/scripts-config/ScriptConfigListPage.vue b/web-src/js/admin/scripts-config/ScriptConfigListPage.vue
@@ -5,9 +5,6 @@
 </template>
 
 <script>
-    import {mapActions, mapState} from 'vuex';
-    import PageProgress from '../components/PageProgress';
-    import ScriptsList from './ScriptsList';
 
     export default {
         name: 'ScriptConfigListPage',

diff --git a/web-src/js/admin/scripts-config/script-config-module.js b/web-src/js/admin/scripts-config/script-config-module.js
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import {contains, forEachKeyValue, isEmptyValue} from '../../common';
+import router from '../router'
 
 const allowedEmptyValuesInParam = ['name'];
 
@@ -43,14 +44,25 @@ export default {
 
         save({dispatch, state}) {
             const config = $.extend({}, state.scriptConfig);
+            const oldName = state.scriptName;
 
             removeEmptyValues(config);
 
             return axios.put('admin/scripts', {
                 config,
                 filename: state.scriptFilename
             })
-                .then(dispatch('init', config.name));
+                .then(() => {
+                    const newName = config.name;
+
+                    if (oldName === newName) {
+                        dispatch('init', newName);
+                    } else {
+                        router.push({
+                            path: `/scripts/${newName}`
+                        });
+                    }
+                });
         }
     },
     mutations: {

diff --git a/web-src/js/admin/scripts-config/scripts-module.js b/web-src/js/admin/scripts-config/scripts-module.js
@@ -1,5 +1,4 @@
 import axios from 'axios';
-import {isNull} from '../../common';
 
 export default {
     state: {