Resourcedictionary-fetching resources from backend

Intgrated UI with loopback to fetch resources from backend on search

Issue-ID: CCSDK-1217
Change-Id: I4a1c30748d24079bc976f6785df39bbe60777489
Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>

2 files changed, 25 insertions, 6 deletions

diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html
index 236196b9b..d02cef429 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html
@@ -21,10 +21,10 @@
 <form class="example-form" [formGroup]="myControl">
   <mat-form-field class="example-full-width">
     <input type="text" [(ngModel)]="searchText" placeholder="Search Resources" matInput [matAutocomplete]="auto" formControlName="search_input">
-    <button matSuffix mat-icon-button><mat-icon>search</mat-icon></button>
+    <button matSuffix mat-icon-button (click)="fetchResourceByName()"><mat-icon>search</mat-icon></button>
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option (click)="selected(option)" *ngFor="let option of options | search : searchText" [value]="option">
-        {{option}}
+      <mat-option (click)="selected(option)" *ngFor="let option of options | search : searchText" [value]="option.tags">
+        {{option.tags}}
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.ts
index 7f2745e63..1850549aa 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.ts
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.ts
@@ -20,6 +20,8 @@
 
 import { Component, OnInit, ViewChild, EventEmitter, Output  } from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { ExsistingModelService } from '../exsisting-model.service';
+
 @Component({
   selector: 'app-search-resource',
   templateUrl: './search-resource.component.html',
@@ -29,8 +31,12 @@ export class SearchResourceComponent implements OnInit  {
 
   myControl: FormGroup;
   @Output() resourcesData = new EventEmitter();  
-  options: string[] = ['One','One1', 'Two', 'Three'];
-  constructor(private _formBuilder: FormBuilder)  { }
+  options: any[] = [] ;
+  // = ['One','One1', 'Two', 'Three'];
+
+  searchText: string = '';
+  constructor(private _formBuilder: FormBuilder,
+              private exsistingModelService: ExsistingModelService)  { }
   
  ngOnInit() {
     this.myControl = this._formBuilder.group({
@@ -39,6 +45,19 @@ export class SearchResourceComponent implements OnInit  {
   }
  selected(value){
    this.resourcesData.emit(value);
-   } 
+   }
+
+   fetchResourceByName() {
+      this.exsistingModelService.searchByTags(this.searchText)
+      .subscribe(data=>{
+          console.log(data);
+          data.forEach(element => {
+            this.options.push(element)
+          });
+          // this.options = data.
+      }, error=>{
+        window.alert('error' + error);
+      })
+   }
 }