Addition of Property Form

ngapp/src/app/activities/activities.component.html

@@ -1,9 +1,9 @@
 <div style="margin-left: 150px">
 
   <div id="activities-breadcrumb-bar">
-    <breadcrumbs>
+    <app-breadcrumbs>
       <li app-breadcrumb label="Activities" icon="cog" class="active"></li>
-    </breadcrumbs>
+    </app-breadcrumbs>
   </div>
 
   <app-page-error [error]="pageError" *ngIf="pageError"></app-page-error>

ngapp/src/app/activities/add-activity/add-activity.component.html

@@ -1,9 +1,9 @@
 <div style="margin-left: 150px">
   <div id="activities-breadcrumb-bar">
-    <breadcrumbs>
+    <app-breadcrumbs>
       <li app-breadcrumb label="Activities" icon="cog" [route]="[ activitiesLink ]"></li>
       <li app-breadcrumb label="Add Activity" icon="plus" class="active"></li>
-    </breadcrumbs>
+    </app-breadcrumbs>
   </div>
   <div class="container-fluid" *ngIf="!pageError">
     <div class="row">

ngapp/src/app/activities/shared/activity.model.ts

@@ -25,7 +25,7 @@ export class Activity {
    * @param {Object} json the JSON representation of a Activity
    * @returns {Activity} the new Activity (never null)
    */
-  public static create( json: Object = {} ): Activity {
+  public static create( json: object = {} ): Activity {
     const activity = new Activity();
     activity.setValues( json );
     return activity;
@@ -81,7 +81,7 @@ export class Activity {
    * Set all object values using the supplied Activity json
    * @param {Object} values
    */
-  public setValues(values: Object = {}): void {
+  public setValues(values: object = {}): void {
     Object.assign(this, values);
   }
 }

ngapp/src/app/connections/add-connection/add-connection.component.html

@@ -1,9 +1,9 @@
 <div style="margin-left: 150px">
   <div id="connections-breadcrumb-bar">
-    <breadcrumbs>
-      <li app-breadcrumb label="Connections" icon="plug" [route]="[ addConnectionLink ]"></li>
+    <app-breadcrumbs>
+      <li app-breadcrumb label="Connections" icon="plug" [route]="[ connectionsLink ]"></li>
       <li app-breadcrumb label="Add Connection" icon="plus" class="active"></li>
-    </breadcrumbs>
+    </app-breadcrumbs>
   </div>
   <div class="container-fluid" *ngIf="!pageError">
     <div class="row">

ngapp/src/app/connections/add-connection/add-connection.component.ts

@@ -33,7 +33,7 @@ import { AbstractPageComponent } from "@shared/abstract-page.component";
 })
 export class AddConnectionComponent extends AbstractPageComponent {
 
-  public readonly addConnectionLink = ConnectionsConstants.addConnectionPath;
+  public readonly connectionsLink = ConnectionsConstants.connectionsRootPath;
 
   private router: Router;
   private connectionService: ConnectionService;

ngapp/src/app/connections/connections.component.html

@@ -1,9 +1,9 @@
 <div style="margin-left: 150px">
 
   <div id="connections-breadcrumb-bar">
-    <breadcrumbs>
+    <app-breadcrumbs>
       <li app-breadcrumb label="Connections" icon="plug" class="active"></li>
-    </breadcrumbs>
+    </app-breadcrumbs>
   </div>
 
   <app-page-error [error]="pageError" *ngIf="pageError"></app-page-error>

ngapp/src/app/connections/connections.module.ts

@@ -49,6 +49,8 @@ import { SharedModule } from "@shared/shared.module";
   ],
   providers: [
     ConnectionService
+  ],
+  exports: [
   ]
 })
 export class ConnectionsModule { }

ngapp/src/app/connections/edit-connection/edit-connection.component.html

@@ -1,13 +1,16 @@
 <div style="margin-left: 150px">
   <div id="connections-breadcrumb-bar">
-    <breadcrumbs>
+    <app-breadcrumbs>
       <li app-breadcrumb label="Connections" icon="plug" [route]="[ connectionsLink ]"></li>
       <li app-breadcrumb label="Edit Connection" icon="pencil" class="active"></li>
-    </breadcrumbs>
+    </app-breadcrumbs>
   </div>
   <div class="container-fluid" *ngIf="!pageError">
     <div class="row">
-      <h2>Edit Connection</h2>
+      <h2>Connection Properties</h2>
+    </div>
+    <div class="edit-connection-form row">
+        <app-property-form [formProperties]="getPropertyDefinitions()"></app-property-form>
     </div>
     <!--
     <div class="add-connection-form row">

ngapp/src/app/connections/edit-connection/edit-connection.component.ts

@@ -15,13 +15,16 @@
  * limitations under the License.
  */
 
+import { ViewChild } from "@angular/core";
 import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { Router } from "@angular/router";
+
 import { ConnectionService } from "@connections/shared/connection.service";
 import { ConnectionsConstants } from "@connections/shared/connections-constants";
