Create CBA Search existing template

Template to be shown for option choosed from stepper form 1
Change-Id: I52b5f8c8ed217e455e44862df159831c028ff244
Issue-ID: CCSDK-1275
Signed-off-by: Ezhilarasi <ezhrajam@in.ibm.com>

2 files changed, 48 insertions, 6 deletions

diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html
index b58be9fce..491c5e06d 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html
@@ -18,9 +18,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 -->
-<div>
-    <input type="file" accept=".zip" (change)="fileChanged($event)">
+<div *ngIf="optionSelected==1">
+    <div>
+        <input type="file" accept=".zip" (change)="fileChanged($event)">
+    </div>
+    <div>
+        <button mat-button matStepperNext (click)="updateBlueprintState()" [ngClass]="{'mat-upload-btn-disabled': !validfile, 'matStepNextBtn': validfile}" [disabled]="!validfile">Upload</button>
+    </div>
 </div>
-<div>
-    <button mat-button matStepperNext (click)="updateBlueprintState()" [ngClass] = "{'mat-upload-btn-disabled': !validfile, 'matStepNextBtn': validfile}" [disabled]="!validfile">Upload</button>
+<div *ngIf="optionSelected==2">
+    <form class="search-form" [formGroup]="myControl">
+        <mat-form-field class="search-full-width">
+            <input #resourceSelect type="text" [(ngModel)]="searchText" placeholder="Search Resources" matInput [matAutocomplete]="auto" formControlName="search_input">
+            <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.tags">
+                        {{option.tags}}
+                    </mat-option>
+                </mat-autocomplete> -->
+        </mat-form-field>
+    </form>
 </div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
index 1221e8f2b..64352b224 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
@@ -19,7 +19,7 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import { Component, OnInit, EventEmitter, Output, ViewChild } from '@angular/core';
+import { Component, OnInit, EventEmitter, Output, ViewChild, Input } from '@angular/core';
 import { Store } from '@ngrx/store';
 import * as JSZip from 'jszip';
 import { Observable } from 'rxjs';
@@ -31,6 +31,8 @@ import { LoadBlueprintSuccess, SET_BLUEPRINT_STATE, SetBlueprintState } from '..
 import { json } from 'd3';
 import { SortPipe } from '../../../../common/shared/pipes/sort.pipe';
 import { LoaderService } from '../../../../common/core/services/loader.service';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { MatAutocompleteTrigger } from '@angular/material';
 
 @Component({
   selector: 'app-search-template',
@@ -47,6 +49,12 @@ export class SearchTemplateComponent implements OnInit {
   uploadedFileName: string;
   @ViewChild('fileInput') fileInput;
   result: string = '';
+  @Input() optionSelected: string;
+  myControl: FormGroup;
+  @ViewChild('resourceSelect', { read: MatAutocompleteTrigger }) resourceSelect: MatAutocompleteTrigger;
+  @Output() resourcesData = new EventEmitter();
+  options: any[]   = [];
+  searchText: string = '';
 
   private paths = [];
   private tree;
@@ -57,11 +65,30 @@ export class SearchTemplateComponent implements OnInit {
   private blueprintName: string;
   private entryDefinition: string;
 
-  constructor(private store: Store<IAppState>, private loader: LoaderService) { }
+  constructor(private store: Store<IAppState>, private loader: LoaderService,private formBuilder: FormBuilder) { }
 
   ngOnInit() {
+    this.myControl = this.formBuilder.group({
+      search_input: ['', Validators.required]
+    });
+  }
+
+  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.resourceSelect.openPanel();
+    //   }, error => {
+    //     window.alert('error' + error);
+    //   })
+  }
   fileChanged(e: any) {
     this.paths = [];
     this.file = e.target.files[0];