summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/PermissionModuleGrantRevoke.vue
blob: 10a5ad6f508d00e6c209c2c14dec800536eb893c (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
<i18n>
{
  "en": {
    "select_roles": "Select Roles",
    "check_selection": "Check Selection",
    "roles": "Roles",
    "users": "Users",
    "grant": "Grant",
    "revoke": "Revoke",
    "id": "ID",
    "name": "Name",
    "description": "Description",
    "roleGrantedSuccess" : "Role successfully granted. | Roles successfully granted.",
    "roleRevokedSuccess" : "Role successfully revoked. | Roles successfully revoked."
  },
  "de": {
    "select_roles": "Rollen auswählen",
    "check_selection": "Auswahl überprüfen",
    "roles": "Rollen",
    "users": "Nutzer",
    "grant": "Zuweisen",
    "revoke": "Entziehen",
    "id": "ID",
    "name": "Name",
    "description": "Beschreibung",
    "roleGrantedSuccess" : "Rolle erfolgreich zugewiesen. | Rollen erfolgreich zugewiesen.",
    "roleRevokedSuccess" : "Rolle erfolgreich entzogen. | Rollen erfolgreich entzogen."
  }
}
</i18n>

<template>
  <v-card>
    <v-card-title class="dialog-title elevation-3">
      <div class="headline">{{ $t('select_roles') }}</div>
    </v-card-title>
    <v-card-text class="pa-0">
      <v-form v-model="valid" ref="form" @submit.prevent="submit" lazy-validation>
        <data-table v-model="selectedRoles" :headers="roleHeaders" :items="roles"/>
      </v-form>
    </v-card-text>
    <v-divider></v-divider>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn flat @click.native="$store.commit('permissions/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
      <v-btn type="submit" @click="submit" v-if="grant" class="success">{{ $t('grant') }}</v-btn>
      <v-btn type="submit" @click="submit" v-if="revoke" class="error">{{ $t('revoke') }}</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
import { mapState } from 'vuex'
import DataTable from '@/components/DataTable'

export default {
  name: 'PermissionModuleGrantRevoke',
  components: {
    DataTable
  },
  data () {
    return {
      valid: true,
      selectedRoles: [],
      grant: false,
      revoke: false,
      roleHeaders: [
        { text: this.$t('id'), key: 'id' },
        { text: this.$t('name'), key: 'name' },
        { text: this.$t('description'), key: 'descr' }
      ]
    }
  },
  methods: {
    async submit (event) {
      const roleIds = this.selectedRoles.map(r => r.id)
      const userIds = this.selectedUsers.map(u => u.id)
      await this.$http.post('/api/users/roles' + (this.grant ? '' : '?delete'), {
        roles: roleIds,
        users: userIds
      })
      if (this.grant) {
        this.$snackbar({ color: 'success', text: this.$tc('roleGrantedSuccess', [roleIds.length]) })
      } else if (this.revoke) {
        this.$snackbar({ color: 'success', text: this.$tc('roleRevokedSuccess', [roleIds.length]) })
      }
      this.$store.dispatch('users/loadData')
      this.$store.commit('permissions/setDialog', { show: false })
      this.$store.commit('permissions/setSelectedUsers', [])
    }
  },
  computed: {
    ...mapState('permissions', ['dialog', 'roles', 'selectedUsers'])
  },
  watch: {
    dialog: {
      immediate: true,
      deep: true,
      handler (value) {
        if (value.show) {
          this.selectedRoles = []
          this.grant = value.type === 'grant' || false
          this.revoke = value.type === 'revoke' || false
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.stepper-padding-0 {
  padding: 0;
}
.dialog-title {
  z-index: 1;
}
</style>