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>

8 files changed, 87 insertions, 15 deletions

diff --git a/cds-ui/client/src/app/common/constants/app-constants.ts b/cds-ui/client/src/app/common/constants/app-constants.ts
index 0bfe5cade..d4e8989c1 100644
--- a/cds-ui/client/src/app/common/constants/app-constants.ts
+++ b/cds-ui/client/src/app/common/constants/app-constants.ts
@@ -95,4 +95,10 @@ export const GlobalContants = {
 export const LoopbackConfig = {
     url: "http://127.0.0.1:3000",
     authtoken: "ccsdkapps"
+}
+
+export const ResourceDictionaryURLs = {
+    saveResourceDictionary: '/resourcedictionary/save',
+    searchResourceDictionaryByTags: '/resourcedictionary/search',
+    searchResourceDictionaryByName: ''
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts b/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts
index b0d37c3d1..08c76df5b 100644
--- a/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts
+++ b/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts
@@ -31,7 +31,11 @@ export class SearchPipe implements PipeTransform{
         if(!searchText) return items;
         searchText = searchText.toLowerCase();
         return items.filter( it => {
-            return it.toLowerCase().includes(searchText);
+            if(it.tags) {                
+             return it.tags.toLowerCase().includes(searchText);
+            } else {
+                return items;
+            }
         });
     } 
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.ts
index 9fdc38886..9d262c600 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.ts
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.ts
@@ -31,7 +31,7 @@ import { LoadResourcesSuccess } from 'src/app/common/core/store/actions/resource
 })
 export class ExistingModelComponent implements OnInit {
 
-  resourceName:string;
+  resource:any;
   
  constructor(private store: Store<IAppState>) { }
 
@@ -40,7 +40,8 @@ export class ExistingModelComponent implements OnInit {
  
  selectedResource(value){
   console.log(value);
-  this.resourceName=value;
+  this.resource=value;
+  this.updateResourcesState();
  }
 
  getDataUsingResouceName(){
@@ -50,7 +51,7 @@ export class ExistingModelComponent implements OnInit {
  updateResourcesState() {
     var me = this; 
     var data:IResources;
-    me.store.dispatch(new LoadResourcesSuccess(data));   
+    me.store.dispatch(new LoadResourcesSuccess(this.resource));   
  }
 
 
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/exsisting-model.service.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/exsisting-model.service.ts
new file mode 100644
index 000000000..7c3bf5465
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/exsisting-model.service.ts
@@ -0,0 +1,39 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, observable } from 'rxjs';
+import { ApiService } from  '../../../../common/core/services/api.service';
+import { LoopbackConfig, ResourceDictionaryURLs } from '../../../../common/constants/app-constants';
+
+@Injectable()
+export class ExsistingModelService {
+    // blueprintUrl = '../../constants/blueprint.json';
+
+    constructor(private _http: HttpClient, private api: ApiService) {
+    }
+
+    searchByTags(tag) {
+       return this.api.get(LoopbackConfig.url+ ResourceDictionaryURLs.searchResourceDictionaryByTags + '/' + tag);
+    }
+}
\ No newline at end of file
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);
+      })
+   }
 }
 
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html
index c4fa67a62..9b4dbe5e1 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html
@@ -26,7 +26,7 @@
   <mat-step [stepControl]="step1FormGroup">
     <ng-template matStepLabel>Choose Resource file</ng-template>
     <br>
-    <app-resource-template-options (options)="selectedOption($event)"></app-resource-template-options>
+    <app-resource-template-options (option)="selectedOption($event)"></app-resource-template-options>
     <br>
     <div>
       <button mat-button matStepperNext class="matStepNextBtn">Proceed</button>
@@ -34,10 +34,10 @@
   </mat-step>
   <mat-step [stepControl]="step2FormGroup">
     <ng-template matStepLabel>Browse or Search Resources</ng-template>
-  <app-upload-resource (fileData)=upload($event)></app-upload-resource><br><br>
-  <app-existing-model></app-existing-model>
+  <app-upload-resource (fileData)=upload($event) *ngIf="selectedValue == 1"></app-upload-resource><br><br>
+  <app-existing-model *ngIf="selectedValue == 3"></app-existing-model>
    <div>      
-   	<button mat-button matStepperNext (click)="updateResourcesState()" class="matStepNextBtn">Upload</button>
+   	<button mat-button matStepperNext (click)="updateResourcesState()" class="matStepNextBtn" *ngIf="selectedValue == 1">Upload</button>
    </div><br><br>
    <div *ngIf="showMsg">
     <p class="success"><strong>File Upload Success!</strong> Please click Proceed to continue!</p>
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts
index 7003f4c20..5ad98bfae 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts
@@ -32,6 +32,8 @@ import { SearchResourceComponent } from './existing-model/search-resource/search
 import { SharedModule } from '../../../../app/common/shared/shared.module';
 import { FormsModule,ReactiveFormsModule } from '@angular/forms';
 
+import { ExsistingModelService } from './existing-model/exsisting-model.service';
+
 @NgModule({
     
  declarations: [
@@ -76,6 +78,7 @@ import { FormsModule,ReactiveFormsModule } from '@angular/forms';
     MatFormFieldModule, 
     MatStepperModule,
     MatAutocompleteModule
-    ]
+    ],
+  providers: [ ExsistingModelService ]
 })
 export class ResourceCreationModule { }