feat.

src/app/game-grid/game-grid.component.html

@@ -1,11 +1,27 @@
 
 <div class="container">
+
+	<div class="row">
+		<div class="col-sm-5 text-center">
+			<button class="btn btn-primary btn-lg addMarginTop btn-landing" routerLink="/view-card">
+				New Game
+			</button>
+		</div>
+	</div>
+
+
 <div *ngIf="isEmptyObject(gamesData)">
+
+	<div class="row">
+		<div class="col-sm-5 text-center">
+			<input (keyup)="onKey($event)" placeholder="Search Games" class="form-control" >
+		</div>
+	</div>
+
 	<div class="flex-row row"  *ngIf="gamesData">
 	
 		<div *ngFor="let game of gamesData;">
 			
-			
 				<div class="col-xs-6 col-sm-4 col-lg-3 cardParent">
 					<div class="card" style="width: 18rem;">
 						<img class="card-img-top" src="http://lazypug.net/globalAssets/images/temp1.png" alt="">

src/app/game-grid/game-grid.component.ts

@@ -59,6 +59,16 @@ export class GameGridComponent implements OnInit {
 		});
 	}
 
+	onKey( event: any ){
+		if( event.target.value != "" ){
+			this.gamesService.searchGamesByText( event.target.value ).subscribe( data => {
+				this.gamesData = data.games;
+			});
+		}else{
+			this.getGamesList();
+		}
+	}
+
 
 	isEmptyObject(obj) {
 		return (obj != undefined);

src/app/games.service.ts

@@ -21,6 +21,15 @@ export class GamesService {
   		private http: HttpClient
 	){ }
 
+	searchGamesByText( searchText ): Observable<any> {
+		return this.http.get( this.APIURL + "/games?filter=Title,cs," + searchText + "&transform=1" )
+			.map(res => {
+				return(
+					res
+				);
+			});
+	}
+
 	getGames( queryFilters, querryPage, queryOrder, queryRecordMax ): Observable<any> {
 		return this.http.get( this.APIURL + "/games?filter="+ queryFilters +"&page="+ querryPage + "," + queryRecordMax +"&order="+ queryOrder +"&transform=1" )
 			.map(res => {
@@ -58,7 +67,7 @@ export class GamesService {
 	}
 
 	deleteGameById( gameId ): Observable<any> {
-		return this.http.get( this.APIURL + "/games/" + gameId )
+		return this.http.delete( this.APIURL + "/games/" + gameId )
 			.map(res => {
 				return(
 					res
@@ -66,4 +75,19 @@ export class GamesService {
 			});
 	}
 
+	postFile(fileToUpload: File): Observable<boolean> {
+		const endpoint = 'your-destination-url';
+		const formData: FormData = new FormData();
+		
+		formData.append('fileKey', fileToUpload, fileToUpload.name);
+			return this.httpClient
+				.post(endpoint, formData, { headers: yourHeadersConfig })
+				.map(() => { return true; })
+				.catch((e) => this.handleError(e));
+	}
+
+
+
+
+
 }

src/app/view-card/view-card.component.html

@@ -101,6 +101,8 @@
 							[type]="'text'"
 							[name]="'Art'">
 
+						<input type="file" id="file" (change)="handleFileInput($event.target.files)">
+
 					</div>
 				</div>
 			</div>
@@ -295,6 +297,9 @@
 					</button>
 				</div>
 				<div class="col-sm-2">
+					<button class="btn btn-primary btn-lg addMarginTop btn-landing" (click)="removeGame()" >
+						Remove Game
+					</button>
 				</div>
 				<div class="col-sm-5 col-sm-pull-7 buttonHolder text-center">
 					<input type="submit" class="btn btn-primary btn-lg" name="btnContinue" id="btnContinue" value="Submit Changes" [disabled]="!form.valid" />

src/app/view-card/view-card.component.ts

@@ -17,6 +17,7 @@ export class ViewCardComponent implements OnInit {
 	gameSubscription: any;
 	gameData: Game;
 	form: any;
+	fileToUpload: File = null;
 
 
 	constructor(
@@ -85,6 +86,18 @@ export class ViewCardComponent implements OnInit {
 		}
 	}
 
+	handleFileInput(files: FileList) {
+    	this.fileToUpload = files.item(0);
+	}
+
+	uploadFileToActivity() {
+		this.gamesService.postFile(this.fileToUpload).subscribe(data => {
+			// do something, if upload success
+		}, error => {
+			console.log(error);
+		});
+	}
+
 	removeGame(){
 		this.gameSubscription = this.gamesService.deleteGameById( this.gid ).subscribe( data => {
 			this.router.navigateByUrl("/game-grid");