Final commit to master merge from

Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507
Issue-ID: SDC-714
Signed-off-by: Tal Gitelman <tg851x@intl.att.com>

15 files changed, 484 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html
new file mode 100644
index 0000000000..02e7694eb0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html
@@ -0,0 +1,4 @@
+<div>
+    <connection-wizard-header currentStepIndex="2"></connection-wizard-header>
+    <properties-step></properties-step>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less
new file mode 100644
index 0000000000..07f9aa2135
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less
@@ -0,0 +1,4 @@
+connection-wizard-header {
+    display: block;
+    margin-bottom: 15px;
+}
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts
new file mode 100644
index 0000000000..5abb879013
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts
@@ -0,0 +1,10 @@
+import {Component} from "@angular/core";
+
+
+@Component({
+    selector: 'connection-properties-view',
+    templateUrl: './connection-properties-view.component.html',
+    styleUrls:['./connection-properties-view.component.less']
+})
+export class ConnectionPropertiesViewComponent {
+}
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html
new file mode 100644
index 0000000000..369ab50cad
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html
@@ -0,0 +1,36 @@
+<div class="header-main-container">
+    <div class="inner-container">
+        <div class="node from-node" [ngClass]="{'selected':currentStepIndex == 0}">
+            <div class="text">
+                <div class="node-name">
+                    {{connectWizardService.connectRelationModel.fromNode.componentInstance.name}}
+                </div>
+                <div class="selected-req-or-cap" [ngClass]="{'selected': currentStepIndex == 2 && !connectWizardService.selectedMatch.isFromTo}">
+                    {{getSelectedReqOrCapName(true)}}
+                </div>
+            </div>
+            <div class="icon">
+                <div class="small medium {{connectWizardService.connectRelationModel.fromNode.componentInstance.iconSprite}} {{connectWizardService.connectRelationModel.fromNode.componentInstance.icon}}">
+                </div>
+            </div>
+        </div>
+        <div class="connection">
+
+        </div>
+        <div class="node to-node"  [ngClass]="{'selected':currentStepIndex == 1}">
+            <div class="icon">
+                <div class="small medium {{connectWizardService.connectRelationModel.toNode.componentInstance.iconSprite}} {{connectWizardService.connectRelationModel.toNode.componentInstance.icon}}">
+                </div>
+            </div>
+
+            <div class="text">
+                <div class="node-name">
+                    {{connectWizardService.connectRelationModel.toNode.componentInstance.name}}
+                </div>
+                <div class="selected-req-or-cap"  [ngClass]="{'selected': currentStepIndex == 2 && connectWizardService.selectedMatch.isFromTo}">
+                    {{getSelectedReqOrCapName(false)}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
new file mode 100644
index 0000000000..72fa6e813f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
@@ -0,0 +1,53 @@
+@import '../../../../../assets/styles/sprite-proxy-services-icons';
+@import '../../../../../assets/styles/variables';
+.header-main-container{
+  background-color: #f8f8f8;
+  width: 100%;
+  height: 100px;
+  display: flex;
+  .inner-container{
+    margin: 0 auto;
+    display: flex;
+  }
+}
+.selected {
+  color: @main_color_a;
+}
+.node{
+  display: flex;
+  &.from-node{
+       text-align: right;
+   }
+  &.to-node{
+    text-align: left;
+  }
+  &.selected{
+    .icon{
+      border: solid 3px @main_color_a;
+      padding: 4px;
+      border-radius: 50%;
+      background-color: @main_color_p;
+    }
+  }
+  .icon{
+    margin: auto 0;
+    display: flex;
+  }
+  .text{
+    font-family: @font-opensans-medium;
+    margin: auto 10px;
+    min-width: 450px;
+    .node-name{
+      font-size: 11px;
+    }
+    .selected-req-or-cap{
+      font-size: 14px;
+    }
+  }
+}
+.connection{
+  width: 67px;
+  height: 0px;
+  border-bottom: dashed 2px #979797;
+  margin: auto 0;
+}
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts
new file mode 100644
index 0000000000..f5bc3b7ca4
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts
@@ -0,0 +1,37 @@
+/**
+ * Created by rc2122 on 9/27/2017.
+ */
+import {Component, Inject, forwardRef} from "@angular/core";
+import {ConnectionWizardService} from "../connection-wizard.service";
+import {WizardHeaderBaseComponent} from "app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component";
+
+@Component({
+    selector: 'connection-wizard-header',
+    templateUrl: './connection-wizard-header.component.html',
+    styleUrls:['./connection-wizard-header.component.less']
+})
+
+export class ConnectionWizardHeaderComponent extends WizardHeaderBaseComponent{
+
+    constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) {
+        super();
+    }
+
+    private _getReqOrCapName(isFromNode:boolean) {
+        const attributeReqOrCap:string = isFromNode ? 'requirement' : 'capability';
+        if (this.connectWizardService.selectedMatch[attributeReqOrCap]) {
+            return this.connectWizardService.selectedMatch[attributeReqOrCap].getTitle();
+        } else if (this.connectWizardService.selectedMatch.relationship) {
+            return this.connectWizardService.selectedMatch.relationship.relation[attributeReqOrCap];
+        }
+        return '';
+    }
+
+    private getSelectedReqOrCapName = (isFromNode:boolean):string => {
+        if(!this.connectWizardService.selectedMatch){
+            return '';
+        }
+        return this._getReqOrCapName(this.connectWizardService.selectedMatch.isFromTo ? isFromNode : !isFromNode);
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts
new file mode 100644
index 0000000000..6b4b4128c1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts
@@ -0,0 +1,43 @@
+import {ToNodeStepComponent} from "./to-node-step/to-node-step.component";
+import {NgModule} from "@angular/core";
+import {FromNodeStepComponent} from "./from-node-step/from-node-step.component";
+import {PropertiesStepComponent} from "./properties-step/properties-step.component";
+import {ConnectionWizardService} from "./connection-wizard.service";
+import {SelectRequirementOrCapabilityModule} from "../../components/logic/select-requirement-or-capability/select-requirement-or-capability.module";
+import {PropertyTableModule} from "../../components/logic/properties-table/property-table.module";
+import {FormElementsModule} from "../../components/ui/form-components/form-elements.module";
+import {ConnectionWizardHeaderComponent} from "./connection-wizard-header/connection-wizard-header.component";
+import {ConnectionPropertiesViewComponent} from "./connection-properties-view/connection-properties-view.component";
+import {BrowserModule} from "@angular/platform-browser";
+
+@NgModule({
+    declarations: [
+        FromNodeStepComponent,
+        ToNodeStepComponent,
+        PropertiesStepComponent,
+        ConnectionWizardHeaderComponent,
+        ConnectionPropertiesViewComponent
+    ],
+    imports: [
+        FormElementsModule,
+        PropertyTableModule,
+        SelectRequirementOrCapabilityModule,
+        BrowserModule
+    ],
+    exports: [
+        FromNodeStepComponent,
+        ToNodeStepComponent,
+        PropertiesStepComponent,
+        ConnectionWizardHeaderComponent,
+        ConnectionPropertiesViewComponent
+    ],
+    entryComponents: [FromNodeStepComponent,
+        ToNodeStepComponent,
+        PropertiesStepComponent,
+        ConnectionWizardHeaderComponent,
+        ConnectionPropertiesViewComponent
+    ],
+    providers: [ConnectionWizardService]
+})
+export class ConnectionWizardModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts
new file mode 100644
index 0000000000..a097fb04ea
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts
@@ -0,0 +1,67 @@
+import {ConnectRelationModel} from "../../../models/graph/connectRelationModel";
+import {Injectable} from "@angular/core";
+import { Requirement, Capability} from "app/models";
+import {Dictionary} from "lodash";
+import {Match, Component, PropertyFEModel} from "app/models";
+
+@Injectable()
+export class ConnectionWizardService {
+    
+    connectRelationModel:ConnectRelationModel;
+    currentComponent:Component;
+    selectedMatch:Match;
+    changedCapabilityProperties:PropertyFEModel[];
+
+    constructor() {
+        this.changedCapabilityProperties = [];
+    }
+
+    public setRelationMenuDirectiveObj = (connectRelationModel:ConnectRelationModel) => {
+        this.connectRelationModel = connectRelationModel;
+        // this.selectedCapability = rel
+    }
+
+
+    // getComponentInstanceIdOfSelectedCapability = (): string => {
+    //     if(this.selectedMatch.capability){
+    //         if(this.selectedMatch.isFromTo) {
+    //             return this.selectedMatch.toNode;
+    //         } else {
+    //             return this.selectedMatch.fromNode;
+    //         }
+    //     }
+    //     return '';
+    //
+    // }
+
+    getOptionalRequirementsByInstanceUniqueId = (isFromTo: boolean, matchWith?:Capability): Dictionary<Requirement[]> => {
+       let requirements: Array<Requirement> = [];
+        _.forEach(this.connectRelationModel.possibleRelations, (match: Match) => {
+            if(!matchWith || match.capability.uniqueId == matchWith.uniqueId){
+                if(match.isFromTo == isFromTo){
+                    requirements.push(match.requirement);
+                }
+            }
+        });
+        requirements = _.uniqBy(requirements, (req:Requirement)=>{
+            return req.ownerId + req.uniqueId + req.name;
+        });
+        return _.groupBy(requirements, 'capability');
+    }
+
+    getOptionalCapabilitiesByInstanceUniqueId = (isFromTo: boolean, matchWith?:Requirement): Dictionary<Capability[]> => {
+        let capabilities: Array<Capability> = [];
+        _.forEach(this.connectRelationModel.possibleRelations, (match: Match) => {
+            if(!matchWith || match.requirement.uniqueId == matchWith.uniqueId){
+                if(match.isFromTo == isFromTo){
+                    capabilities.push(match.capability);
+                }
+            }
+        });
+        capabilities = _.uniqBy(capabilities, (cap:Capability)=>{
+            return cap.ownerId + cap.uniqueId + cap.name;
+        });
+        return _.groupBy(capabilities, 'type');
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html
new file mode 100644
index 0000000000..0c9d9e6e26
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html
@@ -0,0 +1,8 @@
+<select-requirement-or-capability [optionalRequirementsMap]="optionalRequirementsMap"
+                                  [optionalCapabilitiesMap]="optionalCapabilitiesMap"
+                                  [selectedReqOrCapModel]="connectWizardService.selectedMatch && (connectWizardService.selectedMatch.isFromTo ? connectWizardService.selectedMatch.requirement : connectWizardService.selectedMatch.capability)"
+                                  [currentComponent]="connectWizardService.currentComponent"
+                                  [componentInstanceId]="connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId"
+                                  (updateSelectedReqOrCap)="updateSelectedReqOrCap($event)"
+                                  (updateCapabilityProperties)="onCapabilityPropertiesUpdate($event)">
+</select-requirement-or-capability>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts
new file mode 100644
index 0000000000..edbbf8a0a3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts
@@ -0,0 +1,49 @@
+import {Component, OnInit, Inject, forwardRef} from "@angular/core";
+import {IStepComponent} from "../../../../models/wizard-step";
+import {Dictionary} from "lodash";
+import { Match} from "app/models";
+import {ConnectionWizardService} from "../connection-wizard.service";
+import {Requirement} from "../../../../models/requirement";
+import {Capability} from "../../../../models/capability";
+import {PropertyModel} from "../../../../models/properties";
+
+@Component({
+    selector: 'from-node-step',
+    templateUrl: './from-node-step.component.html'
+})
+
+export class FromNodeStepComponent implements IStepComponent, OnInit{
+
+    constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) {}
+
+    optionalRequirementsMap: Dictionary<Requirement[]>;
+    optionalCapabilitiesMap: Dictionary<Capability[]>;
+
+    ngOnInit(){
+        this.optionalRequirementsMap = this.connectWizardService.getOptionalRequirementsByInstanceUniqueId(true);
+        this.optionalCapabilitiesMap = this.connectWizardService.getOptionalCapabilitiesByInstanceUniqueId(false);
+    }
+
+    preventNext = ():boolean => {
+        return !this.connectWizardService.selectedMatch || (!this.connectWizardService.selectedMatch.capability && !this.connectWizardService.selectedMatch.requirement);
+    }
+
+    preventBack = ():boolean => {
+        return true;
+    }
+
+    onCapabilityPropertiesUpdate(capabilityProperties:Array<PropertyModel>) {
+        this.connectWizardService.selectedMatch.capabilityProperties = capabilityProperties;
+    }
+
+    private updateSelectedReqOrCap = (selected:Requirement|Capability):void => {
+        if(!selected){
+            this.connectWizardService.selectedMatch = null;
+        } else if(selected instanceof Requirement){
+            this.connectWizardService.selectedMatch = new Match(<Requirement>selected, null, true, this.connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId, null);
+        } else{
+            this.connectWizardService.selectedMatch = new Match(null,<Capability>selected , false, null, this.connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId);
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html
new file mode 100644
index 0000000000..9e34893272
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html
@@ -0,0 +1,13 @@
+<div class="title">
+    <span class="capability-name">
+        {{(connectWizardService.selectedMatch.capability && connectWizardService.selectedMatch.capability.getTitle()) || connectWizardService.selectedMatch.relationship.relation.capability}}
+    </span>
+</div>
+<div class="properties-table-container">
+    <properties-table class="properties-table"
+                      (valueChanged)="propertyValueChanged($event)"
+                      [fePropertiesMap]="capabilityPropertiesMap"
+                      [selectedPropertyId]="''"
+                      [hidePropertyType]="true">
+    </properties-table>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less
new file mode 100644
index 0000000000..8e9e07c0d5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less
@@ -0,0 +1,15 @@
+@import '../../../../../assets/styles/variables';
+.title{
+  margin-bottom: 20px;
+  .capability-name-label{
+    font-size: 13px;
+  }
+  .capability-name{
+    font-family: @font-opensans-medium;
+    color: @main_color_a;
+  }
+}
+.properties-table-container{
+  height: 362px;
+  overflow-y: auto;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts
new file mode 100644
index 0000000000..3e48785a3c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts
@@ -0,0 +1,67 @@
+/**
+ * Created by ob0695 on 9/4/2017.
+ */
+/**
+ * Created by rc2122 on 9/4/2017.
+ */
+import {Component, Inject, forwardRef} from '@angular/core';
+import {IStepComponent} from "app/models"
+import {ConnectionWizardService} from "../connection-wizard.service";
+import {PropertyFEModel} from "../../../../models/properties-inputs/property-fe-model";
+import {InstanceFePropertiesMap} from "../../../../models/properties-inputs/property-fe-map";
+import {PropertiesUtils} from "../../properties-assignment/services/properties.utils";
+import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service";
+
+@Component({
+    selector: 'properties-step',
+    templateUrl: './properties-step.component.html',
+    styleUrls: ['./properties-step.component.less']
+})
+
+export class PropertiesStepComponent implements IStepComponent{
+
+    capabilityPropertiesMap: InstanceFePropertiesMap;
+    savingProperty:boolean = false;
+
+    constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService, private componentInstanceServiceNg2:ComponentInstanceServiceNg2, private propertiesUtils:PropertiesUtils) {
+
+        this.capabilityPropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({'capability' : connectWizardService.selectedMatch.capabilityProperties}, false);
+    }
+
+    ngOnInit() {
+        this.connectWizardService.changedCapabilityProperties = [];
+    }
+
+    onPropertySelectedUpdate = ($event) => {
+        console.log("==>" + 'PROPERTY VALUE SELECTED');
+        // this.selectedFlatProperty = $event;
+        // let parentProperty:PropertyFEModel = this.propertiesService.getParentPropertyFEModelFromPath(this.instanceFePropertiesMap[this.selectedFlatProperty.instanceName], this.selectedFlatProperty.path);
+        // parentProperty.expandedChildPropertyId = this.selectedFlatProperty.path;
+    };
+
+    propertyValueChanged = (property: PropertyFEModel) => {
+        if (!property.isDeclared) {
+            const propChangedIdx = this.connectWizardService.changedCapabilityProperties.indexOf(property);
+            if (this.componentInstanceServiceNg2.hasPropertyChanged(property)) {
+                console.log("==>" + this.constructor.name + ": propertyValueChanged " + property);
+                if (propChangedIdx === -1) {
+                    this.connectWizardService.changedCapabilityProperties.push(property);
+                }
+            }
+            else {
+                if (propChangedIdx !== -1) {
+                    console.log("==>" + this.constructor.name + ": propertyValueChanged (reset to original) " + property);
+                    this.connectWizardService.changedCapabilityProperties.splice(propChangedIdx, 1);
+                }
+            }
+        }
+    };
+
+    preventNext = ():boolean => {
+        return false;
+    }
+
+    preventBack = ():boolean => {
+        return this.savingProperty;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html
new file mode 100644
index 0000000000..67bb12e6fc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html
@@ -0,0 +1,9 @@
+<select-requirement-or-capability [optionalRequirementsMap]="optionalRequirementsMap"
+                                  [optionalCapabilitiesMap]="optionalCapabilitiesMap"
+                                  [selectedReqOrCapModel]="connectWizardService.selectedMatch.isFromTo ? connectWizardService.selectedMatch.capability : connectWizardService.selectedMatch.requirement"
+                                  [selectedReqOrCapOption]="displayRequirementsOrCapabilities"
+                                  [currentComponent]="connectWizardService.currentComponent"
+                                  [componentInstanceId]="connectWizardService.connectRelationModel.toNode.componentInstance.uniqueId"
+                                  (updateSelectedReqOrCap)="updateSelectedReqOrCap($event)"
+                                  (updateCapabilityProperties)="onCapabilityPropertiesUpdate($event)">
+</select-requirement-or-capability>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts
new file mode 100644
index 0000000000..9c7bf4dfe6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts
@@ -0,0 +1,69 @@
+import {Component, forwardRef, Inject} from '@angular/core';
+import {IStepComponent} from "app/models"
+import {Dictionary} from "lodash";
+import {ConnectionWizardService} from "../connection-wizard.service";
+import {Match} from "../../../../models/graph/match-relation";
+import {Requirement} from "../../../../models/requirement";
+import {Capability} from "../../../../models/capability";
+import {PropertyModel} from "../../../../models/properties";
+
+@Component({
+    selector: 'to-node-step',
+    templateUrl: './to-node-step.component.html'
+})
+
+export class ToNodeStepComponent implements IStepComponent{
+
+    displayRequirementsOrCapabilities:string; //get 'Requirement' or 'Capability'
+    optionalRequirementsMap: Dictionary<Requirement[]> = {};
+    optionalCapabilitiesMap: Dictionary<Capability[]> ={};
+
+    constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) {
+    }
+
+    ngOnInit(){
+        if(this.connectWizardService.selectedMatch.isFromTo){
+            this.displayRequirementsOrCapabilities = 'Capability';
+            this.optionalRequirementsMap = {};
+            this.optionalCapabilitiesMap = this.connectWizardService.getOptionalCapabilitiesByInstanceUniqueId(true, this.connectWizardService.selectedMatch.requirement);
+        }else{
+            this.displayRequirementsOrCapabilities = 'Requirement';
+            this.optionalRequirementsMap = this.connectWizardService.getOptionalRequirementsByInstanceUniqueId(false, this.connectWizardService.selectedMatch.capability);
+            this.optionalCapabilitiesMap = {}
+        }
+
+
+    }
+
+    preventNext = ():boolean => {
+        return !this.connectWizardService.selectedMatch.capability || !this.connectWizardService.selectedMatch.requirement;
+    }
+
+    preventBack = ():boolean => {
+        return false;
+    }
+
+    onCapabilityPropertiesUpdate(capabilityProperties:Array<PropertyModel>) {
+        this.connectWizardService.selectedMatch.capabilityProperties = capabilityProperties;
+    }
+
+    private updateSelectedReqOrCap = (selected:Requirement|Capability):void => {
+        if (!selected) {
+            if (this.connectWizardService.selectedMatch.isFromTo) {
+                this.connectWizardService.selectedMatch.capability = undefined;
+                this.connectWizardService.selectedMatch.toNode = undefined;
+            } else {
+                this.connectWizardService.selectedMatch.requirement = undefined;
+                this.connectWizardService.selectedMatch.fromNode = undefined;
+            }
+        } else if (selected instanceof Requirement) {
+            this.connectWizardService.selectedMatch.requirement = <Requirement>selected;
+            this.connectWizardService.selectedMatch.fromNode = this.connectWizardService.connectRelationModel.toNode.componentInstance.uniqueId;
+        } else {
+            this.connectWizardService.selectedMatch.capability = <Capability>selected;
+            this.connectWizardService.selectedMatch.toNode = this.connectWizardService.connectRelationModel.toNode.componentInstance.uniqueId;
+        }
+        this.connectWizardService.selectedMatch.relationship = undefined;
+    }
+
+}