UPD: Expandable role badge list

closes #298

frontend/src/views/netdb/Tokens.vue

@@ -126,7 +126,7 @@
                 <template v-if="roles_by_account[account.login_name] != null && assignable_roles_by_fq_name != null">
                   <h5 class="mb-0">
                     <template
-                      v-for="role in roles_by_account[account.login_name].slice(0, max_role_badge_count)">
+                      v-for="role in expand_roles_by_account[account.login_name] ? roles_by_account[account.login_name] : roles_by_account[account.login_name].slice(0, max_role_badge_count)">
                       <b-button
                         :key="'role-badge-' + role.mgr_login_name + '-' + role.role_fq_name"
                         :id="account.login_name + '-role-badge-' + role.mgr_login_name + '-' + role.role_fq_name"
@@ -144,9 +144,15 @@
                       </b-popover>
                     </template>
                   </h5>
-                  <h6 v-if="roles_by_account[account.login_name].length > max_role_badge_count">
+                  <template v-if="roles_by_account[account.login_name].length > max_role_badge_count">
+                    <b-link @click="$set(expand_roles_by_account,account.login_name, true)"
+                            v-if="!expand_roles_by_account[account.login_name]">
                       + {{ roles_by_account[account.login_name].length - max_role_badge_count }} Weitere
-                  </h6>
+                    </b-link>
+                    <b-link @click="$set(expand_roles_by_account,account.login_name, false)"
+                            v-else>weniger anzeigen
+                    </b-link>
+                  </template>
                 </template>
                 <h6 v-else>Keine Rollen zugewiesen</h6>
                 <p class="text-muted">Rollen (globale Rechte)</p>
@@ -260,7 +266,7 @@ import transactionutil from '@/util/transactionutil'
 
 export default {
   name: 'tokens',
-  components: {DBEditor, Loading},
+  components: { DBEditor, Loading },
   data() {
     return {
       db_editor_old_data: null,
@@ -326,8 +332,8 @@ export default {
       modal_alert_content: '',
       waiting: false,
       token: '',
-      max_role_badge_count: 10,
-      max_permission_count: 10,
+      max_role_badge_count: 5,
+      expand_roles_by_account: {},
       new_system: '',
       new_role_name: '',
       can_add_role: false,
@@ -377,7 +383,7 @@ export default {
           this.assignable_system_options = new Set()
           this.assignable_role_name_options_by_system = {}
           Object.keys(this.assignable_roles_by_system).forEach(system => {
-            this.assignable_system_options.add({value: system, text: system.toUpperCase()})
+            this.assignable_system_options.add({ value: system, text: system.toUpperCase() })
             this.assignable_roles_by_system[system].sort((a, b) => {
               if (a.position < b.position) return -1
               if (a.position > b.position) return 1
@@ -385,7 +391,7 @@ export default {
             })
             this.assignable_role_name_options_by_system[system] = []
             this.assignable_roles_by_system[system].forEach(role => {
-              this.assignable_role_name_options_by_system[system].push({value: role.name, text: role.name})
+              this.assignable_role_name_options_by_system[system].push({ value: role.name, text: role.name })
             })
           })
           this.assignable_system_options = Array.from(this.assignable_system_options)
@@ -415,7 +421,7 @@ export default {
     },
     showModalCreateToken(login_name) {
       this.db_editor_old_data = {}
-      this.db_editor_presets = {login_name: login_name}
+      this.db_editor_presets = { login_name: login_name }
       this.db_editor_function = 'create'
       this.$bvModal.show('token_editor')
     },
@@ -508,7 +514,7 @@ export default {
         if (role.contained_permissions) {
           const permissions = []
           for (const [key, value] of Object.entries(role.contained_permissions)) {
-            permissions.push({system: key, permission: value})
+            permissions.push({ system: key, permission: value })
           }
           role.contained_permissions = permissions
         }