summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/PermissionModule.vue
blob: 109007cf7956efe6f22454674814a56eefd96c91 (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
<i18n>
{
  "en": {
    "roles": "Roles",
    "users": "Users",
    "delete-are-you-sure": "Are you sure you want to delete this role? | Are you sure you want to delete these roles?",
    "delete-permission": "Delete {0} role | Delete {0} roles",
    "delete-role": "Delete {0} Role | Delete {0} Roles"
  },
  "de": {
    "roles": "Rollen",
    "users": "Nutzer",
    "delete-are-you-sure": "Sind sie sicher, dass sie diese Rolle Löschen wollen? | Sind sie sicher, dass sie diese Rollen löschen wollen?",
    "delete-permission": "Delete {0} role | Delete {0} roles",
    "delete-role": "Lösche {0} Rolle | Lösche {0} Rollen"
  }
}
</i18n>

<template>
  <v-container fill-height>
    <v-layout>
      <v-flex xl10 offset-xl1 lg12>
        <v-card class="tabbar-card">
          <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
            grow
            v-model="tab"
          >
            <v-tab><v-icon class="tabbar-tabicon">verified_user</v-icon>{{ $t('roles') }}</v-tab>
            <v-tab><v-icon class="tabbar-tabicon">people</v-icon>{{ $t('users') }}</v-tab>
          </v-tabs>
        </v-card>
        <v-tabs-items v-model="tab" v-if="canView">
          <v-tab-item>
            <v-subheader>{{ $t('roles') }}</v-subheader>
            <permission-module-role-list/>
          </v-tab-item>
          <v-tab-item>
            <v-subheader>{{ $t('users') }}</v-subheader>
            <permission-module-user-list/>
          </v-tab-item>
        </v-tabs-items>
        <v-tabs-items v-model="tab" v-else>
          <no-permission-error/>
        </v-tabs-items>
      </v-flex>
    </v-layout>

    <!--- Put Dialogs here (delete Dialog, edit Dialog, revoke Dialog, grant Dialog -->
    <v-dialog
      :value="$store.state.permissions.dialog"
      @input="$store.commit('permissions/setDialog', $event )"
      max-width="500px"
      scrollable
    >
      <v-card>
        <v-card-title class="elevation-3">
          <div>
            <div class="headline">{{ $tc('delete-role', selectedRoles.length, [selectedRoles.length]) }}</div>
          </div>
        </v-card-title>
        <v-card-text>
          {{ $tc('delete-are-you-sure', selectedRoles.length) }}
          <template v-for="item in selectedRoles">
            <div class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }} ({{ item.descr }})</div>
          </template>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat="flat" @click="$store.commit('permissions/setDialog', false )">{{ $t('cancel') }}</v-btn>
          <v-btn color="error" @click="$store.commit('permissions/setDialog', false ); $store.dispatch('permissions/deleteSelectedRoles')">{{ $t('delete') }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <permission-module-grant-revoke :grant="$store.state.permissions.grant"/>
    <permission-module-edit :roleId="$store.state.permissions.roleId"/>

  </v-container>
</template>

<script>
import PermissionModuleRoleList from '@/components/PermissionModuleRoleList'
import PermissionModuleUserList from '@/components/PermissionModuleUserList'
import PermissionModuleGrantRevoke from '@/components/PermissionModuleGrantRevoke'
import PermissionModuleEdit from '@/components/PermissionModuleEdit'
import NoPermissionError from '@/components/NoPermissionError'
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'PermissionModule',
  components: {
    PermissionModuleRoleList,
    PermissionModuleUserList,
    PermissionModuleGrantRevoke,
    PermissionModuleEdit,
    NoPermissionError
  },
  data () {
    return {
      components: ['PermissionModuleRoleList', 'PermissionModuleUserList', 'NoPermissionError'],
      tab: 0,
      canView: false
    }
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
    ...mapState('permissions', ['selectedRoles', 'selectedUsers'])
  },
  methods: {
  },
  created () {
    this.$http.get('/api/permissions/permissions.*').then(response => {
      this.canView = response.data
    })
    this.$store.dispatch('permissions/loadData')
  }
}
</script>

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

</style>