From 28e4e41f5b011a3115d2893835084990cfce9e14 Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Tue, 27 Aug 2019 10:18:19 +0200
Subject: [PATCH] feat(admin-ui): Add search input to customer list

---
 .../customer-list.component.html              |  9 +++++
 .../customer-list.component.scss              |  5 +++
 .../customer-list/customer-list.component.ts  | 33 +++++++++++++++++--
 admin-ui/src/i18n-messages/en.json            |  1 +
 4 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/admin-ui/src/app/customer/components/customer-list/customer-list.component.html b/admin-ui/src/app/customer/components/customer-list/customer-list.component.html
index aaf3261c1f..026069e165 100644
--- a/admin-ui/src/app/customer/components/customer-list/customer-list.component.html
+++ b/admin-ui/src/app/customer/components/customer-list/customer-list.component.html
@@ -1,4 +1,13 @@
 <vdr-action-bar>
+    <vdr-ab-left>
+        <input
+            type="text"
+            name="searchTerm"
+            [formControl]="searchTerm"
+            [placeholder]="'customer.search-customers-by-email' | translate"
+            class="clr-input search-input"
+        />
+    </vdr-ab-left>
     <vdr-ab-right>
         <a class="btn btn-primary" [routerLink]="['./create']">
             <clr-icon shape="plus"></clr-icon>
diff --git a/admin-ui/src/app/customer/components/customer-list/customer-list.component.scss b/admin-ui/src/app/customer/components/customer-list/customer-list.component.scss
index 9132fb6059..f69f139ef1 100644
--- a/admin-ui/src/app/customer/components/customer-list/customer-list.component.scss
+++ b/admin-ui/src/app/customer/components/customer-list/customer-list.component.scss
@@ -1 +1,6 @@
 @import "variables";
+
+.search-input {
+    margin-top: 6px;
+    min-width: 300px;
+}
diff --git a/admin-ui/src/app/customer/components/customer-list/customer-list.component.ts b/admin-ui/src/app/customer/components/customer-list/customer-list.component.ts
index 286b990787..5dab8943a7 100644
--- a/admin-ui/src/app/customer/components/customer-list/customer-list.component.ts
+++ b/admin-ui/src/app/customer/components/customer-list/customer-list.component.ts
@@ -1,5 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { SortOrder } from 'shared/generated-shop-types';
 
 import { BaseListComponent } from '../../../common/base-list.component';
 import { GetCustomerList } from '../../../common/generated-types';
@@ -10,12 +13,38 @@ import { DataService } from '../../../data/providers/data.service';
     templateUrl: './customer-list.component.html',
     styleUrls: ['./customer-list.component.scss'],
 })
-export class CustomerListComponent extends BaseListComponent<GetCustomerList.Query, GetCustomerList.Items> {
+export class CustomerListComponent extends BaseListComponent<GetCustomerList.Query, GetCustomerList.Items>
+    implements OnInit {
+    searchTerm = new FormControl('');
     constructor(private dataService: DataService, router: Router, route: ActivatedRoute) {
         super(router, route);
         super.setQueryFn(
             (...args: any[]) => this.dataService.customer.getCustomerList(...args),
             data => data.customers,
+            (skip, take) => ({
+                options: {
+                    skip,
+                    take,
+                    filter: {
+                        emailAddress: {
+                            contains: this.searchTerm.value,
+                        },
+                    },
+                    sort: {
+                        createdAt: SortOrder.DESC,
+                    },
+                },
+            }),
         );
     }
+
+    ngOnInit() {
+        super.ngOnInit();
+        this.searchTerm.valueChanges
+            .pipe(
+                debounceTime(250),
+                takeUntil(this.destroy$),
+            )
+            .subscribe(() => this.refresh());
+    }
 }
diff --git a/admin-ui/src/i18n-messages/en.json b/admin-ui/src/i18n-messages/en.json
index 8a6d7139b4..005ebe7b70 100644
--- a/admin-ui/src/i18n-messages/en.json
+++ b/admin-ui/src/i18n-messages/en.json
@@ -166,6 +166,7 @@
     "postal-code": "Postal code",
     "province": "Province",
     "registered": "Registered",
+    "search-customers-by-email": "Search by email address",
     "set-as-default-billing-address": "Set as default billing",
     "set-as-default-shipping-address": "Set as default shipping",
     "street-line-1": "Street line 1",