established the frontend for search functionality

stackle-app/src/app/secure/secure.component.html

@@ -24,9 +24,9 @@ <h5 class="mat-h5">By Opensource, For Opensource</h5>
  <div class="example-container">
  <form>
  <mat-form-field>
- <input matInput placeholder="Stack Name">
+ <input matInput placeholder="Stack Name" [(ngModel)]="stackNameToSearch" name="stackNameText">
  </mat-form-field>
- <button mat-button color="primary" type="submit">
+ <button mat-button color="primary" type="submit" (click)="onSearchSubmit()">
  <mat-icon matListIcon>search</mat-icon>
  Search
  </button>

stackle-app/src/app/secure/secure.component.ts

@@ -14,6 +14,8 @@ export class SecureComponent implements OnInit {
 
  private subscribedStacks = [];
  private userAvatarUrl;
+ public stackNameToSearch: String;
+ public stackInfo: any;
 
  constructor(
  private auth: AuthService,
@@ -59,4 +61,19 @@ export class SecureComponent implements OnInit {
  this.router.navigate(['app/stack'], { queryParams: { name: stackName }});
  }
 
+ public onSearchSubmit(){
+ let stackToSearch = {
+ stackName: this.stackNameToSearch
+ };
+ console.log(stackToSearch);
+ this.stackService.getStack(stackToSearch.stackName).subscribe((res)=>{
+ console.log(res);
+ if(res.success){
+ this.stackInfo = res.result;
+ }
+ }, (err)=>{
+ console.log(err);
+ });
+ }
+
 }

stackle-app/src/app/services/stack.service.ts

@@ -67,4 +67,9 @@ export class StackService {
 
  }
 
+ public getStack(stackName){
+ return this.http.get(`${this.apiUrl}/api/org/name/${stackName}`)
+ .map((res: Response) => res.json())
+ .catch((error: any) => Observable.throw(error.json().error) || 'Server error');
+ }
 }