catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirementEditor/requirements-editor.component.html

   1 <div class="requirement-editor">
   2     <form class="w-sdc-form">
   3         <div class="i-sdc-form-content-requirement-content">
   4             <div class="content-row">
   5                 <div class="i-sdc-form-item">
   6                     <sdc-input
   7                             label="{{ 'REQ_NAME' | translate}}"
   8                             required="true"
   9                             testId="reqName"
  10                             [disabled]="isReadonly"
  11                             [(value)]="requirementData.name"
  12                             (valueChange)="validityChanged()">
  13                     </sdc-input>
  14                 </div>
  15             </div>
  16
  17             <div class="group-with-border">
  18                 <div class="content-row i-sdc-form-item">
  19                     <sdc-dropdown
  20                             label="{{ 'REQ_RELATED_CAPABILITY' | translate }}"
  21                             testId="reqRelatedCapability"
  22                             required="true"
  23                             [disabled]="isReadonly"
  24                             [options]="capabilityTypesMappedList"
  25                             selectedOption="{{requirementData.capability}}"
  26                             [placeHolder] = "requirementData.capability"
  27                             (changed)="onCapabilityChanged($event)">
  28                     </sdc-dropdown>
  29                 </div>
  30                 <div class="content-row i-sdc-form-item">
  31                     <sdc-dropdown
  32                             label="{{ 'REQ_NODE' | translate }}"
  33                             testId="reqNode"
  34                             [disabled]="isReadonly"
  35                             [options]="nodeTypesMappedList"
  36                             selectedOption="{{requirementData.node}}"
  37                             [placeHolder] = "requirementData.node"
  38                             (changed)="onNodeChanged($event)">
  39                     </sdc-dropdown>
  40                 </div>
  41                 <div class="content-row i-sdc-form-item">
  42                     <sdc-dropdown
  43                             label="{{ 'REQ_RELATIONSHIP' | translate }}"
  44                             testId="reqRelationship"
  45                             [disabled]="isReadonly"
  46                             [options]="relationshipTypesMappedList"
  47                             selectedOption="{{requirementData.relationship}}"
  48                             [placeHolder] = "requirementData.relationship"
  49                             (changed)="onRelationshipChanged($event)">
  50                     </sdc-dropdown>
  51                 </div>
  52             </div>
  53
  54             <label class="i-sdc-form-label occurrences-label"> {{ 'REQ_CAP_OCCURRENCES' | translate}} </label>
  55             <div class="content-row occurrences-section">
  56                 <div class="min-occurrences-value">
  57                     <sdc-input
  58                             label="{{ 'REQ_CAP_OCCURRENCES_MIN' | translate}}"
  59                             testId="reqOccurrencesMin"
  60                             [disabled]="isReadonly"
  61                             [(value)]="requirementData.minOccurrences"
  62                             (valueChange)="validityChanged()"
  63                             type="number">
  64                     </sdc-input>
  65                 </div>
  66                 <div class="sdc-input">
  67                     <label class="sdc-input__label"> {{ 'REQ_CAP_OCCURRENCES_MAX' | translate}} </label>
  68                     <div class="max-occurrences-value">
  69                         <sdc-checkbox
  70                                 class="checkbox-label unbounded-value"
  71                                 testId="reqOccurrencesMaxUnbounded"
  72                                 label="{{translatedUnboundTxt.toLowerCase()}}"
  73                                 (checkedChange)="onUnboundedChanged()"
  74                                 [checked]="isUnboundedChecked"
  75                                 [disabled]="isReadonly">
  76                         </sdc-checkbox>
  77                         <sdc-input
  78                                 *ngIf="!isUnboundedChecked"
  79                                 testId="reqOccurrencesMax"
  80                                 [disabled]="isReadonly"
  81                                 [(value)]="requirementData.maxOccurrences"
  82                                 (valueChange)="validityChanged()"
  83                                 type="number">
  84                         </sdc-input>
  85                     </div>
  86
  87                 </div>
  88             </div>
  89         </div>
  90     </form>
  91 </div>