Support for multiple directives

[sdc.git] / catalog-ui / src / app / ng2 / components / logic / service-dependencies / service-dependencies.component.html

diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html
index d71a4fb..3dfbf7a 100644 (file)
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html
@@ -1,35 +1,83 @@
 <div class="service-dependencies">
-    <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
-    <div class="checkbox-label-mark-as-dependent">
-            <checkbox
-                    class="checkbox-label"
-                    data-tests-id="checkbox-mark-as-dependent"
-                    [label]="'Mark as Dependent'"
-                    (checkedChange)="onMarkAsDependent()"
-                    [(checked)]="isDependent"
-                    [disabled]="readonly">
-            </checkbox>
-    </div>
-    <div class="i-sdc-designer-sidebar-section-content-item-rules-section" *ngIf="isDependent">
+  <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
+  <select-directives *ngIf="!isDependent || isEditable" (onAddClick)="onAddDirectives($event)" [updateDirectives]="getActualDirectiveValue()">
+  </select-directives>
+  <div *ngIf="isDependent && !isEditable" class="checkbox-label-mark-as-dependent">
+    <label class="i-sdc-form-label">Directive: {{getActualDirectiveValue()}}</label>
+    <span class="sprite-new delete-btn delete-icon"
+          (click)="onRemoveDirective()" data-tests-id="delete-input-button">
+    </span>
+    <svg-icon-label name="edit-file-o" size="small" class="directive-edit-icon" data-tests-id="directive-edit-icon" (click)="onEditDirectives()">
+    </svg-icon-label>
+  </div>
+
+  <div *ngIf="isDependent">
+    <div class="w-sdc-designer-sidebar-section">
+      <sdc-accordion [title]="'Node Filter Capabilities'" [arrow-direction]="'right'" [open]="true">
+        <div class="i-sdc-designer-sidebar-section-content-node-filter-section">
 
-        <div class="i-sdc-designer-sidebar-section-content-item-rule" [ngClass]="{'hand': !readonly}"
-             *ngFor="let rule of rulesList; let i = index">
-            <div class="rule-details" [ngClass]="{'readonly': readonly}">
-                <div class="rule-desc" (click)="!readonly && onSelectRule(i)" tooltips tooltip="{{rule.servicePropertyName + ' ' + getSymbol(rule.constraintOperator) + ' ' + (rule.sourceName ? rule.sourceName + ':' : '') + rule.value}}">
-                    {{rule.servicePropertyName + ' ' + getSymbol(rule.constraintOperator) + ' ' + (rule.sourceName ? rule.sourceName + ':' : '') + rule.value}}
-                </div>
-                <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon" (click)="openDeleteModal(i)" data-tests-id="delete-input-button"></span>
+          <div class="i-sdc-designer-sidebar-section-content-node-filter"
+               [ngClass]="{'hand': !readonly}"
+               *ngFor="let capability of constraintCapabilities; let i = index">
+            <div class="filter-details" [ngClass]="{'readonly': readonly}">
+              <div class="filter-desc" (click)="!readonly && onSelectNodeFilterCapability(capabilities, i)"
+                   tooltips
+                   tooltip="{{capability.capabilityName + ' : ' +
+                   capability.servicePropertyName + ' ' + getSymbol(capability.constraintOperator) + ' '
+                   + (capability.sourceName ? capability.sourceName + ':' : '') + capability.value}}">
+                {{capability.capabilityName + ' : ' + capability.servicePropertyName + ' ' + getSymbol(capability.constraintOperator)
+              + ' ' + (capability.sourceName ? capability.sourceName + ':' : '') + capability.value}}
+              </div>
+              <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
+                    (click)="openDeleteModal(capabilities, i)"
+                    data-tests-id="delete-input-button"></span>
             </div>
+          </div>
+
+          <div class="w-sdc-designer-sidebar-section-node-filter-footer">
+            <button
+                class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue"
+                data-tests-id="add-rule-button"
+                (click)="onAddNodeFilterCapabilities()"
+                [disabled]="readonly">
+              {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}}
+            </button>
+          </div>
         </div>
+      </sdc-accordion>
+
+      <sdc-accordion [title]="'Node Filter Properties'" [arrow-direction]="'right'" [open]="true">
+        <div class="i-sdc-designer-sidebar-section-content-node-filter-section">
+
+          <div class="i-sdc-designer-sidebar-section-content-node-filter"
+               [ngClass]="{'hand': !readonly}"
+               *ngFor="let property of constraintProperties; let i = index">
+            <div class="filter-details" [ngClass]="{'readonly': readonly}">
+              <div class="filter-desc" (click)="!readonly && onSelectNodeFilter(properties, i)"
+                   tooltips
+                   tooltip="{{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator) + ' '
+             + (property.sourceName ? property.sourceName + ':' : '') + property.value}}">
+                {{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator)
+              + ' '
+              + (property.sourceName ? property.sourceName + ':' : '') + property.value}}
+              </div>
+              <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
+                    (click)="openDeleteModal(properties, i)"
+                    data-tests-id="delete-input-button"></span>
+            </div>
+          </div>
 
-        <div class="w-sdc-designer-sidebar-section-footer" >
+          <div class="w-sdc-designer-sidebar-section-node-filter-footer">
             <button
-                    class="w-sdc-designer-sidebar-section-footer-action add-rule-btn tlv-btn blue"
-                    data-tests-id="add-rule-button"
-                    (click)="onAddRule()"
-                    [disabled]="readonly">
-                {{'SERVICE_DEPENDENCY_ADD_RULE' | translate}}
+                class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue"
+                data-tests-id="add-rule-button"
+                (click)="onAddNodeFilter()"
+                [disabled]="readonly">
+              {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}}
             </button>
+          </div>
         </div>
+      </sdc-accordion>
     </div>
-</div>
\ No newline at end of file
+  </div>
+</div>