summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/PermissionModule.vue
diff options
context:
space:
mode:
authorChristian Hofmaier2018-08-05 01:42:49 +0200
committerChristian Hofmaier2018-08-05 01:42:49 +0200
commitd236e4c57a7f71589764efccd0cb36337d551055 (patch)
tree6d47dc6deface87f1985ce7daf26692e25838b16 /webapp/src/components/PermissionModule.vue
parent[store/global] simplified settings loading (diff)
downloadbas-d236e4c57a7f71589764efccd0cb36337d551055.tar.gz
bas-d236e4c57a7f71589764efccd0cb36337d551055.tar.xz
bas-d236e4c57a7f71589764efccd0cb36337d551055.zip
[permissions] add permission management
Add Roles Table with Delete Roles and Create Roles possibilities Add Users Table with Grant Roles and Revoke Roles possibilities
Diffstat (limited to 'webapp/src/components/PermissionModule.vue')
-rw-r--r--webapp/src/components/PermissionModule.vue90
1 files changed, 75 insertions, 15 deletions
diff --git a/webapp/src/components/PermissionModule.vue b/webapp/src/components/PermissionModule.vue
index c63f962..00796b5 100644
--- a/webapp/src/components/PermissionModule.vue
+++ b/webapp/src/components/PermissionModule.vue
@@ -3,44 +3,104 @@
"en": {
"roles": "Roles",
"users": "Users",
- "createRole": "Create Role",
- "assignRole": "Assign Role",
- "revokeRole": "Revoke Role"
+ "delete-are-you-sure": "Are you sure you want to delete this role? | Are you sure you want to delete those roles?",
+ "delete-permission": "Delete {0} role | Delete {0} roles"
},
"de": {
"roles": "Rollen",
"users": "Nutzer",
- "createRole": "Rolle erstellen",
- "assignRole": "Rolle zuweisen",
- "revokeROle": "Rolleentziehen"
+ "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"
}
}
</i18n>
<template>
- <v-container>
+ <v-container fill-height>
<v-layout>
- <v-flex md10 offset-md1 sm10 offset-sm1>
- <v-btn color="primary" @click="createRole">{{ $t('createRole') }}</v-btn>
- <v-btn class="right" color="success">{{ $t('assignRole') }}</v-btn>
- <v-btn class="right" color="warning">{{ $t('revokeRole') }}</v-btn>
+ <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-card>
+ <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
+ centered
+ v-model="tab"
+ >
+ <v-tab>{{ $t('roles') }}</v-tab>
+ <v-tab>{{ $t('users') }}</v-tab>
+ </v-tabs>
+ </v-card>
+ <v-tabs-items v-model="tab">
+ <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-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 primary-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 { mapState, mapGetters } from 'vuex'
export default {
- name: 'AccountPage',
+ name: 'PermissionModule',
+ components: {
+ PermissionModuleRoleList,
+ PermissionModuleUserList,
+ PermissionModuleGrantRevoke,
+ PermissionModuleEdit
+ },
data () {
return {
+ components: ['PermissionModuleRoleList', 'PermissionModuleUserList'],
+ tab: ''
}
},
+ computed: {
+ ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
+ ...mapState('permissions', ['selectedRoles', 'selectedUsers'])
+ },
methods: {
- createRole: function (event) {
- window.open('https://bas.stfu-kthx.net:8000/#/dashboard/permission/createRole', '_self')
- }
}
}
</script>