From fff6f190ae0e3bec0d92472afb055805644f4c1a Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Tue, 27 Aug 2019 11:00:32 +0200
Subject: [PATCH] feat(admin-ui): Add filtering to countries list

---
 admin-ui/src/app/data/providers/settings-data.service.ts  | 5 ++++-
 .../components/country-list/country-list.component.html   | 7 +++++++
 .../components/country-list/country-list.component.scss   | 4 ++++
 .../components/country-list/country-list.component.ts     | 8 ++++++--
 admin-ui/src/i18n-messages/en.json                        | 1 +
 5 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/admin-ui/src/app/data/providers/settings-data.service.ts b/admin-ui/src/app/data/providers/settings-data.service.ts
index 2073d0380b..8b4d56c2d0 100644
--- a/admin-ui/src/app/data/providers/settings-data.service.ts
+++ b/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,
+                },
             },
         });
     }
diff --git a/admin-ui/src/app/settings/components/country-list/country-list.component.html b/admin-ui/src/app/settings/components/country-list/country-list.component.html
index 4512dd37ca..05fc299cc4 100644
--- a/admin-ui/src/app/settings/components/country-list/country-list.component.html
+++ b/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 }}
diff --git a/admin-ui/src/app/settings/components/country-list/country-list.component.scss b/admin-ui/src/app/settings/components/country-list/country-list.component.scss
index 15680a262d..7efcb4c3c9 100644
--- a/admin-ui/src/app/settings/components/country-list/country-list.component.scss
+++ b/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;
+}
diff --git a/admin-ui/src/app/settings/components/country-list/country-list.component.ts b/admin-ui/src/app/settings/components/country-list/country-list.component.ts
index 88df00be44..34207b6caa 100644
--- a/admin-ui/src/app/settings/components/country-list/country-list.component.ts
+++ b/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),
         );
diff --git a/admin-ui/src/i18n-messages/en.json b/admin-ui/src/i18n-messages/en.json
index 99db9d8185..c3aa465703 100644
--- a/admin-ui/src/i18n-messages/en.json
+++ b/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",