add search input to mat-select (#1669)

* feature(time-zone): add searching for the selector

* feature(filter): add searching for the account selector

* fix(i18n): add translations for ru

* fix(sg-filter): fix property missing

Author: huadream

package.json

@@ -61,6 +61,7 @@
     "ng2-dragula": "1.5.0",
     "ngx-clipboard": "^11.1.7",
     "ngx-infinite-scroll": "^6.0.1",
+    "ngx-mat-select-search": "^1.7.6",
     "resize-observer-polyfill": "^1.5.0",
     "rxjs": "^6.3.3",
     "showdown": "^1.8.4",

src/app/events/components/event-list.component.html

@@ -39,7 +39,17 @@
           [(ngModel)]="selectedAccountIds"
           (selectionChange)="accountChanged.emit($event.value)"
         >
-          <mat-option *ngFor="let account of accounts" [value]="account.id"
+          <mat-option>
+            <ngx-mat-select-search
+              [placeholderLabel]="'SELECT_SEARCH.SEARCH' | translate"
+              [noEntriesFoundLabel]="'SELECT_SEARCH.NO_MATCH' | translate"
+              [ngModel]="accountQuery"
+              (ngModelChange)="onAccountQueryChanged($event)"
+            >
+              <mat-icon ngxMatSelectSearchClear class="mdi-close"></mat-icon>
+            </ngx-mat-select-search>
+          </mat-option>
+          <mat-option *ngFor="let account of accountsFiltered" [value]="account.id"
             >{{ account.fullDomain }}{{ account.name }}
           </mat-option>
         </mat-select>

src/app/events/components/event-list.component.ts

@@ -55,6 +55,8 @@ export class EventListComponent implements OnChanges {
   @Output()
   public accountChanged = new EventEmitter<string[]>();
 
+  public accountsFiltered: Account[] = [];
+  public accountQuery = '';
   public dataSource: MatTableDataSource<Event>;
   public tableColumns = ['description', 'level', 'type', 'time'];
   public levels = ['INFO', 'WARN', 'ERROR'];
@@ -72,8 +74,19 @@ export class EventListComponent implements OnChanges {
 
   public ngOnChanges(changes: SimpleChanges) {
     const events = changes['events'];
+    const accounts = changes['accounts'];
     if (events) {
       this.dataSource.data = events.currentValue;
     }
+    if (accounts) {
+      this.onAccountQueryChanged(this.accountQuery);
+    }
+  }
+
+  public onAccountQueryChanged(accountQuery: string) {
+    const queryLower = accountQuery && accountQuery.toLowerCase();
+    this.accountsFiltered = this.accounts.filter(
+      account => !accountQuery || account.name.toLowerCase().includes(queryLower),
+    );
   }
 }

src/app/security-group/sg-filter/sg-filter.component.html

@@ -30,7 +30,17 @@
       [ngModel]="selectedAccountIds"
       (selectionChange)="accountsChanged.emit($event.value)"
     >
-      <mat-option *ngFor="let account of accounts" [value]="account.id"
+      <mat-option>
+        <ngx-mat-select-search
+          [placeholderLabel]="'SELECT_SEARCH.SEARCH' | translate"
+          [noEntriesFoundLabel]="'SELECT_SEARCH.NO_MATCH' | translate"
+          [ngModel]="accountQuery"
+          (ngModelChange)="onAccountQueryChanged($event)"
+        >
+          <mat-icon ngxMatSelectSearchClear class="mdi-close"></mat-icon>
+        </ngx-mat-select-search>
+      </mat-option>
+      <mat-option *ngFor="let account of accountsFiltered" [value]="account.id"
         >{{ account.fullDomain }}{{ account.name }}
       </mat-option>
     </mat-select>

src/app/security-group/sg-filter/sg-filter.component.ts

@@ -1,5 +1,6 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { SecurityGroupViewMode } from '../sg-view-mode';
+import { Account } from '../../shared/models';
 
 export interface SecurityGroupFilter {
   viewMode: SecurityGroupViewMode;
@@ -13,7 +14,7 @@ export interface SecurityGroupFilter {
   templateUrl: 'sg-filter.component.html',
   styleUrls: ['sg-filter.component.scss'],
 })
-export class SgFilterComponent {
+export class SgFilterComponent implements OnChanges {
   @Input()
   public accounts: Account[];
   @Input()
@@ -32,6 +33,8 @@ export class SgFilterComponent {
   public viewMode: SecurityGroupViewMode;
   public query: string;
   public selectedAccountIds: string[];
+  public accountsFiltered: Account[] = [];
+  public accountQuery = '';
 
   @Input()
   public set filters(filter: SecurityGroupFilter) {
@@ -44,4 +47,18 @@ export class SgFilterComponent {
   public get SecurityGroupViewMode() {
     return SecurityGroupViewMode;
   }
+
+  public ngOnChanges(changes: SimpleChanges) {
+    const accounts = changes['accounts'];
+    if (accounts) {
+      this.onAccountQueryChanged(this.accountQuery);
+    }
+  }
+
+  public onAccountQueryChanged(accountQuery: string) {
+    const queryLower = accountQuery && accountQuery.toLowerCase();
+    this.accountsFiltered = this.accounts.filter(
+      account => !accountQuery || account.name.toLowerCase().includes(queryLower),
+    );
+  }
 }

src/app/shared/components/time-zone/time-zone.component.html

@@ -1,5 +1,15 @@
 <mat-form-field class="full-width-input">
   <mat-select [placeholder]="'SNAPSHOT_POLICIES.TIME_ZONE' | translate" [(ngModel)]="timeZone">
+    <mat-option>
+      <ngx-mat-select-search
+        [placeholderLabel]="'SELECT_SEARCH.SEARCH' | translate"
+        [noEntriesFoundLabel]="'SELECT_SEARCH.NO_MATCH' | translate"
+        [ngModel]="query"
+        (ngModelChange)="queryChanged($event)"
+      >
+        <mat-icon ngxMatSelectSearchClear class="mdi-close"></mat-icon>
+      </ngx-mat-select-search>
+    </mat-option>
     <mat-option *ngFor="let tz of timeZones" [value]="tz"> {{ timeZoneToString(tz) }} </mat-option>
   </mat-select>
 </mat-form-field>

src/app/shared/components/time-zone/time-zone.component.ts

@@ -18,11 +18,14 @@ export class TimeZoneComponent implements ControlValueAccessor, OnInit {
   // tslint:disable-next-line:variable-name
   public _timeZone: TimeZone;
   public timeZones: TimeZone[];
+  public timeZonesAll: TimeZone[];
+  public query = '';
 
   constructor(private timeZoneService: TimeZoneService) {}
 
   public ngOnInit(): void {
     this.timeZoneService.get().subscribe(timeZones => {
+      this.timeZonesAll = timeZones;
       this.timeZones = timeZones;
       this.timeZone = timeZones[0];
     });
@@ -52,6 +55,16 @@ export class TimeZoneComponent implements ControlValueAccessor, OnInit {
     }
   }
 
+  public queryChanged(query: string) {
+    const queryLower = query && query.toLowerCase();
+    this.timeZones = this.timeZonesAll.filter(
+      timezone =>
+        !query ||
+        timezone.geo.toLowerCase().includes(queryLower) ||
+        timezone.zone.toLowerCase().includes(queryLower),
+    );
+  }
+
   public timeZoneToString(timeZone: TimeZone): string {
     return `${timeZone.geo} (${timeZone.zone})`;
   }

src/app/shared/shared.module.ts

@@ -156,6 +156,7 @@ import { RequestResourcesButtonComponent } from './components/vm-statistics/requ
 import { RequestResourcesButtonContainerComponent } from './components/vm-statistics/request-resources-button.container';
 import { ApiLogService } from './services/api-log.service';
 import { LogViewGuard } from './services/log-view-guard.service';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 
 const SHARED_DIRECTIVES = [UrlDirective, SidebarTabNavDirective, InputTypeNumberDirective];
 
@@ -179,6 +180,7 @@ const SHARED_COMPONENTS = [
     TranslateModule,
     MatBadgeModule,
     MatExpansionModule,
+    NgxMatSelectSearchModule,
     StoreModule.forFeature('zones', zoneReducers),
     StoreModule.forFeature('disk-offerings', diskOfferingReducers),
     StoreModule.forFeature('affinity-groups', affinityGroupReducers),
@@ -256,6 +258,7 @@ const SHARED_COMPONENTS = [
     RequestResourcesButtonComponent,
     RequestResourcesButtonContainerComponent,
     MatExpansionModule,
+    NgxMatSelectSearchModule,
   ],
   entryComponents: [
     DatePickerDialogComponent,

src/app/snapshot/snapshots-page/snapshot-filter/vm-snapshot-filter.component.html

@@ -9,7 +9,17 @@
       [ngModel]="selectedAccounts"
       (selectionChange)="selectedAccountsChange.emit($event.value)"
     >
-      <mat-option *ngFor="let account of accounts" [value]="account.name"
+      <mat-option>
+        <ngx-mat-select-search
+          [placeholderLabel]="'SELECT_SEARCH.SEARCH' | translate"
+          [noEntriesFoundLabel]="'SELECT_SEARCH.NO_MATCH' | translate"
+          [ngModel]="accountQuery"
+          (ngModelChange)="onAccountQueryChanged($event)"
+        >
+          <mat-icon ngxMatSelectSearchClear class="mdi-close"></mat-icon>
+        </ngx-mat-select-search>
+      </mat-option>
+      <mat-option *ngFor="let account of accountsFiltered" [value]="account.name"
         >{{ account.fullDomain }}{{ account.name }}
       </mat-option>
     </mat-select>

src/app/snapshot/snapshots-page/snapshot-filter/vm-snapshot-filter.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 import { Account } from '../../../shared/models';
@@ -11,7 +11,7 @@ import { SnapshotPageViewMode } from '../../types';
   selector: 'cs-vm-snapshots-filter',
   templateUrl: './vm-snapshot-filter.component.html',
 })
-export class VmSnapshotFilterComponent {
+export class VmSnapshotFilterComponent implements OnChanges {
   @Input()
   public isLoading: boolean;
   @Input()
@@ -39,6 +39,9 @@ export class VmSnapshotFilterComponent {
   @Output()
   public viewModeChange = new EventEmitter<SnapshotPageViewMode>();
 
+  public accountsFiltered: Account[] = [];
+  public accountQuery = '';
+
   public get locale(): Language {
     return this.translate.currentLang as Language;
   }
@@ -47,4 +50,18 @@ export class VmSnapshotFilterComponent {
     private translate: TranslateService,
     public dateTimeFormatterService: DateTimeFormatterService,
   ) {}
+
+  public ngOnChanges(changes: SimpleChanges) {
+    const accounts = changes['accounts'];
+    if (accounts) {
+      this.onAccountQueryChanged(this.accountQuery);
+    }
+  }
+
+  public onAccountQueryChanged(accountQuery: string) {
+    const queryLower = accountQuery && accountQuery.toLowerCase();
+    this.accountsFiltered = this.accounts.filter(
+      account => !accountQuery || account.name.toLowerCase().includes(queryLower),
+    );
+  }
 }