Search UI will handle dates for queries.

src/client/mtna/searchbar/searchbar-component.ts

@@ -5,6 +5,8 @@ import {
 export class Searchbar {
   public searching: boolean = false;
   public searchString: string = '';
+  public after: Date;
+  public before: Date;
 
   constructor(
       private _searchService: SearchService,
@@ -14,7 +16,9 @@ export class Searchbar {
 
   search() {
     const searchQuery: ISearchQuery = {
-      query: this.searchString
+      query: this.searchString,
+      before: this.before,
+      after: this.after
     };
     this._searchService.search(searchQuery).then(this._$log.info);
   }

src/client/mtna/searchbar/searchbar-service.spec.ts

@@ -2,7 +2,7 @@ import {
   expect
 } from 'chai';
 import {
-  SearchService
+  SearchService, ISearchQuery
 } from './searchbar-service';
 
 const mock = angular.mock;
@@ -11,6 +11,8 @@ describe('SearchbarService', () => {
   let sut: SearchService;
   let $httpBackend: ng.IHttpBackendService;
 
+  const apiUrl = '/api/search';
+
   beforeEach(mock.module(SearchService.module.name));
   beforeEach(mock.inject((
       mtnaSearchService: SearchService,
@@ -27,11 +29,40 @@ describe('SearchbarService', () => {
   describe('search', () => {
 
     it('should call the correct url with the correct parameters', () => {
-      $httpBackend.expectGET('/api/search?query=test-search').respond(200);
-      sut.search({query: 'test-search'});
+      $httpBackend.expectGET(`${apiUrl}?query=test-search`).respond(200);
+      sut.search({query: 'test-search', before: null, after: null});
+      $httpBackend.flush();
+    });
+
+    it('should convert the before date to a string', () => {
+      const searchParams: ISearchQuery = {
+        query: 'test-search',
+        before: new Date(),
+        after: null
+      };
+      const beforeDateUTC = encodeURI(searchParams.before.toUTCString())
+                              .replace(/%20/g, '+');
+      $httpBackend.expectGET(
+        `${apiUrl}?before=${beforeDateUTC}&query=test-search`
+      ).respond(200);
+      sut.search(searchParams);
       $httpBackend.flush();
     });
 
+    it('should convert the after date to a string', () => {
+      const searchParams: ISearchQuery = {
+        query: 'test-search',
+        before: null,
+        after: new Date()
+      };
+      const afterDateUTC = encodeURI(searchParams.after.toUTCString())
+        .replace(/%20/g, '+');
+      $httpBackend.expectGET(
+        `${apiUrl}?after=${afterDateUTC}&query=test-search`
+      ).respond(200);
+      sut.search(searchParams);
+      $httpBackend.flush();
+    });
   });
 
 });

src/client/mtna/searchbar/searchbar-service.ts

@@ -1,17 +1,48 @@
 export interface ISearchQuery {
   query: string;
+  before: Date;
+  after: Date;
+}
+
+interface ISearchParams {
+  query: string;
+  before: string;
+  after: string;
+}
+
+class SearchQuery implements ISearchQuery {
+  public query: string = '';
+  public before: Date = null;
+  public after: Date = null;
+
+  constructor(
+    sq: ISearchQuery
+  ) {
+    this.query = sq.query;
+    this.before = sq.before;
+    this.after = sq.after;
+  }
+  toJSON(): ISearchParams {
+    return {
+      query: this.query,
+      before: this.before ? this.before.toUTCString() : null,
+      after: this.after ? this.after.toUTCString() : null,
+    };
+  }
 }
 
 export class SearchService {
 
   constructor(private _http: angular.IHttpService) {
   }
 
-  search(searchQuery: ISearchQuery): angular.IPromise<any> {
+  search(sq: ISearchQuery): angular.IPromise<any> {
+    const searchQuery = new SearchQuery(sq);
+
     return this._http({
       url: '/api/search',
       method: 'GET',
-      params: searchQuery
+      params: searchQuery.toJSON()
     });
   }
 

src/client/mtna/searchbar/searchbar-style.scss

@@ -0,0 +1,13 @@
+$material-dark-blue: rgb(40, 53, 147);
+
+mtna-searchbar {
+
+  // Bug with the datepicker styles, hence why we are
+  // overriding here.
+  // https://github.com/angular/material/issues/4871
+  md-datepicker,
+  .md-hue-2 input.md-datepicker-input {
+    background: $material-dark-blue;
+  }
+
+}

src/client/mtna/searchbar/searchbar-template.jade

@@ -1,8 +1,8 @@
-md-toolbar(ng-show="!state.searching")
+md-toolbar(ng-show="!state.searching" ng-click="state.searching = !state.searching")
   .md-toolbar-tools
     h1 MT News Archive
     span(flex)
-    md-button(aria-label="search" ng-click="state.searching = !state.searching")
+    md-button(aria-label="search")
       md-icon search
 md-toolbar.md-hue-2(ng-show="state.searching")
   .md-toolbar-tools
@@ -12,5 +12,7 @@ md-toolbar.md-hue-2(ng-show="state.searching")
     md-input-container(md-theme="input" flex)
       label  
       input.search(ng-model="state.searchString" placeholder="enter search")
+    md-datepicker(ng-model="state.after" md-placeholder="After")
+    md-datepicker(ng-model="state.before" md-placeholder="Before")
     md-button(aria-label="search" ng-click="state.search()")
       md-icon search