feat(admin-ui): Add search input to customer list

vendure-ecommerce · Aug 27, 2019 · 28e4e41 · 28e4e41
1 parent 0517b6c
commit 28e4e41
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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",