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
  96     </div>
  97     </content>
  98 </ng2-expand-collapse>
  99
 100 <ng2-expand-collapse state="0">
 101     <header sdc-tooltip tooltip-text="Occurrences">OCCURRENCES</header>
 102     <content>
 103     <div class="w-sdc-designer-sidebar-section">
 104        <div *ngIf="isUnboundedChecked != null">
 105         <ng-container>
 106             <sdc-accordion [title]="component.name + ' Occurrences'" [arrow-direction]="'right'" [testId]="'Occurrences'" [css-class]="'occurrences-accordion'">
 107                 <div class="i-sdc-designer-sidebar-section-content-item">
 108                     <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
 109                         <checkbox [(checked)]="isOccurrencesEnabled" (change)="enableOccurrences()" [disabled]="isViewOnly"></checkbox>
 110                         <div>
 111                         <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
 112                               [ngClass]="{'hand enabled': !isViewOnly}">Enable Occurrences</span>
 113                         </div>
 114                     </div>
 115                     <div *ngIf="isOccurrencesEnabled" class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
 116                         <div class="sdc-input">
 117                             <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label">Min Occurrences</span>
 118                             <div class="min-occurrences-value">
 119                                 <sdc-input
 120                                     label=""
 121                                     testId="reqOccurrencesMin"
 122                                     [disabled]="isViewOnly"
 123                                     [(value)]="component.minOccurrences"
 124                                     type="number">
 125                                 </sdc-input>
 126                             </div>
 127                         </div>
 128                     </div>
 129                     <div *ngIf="isOccurrencesEnabled" class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
 130                         <div class="sdc-input">
 131                             <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label">Max Occurrences</span>
 132                             <div class="max-occurrences-value">
 133                                 <sdc-checkbox
 134                                         class="checkbox-label unbounded-value"
 135                                         testId="reqOccurrencesMaxUnbounded"
 136                                         label="Unbounded"
 137                                         (checkedChange)="onUnboundedChanged(component)"
 138                                         [checked]="isUnboundedChecked"
 139                                         [disabled]="isViewOnly">
 140                                 </sdc-checkbox>
 141                                 <sdc-input
 142                                         *ngIf="!isUnboundedChecked"
 143                                         testId="reqOccurrencesMax"
 144                                         [disabled]="isViewOnly"
 145                                         [(value)]="component.maxOccurrences"
 146                                         type="number">
 147                                 </sdc-input>
 148                             </div>
 149                         </div>
 150                     </div>
 151                     <div *ngIf="!isViewOnly && isOccurrencesEnabled" class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
 152                         <button class="tlv-btn blue" (click)="saveOccurrences()" [disabled]="!isOccurrencesFormValid(component)">Save</button>
 153                     </div>
 154                 </div>
 155                 </sdc-accordion>
 156         </ng-container>
 157         </div>
 158     </div>
 159     </content>
 160 </ng2-expand-collapse>