implemented search function

src/app/app.module.ts

@@ -52,6 +52,7 @@ import { LayoutModule } from '@angular/cdk/layout';
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import {MatSortModule} from '@angular/material/sort';
+import { SearchComponent } from './components/search/search.component';
 
 
 const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
@@ -86,7 +87,8 @@ const appRoutes: Routes = [
     ImprintComponent,
     AboutComponent,
     ProfileComponent,
-    MainNavigationComponent
+    MainNavigationComponent,
+    SearchComponent
   ],
   imports: [
     BrowserModule,

src/app/components/home/home.component.html

@@ -30,6 +30,12 @@
             </ng-template> 
             <home-social class="tab-content"></home-social>
         </mat-tab>
+        <mat-tab >    
+            <ng-template mat-tab-label>
+                <mat-icon>search</mat-icon>
+            </ng-template> 
+            <home-search class="tab-content"></home-search>
+        </mat-tab>
     </mat-tab-group>
 </div>
 

src/app/components/search/search.component.html

@@ -0,0 +1,41 @@
+<div id="search">
+    <!--<mat-toolbar><span>Search</span></mat-toolbar>-->
+    <mat-card >      
+        <mat-card-content>
+        <mat-form-field id="input">
+          <textarea matInput #searchWord type="search" mat-autosize="false" matAutosizeMaxRows="1" placeholder="search something" 
+          [ngModel]="searchWord"
+          (ngModelChange)="search(searchWord.value)"></textarea>
+          <button mat-button matSuffix mat-icon-button>
+            <mat-icon>search </mat-icon>
+          </button>
+        </mat-form-field>
+        <mat-form-field id="category-chooser">
+          <mat-label>category</mat-label>
+          <mat-select value="username" #field (selectionChange)="changeCategory($event.value)">
+            <mat-option value="username">username</mat-option>
+            <mat-option value="handle">handle</mat-option>
+            <mat-option value="groupname" disabled>groupname</mat-option>
+            <mat-option value="grouphandle" disabled>grouphandle</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </mat-card-content>
+      </mat-card>
+      <div id="friendlist">
+        <!--<div class="frienditem" *ngFor="let friend of friends"
+        [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"> 
+          <div class="picture">Pic</div>
+          <div class="name"><span>{{friend.name}}</span></div>
+        </div>-->
+        <mat-card class="friend-card" *ngFor="let user of foundUsers" 
+        [class.selected]="user === selectedUser" (click)="showUserProfile(user)"
+        tabindex="0"
+        matRipple>
+          <mat-card-header>
+            <div mat-card-avatar class="profile-picture"></div>
+            <mat-card-title>{{user.username}}</mat-card-title>
+            <mat-card-subtitle>{{user.handle}}</mat-card-subtitle>
+          </mat-card-header>
+        </mat-card>
+    </div>
+</div>

src/app/components/search/search.component.sass

@@ -0,0 +1,29 @@
+
+#search 
+    width: 100% 
+    height: 100%
+
+#input
+    min-width: 60%
+    padding-left: 0.5em
+    padding-right: 0.5em
+
+#category-chooser
+    padding-left: 0.5em
+    padding-right: 0.5em
+
+#friendlist
+  padding: 0.5em
+
+.friend-card
+  box-sizing: border-box
+  width: 100%
+  margin-top: 0.5em
+  cursor: pointer
+
+  .mat-card-subtitle
+    margin: 0
+
+.profile-picture
+  background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
+  background-size: cover

src/app/components/search/search.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SearchComponent } from './search.component';
+
+describe('ChatComponent', () => {
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/search/search.component.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit} from '@angular/core';
+import { SearchService } from 'src/app/services/search/search.service';
+import {Headers, Http} from '@angular/http';
+import { User } from 'src/app/models/user';
+import {environment} from 'src/environments/environment';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'home-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.sass']
+})
+export class SearchComponent implements OnInit {
+  searchValue: string;
+  category = 'username';
+  foundUsers: Array<User>;
+
+  constructor(private searchService: SearchService, private http: Http, private router: Router) { }
+  ngOnInit() {
+  }
+
+  changeCategory(value: string) {
+    this.category = value;
+    this.search(this.searchValue);
+  }
+
+  search(searchWord: string) {
+    this.foundUsers = Array<User>();
+    this.searchValue = searchWord;
+    if (searchWord) {
+      if (this.category === 'username') {
+        this.findUserByName(searchWord);
+      } else if (this.category === 'handle') {
+        this.findUserByHandle(searchWord);
+      }
+    }
+  }
+
+  findUserByName(name: String) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    this.http.post(environment.graphQLUrl, this.searchService.buildJsonName(name))
+      .subscribe(response => {
+        this.foundUsers = this.searchService.renderUsers(response.json());
+      });
+  }
+
+  findUserByHandle(name: String) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    this.http.post(environment.graphQLUrl, this.searchService.buildJsonHandle(name))
+      .subscribe(response => {
+        this.foundUsers = this.searchService.renderUsers(response.json());
+      });
+  }
+
+  public showUserProfile(user: User) {
+    console.log(user);
+    this.router.navigate(['profile/' + user.userID]);
+  }
+}
+

