catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15 -->
  16
  17 <perfect-scrollbar class="w-sdc-designer-sidebar-tab-content properties" id="main-scroll">
  18
  19     <div class="w-sdc-designer-sidebar-section">
  20
  21         <!--expand-collapse data-ng-if="isPropertyOwner() && !currentComponent.properties.length" expanded-selector=".w-sdc-composition-sidebar-section-content.{{currentComponent.name}}"
  22                          class="w-sdc-composition-sidebar-section-title">
  23             <span class="w-sdc-composition-sidebar-section-title-text" tooltips tooltip-content="{{currentComponent.name | resourceName}}&nbsp;Properties"
  24                 data-ng-bind="(currentComponent.name | resourceName)+ ' Properties'"></span>
  25             <div class="w-sdc-composition-sidebar-section-title-icon"></div>
  26         </expand-collapse-->
  27         <!--properties-->
  28         <expand-collapse data-ng-repeat-start="(key, group) in properties"
  29                          expanded-selector=".w-sdc-designer-sidebar-section-content.properties.{{$index}}">
  30             <div class="first-level">
  31                 <div class="expand-collapse-title-icon"></div>
  32                 <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="groupNameByKey(key) + ' Properties'"
  33                       tooltips tooltip-content="{{groupNameByKey(key)}}&nbsp;Properties"
  34                       data-tests-id="vfi-properties"></span>
  35             </div>
  36         </expand-collapse>
  37
  38         <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content properties {{$index}}"> <!--data-ng-show="isShowDetailsSection" -->
  39             <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="!groupPropertiesByInstance">
  40                 <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" data-tests-id="propertyRow"
  41                      data-ng-repeat="property in group | orderBy: 'name' track by $index">
  42                     <div>
  43                         <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
  44                               data-ng-class="{'hand enabled': !$parent.isViewOnly}"
  45                               tooltips tooltip-content="{{property.name}}"
  46                               data-ng-click="!$parent.isViewOnly && updateProperty(property)"
  47                               data-tests-id="{{property.name}}">{{property.name}}</span>
  48                     </div>
  49                     <div>
  50                         <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="isPropertyOwner()"
  51                               tooltips tooltip-content="{{property.defaultValue}}">{{property.defaultValue}}</span>
  52                         <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="!isPropertyOwner()"
  53                               tooltips tooltip-content="{{property.value}}"
  54                               data-tests-id="value_{{property.name}}">{{property.value}}</span>
  55                     </div>
  56                     <button class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete"
  57                             data-ng-if="!$parent.isViewOnly&&(isPropertyOwner() && !property.readonly)"
  58                             data-ng-click="deleteProperty(property)" type="button"></button>
  59                 </div>
  60             </div>
  61             <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="groupPropertiesByInstance">
  62                 <div data-ng-repeat-start="(instancesIds , InstanceProperties) in (group | groupBy:'path')"
  63                      class="vfci-properties-group"
  64                      data-ng-click="showGroupsOfInstanceProperties[$index]=!showGroupsOfInstanceProperties[$index]"
  65                 data-ng-class="{'expanded':showGroupsOfInstanceProperties[$index]}">
  66                     <div class="second-level">
  67                         <div class="expand-collapse-title-icon"></div>
  68                         <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="getComponentInstanceNameFromInstanceByKey(InstanceProperties[0].path[1]) + ' Properties'"
  69                               tooltips tooltip-content="{{getComponentInstanceNameFromInstanceByKey(InstanceProperties[0].path[1])}}&nbsp;Properties"
  70                               data-tests-id="vfci-properties"></span>
  71                     </div>
  72                 </div>
  73                 <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content instance-properties {{$index}}" data-ng-if="showGroupsOfInstanceProperties[$index]">
  74                     <div class="i-sdc-designer-sidebar-section-content-item">
  75                         <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" data-tests-id="propertyRow"
  76                              data-ng-repeat="instanceProperty in InstanceProperties | orderBy: 'name'">
  77                             <div>
  78                                 <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
  79                                       data-ng-class="{'hand enabled': !$parent.isViewOnly}"
  80                                       tooltips tooltip-content="{{instanceProperty.name}}"
  81                                       data-tests-id="vfci-property">{{instanceProperty.name}}</span>
  82                             </div>
  83                             <div>
  84                                 <span class="i-sdc-designer-sidebar-section-content-item-property-value"
  85                                       tooltips tooltip-content="{{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}">
  86                                     {{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}</span>
  87                             </div>
  88                         </div>
  89                     </div>
  90                 </div>
  91             </div>
  92             <!--<div  class="w-sdc-designer-sidebar-section-footer" data-ng-if="(!$parent.isViewOnly && isPropertyOwner()) || showAddPropertyButton">-->
  93                 <!--<button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" data-tests-id="addGrey" data-ng-click="addProperty()" type="button">-->
  94                     <!--Add Property-->
  95                 <!--</button>-->
  96             <!--</div>-->
  97         </div>
  98
  99
 100         <!--attributes-->
 101         <expand-collapse data-ng-repeat-start="(key, group) in attributes"
 102                          expanded-selector=".w-sdc-designer-sidebar-section-content.attributes.{{$index}}">
 103             <div class="first-level">
 104                 <div class="expand-collapse-title-icon"></div>
 105                 <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="groupNameByKey(key) + ' Attributes'"
 106                       tooltips tooltip-content="{{groupNameByKey(key)}}&nbsp;Attributes"></span>
 107             </div>
 108         </expand-collapse>
 109
 110         <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content attributes {{$index}}"> <!--data-ng-show="isShowDetailsSection" -->
 111             <div class="i-sdc-designer-sidebar-section-content-item">
 112                 <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute"
 113                      data-ng-repeat="attribute in group | orderBy: 'name' track by $index">
 114                     <div>
 115                         <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
 116                               data-ng-class="{'hand enabled': !$parent.isViewOnly}"
 117                               tooltips tooltip-content="{{attribute.name}}"
 118                               data-ng-click="!$parent.isViewOnly && viewAttribute(attribute)"
 119                               data-tests-id="{{attribute.name}}-attr">{{attribute.name}}</span>
 120                     </div>
 121                     <div>
 122                         <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="isPropertyOwner()"
 123                               tooltips tooltip-content="{{attribute.defaultValue}}">{{attribute.defaultValue}}</span>
 124                         <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="!isPropertyOwner()"
 125                               tooltips tooltip-content="{{attribute.value}}" data-tests-id="value-of-{{attribute.name}}">{{attribute.value}}</span>
 126                     </div>
 127                 </div>
 128             </div>
 129
 130         </div>
 131
 132     </div>
 133 </perfect-scrollbar>