summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/PermissionModule.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/PermissionModule.vue')
-rw-r--r--webapp/src/components/PermissionModule.vue69
1 files changed, 21 insertions, 48 deletions
diff --git a/webapp/src/components/PermissionModule.vue b/webapp/src/components/PermissionModule.vue
index 109007c..39d9b02 100644
--- a/webapp/src/components/PermissionModule.vue
+++ b/webapp/src/components/PermissionModule.vue
@@ -21,16 +21,13 @@
<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-card class="elevation-3">
+ <v-tabs v-model="tabs" grow :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
<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-tabs-items v-model="tabs" style="padding-bottom: 20px">
<v-tab-item>
<v-subheader>{{ $t('roles') }}</v-subheader>
<permission-module-role-list/>
@@ -40,43 +37,22 @@
<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"
+ :value="dialog.show"
+ @input="setDialog({ show: $event })"
+ :max-width="dialog.type === 'delete' ? '500px' : '1200px'"
scrollable
+ persistent
+ :fullscreen="$vuetify.breakpoint.smAndDown"
>
- <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>
+ <permission-module-edit v-if="dialog.type === 'edit'"/>
+ <permission-module-delete v-if="dialog.type === 'delete'"/>
+ <permission-module-grant-revoke v-else-if="dialog.type === 'grant'"/>
+ <permission-module-grant-revoke v-else-if="dialog.type === 'revoke'"/>
</v-dialog>
-
- <permission-module-grant-revoke :grant="$store.state.permissions.grant"/>
- <permission-module-edit :roleId="$store.state.permissions.roleId"/>
-
</v-container>
</template>
@@ -85,8 +61,8 @@ 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'
+import PermissionModuleDelete from '@/components/PermissionModuleDelete'
+import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
name: 'PermissionModule',
@@ -95,31 +71,28 @@ export default {
PermissionModuleUserList,
PermissionModuleGrantRevoke,
PermissionModuleEdit,
- NoPermissionError
+ PermissionModuleDelete
},
data () {
return {
- components: ['PermissionModuleRoleList', 'PermissionModuleUserList', 'NoPermissionError'],
- tab: 0,
- canView: false
+ tabs: 0
}
},
computed: {
...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
- ...mapState('permissions', ['selectedRoles', 'selectedUsers'])
+ ...mapState('permissions', ['dialog'])
},
methods: {
+ ...mapMutations('permissions', ['setDialog'])
},
created () {
- this.$http.get('/api/permissions/permissions.*').then(response => {
- this.canView = response.data
- })
- this.$store.dispatch('permissions/loadData')
+ this.$store.dispatch('permissions/loadLists')
+ this.$store.dispatch('groups/loadLists')
+ this.$store.dispatch('users/loadData')
}
}
</script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>