catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html

   1 <ng2-expand-collapse state="0">
   2     <header sdc-tooltip tooltip-text="{{input.title}}">{{input.title}}</header>
   3     <content>
   4     <div class="w-sdc-designer-sidebar-section">
   5         <div *ngIf="properties">
   6         <ng-container *ngFor="let key of objectKeys(properties); let idx = index">
   7             <sdc-accordion [title]="groupNameByKey(key) + ' Properties'" [css-class]="'properties-accordion'" [arrow-direction]="'right'" [testId]="groupNameByKey(key) + 'properties'" [open]="true">
   8
   9                 <!--ng-show="isShowDetailsSection" -->
  10                 <div class="i-sdc-designer-sidebar-section-content-item" *ngIf="!groupPropertiesByInstance">
  11                     <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" attr.data-tests-id="propertyRow"
  12                             *ngFor="let property of properties[key]">
  13
  14                         <div class="property-details">
  15                             <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
  16                                     [ngClass]="{'hand enabled': !isViewOnly}"
  17                                     sdc-tooltip tooltip-text="{{property.name}}"
  18                                     (click)="!isViewOnly && updateProperty(property)"
  19                                     attr.data-tests-id="{{property.name}}">{{property.name}}</span>
  20                             <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="isPropertyOwner()"
  21                                     sdc-tooltip tooltip-text="{{property.defaultValue}}">{{property.defaultValue}}</span>
  22                             <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="!isPropertyOwner()"
  23                                     sdc-tooltip tooltip-text="{{property.value}}"
  24                                     attr.data-tests-id="value_{{property.name}}">{{property.value}}</span>
  25                         </div>
  26                         <div class="property-buttons">
  27                             <svg-icon *ngIf="!isViewOnly && (isPropertyOwner() && !property.readonly)" name="trash-o" clickable="true" size="medium" mode="info" testId="delete_{{property.name}}" (click)="deleteProperty(property)"></svg-icon>
  28                         </div>
  29                     </div>
  30                 </div>
  31                 <div class="i-sdc-designer-sidebar-section-content-item" *ngIf="groupPropertiesByInstance">
  32                     <ng-container *ngFor="let InstanceProperties of properties[key]; let propIndex = index">
  33                         <div class="vfci-properties-group">
  34                             <div class="second-level">
  35                                 <div class="expand-collapse-title-icon"></div>
  36                                 <span class="w-sdc-designer-sidebar-section-title-text" sdc-tooltip tooltip-text="{{getComponentInstanceNameFromInstanceByKey(InstanceProperties.key)}}&nbsp;Properties"
  37                                         attr.data-tests-id="vfci-properties">{{getComponentInstanceNameFromInstanceByKey(InstanceProperties.key) + ' Properties'}}</span>
  38                             </div>
  39                         </div>
  40                         <div  class="w-sdc-designer-sidebar-section-content instance-properties {{propIndex}}">
  41                             <div class="i-sdc-designer-sidebar-section-content-item">
  42                                 <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" attr.data-tests-id="propertyRow"
  43                                         *ngFor="let instanceProperty of InstanceProperties.value">
  44                                     <div>
  45                                         <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
  46                                                 [ngClass]="{'hand enabled': !isViewOnly}"
  47                                                 sdc-tooltip tooltip-text="{{instanceProperty.name}}"
  48                                                 attr.data-tests-id="vfci-property">{{instanceProperty.name}}</span>
  49                                     </div>
  50                                     <div>
  51                                         <span class="i-sdc-designer-sidebar-section-content-item-property-value"
  52                                                 sdc-tooltip tooltip-text="{{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}">
  53                                             {{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}</span>
  54                                     </div>
  55                                 </div>
  56                             </div>
  57                         </div>
  58                     </ng-container>
  59                 </div>
  60                 <!--<div  class="w-sdc-designer-sidebar-section-footer" *ngIf="(!isViewOnly && isPropertyOwner()) || showAddPropertyButton">-->
  61                     <!--<button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" attr.data-tests-id="addGrey" (click)="addProperty()" type="button">-->
  62                         <!--Add Property-->
  63                     <!--</button>-->
  64                 <!--</div>-->
  65             </sdc-accordion>
  66         </ng-container>
  67         </div>
  68
  69         <!--attributes-->
  70         <div *ngIf="attributes">
  71         <ng-container *ngFor="let key of objectKeys(attributes); let attrIndex = index">
  72             <sdc-accordion [title]="groupNameByKey(key) + ' Attributes'" [arrow-direction]="'right'" [testId]="groupNameByKey(key) + 'attributes'" [css-class]="'attributes-accordion'">
  73                 <!--ng-show="isShowDetailsSection" -->
  74                     <div class="i-sdc-designer-sidebar-section-content-item">
  75                         <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute"
  76                                 *ngFor="let attribute of attributes[key]">
  77                             <div>
  78                                 <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
  79                                         [ngClass]="{'hand enabled': !isViewOnly}"
  80                                         sdc-tooltip tooltip-text="{{attribute.name}}"
  81                                         (click)="!isViewOnly && viewAttribute(attribute)"
  82                                         attr.data-tests-id="{{attribute.name}}-attr">{{attribute.name}}</span>
  83                             </div>
  84                             <div>
  85                                 <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="isPropertyOwner()"
  86                                         sdc-tooltip tooltip-text="{{attribute.defaultValue}}">{{attribute.defaultValue}}</span>
  87                                 <span class="i-sdc-designer-sidebar-section-content-item-property-value" *ngIf="!isPropertyOwner()"
  88                                         sdc-tooltip tooltip-text="{{attribute.value}}" attr.data-tests-id="value-of-{{attribute.name}}">{{attribute.value}}</span>
  89                             </div>
  90                         </div>
  91                     </div>
  92             </sdc-accordion>
  93         </ng-container>
  94         </div>
  95     </div>
  96     </content>
  97 </ng2-expand-collapse>