Adding changes in vertical stepper

Adding existing template in vertical stepper

Change-Id: Ic016eb7032ba8de67885b6375e225a1fb98c92eb
Issue-ID: CCSDK-804
Signed-off-by: sp00501638 <sp00501638@techmahindra.com>

4 files changed, 65 insertions, 16 deletions

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 dad727cec..83c9ae2c0 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
@@ -18,23 +18,28 @@
 * ============LICENSE_END=========================================================
 */-->
 
+<mat-card class="ver-card">
+<mat-card-header>
+</mat-card-header>
+<mat-card-content>
 <mat-vertical-stepper linear>
-  <mat-step >
+  <mat-step [stepControl]="step1FormGroup">
     <ng-template matStepLabel>Choose Resource file</ng-template>
     <br>
-    <app-resource-template-options></app-resource-template-options>
+    <app-resource-template-options (options)="selectedOption($event)"></app-resource-template-options>
     <br>
     <div>
       <button mat-button matStepperNext class="matStepNextBtn">Proceed</button>
     </div>
   </mat-step>
-  <mat-step >
+  <mat-step [stepControl]="step2FormGroup">
     <ng-template matStepLabel>Browse Template file</ng-template>
-  <app-upload-resource (change)="fileChange(fileupload.files)"></app-upload-resource>
+  <app-upload-resource (change)="fileChange(fileupload.files)"></app-upload-resource><br><br>
+  <app-existing-model></app-existing-model>
     <div>
       <button mat-button matStepperNext class="matStepNextBtn">Upload</button>
     </div>
   </mat-step>
-</mat-vertical-stepper>
-
-<!-- <router-outlet></router-outlet> -->
\ No newline at end of file
+ </mat-vertical-stepper>
+ </mat-card-content>
+</mat-card>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss
index b1d0ac57a..1d113d49b 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss
@@ -22,4 +22,25 @@
     background:gray; 
     margin-top: 10px; 
     position: absolute;
+    
+}
+.ver-card {
+  width: 100%;  
+  background-color: #f1f1f1;
+   padding: 0.01em 16px;
+    margin: 20px 0;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
+    height: auto;
+}
+.mat-card-header{
+    height:35px;
+}
+.mat-card-content{
+    width: auto;
+    background-color: #fff;
+    padding: 8px 8px;
+    // border-left: 4px solid #4CAF50;
+    word-wrap: break-word;
+    min-height:350px;
+    height: auto;
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts
index 32dc3807d..bb8ceea51 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts
@@ -30,10 +30,10 @@ import { Store } from '@ngrx/store';
 export class ResourceCreationComponent implements OnInit {
 
   myFile: File; /* property of File type */
-
+  selectedValue: any;
   constructor() {
   }
-    
+
   ngOnInit() {  
   }
     
@@ -41,8 +41,13 @@ export class ResourceCreationComponent implements OnInit {
     console.log(files);
     this.myFile = files[0].nativeElement;
   }
-    
   upload(){
     
   }
+
+  selectedOption(value){
+    this.selectedValue=value;
+    console.log(this.selectedValue);        
+}
+ 
 }
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 e4fcf1378..7003f4c20 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
@@ -24,22 +24,39 @@ import { CommonModule } from '@angular/common';
 import { ResourceCreationRoutingModule } from './resource-creation-routing.module';
 import { ResourceCreationComponent } from './resource-creation.component';
 import { ResourceTemplateOptionsComponent } from './resource-template-options/resource-template-options.component';
-import { MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule,  MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material';
+import { MatAutocompleteModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule,  MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material';
 import { UploadResourceComponent } from './upload-resource/upload-resource.component';
+import { NewTemplateComponent } from './new-template/new-template.component';
+import { ExistingModelComponent } from './existing-model/existing-model.component';
+import { SearchResourceComponent } from './existing-model/search-resource/search-resource.component';
+import { SharedModule } from '../../../../app/common/shared/shared.module';
+import { FormsModule,ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
-  declarations: [
+    
+ declarations: [
     ResourceCreationComponent,
     ResourceTemplateOptionsComponent,
-    UploadResourceComponent
+    UploadResourceComponent,
+    NewTemplateComponent,
+    ExistingModelComponent,
+    SearchResourceComponent,
+    
   ],
   exports: [
     ResourceCreationComponent,
     ResourceTemplateOptionsComponent,
-    UploadResourceComponent
+    UploadResourceComponent,
+    NewTemplateComponent,
+    ExistingModelComponent,
+    SearchResourceComponent,
+    SharedModule
   ],
   imports: [
     CommonModule,
+    SharedModule,
+    FormsModule,
+    ReactiveFormsModule,
     ResourceCreationRoutingModule,
     MatToolbarModule,
     MatIconModule, 
@@ -57,7 +74,8 @@ import { UploadResourceComponent } from './upload-resource/upload-resource.compo
     MatSelectModule, 
     MatRadioModule, 
     MatFormFieldModule, 
-    MatStepperModule
-  ]
+    MatStepperModule,
+    MatAutocompleteModule
+    ]
 })
 export class ResourceCreationModule { }