Search FAQs

Note: it's not clear to the user that you're only searching #tags here. Also: this endpoint is case sensitive, while /ideaflow/tasks?tag=abc is not.
openmastery · May 5, 2017 · 7ed1a13 · 7ed1a13
1 parent 5b46fcb
commit 7ed1a13
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 38 deletions.
diff --git a/src/services/search/search.service.ts b/src/services/search/search.service.ts
@@ -4,13 +4,29 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
 import { Task } from '../../models/task';
+import { FaqSummary } from '../../models/faqSummary';
 
 @Injectable()
 export class SearchService {
     private apiUrl = 'http://om-ideaflow.herokuapp.com/';
 
     constructor(private http: Http) {}
 
+    searchFaqSummaries(searchTerms: string[]): Observable<FaqSummary[]> {
+        const headers = new Headers({ 'X-API-Key': '57f533ed-cafa-494b-8d41-6ef68ef955bb' });
+        const queryString = new URLSearchParams();
+        queryString.paramsMap = new Map();
+        queryString.paramsMap.set('tag', searchTerms);
+
+        const options = new RequestOptions({
+            headers: headers,
+            search: queryString,
+        });
+
+        return this.http.get(this.apiUrl + 'storyweb/faq', options)
+            .map(response => <FaqSummary[]>response.json().contents);
+    }
+
     searchTasks(searchTerms: string[]): Observable<Task[]> {
         const headers = new Headers({ 'X-API-Key': '57f533ed-cafa-494b-8d41-6ef68ef955bb' });
         const queryString = new URLSearchParams();

diff --git a/src/views/faq/faq.component.html b/src/views/faq/faq.component.html
@@ -9,47 +9,54 @@ <h1>Automated FAQ</h1>
       </nav>
     </main>
     <aside>
-      <md-input-container>
-        <input md-input type="search"/><md-icon>search</md-icon>
-      </md-input-container>
+      <form (keydown.enter)="search(query)">
+        <md-input-container>
+          <input md-input type="search" name="query" [(ngModel)]="query" ngModelOptions="{standalone: true}" placeholder="Search FAQs">
+          <md-icon>search</md-icon>
+        </md-input-container>
+      </form>
     </aside>
   </header>
   <main>
+    <div *ngIf="searchError != null">
+      Error while searching: {{searchError}}.
+      <br> Please try again.
+    </div>
+    <div *ngIf="searchError == null">
+      <table class="mdl-data-table highlight">
+        <thead>
+          <tr>
+            <th colspan="2" (click)="sortGlossary(glossary,'description')"><button md-button>Story Point</button></th>
+            <th (click)="sortGlossary(glossary,'taskPainInSeconds')"><button md-button>Task Pain</button></th>
+            <th (click)="sortGlossary(glossary,'journeyPainInSeconds')"><button md-button>Session Pain</button></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let faq of faqs; let i = index;" (click)="goToFaq(faq.fullPath)">
+            <td>
+              <i class="material-icons" style="background-color: red" *ngIf="faq.faqType === 'PAIN'">timelapse</i>
+              <i class="material-icons" style="background-color: blueviolet" *ngIf="faq.faqType === 'AWESOME'">timelapse</i>
+            </td>
+            <td>
+              <h4>{{faq.faqType === 'PAIN'? 'WTF?!' : 'YAY!'}}: {{faq.eventDescription}}</h4>
+              <p> {{faq.faqAnnotation}}</p>
 
+              <p><i> {{faq.position | date: 'MMM dd yyyy'}} </i>
+                <span *ngFor="let contextTag of faq.contextTags">
+                <label>{{contextTag}}</label>
+              </span>
+                <span color="red" *ngFor="let painTag of faq.painTags">
+                <label>{{painTag}}</label>
+              </span>
+              </p>
 
-    <table class="mdl-data-table highlight">
-      <thead>
-      <tr>
-        <th colspan="2" (click)="sortGlossary(glossary,'description')"><button md-button>Story Point</button></th>
-        <th (click)="sortGlossary(glossary,'taskPainInSeconds')"><button md-button>Task Pain</button></th>
-        <th (click)="sortGlossary(glossary,'journeyPainInSeconds')"><button md-button>Session Pain</button></th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr *ngFor="let faq of faqs; let i = index;" (click)="goToFaq(faq.fullPath)">
-        <td>
-          <i class="material-icons" style="background-color: red" *ngIf="faq.faqType === 'PAIN'">timelapse</i>
-          <i class="material-icons" style="background-color: blueviolet"*ngIf="faq.faqType === 'AWESOME'">timelapse</i>
-        </td>
-        <td>
-          <h4>{{faq.faqType === 'PAIN'? 'WTF?!' : 'YAY!'}}: {{faq.eventDescription}}</h4>
-          <p> {{faq.faqAnnotation}}</p>
 
-          <p><i> {{faq.position | date: 'MMM dd yyyy'}} </i>
-            <span *ngFor="let contextTag of faq.contextTags">
-              <label>{{contextTag}}</label>
-            </span>
-            <span color="red" *ngFor="let painTag of faq.painTags">
-              <label>{{painTag}}</label>
-            </span>
-          </p>
+              <td>{{faq.taskPainInSeconds | amDuration:'seconds'}}</td>
 
-
-        <td>{{faq.taskPainInSeconds | amDuration:'seconds'}}</td>
-
-        <td>{{faq.journeyPainInSeconds | amDuration:'seconds' }}</td>
-      </tr>
-      </tbody>
-    </table>
+              <td>{{faq.journeyPainInSeconds | amDuration:'seconds' }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </main>
-</main>
+</main>
diff --git a/src/views/faq/faq.component.ts b/src/views/faq/faq.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FaqSummary } from '../../models/faqSummary';
-import { FaqService } from '../../services';
+import { FaqService, SearchService } from '../../services';
 import {Router} from "@angular/router";
 
 
@@ -15,8 +15,11 @@ export class FaqComponent implements OnInit {
   private faqs: FaqSummary[];
   private errorMessage: string;
 
-  constructor( private faqService: FaqService, public router: Router ) {
+  private query: string;
+  private searchError: string;
 
+  constructor(private faqService: FaqService, private searchService: SearchService,
+              public router: Router) {
   }
 
   ngOnInit() {
@@ -40,4 +43,12 @@ export class FaqComponent implements OnInit {
     }
   }
 
+  search(query: string) {
+    this.searchService.searchFaqSummaries(query.split(' '))
+      .subscribe(
+        faqs => this.faqs = faqs,
+        error => this.searchError = error,
+      );
+  }
+
 }