summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModule.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/GroupModule.vue')
-rw-r--r--webapp/src/components/GroupModule.vue39
1 files changed, 13 insertions, 26 deletions
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index 09e8050..6ad9279 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -12,9 +12,9 @@
<v-layout>
<v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
<v-card>
- <v-tabs v-model="active" slider-color="primary">
+ <v-tabs :value="activeTab" @input="updateActiveTab" slider-color="primary">
<template v-for="(group, index) in groupChain">
- <v-icon v-if="group.id !== 0" :key="2*index">keyboard_arrow_right</v-icon>
+ <v-icon v-if="group.id > 0" :key="2*index">keyboard_arrow_right</v-icon>
<v-tab :key="2*index+1" ripple>
<v-icon v-if="group.id === 0">home</v-icon>
<template v-else>{{ group.name ? group.name : group.id }}</template>
@@ -22,29 +22,22 @@
</template>
</v-tabs>
</v-card>
- <v-tabs-items v-model="active" touchless>
+ <v-tabs-items :value="activeTab" @input="updateActiveTab" touchless>
<template v-for="(group, index) in groupChain">
<v-tab-item :key="index">
- <group-module-group-view
- ref="groupViews"
- :id="group.id"
- @open-group="openGroup($event, index)"
- @edit-group="editDialog = true; editClient = false; editId = $event"
- />
+ <group-module-group-view :tabIndex="index" />
</v-tab-item>
</template>
</v-tabs-items>
</v-flex>
</v-layout>
- <v-dialog v-model="editDialog" max-width="600px">
- <group-module-edit :id="editId" :client="editClient" @close="editDialog = false" @reload="reloadData" />
- </v-dialog>
</v-container>
</template>
<script>
import GroupModuleGroupView from '@/components/GroupModuleGroupView'
import GroupModuleEdit from '@/components/GroupModuleEdit'
+import { mapState } from 'vuex'
export default {
name: 'GroupModule',
@@ -54,27 +47,21 @@ export default {
},
data () {
return {
- groupChain: [{ id: 0 }],
- active: 0,
editDialog: false,
editId: null,
editClient: false
}
},
+ computed: {
+ ...mapState('groups', ['groupChain', 'activeTab'])
+ },
methods: {
- openGroup (group, index) {
- if (this.groupChain.length <= (index + 1) || this.groupChain[index + 1].id !== group.id) {
- this.groupChain = this.groupChain.slice(0, index + 1)
- this.groupChain.push(group)
- }
- console.log(this.groupChain)
- this.active = index + 1
- },
- reloadData () {
- this.$refs.groupViews.forEach(groupView => {
- groupView.loadData()
- })
+ updateActiveTab (tabIndex) {
+ this.$store.commit('groups/updateActiveTab', tabIndex)
}
+ },
+ created () {
+ this.$store.dispatch('groups/loadGroup', { tabIndex: 0, id: 0 })
}
}
</script>