summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModule.vue
blob: 09e8050ec1813dbace91de36b4d9ff69fdf89da6 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<i18n>
{
  "en": {
  },
  "de": {
  }
}
</i18n>

<template>
  <v-container fill-height>
    <v-layout>
      <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
          <v-card>
            <v-tabs v-model="active" 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-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>
                </v-tab>
              </template>
            </v-tabs>
          </v-card>
          <v-tabs-items v-model="active" 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"
                />
              </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'

export default {
  name: 'GroupModule',
  components: {
    GroupModuleGroupView,
    GroupModuleEdit
  },
  data () {
    return {
      groupChain: [{ id: 0 }],
      active: 0,
      editDialog: false,
      editId: null,
      editClient: false
    }
  },
  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()
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>