User Search

Add new button in the navbar that opens a modal that help you search
across the users. Implement query for searching across name, surname and
username.

src/main/client/src/app/app.module.ts

@@ -2,7 +2,6 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
-import {NavbarComponent} from './layout/navbar/navbar.component';
 import {HomeComponent} from './home/home.component';
 import {Globals} from "./globals";
 import {WelcomeComponent} from './welcome/welcome.component';
@@ -90,6 +89,8 @@ import {AdminResolver} from "./admin/admin.resolver";
 import {SettingsComponent} from './settings/settings.component';
 import {SettingsService} from "./shared/settings/settings.service";
 import {AdminService} from './admin/admin.service';
+import { SearchUserComponent } from './navbar/search-user/search-user.component';
+import {NavbarComponent} from "./navbar/navbar.component";
 
 
 @NgModule({
@@ -132,6 +133,7 @@ import {AdminService} from './admin/admin.service';
     ConversationComponent,
     AdminComponent,
     SettingsComponent,
+    SearchUserComponent,
   ],
   imports: [
     BrowserModule,
@@ -170,6 +172,7 @@ import {AdminService} from './admin/admin.service';
     CommentComponent,
     LikeComponent,
     PostCommentComponent,
+    SearchUserComponent,
     ApplicantsComponent
   ],
   providers: [

src/main/client/src/app/chat/chat.component.html

@@ -15,10 +15,6 @@
         <p>{{ user.displayName }}</p>
       </div>
     </div>
-    <div id="search">
-      <label><i class="fa fa-search" aria-hidden="true"></i></label>
-      <input type="text" placeholder="Search contacts..."/>
-    </div>
     <div id="contacts">
       <ul>
         <div *ngFor="let chatOverview of chatOverviews">

src/main/client/src/app/layout/navbar/navbar.component.html → src/main/client/src/app/navbar/navbar.component.html

@@ -8,6 +8,8 @@
       class="fa fa-home w3-margin-right"></i>Worklife</a>
     <a class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" routerLink=""
        title="Newsfeed"><i class="fa fa-globe"></i></a>
+    <a class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" (click)="search()"
+       title="Newsfeed"><i class="fa fa-search"></i></a>
     <a [routerLink]="['/connections', user.userId]"
        class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"
        title="My Network"><i class="fa fa-users"></i></a>

src/main/client/src/app/layout/navbar/navbar.component.ts → src/main/client/src/app/navbar/navbar.component.ts

@@ -1,11 +1,19 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Router} from "@angular/router";
-import {User} from "../../shared/user/user.model";
-import {AuthService} from "../../shared/auth/auth.service";
-import {FileUploadService} from "../../shared/fiile-upload/file-upload.service";
-import {Notification, Notifications} from "../../shared/notifications/notification.model";
-import {NotificationService} from "../../shared/notifications/notification.service";
+import {User} from "../shared/user/user.model";
+import {AuthService} from "../shared/auth/auth.service";
+import {Notification, Notifications} from "../shared/notifications/notification.model";
+import {NotificationService} from "../shared/notifications/notification.service";
 import {interval} from "rxjs";
+import {FileUploadService} from "../shared/fiile-upload/file-upload.service";
+import {LikeComponent} from "../newsfeed/post-list/like/like.component";
+import {BsModalService, ModalOptions} from "ngx-bootstrap";
+import {SearchUserComponent} from "./search-user/search-user.component";
+
+const options: ModalOptions = {
+  class: 'modal-m',
+  backdrop: 'static',
+};
 
 @Component({
   selector: 'app-navbar',
@@ -22,6 +30,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
 
   constructor(private router: Router,
               private _uploadService: FileUploadService,
+              private _modal: BsModalService,
               private _notificationService: NotificationService,
               private authService: AuthService) {
   }
@@ -69,4 +78,11 @@ export class NavbarComponent implements OnInit, OnDestroy {
       return obj.notificationId !== notification.notificationId;
     });
   }
+
+  search() {
+    const initialState = {
+    };
+
+    this._modal.show(SearchUserComponent, {...options, initialState});
+  }
 }

src/main/client/src/app/navbar/search-user/search-user.component.html

@@ -0,0 +1,24 @@
+<div class="modal-header">
+  <h4 class="modal-title pull-left">Search users: </h4>
+  <button type="button" class="close pull-right" aria-label="Close" (click)="close()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+
+  <label>
+    Search for user:
+    <input class="form-control" (keyup)="searchUser($event)">
+  </label>
+  <hr>
+  <div *ngFor="let user of users">
+    <div class="w3-container w3-card w3-white w3-round ">
+      <img [src]="user.imagePath" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
+      <h4><a (click)="close()" [routerLink]="['profile', user.username]">{{ user.displayName }}
+      </a></h4>
+    </div>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="submit" class="btn btn-danger" (click)="close()">Close</button>
+</div>

src/main/client/src/app/navbar/search-user/search-user.component.ts

@@ -0,0 +1,40 @@
+import {Component, OnInit} from '@angular/core';
+import {BsModalRef} from "ngx-bootstrap";
+import {Users} from "../../shared/user/user.model";
+import {UserService} from "../../shared/user/user.service";
+
+@Component({
+  selector: 'app-search-user',
+  templateUrl: './search-user.component.html',
+  styleUrls: ['./search-user.component.css']
+})
+export class SearchUserComponent implements OnInit {
+  users: Users;
+
+  constructor(public _modal: BsModalRef,
+              private _userService: UserService) {
+  }
+
+  ngOnInit() {
+    this.users = [];
+  }
+
+  searchUser(event) {
+    let term = event.target.value;
+    if (term == '') {
+      this.users = [];
+      return;
+    }
+    this._userService.search(term)
+      .then((users: Users) => {
+        this.users = users;
+      });
+  }
+
+  close() {
+    if (this._modal) {
+      this._modal.hide();
+      this._modal = null;
+    }
+  }
+}

src/main/client/src/app/shared/user/user.service.ts

@@ -26,6 +26,14 @@ export class UserService {
       .toPromise() as Promise<User>;
   }
 
+  search(term: string) {
+    return this.repoService.get('network/connections/users/search/?username='+term)
+      .pipe(map((Users: any[]) => {
+        return Users.map(user => this.deserializeUser(user))
+      }))
+      .toPromise() as Promise<Users>;
+  }
+
   loginUser(username: string, password: string) {
     let invalid = false;
     this.authService.loginUser(username, password)

src/main/java/com/linkedin/entities/database/repo/UserRepository.java

@@ -2,13 +2,20 @@
 
 import com.linkedin.entities.database.User;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 import org.springframework.stereotype.Repository;
 
 import java.util.List;
 
 @Repository
 public interface UserRepository extends JpaRepository<User, Long> {
 	User findByUsernameIgnoreCase(String username);
-	List<User> findAllByUsernameIgnoreCase(String username);
+
+	@Query("SELECT u FROM User u WHERE lower(u.username) LIKE CONCAT('%',lower(:term),'%') "
+			+ "OR lower(u.name) LIKE CONCAT('%',lower(:term),'%') "
+			+ "OR lower(u.surname) LIKE CONCAT('%',lower(:term),'%')")
+	List<User> searchUser(@Param("term") String term);
+
 	boolean existsByEmailIgnoreCase(String email);
 }