catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html

   1 <div class="service-dependencies">
   2   <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
   3   <div *ngIf="!isDependent" class="checkbox-label-mark-as-dependent">
   4     <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect"
   5             (change)='onOptionsSelected($event)'>
   6       <option>Select Directive</option>
   7       <option *ngFor="let item of directiveValues.values()">{{item}}</option>
   8     </select>
   9   </div>
  10
  11   <div *ngIf="isDependent" class="checkbox-label-mark-as-dependent">
  12     <label class="i-sdc-form-label">Directive: {{getActualDirectiveValue().toUpperCase()}}</label>
  13     <span class="sprite-new delete-btn delete-icon"
  14           (click)="onRemoveDirective()" data-tests-id="delete-input-button">
  15     </span>
  16   </div>
  17
  18   <div *ngIf="isDependent">
  19     <div class="w-sdc-designer-sidebar-section">
  20       <sdc-accordion [title]="'Node Filter Capabilities'" [arrow-direction]="'right'" [open]="true">
  21         <div class="i-sdc-designer-sidebar-section-content-node-filter-section">
  22
  23           <div class="i-sdc-designer-sidebar-section-content-node-filter"
  24                [ngClass]="{'hand': !readonly}"
  25                *ngFor="let capability of constraintCapabilities; let i = index">
  26             <div class="filter-details" [ngClass]="{'readonly': readonly}">
  27               <div class="filter-desc" (click)="!readonly && onSelectNodeFilter(capabilities, i)"
  28                    tooltips
  29                    tooltip="{{capability.servicePropertyName + ' ' + getSymbol(capability.constraintOperator) + ' '
  30              + (capability.sourceName ? capability.sourceName + ':' : '') + capability.value}}">
  31                 {{capability.servicePropertyName + ' ' + getSymbol(capability.constraintOperator)
  32               + ' '
  33               + (capability.sourceName ? capability.sourceName + ':' : '') + capability.value}}
  34               </div>
  35               <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
  36                     (click)="openDeleteModal(capabilities, i)"
  37                     data-tests-id="delete-input-button"></span>
  38             </div>
  39           </div>
  40
  41           <div class="w-sdc-designer-sidebar-section-node-filter-footer">
  42             <button
  43                 class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue"
  44                 data-tests-id="add-rule-button"
  45                 (click)="onAddNodeFilter(capabilities)"
  46                 [disabled]="readonly">
  47               {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}}
  48             </button>
  49           </div>
  50         </div>
  51       </sdc-accordion>
  52
  53       <sdc-accordion [title]="'Node Filter Properties'" [arrow-direction]="'right'" [open]="true">
  54         <div class="i-sdc-designer-sidebar-section-content-node-filter-section">
  55
  56           <div class="i-sdc-designer-sidebar-section-content-node-filter"
  57                [ngClass]="{'hand': !readonly}"
  58                *ngFor="let property of constraintProperties; let i = index">
  59             <div class="filter-details" [ngClass]="{'readonly': readonly}">
  60               <div class="filter-desc" (click)="!readonly && onSelectNodeFilter(properties, i)"
  61                    tooltips
  62                    tooltip="{{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator) + ' '
  63              + (property.sourceName ? property.sourceName + ':' : '') + property.value}}">
  64                 {{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator)
  65               + ' '
  66               + (property.sourceName ? property.sourceName + ':' : '') + property.value}}
  67               </div>
  68               <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
  69                     (click)="openDeleteModal(properties, i)"
  70                     data-tests-id="delete-input-button"></span>
  71             </div>
  72           </div>
  73
  74           <div class="w-sdc-designer-sidebar-section-node-filter-footer">
  75             <button
  76                 class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue"
  77                 data-tests-id="add-rule-button"
  78                 (click)="onAddNodeFilter(properties)"
  79                 [disabled]="readonly">
  80               {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}}
  81             </button>
  82           </div>
  83         </div>
  84       </sdc-accordion>
  85     </div>
  86   </div>
  87 </div>