-import { NewConnection } from "@connections/shared/new-connection.model";
 import { AbstractPageComponent } from "@shared/abstract-page.component";
+import { PropertyDefinition } from "@shared/property-form/property-definition.model";
+import { PropertyFormComponent } from "@shared/property-form/property-form.component";
 
 @Component({
   moduleId: module.id,
@@ -35,34 +38,38 @@ export class EditConnectionComponent extends AbstractPageComponent {
 
   private router: Router;
   private connectionService: ConnectionService;
-
-//  @ViewChild(AddConnectionFormComponent) form: AddConnectionFormComponent;
+  private properties: Array<PropertyDefinition<any>> = [];
+  @ViewChild(PropertyFormComponent) private connectionForm: PropertyFormComponent;
 
   constructor(router: Router, route: ActivatedRoute, connectionService: ConnectionService) {
     super(route);
     this.router = router;
     this.connectionService = connectionService;
   }
 
-  /**
-   * Called when the Add Connection form (component) emits a "add-connection" event.  This is bound to
-   * from the add-connection.page.html template.
-   * @param {NewConnection} connection
-   */
-  /*
-  public onCreateConnection(connection: NewConnection) {
-    console.log('[AddConnectionComponent] onCreateConnection(): ' + JSON.stringify(connection));
-    this.apiService
-      .createConnection(connection)
+  public loadAsyncPageData(): void {
+    const that = this;
+    this.connectionService
+      .getConnectionTemplateProperties("h2")
       .subscribe(
-        () => {
-          this.form.creatingConnection = false;
-          const link: string[] = [ '/connections' ];
-          console.log('[AddConnectionComponent] Navigating to: %o', link);
-          this.router.navigate(link);
+        (props) => {
+          that.properties = props;
+          that.connectionForm.setFormProperties(that.properties);
+          that.connectionForm.updateForm();
+          console.log("[AddConnectionComponent] Navigating to: %o");
+        },
+        (error) => {
+          console.error("[ConnectionsComponent] Error getting connections.");
+          this.error(error);
         }
       );
+  }
 
+  /**
+   * @returns {PropertyDefinition<any>[]} the property definitions (can be null)
+   */
+  public getPropertyDefinitions(): Array<PropertyDefinition<any>> {
+    return this.properties;
   }
-  */
+
 }

ngapp/src/app/connections/shared/connection.model.ts

@@ -28,7 +28,7 @@ export class Connection implements Identifiable< string > {
    * @param {Object} json the JSON representation of a Connection
    * @returns {Connection} the new Connection (never null)
    */
-  public static create( json: Object = {} ): Connection {
+  public static create( json: object = {} ): Connection {
     const conn = new Connection();
     conn.setValues( json );
     return conn;
@@ -98,7 +98,7 @@ export class Connection implements Identifiable< string > {
    * Set all object values using the supplied Connection json
    * @param {Object} values
    */
-  public setValues(values: Object = {}): void {
+  public setValues(values: object = {}): void {
     Object.assign(this, values);
   }
 

ngapp/src/app/connections/shared/connection.service.ts

@@ -18,16 +18,17 @@
 import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { Connection } from "@connections/shared/connection.model";
+import { ConnectionsConstants } from "@connections/shared/connections-constants";
 import { NewConnection } from "@connections/shared/new-connection.model";
 import { ApiService } from "@core/api.service";
 import { environment } from "@environments/environment";
+import { PropertyDefinition } from "@shared/property-form/property-definition.model";
 import { Observable } from "rxjs/Observable";
-import { ConnectionsConstants } from "@connections/shared/connections-constants";
 
 @Injectable()
 export class ConnectionService extends ApiService {
 
-  private http: Http;
+  private http;
 
   constructor( http: Http ) {
     super();
@@ -76,4 +77,19 @@ export class ConnectionService extends ApiService {
       .catch(this.handleError);
   }
 
+  /**
+   * Get the connection template property definitions from the komodo rest interface
+   * @param {string} templateName
+   * @returns {Observable<Array<PropertyDefinition<any>>>}
+   */
+  public getConnectionTemplateProperties(templateName: string): Observable<Array<PropertyDefinition<any>>> {
+    return this.http
+      .get( environment.komodoTeiidUrl + "/templates/" + templateName + "/entries", this.getAuthRequestOptions())
+      .map((response) => {
+        const entries = response.json() as Array<PropertyDefinition<any>>;
+        return entries.map((entry) => {const ent = PropertyDefinition.create( entry ); return ent; });
+      })
+      .catch(this.handleError);
+  }
+
 }

ngapp/src/app/core/breadcrumbs/breadcrumbs.component.ts

@@ -19,7 +19,7 @@ import {Component} from "@angular/core";
 
 @Component({
   moduleId: module.id,
-  selector: "breadcrumbs",
+  selector: "app-breadcrumbs",
   templateUrl: "breadcrumbs.component.html",
   styleUrls: ["breadcrumbs.component.css"]
 })