4 files changed, 64 insertions, 9 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 d96747622..dad727cec 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,7 +18,23 @@
 * ============LICENSE_END=========================================================
 */-->
 
-<p>
-  resource-creation works!
-</p>
-<router-outlet></router-outlet>
-\ No newline at end of file
+<mat-vertical-stepper linear>
+  <mat-step >
+    <ng-template matStepLabel>Choose Resource file</ng-template>
+    <br>
+    <app-resource-template-options></app-resource-template-options>
+    <br>
+    <div>
+      <button mat-button matStepperNext class="matStepNextBtn">Proceed</button>
+    </div>
+  </mat-step>
+  <mat-step >
+    <ng-template matStepLabel>Browse Template file</ng-template>
+  <app-upload-resource (change)="fileChange(fileupload.files)"></app-upload-resource>
+    <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
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 cafd2bf8f..b1d0ac57a 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
@@ -16,4 +16,10 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
-*/
-\ No newline at end of file
+*/
+.matStepNextBtn{
+    color:white;
+    background:gray; 
+    margin-top: 10px; 
+    position: absolute;
+}
+\ 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 08612d3ee..32dc3807d 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
@@ -19,6 +19,8 @@
 */
 
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-resource-creation',
@@ -27,9 +29,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ResourceCreationComponent implements OnInit {
 
-  constructor() { }
+  myFile: File; /* property of File type */
 
-  ngOnInit() {
+  constructor() {
+  }
+    
+  ngOnInit() {  
+  }
+    
+  fileChange(files: any) {
+    console.log(files);
+    this.myFile = files[0].nativeElement;
+  }
+    
+  upload(){
+    
   }
-
 }
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 261318ef4..2ece3cef7 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
@@ -23,12 +23,32 @@ 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 { UploadResourceComponent } from './upload-resource/upload-resource.component';
 
 @NgModule({
   declarations: [ResourceCreationComponent],
   imports: [
     CommonModule,
-    ResourceCreationRoutingModule
+    ResourceCreationRoutingModule,
+    MatToolbarModule,
+    MatIconModule, 
+    MatButtonModule, 
+    MatSidenavModule,  
+    MatCheckboxModule, 
+    MatListModule, 
+    MatGridListModule, 
+    MatCardModule, 
+    MatMenuModule, 
+    MatTableModule, 
+    MatPaginatorModule, 
+    MatSortModule, 
+    MatInputModule, 
+    MatSelectModule, 
+    MatRadioModule, 
+    MatFormFieldModule, 
+    MatStepperModule
   ]
 })
 export class ResourceCreationModule { }