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)" testId="select"></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             <loader [display]="loadingCapabilityProperties" size="medium" [relative]="true"></loader>
  26             <properties-table *ngIf="selectedReqOrCapModel && !loadingCapabilityProperties"
  27                               class="properties-table"
  28                               [readonly]="true"
  29                               [fePropertiesMap]="capabilityProperties"
  30                               [selectedPropertyId]="''"
  31                               [hidePropertyType]="true">
  32             </properties-table>
  33         </div>
  34
  35     </div>
  36 </div>
  37