summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/PermissionModuleRoleList.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/PermissionModuleRoleList.vue')
-rw-r--r--webapp/src/components/PermissionModuleRoleList.vue91
1 files changed, 91 insertions, 0 deletions
diff --git a/webapp/src/components/PermissionModuleRoleList.vue b/webapp/src/components/PermissionModuleRoleList.vue
new file mode 100644
index 0000000..5e3632a
--- /dev/null
+++ b/webapp/src/components/PermissionModuleRoleList.vue
@@ -0,0 +1,91 @@
+<i18n>
+{
+ "en": {
+ "create-role": "Create Role",
+ "delete-role": "Delete {0} Role | Delete {0} Roles"
+ },
+ "de": {
+ "create-role": "Rolle erstellen",
+ "delete-role": "Lösche {0} Rolle | Lösche {0} Rollen"
+ }
+}
+</i18n>
+
+<template>
+ <div>
+ <v-card>
+ <v-data-table
+ class="group-table"
+ :headers="headers"
+ :items="roles"
+ item-key="id"
+ hide-actions
+ select-all
+ :value="selectedRoles"
+ @input="$store.commit('permissions/setSelectedRoles', $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>{{ props.item.id }}</td>
+ <td>{{ props.item.name }}</td>
+ <td>{{ props.item.descr }}</td>
+ <td>
+ <v-layout>
+ <v-btn flat icon color="primary" @click.stop="$store.commit('permissions/editRole', props.item.id)">
+ <v-icon>edit</v-icon>
+ </v-btn>
+ </v-layout>
+ </td>
+ </tr>
+ </template>
+ </v-data-table>
+ </v-card>
+ <div class="text-xs-right">
+ <v-btn color="error" flat @click="$store.commit('permissions/setDialog', true )">
+ <v-icon left>remove_circle_outline</v-icon>{{ $tc('delete-role', selectedRoles.length, [selectedRoles.length]) }}
+ </v-btn>
+ <v-btn color="success" flat @click="$store.commit('permissions/editRole', 0)">
+ <v-icon left>add_circle_outline</v-icon>{{ $t('create-role') }}
+ </v-btn>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+ name: 'PermissionModuleRoleList',
+ data () {
+ return {
+ headers: [
+ { text: 'ID', value: 'id' },
+ { text: 'Name', value: 'name' },
+ { text: 'Description', value: 'descr' },
+ { sortable: false }
+ ]
+ }
+ },
+ computed: {
+ ...mapState('permissions', ['selectedRoles', 'roles'])
+ },
+ methods: {
+ },
+ created () {
+ this.$store.dispatch('permissions/loadRoleData')
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>