feat(admin-ui): Add filtering to countries list

admin-ui/src/app/data/providers/settings-data.service.ts

@@ -89,11 +89,14 @@ import { BaseDataService } from './base-data.service';
 export class SettingsDataService {
     constructor(private baseDataService: BaseDataService) {}
 
-    getCountries(take: number = 10, skip: number = 0) {
+    getCountries(take: number = 10, skip: number = 0, filterTerm?: string) {
         return this.baseDataService.query<GetCountryList.Query, GetCountryList.Variables>(GET_COUNTRY_LIST, {
             options: {
                 take,
                 skip,
+                filter: {
+                    name: filterTerm ? { contains: filterTerm } : null,
+                },
             },
         });
     }

admin-ui/src/app/settings/components/country-list/country-list.component.html

@@ -1,5 +1,12 @@
 <vdr-action-bar>
     <vdr-ab-left>
+        <input
+            type="text"
+            name="searchTerm"
+            [formControl]="searchTerm"
+            [placeholder]="'settings.search-country-by-name' | translate"
+            class="clr-input search-input"
+        />
         <div *ngIf="selectedCountryIds.length">
             <button class="btn btn-sm" (click)="addCountriesToZone()">
                 {{ 'settings.add-countries-to-zone' | translate }}

admin-ui/src/app/settings/components/country-list/country-list.component.scss

@@ -3,3 +3,7 @@
 clr-icon.enabled {
     color: $color-success-500;
 }
+.search-input {
+    margin-top: 6px;
+    min-width: 300px;
+}

admin-ui/src/app/settings/components/country-list/country-list.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { combineLatest, EMPTY, Observable, of, Subject } from 'rxjs';
-import { map, mergeMap, switchMap, take, tap } from 'rxjs/operators';
+import { map, mergeMap, startWith, switchMap, take, tap } from 'rxjs/operators';
 
 import { Country, DeletionResult, GetCountryList, GetZones, Zone } from '../../../common/generated-types';
 import { _ } from '../../../core/providers/i18n/mark-for-extraction';
@@ -16,6 +17,7 @@ import { ZoneSelectorDialogComponent } from '../zone-selector-dialog/zone-select
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CountryListComponent implements OnInit, OnDestroy {
+    searchTerm = new FormControl('');
     countriesWithZones$: Observable<Array<GetCountryList.Items & { zones: GetZones.Zones[] }>>;
     zones$: Observable<GetZones.Zones[]>;
 
@@ -30,7 +32,9 @@ export class CountryListComponent implements OnInit, OnDestroy {
     ) {}
 
     ngOnInit() {
-        const countries$ = this.dataService.settings.getCountries(9999, 0).stream$.pipe(
+        const countries$ = this.searchTerm.valueChanges.pipe(
+            startWith(null),
+            switchMap(term => this.dataService.settings.getCountries(9999, 0, term).stream$),
             tap(data => (this.countries = data.countries.items)),
             map(data => data.countries.items),
         );

admin-ui/src/i18n-messages/en.json

@@ -516,6 +516,7 @@
     "remove-countries-from-zone-success": "Removed { countryCount } {countryCount, plural, one {country} other {countries}} from zone \"{ zoneName }\"",
     "roles": "Roles",
     "search-by-product-name-or-sku": "Search by product name or SKU",
+    "search-country-by-name": "Search countries by name",
     "section": "Section",
     "select-zone": "Select zone",
     "settings": "Settings",