From 6d83a227b052837bee36a08503a042b90e5cf1cb Mon Sep 17 00:00:00 2001
From: Christian Hofmaier
Date: Mon, 20 May 2019 01:56:40 +0000
Subject: [permissionmanager] frontend rework - bulk call for loading childs of
 groups - change submit to save/create - reload site after role changes - skip
 blacklist when no groups selected - performance improvements - new dialog
 system

---
 webapp/src/components/PermissionModule.vue | 69 +++++++++---------------------
 1 file changed, 21 insertions(+), 48 deletions(-)

(limited to 'webapp/src/components/PermissionModule.vue')

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>
-- 
cgit v1.2.3-55-g7522

