From 6ee9dda35c65ee85b6d9c8097b3934e4fabcde09 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Fri, 22 Jun 2018 09:04:25 -0700
Subject: [PATCH] SHIBUI-572 Implemented stubbed page

---
 ui/src/app/metadata/metadata.module.ts        |  2 +
 ui/src/app/metadata/metadata.routing.ts       | 52 +------------------
 .../container/new-provider.component.html     | 41 ++++++++++++++-
 .../container/new-provider.component.ts       | 15 ++++--
 .../app/metadata/provider/provider.module.ts  |  7 ++-
 5 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/ui/src/app/metadata/metadata.module.ts b/ui/src/app/metadata/metadata.module.ts
index c0f3e3657..259620bf1 100644
--- a/ui/src/app/metadata/metadata.module.ts
+++ b/ui/src/app/metadata/metadata.module.ts
@@ -7,6 +7,7 @@ import { DomainModule } from './domain/domain.module';
 import { MetadataPageComponent } from './metadata.component';
 import { ManagerModule } from './manager/manager.module';
 import { MetadataRoutingModule } from './metadata.routing';
+import { ProviderModule } from './provider/provider.module';
 
 
 @NgModule({
@@ -15,6 +16,7 @@ import { MetadataRoutingModule } from './metadata.routing';
         FilterModule.forRoot(),
         DomainModule.forRoot(),
         ManagerModule.forRoot(),
+        ProviderModule.forRoot(),
         MetadataRoutingModule
     ],
     providers: [],
diff --git a/ui/src/app/metadata/metadata.routing.ts b/ui/src/app/metadata/metadata.routing.ts
index 01e8c68e8..d7e4d4b1a 100644
--- a/ui/src/app/metadata/metadata.routing.ts
+++ b/ui/src/app/metadata/metadata.routing.ts
@@ -86,57 +86,7 @@ const routes: Routes = [
                 children: [
                     {
                         path: 'new',
-                        component: NewProviderComponent,
-                        children: [
-                            { path: '', redirectTo: 'blank', pathMatch: 'prefix' }
-                            // ,
-                            // {
-                            //     path: 'blank',
-                            //     component: BlankProviderComponent,
-                            //     canDeactivate: []
-                            // },
-                            // {
-                            //     path: 'upload',
-                            //     component: UploadProviderComponent,
-                            //     canDeactivate: []
-                            // },
-                            // {
-                            //     path: 'copy',
-                            //     component: CopyProviderComponent,
-                            //     canDeactivate: []
-                            // }
-                        ]
-                    },
-                    {
-                        path: 'new/copy/confirm',
-                        component: ConfirmCopyComponent,
-                        canActivate: [CopyIsSetGuard]
-                    },
-                    {
-                        path: ':id',
-                        component: ResolverComponent,
-                        canActivate: [],
-                        children: [
-                            { path: 'edit', redirectTo: 'edit/2' },
-                            {
-                                path: 'edit/:index',
-                                component: EditorComponent,
-                                canDeactivate: [CanDeactivateGuard]
-                            }
-                        ]
-                    },
-                    {
-                        path: ':entityId',
-                        component: DraftComponent,
-                        canActivate: [],
-                        children: [
-                            { path: 'wizard', redirectTo: 'wizard/2' },
-                            {
-                                path: 'wizard/:index',
-                                component: WizardComponent,
-                                canDeactivate: [CanDeactivateGuard]
-                            }
-                        ]
+                        component: NewProviderComponent
                     }
                 ]
             }
diff --git a/ui/src/app/metadata/provider/container/new-provider.component.html b/ui/src/app/metadata/provider/container/new-provider.component.html
index 62c913437..0e15a2650 100644
--- a/ui/src/app/metadata/provider/container/new-provider.component.html
+++ b/ui/src/app/metadata/provider/container/new-provider.component.html
@@ -1,3 +1,40 @@
 <div class="container-fluid p-3" role="main">
-    Hi. I'm a new provider component page.
-</div>
+    <section class="section" aria-label="Add a new metadata source - how are you adding the metadata information?" tabindex="0">
+        <div class="section-header bg-info p-2 text-white">
+            <div class="row justify-content-between">
+                <div class="col-md-12">
+                    <span class="display-6" i18n="@@label--add-a-new-metadata-resolver">Add a new metadata provider</span>
+                </div>
+            </div>
+        </div>
+        <div class="section-body p-4 border border-top-0 border-info">
+            <div class="row">
+                <div class="col col-xl-6 col-lg-9 col-xs-12">
+                    <form [formGroup]="form" role="form">
+                        <ul class="nav nav-wizard m-3">
+                            <li class="nav-item">
+                                <h3 class="tag tag-primary">
+                                    <span class="index">1</span>
+                                    <ng-container i18n="@@label--name-and-entityid">1. Name and EntityId</ng-container>
+                                </h3>
+                            </li>
+                            <li class="nav-item">
+                                <button class="nav-link next btn clearfix" (click)="next()" [disabled]="form.invalid" aria-label="Next: Step 2, Common Attributes"
+                                    role="button">
+                                    <span class="label pull-left">
+                                        2.
+                                        <ng-container i18n="@@label--common-attributes">Common Attributes</ng-container>
+                                    </span>
+                                    <span class="direction pull-right">
+                                        <i class="fa fa-fw fa-arrow-circle-right d-block fa-2x"></i>
+                                        <ng-container i18n="@@action--next">Next</ng-container>
+                                    </span>
+                                </button>
+                            </li>
+                        </ul>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/metadata/provider/container/new-provider.component.ts b/ui/src/app/metadata/provider/container/new-provider.component.ts
index 4dee1bf02..e5023ac07 100644
--- a/ui/src/app/metadata/provider/container/new-provider.component.ts
+++ b/ui/src/app/metadata/provider/container/new-provider.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 
 @Component({
     selector: 'new-provider-page',
@@ -7,5 +7,14 @@ import { ActivatedRoute } from '@angular/router';
     styleUrls: ['./new-provider.component.scss']
 })
 export class NewProviderComponent {
-    constructor() {}
-} /* istanbul ignore next */
+    form: FormGroup = this.fb.group({
+        name: ['', [Validators.required]],
+        '@type': ['', [Validators.required]]
+    });
+
+    constructor(
+        private fb: FormBuilder
+    ) {}
+
+    next(): void {}
+}
diff --git a/ui/src/app/metadata/provider/provider.module.ts b/ui/src/app/metadata/provider/provider.module.ts
index 9bfd64dc7..aa31612dc 100644
--- a/ui/src/app/metadata/provider/provider.module.ts
+++ b/ui/src/app/metadata/provider/provider.module.ts
@@ -1,6 +1,8 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { ProviderWizardComponent } from './container/wizard.component';
 import { NewProviderComponent } from './container/new-provider.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
     declarations: [
@@ -8,7 +10,10 @@ import { NewProviderComponent } from './container/new-provider.component';
         ProviderWizardComponent
     ],
     entryComponents: [],
-    imports: [],
+    imports: [
+        ReactiveFormsModule,
+        CommonModule
+    ],
     exports: []
 })
 export class ProviderModule {