SHIBUI-572 Implemented stubbed page

TIER · Jun 22, 2018 · 6ee9dda · 6ee9dda
1 parent f35b39e
commit 6ee9dda
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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>
diff --git a/ui/src/app/metadata/provider/container/new-provider.component.ts b/ui/src/app/metadata/provider/container/new-provider.component.ts
@@ -1,11 +1,20 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 
 @Component({
     selector: 'new-provider-page',
     templateUrl: './new-provider.component.html',
     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
@@ -1,14 +1,19 @@
 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: [
         NewProviderComponent,
         ProviderWizardComponent
     ],
     entryComponents: [],
-    imports: [],
+    imports: [
+        ReactiveFormsModule,
+        CommonModule
+    ],
     exports: []
 })
 export class ProviderModule {