summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/PermissionModuleUserList.vue
diff options
context:
space:
mode:
authorChristian Hofmaier2018-08-05 01:42:49 +0200
committerChristian Hofmaier2018-08-05 01:42:49 +0200
commitd236e4c57a7f71589764efccd0cb36337d551055 (patch)
tree6d47dc6deface87f1985ce7daf26692e25838b16 /webapp/src/components/PermissionModuleUserList.vue
parent[store/global] simplified settings loading (diff)
downloadbas-d236e4c57a7f71589764efccd0cb36337d551055.tar.gz
bas-d236e4c57a7f71589764efccd0cb36337d551055.tar.xz
bas-d236e4c57a7f71589764efccd0cb36337d551055.zip
[permissions] add permission management
Add Roles Table with Delete Roles and Create Roles possibilities Add Users Table with Grant Roles and Revoke Roles possibilities
Diffstat (limited to 'webapp/src/components/PermissionModuleUserList.vue')
-rw-r--r--webapp/src/components/PermissionModuleUserList.vue88
1 files changed, 88 insertions, 0 deletions
diff --git a/webapp/src/components/PermissionModuleUserList.vue b/webapp/src/components/PermissionModuleUserList.vue
new file mode 100644
index 0000000..074a11f
--- /dev/null
+++ b/webapp/src/components/PermissionModuleUserList.vue
@@ -0,0 +1,88 @@
+<i18n>
+{
+ "en": {
+ "grant-role": "Grant Role",
+ "revoke-role": "Revoke Role"
+ },
+ "de": {
+ "grant-role": "Rolle zuweisen",
+ "revoke-role": "Rolle entziehen"
+ }
+}
+</i18n>
+
+<template>
+ <div>
+ <v-card>
+ <v-data-table
+ class="group-table"
+ :headers="headers"
+ :items="users"
+ item-key="id"
+ hide-actions
+ select-all
+ :value="selectedUsers"
+ @input="$store.commit('permissions/setSelectedUsers', $event)"
+ >
+ <template slot="items" slot-scope="props">
+ <tr>
+ <td>
+ <v-checkbox
+ color="primary"
+ v-model="props.selected"
+ hide-details
+ @click.native.stop
+ ></v-checkbox>
+ </td>
+ <td hidden>{{ props.item.id }}</td>
+ <td>{{ props.item.username }}</td>
+ <td>{{ props.item.name }}</td>
+ <td>
+ <template v-for="role in props.item.roles">
+ {{ role.name }}
+ </template>
+ </td>
+ </tr>
+ </template>
+ </v-data-table>
+ </v-card>
+ <div class="text-xs-right">
+ <v-btn color="error" flat @click="$store.commit('permissions/grantRevoke', { show: true, grant: false } )">
+ <v-icon left>remove_circle_outline</v-icon>{{ $t('revoke-role') }}
+ </v-btn>
+ <v-btn color="success" flat @click="$store.commit('permissions/grantRevoke', { show: true, grant: true } )">
+ <v-icon left>add_circle_outline</v-icon>{{ $t('grant-role') }}
+ </v-btn>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+ name: 'PermissionModuleUserList',
+ data () {
+ return {
+ headers: [
+ { text: 'Username', value: 'username' },
+ { text: 'Name', value: 'name' },
+ { text: 'Roles', value: 'id' }
+ ]
+ }
+ },
+ computed: {
+ ...mapState('permissions', ['selectedUsers', 'users'])
+ },
+ methods: {
+ },
+ created () {
+ this.$store.dispatch('permissions/loadUserData')
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>