src/app/components/social/social.component.html

@@ -1,2 +1,17 @@
+<mat-tab-group id="tab-group" selectedIndex="0" mat-stretch-tabs>
+    <mat-tab>    
+        <ng-template mat-tab-label>
+            <mat-icon>people</mat-icon>
+        </ng-template> 
         <social-friends id="friendscontainer"></social-friends>
         <social-groups id="groupscontainer"></social-groups>
+    </mat-tab>
+    <mat-tab>    
+        <ng-template mat-tab-label>
+            <mat-icon>search</mat-icon>
+        </ng-template> 
+        <home-search class="tab-content"></home-search>
+    </mat-tab>
+</mat-tab-group>
+
+

src/app/models/user.ts

@@ -6,6 +6,7 @@ export class User {
   email: string;
   points: number;
   level: number;
+  profilePicture: string;
 
   friendIDs: number[];
   groupIDs: number[];

src/app/services/search/search.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SearchService } from './search.service';
+
+describe('SearchService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: SearchService = TestBed.get(SearchService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/search/search.service.ts

@@ -0,0 +1,101 @@
+import {Injectable} from '@angular/core';
+import {Headers, Http} from '@angular/http';
+import {DatasharingService} from '../datasharing.service';
+import {Router} from '@angular/router';
+import {environment} from 'src/environments/environment';
+import { User } from 'src/app/models/user';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SearchService {
+
+  users:  Array<User>;
+  constructor(private http: Http, private data: DatasharingService, private router: Router) {
+  }
+
+  public findUserByName(name: String): Array<User> {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+
+    this.http.post(environment.graphQLUrl, this.buildJsonName(name))
+      .subscribe(response => {
+        this.users = this.renderUsers(response.json());
+      });
+    return this.users;
+  }
+
+  public findUserByHandle(handle: string) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    return this.http.post(environment.graphQLUrl, this.buildJsonHandle(handle))
+      .subscribe(response => {
+          console.log(response.text());
+        }
+      );
+  }
+
+  public renderUsers(pResponse: any): Array<User> {
+    const users = new Array<User>();
+    if (pResponse.data.findUser === 'null') {
+      console.log('no user found');
+      return null;
+    } else {
+      for (const user of pResponse.data.findUser) {
+        const pUser = new User();
+        pUser.profilePicture = user.profilePicture;
+        pUser.username = user.name;
+        pUser.userID = user.id;
+        pUser.handle = user.handle;
+        pUser.points = user.points;
+        pUser.level = user.level;
+        pUser.friendIDs = user.friends;
+        users.push(pUser);
+      }
+      return users;
+    }
+  }
+
+  public buildJsonName(name_: String): any {
+    const body = {
+      query: `query($name: String) {
+        findUser(name: $name, first: 100, offset: 0) {
+          profilePicture,
+          name,
+          id,
+          handle,
+          points,
+          level,
+          friends {
+           id
+          }
+        }
+      }`
+      , variables: {
+        name: name_
+      }
+    };
+    return body;
+  }
+  public buildJsonHandle(handle_: String): any {
+    const body = {
+      query: `query($handle: String) {
+        findUser(handle: $handle, first: 100, offset: 0) {
+          profilePicture,
+          name,
+          id,
+          handle,
+          points,
+          level,
+          friends {
+           id
+          }
+        }
+      }`
+      , variables: {
+        handle: handle_
+      }
+    };
+    return body;
+  }
+}