OCP-DEMO Save, load and search for #tag

Author: fax4ever

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

@@ -3,13 +3,16 @@ import {RouterModule, Routes} from '@angular/router';
 import {CommonModule} from '@angular/common';
 
 import {MessageComponent} from './message/message.component';
+import {TagComponent} from './tag/tag.component';
 import {CreateAccountComponent} from './create-account/create-account.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/message', pathMatch: 'full' },
   { path: 'message', component: MessageComponent },
   { path: 'message/:userName', component: MessageComponent },
-  { path: 'createAccount', component: CreateAccountComponent}
+  { path: 'createAccount', component: CreateAccountComponent },
+  { path: 'tag', component: TagComponent },
+  { path: 'tag/:tag', component: TagComponent }
 ];
 
 @NgModule({

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

@@ -4,7 +4,10 @@
   </span>
   <ul class="navbar-nav">
     <li class="nav-item" routerLinkActive="active">
-      <a class="nav-link" routerLink="/message">Messages</a>
+      <a class="nav-link" routerLink="/message">User Messages</a>
+    </li>
+    <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="/createAccount">Create Account</a>

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

@@ -15,6 +15,7 @@ import { BoardDetailComponent } from './board-detail/board-detail.component';
 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';
 
 @NgModule({
   imports: [
@@ -29,7 +30,8 @@ import { EventComponent } from './event/event.component';
     BoardDetailComponent,
     PostMessageComponent,
     MessageComponent,
-    EventComponent
+    EventComponent,
+    TagComponent
   ],
   providers: [MessageService, AccountService, EventService],
   bootstrap: [AppComponent]

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

@@ -6,8 +6,8 @@
     <div class="card">
       <div class="card-body">
         <p class="card-text">{{ message.body }}</p>
-        <a *ngFor="let tag of message.tags" href="#" class="card-link text-info">{{ tag }}</a>
         <button class="btn btn-outline-danger btn-sm" (click)="delete(message.id)">Delete</button>
+        <a *ngFor="let tag of message.tags" routerLink="/tag/{{tag.name}}" class="card-link text-info">{{ tag.name }}</a>
       </div>
     </div>
   </div>

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

@@ -28,6 +28,16 @@ export class MessageService {
       .pipe( catchError( this.handleError<Message[]>('findMessagesByUsername', []) ) );
   }
 
+  findMessagesByTag(term: string): Observable<Message[]> {
+      if (!term || !term.trim()) {
+        // if not search term, return empty message array.
+        return of([]);
+      }
+      this.username = term;
+      return this.http.get<Message[]>(`message-service/messages/tag/${term}`)
+        .pipe( catchError( this.handleError<Message[]>('findMessagesByTag', []) ) );
+    }
+
   postMessage(body: string): Observable<any> {
     const message = new Message();
     message.username = this.username;

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

@@ -0,0 +1,3 @@
+export class Tag {
+  name: string;
+}

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

@@ -0,0 +1,25 @@
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-lg-3">
+      <div class="float-right">
+        <label>Tag:
+          <input [(ngModel)]="tag" placeholder="tag">
+        </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>
+              <a routerLink="/message/{{message.username}}" class="card-link text-danger">{{ message.username }}</a>
+              <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>

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

@@ -0,0 +1,47 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { Message } from '../message';
+import { Tag } from '../tag';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-tag',
+  templateUrl: './tag.component.html'
+})
+export class TagComponent implements OnInit {
+
+  private _tag: string;
+
+  messages: Message[];
+
+  constructor( private route: ActivatedRoute, private service: MessageService ) { }
+
+  ngOnInit() {
+  	this.tag = this.route.snapshot.paramMap.get('tag');
+  }
+
+  get tag(): string {
+	return this._tag;
+  }
+
+  @Input()
+  set tag(tag: string) {
+    if (tag) {
+	  this._tag = tag.replace("#","");
+	}
+    this.getMessages();
+  }
+
+  getMessages(): void {
+   	this.service.findMessagesByTag(this.tag)
+	  .subscribe(messages => {
+	   this.messages = messages;
+	   console.log(messages);
+	});
+  }
+
+  onSelect(tag: Tag): void {
+    this.tag = tag.name;
+  }
+}

openshift/message-board/message-service/src/main/java/org/hibernate/demo/message/post/core/entity/Message.java

@@ -15,13 +15,10 @@
 import javax.persistence.GeneratedValue;
 import javax.persistence.GenerationType;
 import javax.persistence.Id;
-import javax.persistence.OneToMany;
+import javax.persistence.ManyToMany;
 import javax.persistence.SequenceGenerator;
 import javax.persistence.Temporal;
 import javax.persistence.TemporalType;
-
-import org.hibernate.annotations.Cascade;
-import org.hibernate.annotations.CascadeType;
 import org.hibernate.validator.constraints.NotEmpty;
 
 /**
@@ -41,8 +38,7 @@ public class Message implements Comparable<Message> {
 	@NotEmpty
 	private String body;
 
-	@OneToMany(fetch = FetchType.EAGER)
-	@Cascade(CascadeType.PERSIST)
+	@ManyToMany(fetch = FetchType.EAGER)
 	private Set<Tag> tags = new HashSet<>();
 
 	@Temporal(TemporalType.TIMESTAMP)
@@ -56,10 +52,6 @@ public Message(String username, String body) {
 		this.body = body;
 	}
 
-	public void addTag(String tagName) {
-		this.tags.add( new Tag( tagName ) );
-	}
-
 	public Set<Tag> getTags() {
 		return tags;
 	}
@@ -88,6 +80,10 @@ public void setTags(Set<Tag> tags) {
 		this.tags = tags;
 	}
 
+	public void addTag(Tag tag) {
+		this.tags.add( tag );
+	}
+
 	@Override
 	public String toString() {
 		return "Message{" +

openshift/message-board/message-service/src/main/java/org/hibernate/demo/message/post/core/entity/Tag.java

@@ -8,6 +8,7 @@
 
 import javax.persistence.Entity;
 import javax.persistence.Id;
+import javax.validation.constraints.Pattern;
 
 import org.hibernate.validator.constraints.NotEmpty;
 
@@ -19,6 +20,7 @@ public class Tag {
 
 	@Id
 	@NotEmpty
+	@Pattern( regexp = "#[\\p{L}0-9-_]+" )
 	private String name;
 
 	private Tag() {
@@ -38,6 +40,14 @@ public boolean equals(Object o) {
 		return name.equals( tag.name );
 	}
 
+	public String getName() {
+		return name;
+	}
+
+	public void setName(String name) {
+		this.name = name;
+	}
+
 	@Override
 	public int hashCode() {
 		return name.hashCode();