catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html

   1 <div class="main-container">
   2     <span class="select-req-or-cap-span">Select:</span><radio-buttons
   3         [(value)]="selectedReqOrCapOption"
   4         [options]="selectOptions"
   5         [readonly]="disabledSelectReqOrCapOption"
   6         [direction]="'horizontal'"
   7         (valueChange)="onSelectRequirementOrCapability($event)">
   8
   9 </radio-buttons>
  10     <label class="select-type-label">Select type:</label>
  11     <div class="select-type">
  12         <ui-element-dropdown [values]="types" [(value)]="selectedType" (valueChange)="onTypeSelected($event)"></ui-element-dropdown>
  13     </div>
  14
  15     <div class="table-and-list-container">
  16         <div class="inner-container requirements-or-capabilities-container" [ngClass]="{'empty-list':!selectedType}">
  17             <div *ngFor="let item of displayCapReqListFilterByType"
  18                  class="req-or-cap-item"
  19                  (click)="selectReqOrCapFromList(item)"
  20                  [ngClass]="{'selected':selectedReqOrCapModel && (item.uniqueId + item.ownerId + item.name) == (selectedReqOrCapModel.uniqueId + selectedReqOrCapModel.ownerId + selectedReqOrCapModel.name)}">
  21                 {{item.getFullTitle()}}
  22             </div>
  23         </div>
  24         <div class="inner-container properties-table-container" *ngIf="selectedReqOrCapOption == 'Capability'" [ngClass]="{'cap-selected':selectedReqOrCapModel}">
  25             <properties-table *ngIf="selectedReqOrCapModel"
  26                               class="properties-table"
  27                               [readonly]="true"
  28                               [fePropertiesMap]="capabilityProperties"
  29                               [selectedPropertyId]="''"
  30                               [hidePropertyType]="true">
  31             </properties-table>
  32         </div>
  33
  34     </div>
  35 </div>
  36