Merge pull request #8661 from kalutkaz/enrichmentRefactoringUI

Enrichment refactoring UI

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

@@ -22,14 +22,16 @@
            fxLayoutAlign="start center" formArrayName="relationFilters"
            *ngFor="let relationFilterControl of relationFiltersFormArray.controls; let $index = index">
         <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-          <div class="input-block" fxFlex fxLayout="row" fxLayoutAlign="start center" style="margin-right: 8px">
+          <div class="input-block" fxFlex fxLayout="row" fxLayoutGap="28px" fxLayoutAlign="start center" style="margin-right: 8px">
             <tb-relation-type-autocomplete fxFlex="50"
               subscriptSizing="dynamic"
               style="min-width: 200px;"
               [formControl]="relationFilterControl.get('relationType')">
             </tb-relation-type-autocomplete>
-            <tb-entity-type-list style="margin-left: 30px" fxFlex="50"
+            <tb-entity-type-list fxFlex="50"
               subscriptSizing="dynamic"
+              [label]="'entity.entity-types' | translate"
+              floatLabel="always"
               [allowedEntityTypes]="allowedEntityTypes"
               [formControl]="relationFilterControl.get('entityTypes')">
             </tb-entity-type-list>
@@ -49,14 +51,13 @@
         <span fxLayoutAlign="center center"
               class="tb-prompt" translate>relation.any-relation</span>
   </div>
-  <div style="margin: 5px 0px 15px">
+  <button mat-stroked-button color="primary"
-    <button mat-stroked-button color="primary"
+          class="add-button"
-            [disabled]="isLoading$ | async"
+          [disabled]="isLoading$ | async"
-            (click)="addFilter()"
+          (click)="addFilter()"
-            type="button"
+          type="button"
-            matTooltip="{{ 'relation.add-relation-filter' | translate }}"
+          matTooltip="{{ 'relation.add-relation-filter' | translate }}"
-            matTooltipPosition="above">
+          matTooltipPosition="above">
-      {{ 'relation.add-relation-filter' | translate }}
+    {{ 'relation.add-relation-filter' | translate }}
-    </button>
+  </button>
-  </div>
 </div>

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

@@ -29,7 +29,7 @@
     }
 
     .body {
-      max-height: 300px;
+      max-height: 363px;
       overflow: auto;
 
       .row {
@@ -48,5 +48,9 @@
     .any-filter{
       margin: 10px 0 20px;
     }
+
+    .add-button {
+      margin: 5px 0px 15px;
+    }
   }
 }

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html

@@ -52,7 +52,7 @@
         [ruleChainType]="ruleChainType"
         [nodeDefinition]="ruleNode.component.configurationDescriptor.nodeDefinition">
       </tb-rule-node-config>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" fxLayout="column" class="description-block">
         <mat-form-field class="mat-block">
           <mat-label translate>rulenode.rule-node-description</mat-label>
           <textarea matInput formControlName="description" rows="1"></textarea>

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss

@@ -43,4 +43,8 @@
       }
     }
   }
+
+  .description-block {
+    margin-top: 22px;
+  }
 }

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

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="entitySubtypeListFormGroup" class="mat-block">
+<mat-form-field [formGroup]="entitySubtypeListFormGroup" [ngClass]="label ? '' : 'tb-chip-list'" class="mat-block">
-  <mat-label *ngIf="label">{{ label | translate }}</mat-label>
+  <mat-label *ngIf="label">{{ label }}</mat-label>
   <mat-chip-grid #chipList formControlName="entitySubtypeList">
     <mat-chip-row
       *ngFor="let entitySubtype of entitySubtypeList"
@@ -40,7 +40,6 @@
   </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()">

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

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

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

@@ -26,7 +26,7 @@ import { EntityService } from '@core/http/entity.service';
 import { MatAutocomplete } from '@angular/material/autocomplete';
 import { MatChipGrid } from '@angular/material/chips';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { SubscriptSizing } from '@angular/material/form-field';
