From 98d971feba7d5ac60f913dcdd6cc557025968f2c Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Wed, 13 Nov 2019 15:16:21 +0100
Subject: [PATCH] feat(admin-ui): Truncate display of role permissions if too
 long

---
 .../role-list/role-list.component.html          | 17 +++++++++++++++--
 .../components/role-list/role-list.component.ts | 11 +++++++++++
 packages/admin-ui/src/i18n-messages/en.json     |  2 +-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/admin-ui/src/app/settings/components/role-list/role-list.component.html b/packages/admin-ui/src/app/settings/components/role-list/role-list.component.html
index 37260c7321..2d367bc38d 100644
--- a/packages/admin-ui/src/app/settings/components/role-list/role-list.component.html
+++ b/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>
diff --git a/packages/admin-ui/src/app/settings/components/role-list/role-list.component.ts b/packages/admin-ui/src/app/settings/components/role-list/role-list.component.ts
index 534438555f..ad8ef08dc1 100644
--- a/packages/admin-ui/src/app/settings/components/role-list/role-list.component.ts
+++ b/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;
     }
diff --git a/packages/admin-ui/src/i18n-messages/en.json b/packages/admin-ui/src/i18n-messages/en.json
index d02e719b8b..c85be3f15c 100644
--- a/packages/admin-ui/src/i18n-messages/en.json
+++ b/packages/admin-ui/src/i18n-messages/en.json
@@ -604,4 +604,4 @@
     "update": "Update",
     "zone": "Zone"
   }
-}
+}
\ No newline at end of file