feat(admin-ui): Display channel filter when more than 10 Channels

Closes #594

packages/admin-ui/i18n-coverage.json

@@ -1,49 +1,49 @@
 {
-  "generatedOn": "2021-01-07T12:25:32.256Z",
-  "lastCommit": "733a1270b6b464048433f2a99a5be6c66f62903f",
+  "generatedOn": "2021-01-11T09:10:41.279Z",
+  "lastCommit": "12c46425e453d3e160a27aed41f14bd23120c9f2",
   "translationStatus": {
     "cs": {
-      "tokenCount": 749,
+      "tokenCount": 750,
       "translatedCount": 687,
       "percentage": 92
     },
     "de": {
-      "tokenCount": 749,
+      "tokenCount": 750,
       "translatedCount": 596,
-      "percentage": 80
+      "percentage": 79
     },
     "en": {
-      "tokenCount": 749,
-      "translatedCount": 748,
+      "tokenCount": 750,
+      "translatedCount": 749,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 749,
+      "tokenCount": 750,
       "translatedCount": 458,
       "percentage": 61
     },
     "fr": {
-      "tokenCount": 749,
+      "tokenCount": 750,
       "translatedCount": 692,
       "percentage": 92
     },
     "pl": {
-      "tokenCount": 749,
+      "tokenCount": 750,
       "translatedCount": 551,
-      "percentage": 74
+      "percentage": 73
     },
     "pt_BR": {
-      "tokenCount": 749,
+      "tokenCount": 750,
       "translatedCount": 642,
       "percentage": 86
     },
     "zh_Hans": {
-      "tokenCount": 749,
+      "tokenCount": 750,
       "translatedCount": 533,
       "percentage": 71
     },
     "zh_Hant": {
-      "tokenCount": 749,
+      "tokenCount": 750,
       "translatedCount": 533,
       "percentage": 71
     }

packages/admin-ui/src/lib/core/src/components/channel-switcher/channel-switcher.component.html

@@ -1,11 +1,20 @@
-<ng-container >
+<ng-container>
     <vdr-dropdown>
         <button class="btn btn-link active-channel" vdrDropdownTrigger>
             <vdr-channel-badge [channelCode]="activeChannelCode$ | async"></vdr-channel-badge>
-            <span class="active-channel">{{ activeChannelCode$ | async | channelCodeToLabel | translate }}</span>
+            <span class="active-channel">{{
+                activeChannelCode$ | async | channelCodeToLabel | translate
+            }}</span>
             <span class="trigger"><clr-icon shape="caret down"></clr-icon></span>
         </button>
         <vdr-dropdown-menu vdrPosition="bottom-right">
+            <input
+                *ngIf="((channelCount$ | async) || 0) >= displayFilterThreshold"
+                [formControl]="filterControl"
+                type="text"
+                class="ml2 mr2"
+                [placeholder]="'common.filter' | translate"
+            />
             <button
                 *ngFor="let channel of channels$ | async"
                 type="button"

packages/admin-ui/src/lib/core/src/components/channel-switcher/channel-switcher.component.ts

@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
-import { Observable } from 'rxjs';
-import { filter, map } from 'rxjs/operators';
+import { combineLatest, Observable } from 'rxjs';
+import { filter, map, startWith } from 'rxjs/operators';
 
 import { CurrentUserChannel } from '../../common/generated-types';
 import { DataService } from '../../data/providers/data.service';
@@ -16,12 +17,26 @@ import { LocalStorageService } from '../../providers/local-storage/local-storage
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChannelSwitcherComponent implements OnInit {
+    readonly displayFilterThreshold = 10;
     channels$: Observable<CurrentUserChannel[]>;
+    channelCount$: Observable<number>;
+    filterControl = new FormControl('');
     activeChannelCode$: Observable<string>;
     constructor(private dataService: DataService, private localStorageService: LocalStorageService) {}
 
     ngOnInit() {
-        this.channels$ = this.dataService.client.userStatus().mapStream(data => data.userStatus.channels);
+        const channels$ = this.dataService.client.userStatus().mapStream(data => data.userStatus.channels);
+        const filterTerm$ = this.filterControl.valueChanges.pipe<string>(startWith(''));
+        this.channels$ = combineLatest(channels$, filterTerm$).pipe(
+            map(([channels, filterTerm]) => {
+                return filterTerm
+                    ? channels.filter(c =>
+                          c.code.toLocaleLowerCase().includes(filterTerm.toLocaleLowerCase()),
+                      )
+                    : channels;
+            }),
+        );
+        this.channelCount$ = channels$.pipe(map(channels => channels.length));
         const activeChannel$ = this.dataService.client
             .userStatus()
             .mapStream(data => data.userStatus.channels.find(c => c.id === data.userStatus.activeChannelId))
@@ -35,6 +50,7 @@ export class ChannelSwitcherComponent implements OnInit {
             if (activeChannel) {
                 this.localStorageService.set('activeChannelToken', activeChannel.token);
             }
+            this.filterControl.patchValue('');
         });
     }
 }

packages/admin-ui/src/lib/static/i18n-messages/cs.json

@@ -185,6 +185,7 @@
     "enabled": "Zapnuto",
     "expand-entries": "Otevřít vstupy",
     "extension-running-in-separate-window": "Rozšíření běží v novém okně",
+    "filter": "",
     "guest": "Host",
     "hide-custom-fields": "Skrýt extra pole",
     "items-per-page-option": "{ count } na stránku",

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -185,6 +185,7 @@
     "enabled": "Aktiviert",
     "expand-entries": "",
     "extension-running-in-separate-window": "Die Erweiterung läuft in einem separaten Fenster",
+    "filter": "",
     "guest": "Gast",
     "hide-custom-fields": "Benutzerdefinierte Felder ausblenden",
     "items-per-page-option": "{ count } pro Seite",

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

@@ -185,6 +185,7 @@
     "enabled": "Enabled",
     "expand-entries": "Expand entries",
     "extension-running-in-separate-window": "Extension is running in a separate window",
+    "filter": "Filter",
     "guest": "Guest",
     "hide-custom-fields": "Hide custom fields",
     "items-per-page-option": "{ count } per page",

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -185,6 +185,7 @@
     "enabled": "Habilitado",
     "expand-entries": "",
     "extension-running-in-separate-window": "La extensión se está ejecutando en una nueva ventana",
+    "filter": "",
     "guest": "Invitado",
     "hide-custom-fields": "Ocultar campos personalizados",
     "items-per-page-option": "{ count } por página",

packages/admin-ui/src/lib/static/i18n-messages/fr.json

@@ -185,6 +185,7 @@
     "enabled": "Activé",
     "expand-entries": "Développer les éléments",
     "extension-running-in-separate-window": "Extension fonctionne dans une fenêtre à part",
+    "filter": "",
     "guest": "Invité",
     "hide-custom-fields": "Cacher les champs personnalisés",
     "items-per-page-option": "{ count } par page",

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -185,6 +185,7 @@
     "enabled": "Aktywny",
     "expand-entries": "",
     "extension-running-in-separate-window": "Rozszerzenie jest włączone w innym oknie",
+    "filter": "",
     "guest": "Gość",
     "hide-custom-fields": "Ukryj pola dodatkowe",
     "items-per-page-option": "{ count } na stronę",

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -185,6 +185,7 @@
     "enabled": "Habilitado",
     "expand-entries": "",
     "extension-running-in-separate-window": "A extensão está sendo executada em uma janela separada",
+    "filter": "",
     "guest": "Convidado",
     "hide-custom-fields": "Ocultar campos personalizados",
     "items-per-page-option": "{ count } por página",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -185,6 +185,7 @@
     "enabled": "启用",
     "expand-entries": "",
     "extension-running-in-separate-window": "扩展已在另一个窗口启动",
+    "filter": "",
     "guest": "游客",
     "hide-custom-fields": "隐藏客户化字段",
     "items-per-page-option": "每页显示 { count } 条",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -185,6 +185,7 @@
     "enabled": "启用",
     "expand-entries": "",
     "extension-running-in-separate-window": "扩展已在另一個窗口启動",
+    "filter": "",
     "guest": "游客",
     "hide-custom-fields": "隱藏客戶自訂欄位",
     "items-per-page-option": "每页顯示 { count } 條",