OCP-DEMO Invoke full-text query on body message

Author: fax4ever

openshift/message-board/message-board-web/src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import {CommonModule} from '@angular/common';
 
 import {MessageComponent} from './message/message.component';
 import {TagComponent} from './tag/tag.component';
+import {TermComponent} from './term/term.component';
 import {TimeComponent} from './time/time.component';
 import {CreateAccountComponent} from './create-account/create-account.component';
 
@@ -14,6 +15,8 @@ const routes: Routes = [
   { path: 'createAccount', component: CreateAccountComponent },
   { path: 'tag', component: TagComponent },
   { path: 'tag/:tag', component: TagComponent },
+  { path: 'term', component: TermComponent },
+  { path: 'term/:term', component: TermComponent },
   { path: 'time', component: TimeComponent }
 ];
 

openshift/message-board/message-board-web/src/app/app.component.html

@@ -9,6 +9,9 @@
     <li class="nav-item" routerLinkActive="active">
       <a class="nav-link" routerLink="/tag">Search by Tag</a>
     </li>
+    <li class="nav-item" routerLinkActive="active">
+      <a class="nav-link" routerLink="/term">Search by Term</a>
+    </li>
     <li class="nav-item" routerLinkActive="active">
       <a class="nav-link" routerLink="/time">Search by Time</a>
     </li>

openshift/message-board/message-board-web/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { PostMessageComponent } from './post-message/post-message.component';
 import { MessageComponent } from './message/message.component';
 import { EventComponent } from './event/event.component';
 import { TagComponent } from './tag/tag.component';
+import { TermComponent } from './term/term.component';
 import { TimeComponent } from './time/time.component';
 
 @NgModule({
@@ -37,6 +38,7 @@ import { TimeComponent } from './time/time.component';
     MessageComponent,
     EventComponent,
     TagComponent,
+    TermComponent,
     TimeComponent
   ],
   providers: [MessageService, AccountService, EventService, WebSocketService],

openshift/message-board/message-board-web/src/app/message.service.ts

@@ -38,6 +38,15 @@ export class MessageService {
       .pipe( catchError( this.handleError<Message[]>('findMessagesByTag', []) ) );
   }
 
+  findMessagesByTerm(term: string): Observable<Message[]> {
+	if (!term || !term.trim()) {
+      // if not search term, return empty message array.
+	  return of([]);
+	}
+	return this.http.get<Message[]>(`message-service/messages/term/${term}`)
+	  .pipe( catchError( this.handleError<Message[]>('findMessagesByTerm', []) ) );
+  }
+
   findMessagesByTime(startDate: NgbDateStruct, endDate: NgbDateStruct, startTime: NgbTimeStruct, endTime: NgbTimeStruct): Observable<Message[]> {
     if (!startDate || !endDate || !startTime || !endTime) {
 	  return of([]);

openshift/message-board/message-board-web/src/app/term/term.component.html

@@ -0,0 +1,33 @@
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-lg-3">
+      <div class="float-right">
+        <label>Term:
+          <input [(ngModel)]="term" placeholder="term">
+        </label>
+      </div>
+    </div>
+    <div class="col-lg-9">
+      <div class="container-fluid">
+        <div *ngFor="let message of messages" class="container-fluid">
+          <div class="card">
+            <div class="card-body">
+              <p class="card-text">{{ message.body }}</p>
+              <div class="row">
+                <div class="col-lg-2">
+                  <a routerLink="/message/{{message.username}}" class="card-link text-danger">{{ message.username }}</a>
+                </div>
+                <div class="col-lg-5">
+                  <span class="card-text text-success">{{ message.moment }}</span>
+                </div>
+                <div class="col-lg-5">
+                  <a *ngFor="let tag of message.tags" (click)="onSelect(tag)" routerLink="/tag/{{tag.name}}" class="card-link text-info">{{ tag.name }}</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

openshift/message-board/message-board-web/src/app/term/term.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { Message } from '../message';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-term',
+  templateUrl: './term.component.html'
+})
+export class TermComponent implements OnInit {
+
+  private _term: string;
+
+  messages: Message[];
+
+  constructor( private route: ActivatedRoute, private service: MessageService ) { }
+
+  ngOnInit() {
+  	this.term = this.route.snapshot.paramMap.get('term');
+  }
+
+  get term(): string {
+	return this._term;
+  }
+
+  @Input()
+  set term(term: string) {
+	this._term = term;
+    this.getMessages();
+  }
+
+  getMessages(): void {
+   	this.service.findMessagesByTerm(this.term)
+	  .subscribe(messages => {
+	   this.messages = messages;
+	   console.log(messages);
+	});
+  }
+
+  onSelect(term: string): void {
+    this.term = term;
+  }
+}