+import { FloatLabelType, SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coercion';
 
 interface EntityTypeInfo {
@@ -56,6 +56,11 @@ export class EntityTypeListComponent implements ControlValueAccessor, OnInit, Af
   get required(): boolean {
     return this.requiredValue;
   }
+
+  @Input() label: string;
+
+  @Input() floatLabel: FloatLabelType = 'auto';
+
   @Input()
   set required(value: boolean) {
     const newVal = coerceBooleanProperty(value);

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

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

@@ -24,7 +24,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { BroadcastService } from '@app/core/services/broadcast.service';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { RelationTypes } from '@app/shared/models/relation.models';
-import { SubscriptSizing } from '@angular/material/form-field';
+import { FloatLabelType, SubscriptSizing } from '@angular/material/form-field';
 
 @Component({
   selector: 'tb-relation-type-autocomplete',
@@ -49,6 +49,8 @@ export class RelationTypeAutocompleteComponent implements ControlValueAccessor,
 
   @Input() label: string;
 
+  @Input() floatLabel: FloatLabelType = 'auto';
+
   @Input()
   set required(value: boolean) {
     this.requiredValue = coerceBooleanProperty(value);

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

@@ -3675,7 +3675,6 @@
         "name-required": "Cal el nom.",
         "name-max-length": "El nom ha de ser inferior a 256",
         "type": "Tipus",
-        "description": "Descripció",
         "delete": "Eliminar node de regles",
         "select-all-objects": "Seleccionar tots els nodes i conexions",
         "deselect-all-objects": "Desfer selecció de tots els nodes i conexions",

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

@@ -2457,7 +2457,6 @@
         "name": "Název",
         "name-required": "Název je povinný.",
         "type": "Typ",
-        "description": "Popis",
         "delete": "Smazat uzel pravidla",
         "select-all-objects": "Vybrat všechny uzly a spojení",
         "deselect-all-objects": "Zrušit výběr všech uzlů a spojení",

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

@@ -2668,7 +2668,6 @@
     "name": "Navn",
     "name-required": "Navn er påkrævet.",
     "type": "Type",
-    "description": "Beskrivelse",
     "delete": "Slet regelknude",
     "select-all-objects": "Vælg alle knuder og tilslutninger",
     "deselect-all-objects": "Fravælg alle knuder og tilslutninger",

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

@@ -1495,7 +1495,6 @@
     "name": "Name",
     "name-required": "Name ist erforderlich.",
     "type": "Typ",
-    "description": "Beschreibung",
     "delete": "Regelknoten löschen",
     "select-all-objects": "Alle Knoten und Verbindungen auswählen",
     "deselect-all-objects": "Auswahl aller Knoten und Verbindungen aufheben",

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

@@ -1833,7 +1833,6 @@
     "name": "Όνομα",
     "name-required": "Απαιτείται όνομα.",
     "type": "Τύπος",
-    "description": "Περιγραφή",
     "delete": "Διαγραφή κανόνα κόμβου",
     "select-all-objects": "Επιλογή όλων των κόμβων και συνδέσεων",
     "deselect-all-objects": "Αποεπιλογή όλων των κόμβων και συνδέσεων",

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

@@ -3330,7 +3330,6 @@
         "name-required": "El nombre es requerido.",
         "name-max-length": "Nombre debe ser menor de 256",
         "type": "Tipo",
-        "description": "Descripción",
         "delete": "Eliminar nodo de reglas",
         "select-all-objects": "Seleccionar todos los nodos y conexiones",
         "deselect-all-objects": "Deshacer selección de todos los nodos y conexiones",

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

@@ -1240,7 +1240,6 @@
         "name": "نام",
         "name-required": ".نام مورد نياز است",
         "type": "نوع",
-        "description": "توصيف",
         "delete": "حذف گره قواعد",
         "select-all-objects": "انتخاب تمام گره ها و اتصالات",
         "deselect-all-objects": "لغو انتخاب تمام گره ها و اتصالات",

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

@@ -1918,7 +1918,6 @@
         "delete": "Supprimer le noeud de règle",
         "delete-selected": "Supprimer les éléments sélectionnés",
         "delete-selected-objects": "Supprimer les nœuds et les connexions sélectionnés",
-        "description": "Description",
         "deselect-all": "Désélectionner tout",
         "deselect-all-objects": "Désélectionnez tous les nœuds et toutes les connexions",
         "details": "Détails",

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

@@ -1278,7 +1278,6 @@
         "name": "Nome",
         "name-required": "Nome obbligatorio.",
         "type": "Tipo",
-        "description": "Descrizione",
         "delete": "Elimina nodo regola",
         "select-all-objects": "Seleziona tutti i nodi e le connessioni",
         "deselect-all-objects": "Deseleziona tutti i nodi e le connessioni",

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

@@ -1905,7 +1905,6 @@
         "name": "이름",
         "name-required": "이름을 입력하세요.",
         "type": "유형",
-        "description": "설명",
         "delete": "규칙 노드 삭제",
         "select-all-objects": "모든 노드와 연결을 선택",
         "deselect-all-objects": "모든 노드와 연결을 선택 해제",

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

@@ -1287,7 +1287,6 @@
         "name": "Nosaukums",
         "name-required": "Nosaukums ir nepieciešams.",
         "type": "Tips",
-        "description": "Apraksts",
         "delete": "Dzēst noteikumu nodi",
         "select-all-objects": "Atlasīt visas nodes un savienojumus",
         "deselect-all-objects": "Noņemt visas nodes un savienojumus",

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

@@ -1349,7 +1349,6 @@
         "name": "Denumire",
         "name-required": "Denumirea este obligatorie",
         "type": "Tip",
-        "description": "Descriere",
         "delete": "Şterge Regulă Nod",
         "select-all-objects": "Selectează Toate Nodurile Şi Conexiunile",
         "deselect-all-objects": "Deselectează Toate Nodurile Şi Conexiunile",

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

@@ -1382,7 +1382,6 @@
         "name": "Название",
         "name-required": "Название обязательно.",
         "type": "Тип",
-        "description": "Описание",
         "delete": "Удалить правило",
         "select-all-objects": "Выделить все правила и связи",
         "deselect-all-objects": "Отменить выделение правил и связей",

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

@@ -1797,7 +1797,7 @@
         "name": "Ім'я",
         "name-required": "Необхідно вказати ім'я.",
         "type": "Тип",
-        "description": "Опис",
+        "rule-node-description": "Опис вузла правил",
         "delete": "Видалити вузол правил",
         "select-all-objects": "Вибрати усі вузли та з'єднання",
         "deselect-all-objects": "Зняти виділення з усіх вузлів і з'єднань",

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

@@ -2943,7 +2943,6 @@
         "name-required": "名称必填。",
         "name-max-length": "名称长度必须少于256个字符",
         "type": "类型",
-        "description": "说明",
         "delete": "删除规则节点",
         "select-all-objects": "选择所有节点和连接",
         "deselect-all-objects": "取消选择所有节点和连接",

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

@@ -2795,7 +2795,6 @@
         "name-required": "名稱必填。",
         "name-max-length": "名稱應小於256",
         "type": "類型",
-        "description": "描述",
         "delete": "刪除規則節點",
         "select-all-objects": "選擇所有節點和連接",
         "deselect-all-objects": "取消選擇所有節點和連接",