Merge pull request #2608 from xtreme-vikram-yadav/issue-2548

display expandable list of namespaces
vmware-archive · Jul 8, 2021 · f445225 · f445225
2 parents a2aca9a + f58d0eb
commit f445225
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/web/src/app/modules/sugarloaf/components/smart/namespace/namespace.component.html b/web/src/app/modules/sugarloaf/components/smart/namespace/namespace.component.html
@@ -1,6 +1,6 @@
 <div class="app-namespace-selector">
   <ng-template [ngIf]="showDropdown" [ngIfElse]="hideDropdown">
-    <clr-dropdown class="dropdown-top" [clrCloseMenuOnItemClick]="true">
+    <clr-dropdown class="dropdown-top" [clrCloseMenuOnItemClick]="false">
       <button type="button" class="dropdown-button" clrDropdownTrigger>
         <clr-icon shape="namespace"></clr-icon>
         {{ currentNamespace }}
@@ -13,11 +13,11 @@
       >
         <label class="dropdown-header">Namespaces</label>
         <ng-container
-          *ngFor="let namespace of namespaces; trackBy: trackByIdentity"
+          *ngFor="let namespace of namespaces | slice : 0 : nsLimit; trackBy: trackByIdentity"
         >
           <button
             type="button"
-            class="dropdown-button"
+            class="dropdown-button ns-menu-item"
             [ngClass]="namespaceClass(namespace)"
             clrDropdownItem
             (click)="selectNamespace(namespace)"
@@ -26,6 +26,7 @@
             {{ namespace }}
           </button>
         </ng-container>
+        <button class="dropdown-button" *ngIf= "namespaces.length > defaultNsLimit" (click)="toggleShowMore()" clrDropdownItem> {{ nsLimit != namespaces.length ? 'SHOW MORE' : 'SHOW LESS' }}</button>
       </clr-dropdown-menu>
     </clr-dropdown>
   </ng-template>

diff --git a/web/src/app/modules/sugarloaf/components/smart/namespace/namespace.component.ts b/web/src/app/modules/sugarloaf/components/smart/namespace/namespace.component.ts
@@ -25,13 +25,15 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NamespaceComponent implements OnInit, OnDestroy {
+  readonly defaultNsLimit = 10;
   namespaces: string[];
   currentNamespace = '';
   trackByIdentity = trackByIdentity;
   modules: Module[] = [];
   selectedItem: Selection;
   activeUrl: string;
   showDropdown: boolean;
+  nsLimit = this.defaultNsLimit;
 
   private namespaceSubscription: Subscription;
 
@@ -94,6 +96,13 @@ export class NamespaceComponent implements OnInit, OnDestroy {
     return true;
   }
 
+  toggleShowMore(): void {
+    this.nsLimit =
+      this.nsLimit === this.namespaces.length
+        ? this.defaultNsLimit
+        : this.namespaces.length;
+  }
+
   private routerLinkPath(namespace: string): string {
     return this.navigationService.redirect(namespace);
   }