summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/PermissionModuleGrantRevoke.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/PermissionModuleGrantRevoke.vue')
-rw-r--r--webapp/src/components/PermissionModuleGrantRevoke.vue197
1 files changed, 197 insertions, 0 deletions
diff --git a/webapp/src/components/PermissionModuleGrantRevoke.vue b/webapp/src/components/PermissionModuleGrantRevoke.vue
new file mode 100644
index 0000000..c999e1b
--- /dev/null
+++ b/webapp/src/components/PermissionModuleGrantRevoke.vue
@@ -0,0 +1,197 @@
+<i18n>
+{
+ "en": {
+ },
+ "de": {
+ }
+}
+</i18n>
+
+<template>
+ <v-dialog
+ :value="$store.state.permissions.grantRevoke"
+ @input="$store.commit('permissions/setGrantRevoke', $event)"
+ max-width="700px"
+ scrollable
+ >
+ <v-card>
+ <v-card-title style="padding: 0px">
+ <v-stepper v-model="step" horizontal style="width: 100%; background: transparent;" class="elevation-3">
+ <v-stepper-header>
+ <v-stepper-step
+ :complete="stepCompleted >= 1"
+ step="1"
+ :editable="stepCompleted >= 1"
+ edit-icon="check"
+ >
+ {{ $t('select_roles') }}
+ </v-stepper-step>
+ <v-divider></v-divider>
+ <v-stepper-step
+ :complete="stepCompleted >= 2"
+ step="2"
+ :editable="stepCompleted >= 2"
+ edit-icon="check"
+ >
+ {{ $t('confirm_selection') }}
+ </v-stepper-step>
+ </v-stepper-header>
+ </v-stepper>
+ </v-card-title>
+ <v-card-text style="height: 500px;">
+ <v-form v-model="valid" ref="form" @submit.prevent="submit" lazy-validation>
+ <v-stepper v-model="step" horizontal style="width: 100%; background: transparent" class="elevation-0">
+ <v-stepper-items>
+ <v-stepper-content step="1">
+ <v-data-table
+ class="group-table"
+ :headers="roleHeaders"
+ :items="roles"
+ item-key="id"
+ hide-actions
+ select-all
+ :value="rolesSelected"
+ @input="setRolesSelected($event)"
+ >
+ <template slot="items" slot-scope="props">
+ <tr @click="props.selected = !props.selected">
+ <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>
+ </tr>
+ </template>
+ </v-data-table>
+ </v-stepper-content>
+ <v-stepper-content step="2">
+ <!-- List of selected Users and selected Roles here -->
+ <v-layout row wrap>
+ <v-flex xs12 class="list-content">
+ <v-list two-line subheader>
+ <v-subheader inset>{{ $t('roles') }}</v-subheader>
+ <v-divider></v-divider>
+ <v-list-tile
+ v-for="role in rolesSelected"
+ :key="role.id"
+ >
+ <v-list-tile-content>
+ <v-list-tile-title>{{ role.name }}</v-list-tile-title>
+ <v-list-tile-sub-title>{{ role.descr }}</v-list-tile-sub-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </v-list>
+ </v-flex>
+ <v-flex xs12 class="list-content">
+ <v-list>
+ <v-subheader inset>{{ $t('users') }}</v-subheader>
+ <v-divider></v-divider>
+ <v-list-tile
+ v-for="user in selectedUsers"
+ :key="user.username"
+ >
+ <v-list-tile-content>
+ <v-list-tile-title>{{ user.username }}</v-list-tile-title>
+ <v-list-tile-sub-title>{{ user.name }}</v-list-tile-sub-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </v-list>
+ </v-flex>
+ </v-layout>
+ </v-stepper-content>
+ </v-stepper-items>
+ </v-stepper>
+ </v-form>
+ </v-card-text>
+ <v-divider></v-divider>
+ <v-card-actions>
+ <v-flex xl10 offset-xl1 lg12 text-xs-right>
+ <v-btn flat @click.native="$store.commit('permissions/setGrantRevoke', false )">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" v-show="step == 1" @click.native="completeStepOne()">{{ $t('continue') }}</v-btn>
+ <v-btn type="submit" @click="submit" v-show="step == 2" v-if="grant" class="success">{{ $t('grant') }}</v-btn>
+ <v-btn type="submit" @click="submit" v-show="step == 2" v-else class="error">{{ $t('revoke') }}</v-btn>
+ </v-flex>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+ name: 'PermissionModuleGrantRevoke',
+ props: ['grant'],
+ data () {
+ return {
+ valid: true,
+ step: 1,
+ stepCompleted: 0,
+ rolesSelected: [],
+ roleHeaders: [
+ { text: 'ID', value: 'id' },
+ { text: 'Name', value: 'name' },
+ { text: 'Description', value: 'descr' }
+ ]
+ }
+ },
+ methods: {
+ submit (event) {
+ const filteredRoles = this.rolesSelected.map(x => x.id)
+ const filteredUsers = this.selectedUsers.map(x => x.id)
+ if (this.grant) {
+ this.$http.post('/api/user/grantRoles', {
+ userIds: filteredUsers,
+ roleIds: filteredRoles
+ }).then(response => {
+ console.log('TODO: Implement snackbar and print roles granted successfully msg.')
+ this.$store.dispatch('permissions/loadData')
+ this.$store.commit('permissions/setGrantRevoke', false)
+ this.$store.commit('permissions/setSelectedUsers', [])
+ }).catch(error => {
+ console.log(error)
+ })
+ } else {
+ this.$http.post('/api/user/revokeRoles', {
+ userIds: filteredUsers,
+ roleIds: filteredRoles
+ }).then(response => {
+ console.log('TODO: Implement snackbar and print roles revoked successfully msg.')
+ this.$store.dispatch('permissions/loadData')
+ this.$store.commit('permissions/setGrantRevoke', false)
+ this.$store.commit('permissions/setSelectedUsers', [])
+ }).catch(error => {
+ console.log(error)
+ })
+ }
+ },
+ completeStepOne () {
+ this.step = 2
+ this.stepCompleted = Math.max(1, this.stepCompleted)
+ },
+ setRolesSelected (value) {
+ this.rolesSelected = value
+ }
+ },
+ computed: {
+ ...mapState('permissions', ['roles', 'selectedUsers'])
+ },
+ beforeMount () {
+ },
+ watch: {
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.list-content {
+ margin-bottom: 10px;
+}
+</style>