feat(admin-ui): Truncate display of role permissions if too long

packages/admin-ui/src/app/settings/components/role-list/role-list.component.html

@@ -28,13 +28,26 @@
             <ng-container *ngIf="!isDefaultRole(role)">
                 <vdr-chip *ngFor="let channel of role.channels">
                     <vdr-channel-badge [channelCode]="channel.code"></vdr-channel-badge>
-                    {{ channel.code }}
+                    {{ channel.code | channelCodeToLabel | translate }}
                 </vdr-chip>
             </ng-container>
         </td>
         <td class="left align-middle">
             <ng-container *ngIf="!isDefaultRole(role); else defaultRole">
-                <vdr-chip *ngFor="let permission of role.permissions">{{ permission }}</vdr-chip>
+                <vdr-chip *ngFor="let permission of role.permissions |  slice: 0:displayLimit[role.id] || 3">{{ permission }}</vdr-chip>
+                <button
+                    class="btn btn-sm btn-secondary btn-icon"
+                    *ngIf="role.permissions.length > initialLimit"
+                    (click)="toggleDisplayLimit(role)"
+                >
+                    <ng-container *ngIf="(displayLimit[role.id] || 0) < role.permissions.length; else collapse">
+                        <clr-icon shape="plus"></clr-icon>
+                        {{ role.permissions.length - initialLimit }}
+                    </ng-container>
+                    <ng-template #collapse>
+                        <clr-icon shape="minus"></clr-icon>
+                    </ng-template>
+                </button>
             </ng-container>
             <ng-template #defaultRole>
                 <span class="default-role-label">{{ 'settings.default-role-label' | translate }}</span>

packages/admin-ui/src/app/settings/components/role-list/role-list.component.ts

@@ -13,6 +13,9 @@ import { DataService } from '../../../data/providers/data.service';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RoleListComponent extends BaseListComponent<GetRoles.Query, GetRoles.Items> {
+    readonly initialLimit = 3;
+    displayLimit: { [id: string]: number } = {};
+
     constructor(private dataService: DataService, router: Router, route: ActivatedRoute) {
         super(router, route);
         super.setQueryFn(
@@ -21,6 +24,14 @@ export class RoleListComponent extends BaseListComponent<GetRoles.Query, GetRole
         );
     }
 
+    toggleDisplayLimit(role: GetRoles.Items) {
+        if (this.displayLimit[role.id] === role.permissions.length) {
+            this.displayLimit[role.id] = this.initialLimit;
+        } else {
+            this.displayLimit[role.id] = role.permissions.length;
+        }
+    }
+
     isDefaultRole(role: Role): boolean {
         return role.code === SUPER_ADMIN_ROLE_CODE || role.code === CUSTOMER_ROLE_CODE;
     }

packages/admin-ui/src/i18n-messages/en.json

@@ -604,4 +604,4 @@
     "update": "Update",
     "zone": "Zone"
   }
-}
+}