summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleGroupView.vue
blob: 740266e877f24b462aa346604a1db191cac5e0ba (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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<i18n>
{
  "en": {
  },
  "de": {
  }
}
</i18n>

<template>
  <div>
    <template v-if="tabIndex > 0">
      <v-subheader>Info</v-subheader>
      <v-card>
        <v-card-text>
          <v-layout wrap>
            <v-flex sm6 xs12 order-xs2 order-sm1>
              <v-text-field v-if="editMode" hide-details class="info-input" label="Name" color="primary" v-model="info.name"></v-text-field>
              <div v-else class="info-input">
                <div class="body-2">Name</div>
                {{ group.name || '-' }}
              </div>
            </v-flex>
            <v-flex sm6 xs12 order-xs1 order-sm2 class="text-xs-right">
              <div class="info-input">
                <v-btn v-if="!editMode" color="primary" flat @click="editInfo">
                  <v-icon left>create</v-icon>Edit
                </v-btn>
                <div v-else>
                  <v-btn color="primary" flat @click="editMode = false">Cancel</v-btn>
                  <v-btn color="primary" @click="saveInfo">
                    <v-icon left>save</v-icon>Save
                  </v-btn>
                </div>
              </div>
            </v-flex>
          </v-layout>
          <v-layout wrap>
            <v-flex sm6 xs12>
              <v-textarea v-if="editMode" rows="1" auto-grow hide-details class="info-input" label="Description" color="primary" v-model="info.description"></v-textarea>
              <div v-else class="info-input">
                <div class="body-2">Description</div>
                <pre>{{ group.description || '-' }}</pre>
              </div>
            </v-flex>
            <v-flex sm6 xs12>
              <v-autocomplete
                v-if="editMode"
                class="info-input"
                :items="$store.state.groups.groupList"
                v-model="info.parentIds"
                hide-details
                offset-y
                label="Parents"
                color="primary"
                multiple
              >
                <template slot="selection" slot-scope="data">
                  <v-chip small :selected="data.selected" @input="removeParent(data.item.id)" close>
                    {{ data.item.text }}
                  </v-chip>
                </template>
              </v-autocomplete>
              <div v-else class="info-input">
                <div class="body-2">Parents</div>
                <template v-if="group.parents.length > 0">
                  <v-chip v-for="parent in group.parents" :key="parent.id" small>
                    {{ parent.name || parent.id }}
                  </v-chip>
                </template>
                <span v-else>-</span>
              </div>
            </v-flex>
          </v-layout>
        </v-card-text>
      </v-card>
    </template>
    <v-subheader>{{ tabIndex === 0 ? 'Groups' : 'Subgoups' }}</v-subheader>
    <group-module-group-list :tabIndex="tabIndex" :groups="group.subgroups" />
    <v-subheader>Clients</v-subheader>
    <group-module-client-list :tabIndex="tabIndex" :clients="group.clients" />
  </div>
</template>

<script>
import GroupModuleGroupList from '@/components/GroupModuleGroupList'
import GroupModuleClientList from '@/components/GroupModuleClientList'

export default {
  name: 'GroupModuleGroupView',
  props: ['tabIndex', 'group'],
  components: {
    GroupModuleGroupList,
    GroupModuleClientList
  },
  data () {
    return {
      editMode: false,
      info: {
        name: '',
        description: '',
        parentIds: []
      }
    }
  },
  methods: {
    removeParent (id) {
      this.info.parentIds.splice(this.info.parentIds.indexOf(id), 1)
    },
    editInfo () {
      this.editMode = true
      this.info.name = this.group.name
      this.info.description = this.group.description
      this.info.parentIds = this.group.parents.map(x => x.id)
    },
    saveInfo () {
      this.$store.dispatch('groups/saveGroupInfo', { id: this.group.id, info: this.info, tabIndex: this.tabIndex })
      this.editMode = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.info-input {
  margin: 10px;
}
</style>