diff options
Diffstat (limited to 'catalog-ui/app/scripts/view-models/tabs')
4 files changed, 358 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/tabs/general-tab.less b/catalog-ui/app/scripts/view-models/tabs/general-tab.less new file mode 100644 index 0000000000..a8b4f5b9be --- /dev/null +++ b/catalog-ui/app/scripts/view-models/tabs/general-tab.less @@ -0,0 +1,131 @@ +.sdc-general-tab { + + display: flex; + min-height: 100%; + flex-flow: column; + + .sdc-edit-icon { + .sprite; + .e-sdc-small-icon-pencil; + } + .sdc-general-tab-title { + + .f-color.a; + .f-type._14_m; + padding: 0px 0px 15px 0px; + margin: 0px 20px 0px 20px; + border-bottom: 1px solid @main_color_o; + } + + .sdc-general-tab-sub-title { + + .f-color.a; + .f-type._14_m; + padding: 15px 20px 15px 20px; + + } + + //scrollbar + .general-tab-scrollbar-container { + + .perfect-scrollbar; + width: 100%; + } + + //plus minus expand collapse + .general-tab-expand-collapse { + + &.expanded { + .expand-collapse-title { + .expand-collapse-title-icon { + .expand-collapse-minus-icon; + + &:hover { + .expand-collapse-minus-icon.hover; + } + } + } + } + + .expand-collapse-title { + + padding: 8px 20px 4px 20px; + cursor: pointer; + &:hover { + background-color: @main_color_o; + } + + .expand-collapse-title-icon { + .hand; + .sprite-new; + .expand-collapse-plus-icon; + &:hover { + .expand-collapse-plus-icon.hover; + } + + } + .expand-collapse-title-text { + max-width: 225px; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-left: 10px; + line-height: 15px; + } + } + .selected { + background-color: @main_color_a; + .f-color.p; + } + + } + + .expand-collapse-sub-title { + max-width: 190px; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-left: 43px; + + } + + //resizable view + .resizable-container { + + flex: 1 1 auto; + display: flex; + flex-direction: column; + height: 90%; + + .resizable-section { + min-height: 50px; + flex: 1; + display: flex; + flex-flow: column; + &.resizable { + flex: 0 0 300px; + } + } + + //this is the resizable icon custom design for the angular resizable directive + .rg-top { + span { + margin-top: -5px; + &:before { + border-top: 1px dotted @main_color_m; + content: ''; + display: inline-block; + width: 39px; + height: 6px; + } + + border-top: 1px dotted @main_color_m; + border-bottom: 1px dotted @main_color_m; + width: 39px; + height: 4px; + } + } + } +} diff --git a/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy-view-model.ts b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy-view-model.ts new file mode 100644 index 0000000000..bd59199eb4 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy-view-model.ts @@ -0,0 +1,99 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/** + * Created by obarda on 7/28/2016. + */ +/** + * Created by obarda on 4/4/2016. + */ +/// <reference path="../../../references"/> +module Sdc.ViewModels { + 'use strict'; + import Module = Sdc.Models.Module; + + export interface IHierarchyScope extends ng.IScope { + component:Models.Components.Component; + selectedIndex: number; + selectedModule:Models.DisplayModule; + singleTab:Models.Tab; + templateUrl:string; + isLoading:boolean; + + onModuleSelected(moduleId:string, selectedIndex: number):void; + onModuleNameChanged(module:Models.DisplayModule):void; + updateHeatName():void; + } + + export class HierarchyViewModel { + + static '$inject' = [ + '$scope' + ]; + + constructor(private $scope:IHierarchyScope) { + this.$scope.component = this.$scope.singleTab.data; + this.$scope.isLoading = false; + this.initScopeMethods(); + } + + private initScopeMethods():void { + + this.$scope.templateUrl = '/app/scripts/view-models/tabs/hierarchy/edit-module-name-popover.html'; + this.$scope.onModuleSelected = (moduleId:string, selectedIndex: number):void => { + + let onSuccess = (module:Models.DisplayModule) => { + console.log("Module Loaded: ", module); + this.$scope.selectedModule = module; + this.$scope.isLoading = false; + }; + + let onFailed = () => { + this.$scope.isLoading = false; + }; + + this.$scope.selectedIndex = selectedIndex; + if( !this.$scope.selectedModule || (this.$scope.selectedModule && this.$scope.selectedModule.uniqueId != moduleId)) { + this.$scope.isLoading = true; + this.$scope.component.getModuleForDisplay(moduleId).then(onSuccess, onFailed); + } + }; + + this.$scope.updateHeatName = () => { + this.$scope.isLoading = true; + + let originalName:string = this.$scope.selectedModule.name; + + let onSuccess = (module:Models.Module) => { + console.log("Module name updated:", module.name); + this.$scope.selectedModule.name = module.name; + this.$scope.isLoading = false; + }; + + let onFailed = () => { + this.$scope.isLoading = false; + this.$scope.selectedModule.name = originalName; + }; + + this.$scope.selectedModule.updateName(); + this.$scope.component.updateGroupMetadata(new Models.DisplayModule(this.$scope.selectedModule)).then(onSuccess, onFailed); + }; + } + } +} diff --git a/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy-view.html b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy-view.html new file mode 100644 index 0000000000..971105c191 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy-view.html @@ -0,0 +1,57 @@ +<div class="sdc-general-tab hierarchy-tab" ng-class=""> + <loader data-display="isLoading" relative="true" size="medium"></loader> + <div class="sdc-general-tab-title" data-tests-id="tab-header" translate="HIERARCHY_TAB_TITLE"></div> + <div class="sdc-general-tab-sub-title" data-tests-id="tab-sub-header">{{component.name}}</div> + + <div class="resizable-container"> + <div class="resizable-section"> + <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" + class="general-tab-scrollbar-container"> + + <expand-collapse expanded-selector=".hierarchy-module-member-list.{{$index}}" + class="general-tab-expand-collapse" is-close-on-init="true" + data-tests-id="hierarchy-module-{{$index}}" + data-ng-repeat-start="module in component.groups"> + <div class="expand-collapse-title" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index}" data-ng-click="onModuleSelected(module.uniqueId, $index)"> + <div class="expand-collapse-title-icon"></div> + <span class="expand-collapse-title-text" data-ng-bind="module.name" tooltips + tooltip-content="{{module.name}}"></span> + + </div> + </expand-collapse> + + <div data-ng-repeat-end="" class="hierarchy-module-member-list {{$index}}"> + <div ng-repeat="(memberName, value) in ::module.members track by $index"> + <div class="expand-collapse-sub-title" tooltips tooltip-content="{{memberName}}">{{memberName}}</div> + </div> + </div> + </perfect-scrollbar> + </div> + + <div resizable r-directions="['top']" r-flex="true" ng-if="selectedModule" class="resizable-section module-data-container" data-tests-id="selected-module-data"> + <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" + class="general-tab-scrollbar-container"> + <div class="module-data"> + <div> + <div class="module-name module-text-overflow" data-tests-id="selected-module-name" tooltips tooltip-content="{{selectedModule.name}}">{{selectedModule.name}}</div> + <div class="edit-name-container"> + <edit-name-popover header="Edit Module Name" direction="auto top" module="selectedModule" on-save="updateHeatName()" ng-class="{'disabled': isViewOnly}" class="sdc-edit-icon" data-tests-id="edit-name-popover-icon"></edit-name-popover> + </div> + </div> + <div class="module-text-overflow" data-tests-id="selected-module-group-uuid" tooltips tooltip-content="{{selectedModule.groupUUID}}"> Module ID: {{selectedModule.groupUUID}}</div> + <div class="module-text-overflow" data-tests-id="selected-module-is-base" tooltips tooltip-content="{{selectedModule.invariantUUID}}">Invariant UUID: {{selectedModule.invariantUUID}}</div> + <div data-tests-id="selected-module-version">Version: {{selectedModule.version}}</div> + <div data-tests-id="selected-module-is-base">IsBase: {{selectedModule.isBase}}</div> + + </div> + <div ng-repeat="artifact in selectedModule.artifacts track by $index"> + <div class="artifact-data"> + <div class="artifact-name module-text-overflow" data-tests-id="selected-module-artifact-name" tooltips tooltip-content="{{artifact.artifactName}}">{{artifact.artifactName}}</div> + <div class="module-text-overflow" tooltips data-tests-id="selected-module-artifact-uuid" tooltip-content="{{artifact.artifactUUID}}"> UUID: {{artifact.artifactUUID}}</div> + <div data-tests-id="selected-module-artifact-version">Version: {{artifact.artifactVersion}}</div> + </div> + </div> + </perfect-scrollbar> + </div> + </div> +</div> diff --git a/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy.less b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy.less new file mode 100644 index 0000000000..5e8572678d --- /dev/null +++ b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy.less @@ -0,0 +1,71 @@ +.hierarchy-tab{ + + .hierarchy-module-list-container{ + padding: 0px 20px 0px 20px; + } + .module-data-container{ + + width: 100%; + height: 100%; + background-color: #e6f6fb; + border: 1px solid #009fdb; + border-top: 4px solid #009fdb; + box-shadow: 0.3px 1px 2px rgba(24, 24, 25, 0.32); + + .module-data { + + .selectable; + .module-name { + .f-type._14_m; + width: 87%; + } + .f-type._14_r; + .f-color.a; + padding: 10px 0px 10px 0px; + margin: 0px 20px 0px 20px; + border-bottom: 1px solid rgba(0, 159, 219, 0.6); + } + + .artifact-data{ + .selectable; + .f-type._12_r; + .f-color.m; + + padding: 10px 0px 10px 0px; + margin: 0px 20px 0px 20px; + border-bottom: 1px solid rgba(0, 159, 219, 0.6); + .artifact-name { + .f-type._14_r; + font-weight: bold; + } + } + + .module-text-overflow { + max-width: 240px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; + } + } + + + .hierarchy-module-member-list { + overflow: hidden; + } + + .edit-name-container { + float: right; + border-left: 1px solid #5cc1e7; + height: 20px; + width: 12%; + + .sdc-edit-icon { + float: right; + cursor: pointer; + position: relative; + top: 4px; + right: 5px; + } + } +} |