From b71b9a77848ce7d6b1e0f2f7e9f88d670ee9d7a8 Mon Sep 17 00:00:00 2001
From: junjiequan <a331998513@gmail.com>
Date: Wed, 29 May 2024 10:39:03 +0200
Subject: [PATCH] feat: added show more button for group list

---
 .../user-settings/_user-settings-theme.scss    |  3 +++
 .../user-settings/user-settings.component.html | 18 +++++++++++++++++-
 .../user-settings/user-settings.component.scss | 10 +++++++++-
 .../user-settings/user-settings.component.ts   |  1 +
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/app/users/user-settings/_user-settings-theme.scss b/src/app/users/user-settings/_user-settings-theme.scss
index d75294a3e..bef958b32 100644
--- a/src/app/users/user-settings/_user-settings-theme.scss
+++ b/src/app/users/user-settings/_user-settings-theme.scss
@@ -18,6 +18,9 @@
     .copy-button {
       color: mat.get-color-from-palette($primary, "default");
     }
+    .toggleButton {
+      color: mat.get-color-from-palette($primary, "default");
+    }
   }
 }
 
diff --git a/src/app/users/user-settings/user-settings.component.html b/src/app/users/user-settings/user-settings.component.html
index 7d0038126..0ebfb14db 100644
--- a/src/app/users/user-settings/user-settings.component.html
+++ b/src/app/users/user-settings/user-settings.component.html
@@ -51,7 +51,23 @@
             data-cy="user-accessGroup"
           >
             <th>Groups</th>
-            <td>{{ vm.profile.accessGroups }}</td>
+            <td>
+              <span [class.show]="show">
+                {{
+                  show
+                    ? vm.profile.accessGroups
+                    : (vm.profile.accessGroups | slice: 0 : 15)
+                }}
+              </span>
+              <span class="toggleButton" (click)="show = !show">
+                <ng-container *ngIf="show; else showAllTemplate">
+                  <mat-icon matTooltip="Show Less Groups">expand_less</mat-icon>
+                </ng-container>
+                <ng-template #showAllTemplate>
+                  <mat-icon matTooltip="Show All Groups">expand_more</mat-icon>
+                </ng-template>
+              </span>
+            </td>
           </tr>
           <tr *ngIf="tokenValue" data-cy="user-token">
             <th>SciCat Token</th>
diff --git a/src/app/users/user-settings/user-settings.component.scss b/src/app/users/user-settings/user-settings.component.scss
index b10b94803..16d333f45 100644
--- a/src/app/users/user-settings/user-settings.component.scss
+++ b/src/app/users/user-settings/user-settings.component.scss
@@ -19,7 +19,7 @@ mat-card {
     overflow: hidden;
     text-overflow: ellipsis;
     display: inline-block;
-    max-width: 20ch;
+    max-width: 30vw;
   }
 
   table {
@@ -42,6 +42,14 @@ mat-card {
       .copy-button:hover {
         cursor: pointer;
       }
+
+      .toggleButton {
+        margin: 0 1em;
+      }
+
+      .toggleButton:hover {
+        cursor: pointer;
+      }
     }
   }
 }
diff --git a/src/app/users/user-settings/user-settings.component.ts b/src/app/users/user-settings/user-settings.component.ts
index 15c0fdb14..f37e2c640 100644
--- a/src/app/users/user-settings/user-settings.component.ts
+++ b/src/app/users/user-settings/user-settings.component.ts
@@ -17,6 +17,7 @@ import { DOCUMENT } from "@angular/common";
 export class UserSettingsComponent implements OnInit {
   vm$ = this.store.select(selectUserSettingsPageViewModel);
   tokenValue: string;
+  show = true;
 
   constructor(
     @Inject(DOCUMENT) private document: Document,