summaryrefslogblamecommitdiffstats
path: root/webapp/src/components/PermissionModule.vue
blob: 109007cf7956efe6f22454674814a56eefd96c91 (plain) (tree)
1
2
3
4
5
6
7
8




                     
                                                                                                                       

                                                              



                      
                                                                                                                                              

                                                              




          
                           
              
                                   
                                    
                                                                                     
                

                         

                                                                                                 














                                                        

               








                                                                                       
                                          





















                                                                                                                                                                     



                



                                                                                  
                                                              
                                           

                




                                

                         
    

            


                                                                                                

     



                                                                  
            





                                                                       







                                                                   
<i18n>
{
  "en": {
    "roles": "Roles",
    "users": "Users",
    "delete-are-you-sure": "Are you sure you want to delete this role? | Are you sure you want to delete these roles?",
    "delete-permission": "Delete {0} role | Delete {0} roles",
    "delete-role": "Delete {0} Role | Delete {0} Roles"
  },
  "de": {
    "roles": "Rollen",
    "users": "Nutzer",
    "delete-are-you-sure": "Sind sie sicher, dass sie diese Rolle Löschen wollen? | Sind sie sicher, dass sie diese Rollen löschen wollen?",
    "delete-permission": "Delete {0} role | Delete {0} roles",
    "delete-role": "Lösche {0} Rolle | Lösche {0} Rollen"
  }
}
</i18n>

<template>
  <v-container fill-height>
    <v-layout>
      <v-flex xl10 offset-xl1 lg12>
        <v-card class="tabbar-card">
          <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
            grow
            v-model="tab"
          >
            <v-tab><v-icon class="tabbar-tabicon">verified_user</v-icon>{{ $t('roles') }}</v-tab>
            <v-tab><v-icon class="tabbar-tabicon">people</v-icon>{{ $t('users') }}</v-tab>
          </v-tabs>
        </v-card>
        <v-tabs-items v-model="tab" v-if="canView">
          <v-tab-item>
            <v-subheader>{{ $t('roles') }}</v-subheader>
            <permission-module-role-list/>
          </v-tab-item>
          <v-tab-item>
            <v-subheader>{{ $t('users') }}</v-subheader>
            <permission-module-user-list/>
          </v-tab-item>
        </v-tabs-items>
        <v-tabs-items v-model="tab" v-else>
          <no-permission-error/>
        </v-tabs-items>
      </v-flex>
    </v-layout>

    <!--- Put Dialogs here (delete Dialog, edit Dialog, revoke Dialog, grant Dialog -->
    <v-dialog
      :value="$store.state.permissions.dialog"
      @input="$store.commit('permissions/setDialog', $event )"
      max-width="500px"
      scrollable
    >
      <v-card>
        <v-card-title class="elevation-3">
          <div>
            <div class="headline">{{ $tc('delete-role', selectedRoles.length, [selectedRoles.length]) }}</div>
          </div>
        </v-card-title>
        <v-card-text>
          {{ $tc('delete-are-you-sure', selectedRoles.length) }}
          <template v-for="item in selectedRoles">
            <div class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }} ({{ item.descr }})</div>
          </template>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat="flat" @click="$store.commit('permissions/setDialog', false )">{{ $t('cancel') }}</v-btn>
          <v-btn color="error" @click="$store.commit('permissions/setDialog', false ); $store.dispatch('permissions/deleteSelectedRoles')">{{ $t('delete') }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <permission-module-grant-revoke :grant="$store.state.permissions.grant"/>
    <permission-module-edit :roleId="$store.state.permissions.roleId"/>

  </v-container>
</template>

<script>
import PermissionModuleRoleList from '@/components/PermissionModuleRoleList'
import PermissionModuleUserList from '@/components/PermissionModuleUserList'
import PermissionModuleGrantRevoke from '@/components/PermissionModuleGrantRevoke'
import PermissionModuleEdit from '@/components/PermissionModuleEdit'
import NoPermissionError from '@/components/NoPermissionError'
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'PermissionModule',
  components: {
    PermissionModuleRoleList,
    PermissionModuleUserList,
    PermissionModuleGrantRevoke,
    PermissionModuleEdit,
    NoPermissionError
  },
  data () {
    return {
      components: ['PermissionModuleRoleList', 'PermissionModuleUserList', 'NoPermissionError'],
      tab: 0,
      canView: false
    }
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
    ...mapState('permissions', ['selectedRoles', 'selectedUsers'])
  },
  methods: {
  },
  created () {
    this.$http.get('/api/permissions/permissions.*').then(response => {
      this.canView = response.data
    })
    this.$store.dispatch('permissions/loadData')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>