[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

5 files changed, 257 insertions, 0 deletions

diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/capabilities-requirements-list.less b/catalog-ui/src/app/directives/capabilities-and-requirements/capabilities-requirements-list.less
new file mode 100644
index 0000000000..0860261b97
--- /dev/null
+++ b/catalog-ui/src/app/directives/capabilities-and-requirements/capabilities-requirements-list.less
@@ -0,0 +1,113 @@
+.i-sdc-designer-sidebar-capabilities-requirements {
+
+        .b_7;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &.description {
+            margin-top: 28px;
+            white-space: normal;
+            word-wrap: break-word;
+        }
+
+    .i-sdc-designer-sidebar-section-content-item-relations {
+        border-bottom: 1px solid @color_e;
+        padding: 10px 10px 10px 18px;
+        position: relative;
+        cursor: default;
+
+        .i-sdc-designer-sidebar-section-content-item-button {
+            top: 15px;
+            line-height: 10px;
+        }
+
+        &:hover {
+            background-color: @color_c;
+
+            .i-sdc-designer-sidebar-section-content-item-button {
+                display: block;
+
+            }
+        }
+    }
+
+    .w-sdc-designer-sidebar-section-relations:not(:last-child) .i-sdc-designer-sidebar-section-content-item-relations-group:last-child .i-sdc-designer-sidebar-section-content-item-relations:last-child {
+        border-bottom: none;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations.hand {
+        .hand;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-group {
+        //border-bottom: 1px solid @color_e;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-details {
+        display: inline-block;
+        margin-left: 5px;
+        vertical-align: middle;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-details-name {
+        .b_1;
+        .bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        //width: 100%;
+        text-transform: capitalize;
+        max-width: 240px;
+        display: inline-block;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-details-ownerName {
+        .b_13;
+        font-weight: 400;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:before {
+            .sprite;
+            .arrow-left;
+            content: '';
+        }
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-details-desc {
+        .p_1;
+        line-height: 14px;
+        word-wrap: break-word;
+        white-space: normal;
+        max-width: 265px;
+
+        .i-sdc-designer-sidebar-section-content-item-relations-details-indent-box {
+            border-left: 1px #848586 solid;
+            height: 40px;
+            margin-left: 2px;
+            margin-top: 5px;
+            border-bottom: 1px #848586 solid;
+            width: 25px;
+            float: left;
+        }
+        .i-sdc-designer-sidebar-section-content-item-relations-details-child {
+            margin-top: 30px;
+            float: left;
+            padding-left: 10px;
+            max-width: 230px;
+        }
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-details-desc-label {
+        font-family: omnes-medium, sans-serif;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-relations-view {
+        position: absolute;
+        right: 0;
+        top: 22px;
+        display: none;
+    }
+}
diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-directive.ts b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-directive.ts
new file mode 100644
index 0000000000..e71478fa4d
--- /dev/null
+++ b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-directive.ts
@@ -0,0 +1,40 @@
+/**
+ * Created by ob0695 on 5/9/2017.
+ */
+/**
+ * Created by obarda on 1/8/2017.
+ */
+'use strict';
+import {CapabilitiesGroup} from "app/models";
+
+export interface ICapabilitiesListScope extends ng.IScope {
+    capabilities:CapabilitiesGroup;
+}
+
+
+export class CapabilitiesListDirective implements ng.IDirective {
+
+    constructor() {
+
+    }
+
+    scope = {
+        capabilities: '=',
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./capabilities-list-view.html');
+    };
+
+    link = (scope:ICapabilitiesListScope, element:any, $attr:any) => {
+
+    };
+
+    public static factory = ()=> {
+        return new CapabilitiesListDirective();
+    };
+}
+
+CapabilitiesListDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-view.html b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-view.html
new file mode 100644
index 0000000000..c86a6df785
--- /dev/null
+++ b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-view.html
@@ -0,0 +1,14 @@
+<div class="i-sdc-designer-sidebar-capabilities-requirements">
+    <div class="i-sdc-designer-sidebar-section-content-item-relations-group">
+        <div class="i-sdc-designer-sidebar-section-content-item-relations"
+             data-ng-repeat="capability in capabilities track by $index">
+            <div class="i-sdc-designer-sidebar-section-content-item-relations-details">
+                <div class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{capability.name}}&nbsp;</div>
+                <div class="i-sdc-designer-sidebar-section-content-item-relations-details-desc" sdc-smart-tooltip>
+                    {{capability.type}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts
new file mode 100644
index 0000000000..9863b5d271
--- /dev/null
+++ b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts
@@ -0,0 +1,71 @@
+/**
+ * Created by ob0695 on 5/9/2017.
+ */
+/**
+ * Created by ob0695 on 5/9/2017.
+ */
+/**
+ * Created by obarda on 1/8/2017.
+ */
+'use strict';
+import {RequirementsGroup, Component} from "app/models";
+
+export interface IRequirementsListScope extends ng.IScope {
+
+    requirements:RequirementsGroup;
+    currentComponent: Component;
+}
+
+
+export class RequirementsListDirective implements ng.IDirective {
+
+    constructor(private $filter: ng.IFilterService) {
+
+    }
+
+    scope = {
+        requirements: '=',
+        component: '='
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./requirements-list-view.html');
+    };
+
+    link = (scope:IRequirementsListScope) => {
+
+        scope.isInstanceSelected = () : boolean => {
+            return  scope.component && scope.component.selectedInstance != undefined && scope.component.selectedInstance != null;
+        }
+
+        scope.getRelation = (requirement:any):any => {
+            if (scope.isInstanceSelected() && scope.component.componentInstancesRelations) {
+                let relationItem = _.filter(scope.component.componentInstancesRelations, (relation:any) => {
+                    return relation.fromNode === scope.component.selectedInstance.uniqueId &&
+                        _.some(relation.relationships, {
+                            'requirement': requirement.name,
+                            'requirementOwnerId': requirement.ownerId
+                        });
+                });
+
+                if (relationItem && relationItem.length) {
+                    return {
+                        type: requirement.relationship.split('.').pop(),
+                        requirementName: this.$filter('resourceName')(scope.component.componentInstances[_.map
+                        (scope.component.componentInstances, "uniqueId").indexOf(relationItem[0].toNode)].name)
+                    };
+                }
+            }
+            return null;
+        };
+
+    };
+
+    public static factory = ($filter: ng.IFilterService)=> {
+        return new RequirementsListDirective($filter);
+    };
+}
+
+RequirementsListDirective.factory.$inject = ['$filter'];
diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-view.html b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-view.html
new file mode 100644
index 0000000000..a6487fe72a
--- /dev/null
+++ b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-view.html
@@ -0,0 +1,19 @@
+<div class="i-sdc-designer-sidebar-capabilities-requirements">
+    <div class="i-sdc-designer-sidebar-section-content-item-relations-group">
+        <div class="i-sdc-designer-sidebar-section-content-item-relations"
+             data-ng-repeat="requirement in requirements track by $index">
+            <div class="i-sdc-designer-sidebar-section-content-item-relations-details">
+                <div class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{requirement.name}}&nbsp;</div>
+                <div class="i-sdc-designer-sidebar-section-content-item-relations-details-desc">{{requirement.node}}
+                    <div data-ng-if="getRelation(requirement) != null">
+                        <div class="i-sdc-designer-sidebar-section-content-item-relations-details-indent-box"></div>
+                        <div class="i-sdc-designer-sidebar-section-content-item-relations-details-child">
+                            <span class="i-sdc-designer-sidebar-section-content-item-relations-details-desc">{{getRelation(requirement).type}} <br/></span>
+                            <span class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{getRelation(requirement).requirementName}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>