diff options
Diffstat (limited to 'catalog-ui/src/app/directives/capabilities-and-requirements')
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}} </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}} </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> |