summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/GroupModule.vue39
-rw-r--r--webapp/src/components/GroupModuleClientList.vue7
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue18
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue25
-rw-r--r--webapp/src/store/global.js (renamed from webapp/src/store.js)9
-rw-r--r--webapp/src/store/groups.js33
-rw-r--r--webapp/src/store/index.js12
7 files changed, 82 insertions, 61 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>
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
index c67362d..a1036aa 100644
--- a/webapp/src/components/GroupModuleClientList.vue
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -43,7 +43,7 @@
export default {
name: 'GroupModuleClientList',
- props: ['clients'],
+ props: ['tabIndex'],
data () {
return {
headers: [
@@ -57,7 +57,10 @@ export default {
selected: []
}
},
- methods: {
+ computed: {
+ clients () {
+ return this.$store.state.groups.groupChain[this.tabIndex].clients
+ }
}
}
</script>
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index b6bcd9c..f427275 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -19,7 +19,7 @@
v-model="selected"
>
<template slot="items" slot-scope="props">
- <tr @click="$emit('open-group', props.item)">
+ <tr @click="loadGroup(props.item)">
<td>
<v-checkbox
color="primary"
@@ -32,8 +32,8 @@
<td>{{ props.item.name }}</td>
<td>
<v-layout>
- <v-btn icon @click.stop="$emit('edit-group', props.item.id)"><v-icon color="primary">edit</v-icon></v-btn>
- <v-btn class="next-arrow" icon @click.stop="$emit('open-group', props.item)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ <v-btn icon @click.stop><v-icon color="primary">edit</v-icon></v-btn>
+ <v-btn class="next-arrow" icon><v-icon>keyboard_arrow_right</v-icon></v-btn>
</v-layout>
</td>
</tr>
@@ -50,7 +50,7 @@ export default {
components: {
GroupModuleGroupView
},
- props: ['groups'],
+ props: ['tabIndex'],
data () {
return {
headers: [
@@ -61,7 +61,17 @@ export default {
selected: []
}
},
+ computed: {
+ groups () {
+ return this.$store.state.groups.groupChain[this.tabIndex].subGroups
+ }
+ },
methods: {
+ loadGroup (group) {
+ this.$store.dispatch('groups/loadGroup', {
+ tabIndex: this.tabIndex + 1, id: group.id, name: group.name
+ })
+ }
}
}
</script>
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index 24cbdd1..69a8832 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -11,11 +11,11 @@
<div>
<v-subheader>Groups</v-subheader>
<v-card>
- <group-module-group-list :groups="subGroups" @open-group="$emit('open-group', $event)" @edit-group="$emit('edit-group', $event)" />
+ <group-module-group-list :tabIndex="tabIndex" />
</v-card>
<v-subheader>Clients</v-subheader>
<v-card>
- <group-module-client-list :clients="clients" @edit-client="$emit('edit-client', $event)" />
+ <group-module-client-list :tabIndex="tabIndex" />
</v-card>
</div>
</template>
@@ -26,33 +26,14 @@ import GroupModuleClientList from '@/components/GroupModuleClientList'
export default {
name: 'GroupModuleGroupView',
- props: ['id'],
+ props: ['tabIndex'],
components: {
GroupModuleGroupList,
GroupModuleClientList
},
data () {
return {
- subGroups: [],
- clients: []
}
- },
- watch: {
- id () { this.loadData() }
- },
- methods: {
- loadData () {
- var id = this.id ? this.id : ''
- this.$http('/api/groups?action=getSubGroups&id=' + id).then(response => {
- this.subGroups = response.data
- })
- this.$http('/api/groups?action=getClients&id=' + id).then(response => {
- this.clients = response.data
- })
- }
- },
- created () {
- this.loadData()
}
}
</script>
diff --git a/webapp/src/store.js b/webapp/src/store/global.js
index 0927da3..366b0fb 100644
--- a/webapp/src/store.js
+++ b/webapp/src/store/global.js
@@ -1,9 +1,4 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
+export default {
state: {
locale: localStorage.getItem('locale') || 'en',
dark: localStorage.getItem('dark') !== 'false',
@@ -41,4 +36,4 @@ export default new Vuex.Store({
state.snackbars.push(text)
}
}
-})
+}
diff --git a/webapp/src/store/groups.js b/webapp/src/store/groups.js
new file mode 100644
index 0000000..fca5358
--- /dev/null
+++ b/webapp/src/store/groups.js
@@ -0,0 +1,33 @@
+import axios from 'axios'
+
+export default {
+ namespaced: true,
+ state: {
+ groupChain: [],
+ activeTab: 0
+ },
+ mutations: {
+ updateActiveTab (state, tabIndex) {
+ state.activeTab = tabIndex
+ },
+ addGroup (state, data) {
+ if (state.groupChain.length <= data.tabIndex || state.groupChain[data.tabIndex].id !== data.group.id) {
+ state.groupChain = state.groupChain.slice(0, data.tabIndex)
+ state.groupChain.push(data.group)
+ }
+ state.activeTab = data.tabIndex
+ }
+ },
+ actions: {
+ loadGroup (context, data) {
+ var getSubGroups = axios('/api/groups?action=getSubGroups&id=' + data.id)
+ var getClients = axios('/api/groups?action=getClients&id=' + data.id)
+ axios.all([getSubGroups, getClients]).then(axios.spread((groupRespsonse, clientResponse) => {
+ var group = { id: data.id, name: data.name }
+ group.subGroups = groupRespsonse.data
+ group.clients = clientResponse.data
+ context.commit('addGroup', { group: group, tabIndex: data.tabIndex })
+ }))
+ }
+ }
+}
diff --git a/webapp/src/store/index.js b/webapp/src/store/index.js
new file mode 100644
index 0000000..435a317
--- /dev/null
+++ b/webapp/src/store/index.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import globalStore from '@/store/global'
+import groups from '@/store/groups'
+
+Vue.use(Vuex)
+
+globalStore.modules = {
+ groups
+}
+
+export default new Vuex.Store(globalStore)