Merge pull request #18 from kalutkaz/enrichmentNodeUI

Enrichment node UI

ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html

@@ -47,7 +47,6 @@
                   matTooltipPosition="above">
             <mat-icon>close</mat-icon>
           </button>
-        </div>
       </div>
     </div>
   </div>
@@ -55,15 +54,14 @@
         <span fxLayoutAlign="center center"
               class="tb-prompt" translate>relation.any-relation</span>
   </div>
-  <div>
+  <div style="margin-top: 8px">
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="isLoading$ | async"
             (click)="addFilter()"
             type="button"
             matTooltip="{{ 'relation.add-relation-filter' | translate }}"
             matTooltipPosition="above">
-      <mat-icon>add</mat-icon>
+      {{ 'relation.add-relation-filter' | translate }}
-      {{ 'action.add' | translate }}
     </button>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss

@@ -22,26 +22,25 @@
       width: 100%;
     }
 
-    .header {
+    .map-label {
-      padding: 0 5px 5px;
+      font-weight: 400;
-
+      font-size: 12px;
-      .cell {
-        padding-right: 5px;
-        padding-left: 5px;
-        font-size: 12px;
-        font-weight: 700;
-        color: rgba(0, 0, 0, .54);
-        white-space: nowrap;
-      }
     }
 
     .body {
-      padding: 0 5px 20px;
       max-height: 300px;
       overflow: auto;
 
       .row {
         padding-top: 5px;
+
+        .input-block {
+          border: 1px solid #E0E0E0;
+          border-radius: 6px;
+          padding: 24px 24px 2px 24px;
+          align-items: center;
+          margin: 0px 8px 15px 0px;
+        }
       }
 
       .cell {

ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html

@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="entitySubtypeListFormGroup" class="mat-block tb-chip-list">
+<mat-form-field [formGroup]="entitySubtypeListFormGroup" class="mat-block">
+  <mat-label *ngIf="label">{{ label | translate }}</mat-label>
   <mat-chip-grid #chipList formControlName="entitySubtypeList">
     <mat-chip-row
       *ngFor="let entitySubtype of entitySubtypeList"
@@ -37,6 +38,14 @@
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            (matChipInputTokenEnd)="chipAdd($event)">
   </mat-chip-grid>
+  <button *ngIf="entitySubtypeListFormGroup.get('entitySubtypeList').value?.length > 1"
+          type="button"
+          style="margin-right: 3px"
+          matTooltip="{{'entity.clear-selected-profiles' | translate}}"
+          matSuffix mat-icon-button
+          (click)="clearChipGrid()">
+    <mat-icon color="primary" class="material-icons">close</mat-icon>
+  </button>
   <mat-autocomplete #entitySubtypeAutocomplete="matAutocomplete"
                     class="tb-autocomplete"
                     (optionSelected)="selected($event)"

ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts

@@ -54,6 +54,9 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
   get required(): boolean {
     return this.requiredValue;
   }
+
+  @Input() label: string;
+
   @Input()
   set required(value: boolean) {
     const newVal = coerceBooleanProperty(value);
@@ -223,6 +226,12 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
     this.clear('');
   }
 
+  clearChipGrid() {
+    this.entitySubtypeList = [];
+    this.modelValue = null;
+    this.entitySubtypeListFormGroup.get('entitySubtypeList').patchValue([], {emitEvent: true});
+  }
+
   remove(entitySubtype: string) {
     const index = this.entitySubtypeList.indexOf(entitySubtype);
     if (index >= 0) {
@@ -249,9 +258,7 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
     this.searchText = searchText;
     return this.getEntitySubtypes().pipe(
       map(subTypes => {
-        let result = subTypes.filter( subType => {
+        let result = subTypes.filter( subType => searchText ? subType.toUpperCase().startsWith(searchText.toUpperCase()) : true);
-          return searchText ? subType.toUpperCase().startsWith(searchText.toUpperCase()) : true;
-        });
         if (!result.length) {
           result = [searchText];
         }

ui-ngx/src/app/shared/components/entity/entity-type-list.component.html

@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="entityTypeListFormGroup" class="mat-block tb-chip-list" subscriptSizing="{{ subscriptSizing }}">
+<mat-form-field [formGroup]="entityTypeListFormGroup" class="mat-block" floatLabel="always" subscriptSizing="{{ subscriptSizing }}">
+  <mat-label>{{ 'entity.entity-types' | translate }}</mat-label>
   <mat-chip-grid #chipList formControlName="entityTypeList">
     <mat-chip-row
       *ngFor="let entityType of entityTypeList"

ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="relationTypeFormGroup" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
+<mat-form-field [formGroup]="relationTypeFormGroup" floatLabel="always" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
-  <mat-label *ngIf="required">{{ 'relation.relation-type' | translate }}</mat-label>
+  <mat-label *ngIf="label" required="required">{{ label | translate }}</mat-label>
   <input matInput type="text"
          #relationTypeInput
          formControlName="relationType"
@@ -25,7 +25,9 @@
          [required]="required"
          [matAutocomplete]="relationTypeAutocomplete">
   <button *ngIf="relationTypeFormGroup.get('relationType').value && !disabled"
-          type="button"
+          type="button" color="primary"
+          style="margin-right: 3px;"
+          matTooltip="{{ 'relation.clear-relation-type' | translate}}"
           matSuffix mat-icon-button aria-label="Clear"
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>

ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.ts

@@ -46,6 +46,9 @@ export class RelationTypeAutocompleteComponent implements ControlValueAccessor,
   get required(): boolean {
     return this.requiredValue;
   }
+
+  @Input() label: string;
+
   @Input()
   set required(value: boolean) {
     this.requiredValue = coerceBooleanProperty(value);

ui-ngx/src/assets/help/en_US/rulenode/msg_and_metadata_key_patterns_fn.md

@@ -0,0 +1 @@
+#### Coming soon!

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1961,6 +1961,7 @@
         "device-name-starts-with": "Devices whose names start with '{{prefix}}'",
         "type-device-profile": "Device profile",
         "type-device-profiles": "Device profiles",
+        "clear-selected-profiles": "Clear selected profiles",
         "list-of-device-profiles": "{ count, plural, =1 {One device profile} other {List of # device profiles} }",
         "device-profile-name-starts-with": "Device profiles whose names start with '{{prefix}}'",
         "type-asset-profile": "Asset profile",
@@ -3166,6 +3167,7 @@
     "relation": {
         "relations": "Relations",
         "direction": "Direction",
+        "clear-relation-type": "Clear relation type",
         "search-direction": {
             "FROM": "From",
             "TO": "To"