summaryrefslogblamecommitdiffstats
path: root/webapp/src/components/PermissionModuleGrantRevoke.vue
blob: a137ea144e61ccc2afb913b44718f525a9a127fd (plain) (tree)
1
2
3
4
5
6
7
8
9
10
11


         







                                         


                                                         

         







                                              


                                                            







                                                                
                     


              
                                         




                                                                                                                
                                            







                                            
                                            

                               
                                         



                             
                                           


                                                                                                                
                                                                    
                                                                                           

                                          
                                   

                                      
                                                                        
                                                                        
                                  
                                                     








                                                                                         

                                      
                                                                        
                                                                        


















                                                                                        




                                                                                                                      






                               
                                              



                                      
               
             
    




                       
                        
                    


                                                      



            

                                                       



                                                                                                                                     
                                                                                 
              
                                                                                 

                                                      

                                                             



                                                          


             



                                                           

          

                                   
                               



                              





                                                                   






                    
                     

                      



               
        
<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" : "Roles successfully granted.",
    "roleRevokedSuccess" : "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" : "Rollen erfolgreich zugewiesen.",
    "roleRevokedSuccess" : "Rollen erfolgreich entzogen."
  }
}
</i18n>

<template>
  <v-dialog
    :value="$store.state.permissions.grantRevoke"
    @input="$store.commit('permissions/setGrantRevoke', $event)"
    max-width="800px"
    scrollable
  >
    <v-card>
      <v-card-title class="dialog-title">
        <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 >= 0"
              edit-icon="check"
            >
              {{ $t('select_roles') }}
            </v-stepper-step>
            <v-divider></v-divider>
            <v-stepper-step
              :complete="stepCompleted >= 2"
              step="2"
              :editable="stepCompleted >= 1"
              edit-icon="check"
            >
              {{ $t('check_selection') }}
            </v-stepper-step>
          </v-stepper-header>
        </v-stepper>
      </v-card-title>
      <v-card-text class="table-container">
        <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" class="stepper-padding-0">
                <data-table v-model="selectedRoles" :headers="roleHeaders" :items="roles"/>
              </v-stepper-content>
              <v-stepper-content step="2">
                <v-layout row wrap>
                  <v-flex>
                    <v-list subheader>
                      <v-subheader inset>{{ $t('roles') }}</v-subheader>
                      <v-divider class="list-header-margin"></v-divider>
                      <v-list-tile
                        v-for="role in selectedRoles"
                        :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>
                    <v-list subheader>
                      <v-subheader inset>{{ $t('users') }}</v-subheader>
                      <v-divider class="list-header-margin"></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-spacer></v-spacer>
        <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-card-actions>
    </v-card>
  </v-dialog>
</template>

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

export default {
  name: 'PermissionModuleGrantRevoke',
  props: ['grant'],
  components: {
    DataTable
  },
  data () {
    return {
      valid: true,
      step: 1,
      stepCompleted: 0,
      selectedRoles: [],
      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(x => x.id)
      for (let i = 0; i < this.selectedUsers.length; i++) {
        await this.$http.post('/api/users/' + this.selectedUsers[i].id + '/roles' + (this.grant ? '' : '/?delete'), { ids: roleIds })
      }
      if (this.grant) {
        this.$snackbar({ color: 'success', text: this.$t('roleGrantedSuccess') })
      } else {
        this.$snackbar({ color: 'success', text: this.$t('roleRevokedSuccess') })
      }
      this.$store.dispatch('permissions/loadUserData')
      this.$store.commit('permissions/setGrantRevoke', false)
      this.$store.commit('permissions/setSelectedUsers', [])
    },
    completeStepOne () {
      this.step = 2
      this.stepCompleted = Math.max(1, this.stepCompleted)
    }
  },
  computed: {
    ...mapState('permissions', ['roles', 'selectedUsers']),
    grantRevoke: function () {
      return this.$store.state.permissions.grantRevoke
    }
  },
  watch: {
    grantRevoke: function (value) {
      if (value) {
        this.selectedRoles = []
        this.step = 1
        this.stepCompleted = 0
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table-container {
  padding: 0;
  height: 700px;
}
.stepper-padding-0 {
  padding: 0;
}
.list-header-margin {
  margin-bottom: 10px;
}
.dialog-title {
  padding: 0px;
  z-index: 1;
}
</style>