summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2018-08-04 03:08:28 +0200
committerUdo Walter2018-08-04 03:08:28 +0200
commite4a30c248437d18398795a4168e6ef7e27a73c68 (patch)
treef6961c4ee638bca820a2d80c66a27232ddccf769 /webapp
parent[webapp/router] small bugfix (diff)
downloadbas-e4a30c248437d18398795a4168e6ef7e27a73c68.tar.gz
bas-e4a30c248437d18398795a4168e6ef7e27a73c68.tar.xz
bas-e4a30c248437d18398795a4168e6ef7e27a73c68.zip
[webapp/groups] add routes; groups and clients can now be accessed directly using a url
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/GroupModule.vue43
-rw-r--r--webapp/src/main.js3
-rw-r--r--webapp/src/router.js8
3 files changed, 46 insertions, 8 deletions
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index 15ae711..af0dfd8 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -15,7 +15,7 @@
<v-tabs :value="activeTab" @input="setActiveTab" :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
<template v-for="(item, index) in tabChain">
<v-icon v-if="item.tabType !== 'home'" :key="'arrow' + index">keyboard_arrow_right</v-icon>
- <v-tab ripple :key="'tab' + index">
+ <v-tab ripple :key="'tab' + index">
<v-icon v-if="item.tabType === 'home'">home</v-icon>
<v-icon v-if="item.tabType === 'client'" style="margin-right: 10px">computer</v-icon>
<template v-if="item.tabType !== 'home'">{{ item.name || item.id || ' . . . . . . . . . . ' }}</template>
@@ -30,6 +30,7 @@
<group-module-client-view v-if="item.tabType === 'client'" :client="item" :tabIndex="index" />
</v-tab-item>
</v-tabs-items>
+ <router-view />
</v-flex>
</v-layout>
<group-module-dialog />
@@ -45,6 +46,13 @@ import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
name: 'GroupModule',
+ routes () {
+ return [
+ { name: 'home', path: '' },
+ { name: 'group', path: ':id' },
+ { name: 'client', path: 'client/:id'},
+ ]
+ },
components: {
GroupModuleHomeView,
GroupModuleGroupView,
@@ -57,14 +65,39 @@ export default {
},
computed: {
...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
- ...mapState('groups', ['tabChain', 'client', 'activeTab'])
+ ...mapState('groups', ['tabChain', 'activeTab', 'groupList', 'clientList']),
+ },
+ watch: {
+ activeTab (index) {
+ this.$router.replace({
+ name: 'GroupModule.' + this.tabChain[index].tabType,
+ params: { id: this.tabChain[index].id, noReload: true }
+ })
+ }
},
methods: {
- ...mapMutations('groups', ['setActiveTab'])
+ ...mapMutations('groups', ['setActiveTab']),
+ loadItem (routeName, id) {
+ if (routeName === 'GroupModule.group') {
+ this.$store.dispatch('groups/loadGroup', { id, tabIndex: 1, switchTab: true })
+ } else if (routeName === 'GroupModule.client') {
+ this.$store.dispatch('groups/loadClient', { id, tabIndex: 1, switchTab: true })
+ }
+ }
},
created () {
- this.$store.dispatch('groups/loadLists')
- this.$store.dispatch('groups/loadHome')
+ if (this.groupList.length === 0 || this.clientList.length === 0) this.$store.dispatch('groups/loadLists')
+ if (this.tabChain.length === 0) this.$store.dispatch('groups/loadHome')
+ this.loadItem(this.$route.name, this.$route.params.id)
+ this.$router.replace({
+ name: 'GroupModule.' + this.tabChain[this.activeTab].tabType,
+ params: { id: this.tabChain[this.activeTab].id, noReload: true }
+ })
+ },
+ beforeRouteUpdate (to, from, next) {
+ console.log(to.name)
+ if (!to.params.noReload) this.loadItem(to.name, to.params.id)
+ next()
}
}
</script>
diff --git a/webapp/src/main.js b/webapp/src/main.js
index 63a8cbe..7fd927a 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -14,6 +14,9 @@ import '@/assets/styles.css'
Vue.config.productionTip = false
Vue.use(Vuex)
+Object.keys(storeModules).forEach(key => {
+ storeModules[key].namespaced = true
+})
globalStore.modules = storeModules
var store = new Vuex.Store(globalStore)
diff --git a/webapp/src/router.js b/webapp/src/router.js
index 2f85448..24e2348 100644
--- a/webapp/src/router.js
+++ b/webapp/src/router.js
@@ -6,11 +6,13 @@ import dashboardModules from '@/config/dashboard'
Vue.use(Router)
-function setChildren (routes) {
+function setChildren (routes, parent) {
routes.forEach(route => {
if (route.component && route.component.routes) {
- route.children = setChildren(route.component.routes())
+ route.children = setChildren(route.component.routes(), route.component)
}
+ if (route.name && parent && parent.name) route.name = parent.name + '.' + route.name
+ else delete route.name
})
return routes
}
@@ -26,7 +28,7 @@ var router = new Router({
path: '/dashboard',
name: 'Dashboard',
component: DashboardPage,
- children: setChildren(dashboardModules.concat(DashboardPage.routes()))
+ children: setChildren(dashboardModules.concat(DashboardPage.routes()), DashboardPage)
},
{
path: '*',