ADD: Permission list when hovering role badges

frontend/src/views/netdb/tokens.vue

@@ -263,11 +263,10 @@
                                             :key="'role-badge-tooltip' + role.mgr_login_name + '-' + role.role_fq_name"
                                             :target="account.login_name + '-role-badge-' + role.mgr_login_name + '-' + role.role_fq_name"
                                             triggers="hover"
-                                            placement="bottom"
-                                            title="Berechtigungen:">
-                                        <div v-for="(permission, name) in role.contained_permissions" :key="name">
-                                            <b>{{name}}:</b> {{permission}}
-                                        </div>
+                                            placement="bottom">
+                                        <b-table :fields="permission_list_fields"
+                                                 :items="role.contained_permissions"
+                                                 sticky-header/>
                                     </b-popover>
                                 </template>
                             </h5>
@@ -404,6 +403,16 @@
                         sortable: false
                     },
                 ],
+                permission_list_fields: [
+                    {
+                        key: 'system',
+                        label: "System"
+                    },
+                    {
+                        key: 'permission',
+                        label: 'Berechtigung'
+                    },
+                ],
                 show_modal_alert: false,
                 modal_alert_content: "",
                 token: "",
@@ -411,7 +420,8 @@
                 leaving_transition_properties: { // TODO: Get table animations to work
                     name: 'flip-list'
                 },
-                max_role_badge_count: 10
+                max_role_badge_count: 10,
+                max_permission_count: 10
             }
         },
         computed: {
@@ -435,7 +445,7 @@
             fetchData() {
                 AccountTokenService.list(this.$store.state.netdb_axios_config, this.$store.state.user.login_name).then((response) => {
                     this.tokens_by_account = ApiUtil.dict_of_lists_by_value_of_array(this.formatExpiredTokens(response.data[2].concat(response.data[3])), 'login_name')
-                    this.roles_by_account = ApiUtil.dict_of_lists_by_value_of_array(response.data[4].concat(response.data[5]), 'mgr_login_name')
+                    this.roles_by_account = ApiUtil.dict_of_lists_by_value_of_array(this.formatContainedPermissions(response.data[4].concat(response.data[5])), 'mgr_login_name')
                     this.accounts = response.data[0].concat(response.data[1])
                 })
             },
@@ -578,6 +588,17 @@
                     }
                 )
                 return tokens
+            },
+            formatContainedPermissions(roles) {
+                roles.forEach(role => {
+                        let permissions = []
+                        for (let [key, value] of Object.entries(role.contained_permissions)) {
+                            permissions.push({system: key, permission: value})
+                        }
+                        role.contained_permissions = permissions
+                    }
+                )
+                return roles
             }
         }
     }
@@ -596,4 +617,8 @@
     table .flip-list-move { /* TODO: Get table animations to work */
         transition: transform 1s;
     }
+
+    .popover{
+        max-width: 100%;
+    }
 </style>