UI: Refactoring component

ui-ngx/src/app/modules/home/pages/notification-center/notification-center.module.ts

@@ -48,7 +48,6 @@ import {
 } from '@home/pages/notification-center/rule-table/rule-notification-dialog.component';
 import { EscalationsComponent } from '@home/pages/notification-center/rule-table/escalations.component';
 import { EscalationFormComponent } from '@home/pages/notification-center/rule-table/escalation-form.component';
-import { AlarmTypeListComponent } from '@home/pages/notification-center/rule-table/alarm-type-list.component';
 import {
   AlarmSeveritiesListComponent
 } from '@home/pages/notification-center/rule-table/alarm-severities-list.component';
@@ -68,7 +67,6 @@ import {
     RuleNotificationDialogComponent,
     EscalationsComponent,
     EscalationFormComponent,
-    AlarmTypeListComponent,
     AlarmSeveritiesListComponent
   ],
   imports: [

ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.html

@@ -91,9 +91,12 @@
         <section formGroupName="triggerConfig">
           <fieldset class="fields-group">
             <legend translate>notification.filter</legend>
-            <tb-alarm-type-list
+            <tb-string-items-list
+              label="{{ 'alarm.alarm-type-list' | translate }}"
+              placeholder="{{ !alarmTemplateForm.get('triggerConfig.alarmTypes').value?.length ? ('alarm.any-type' | translate) : '' }}"
+              floatLabel="always"
               formControlName="alarmTypes">
-            </tb-alarm-type-list>
+            </tb-string-items-list>
 
             <tb-alarm-severities-list formControlName="alarmSeverities"
                                       flotLabel="always"

ui-ngx/src/app/modules/home/pages/notification-center/rule-table/alarm-type-list.component.html → ui-ngx/src/app/shared/components/string-items-list.component.html

@@ -15,22 +15,24 @@
     limitations under the License.
 
 -->
-<section [formGroup]="alarmTypeForm">
+<section [formGroup]="stringItemsForm">
-  <mat-form-field fxFlex class="mat-block" floatLabel="always">
+  <mat-form-field fxFlex class="mat-block" [floatLabel]="floatLabel" [appearance]="appearance">
-    <mat-label translate>alarm.alarm-type-list</mat-label>
+    <mat-label *ngIf="label">{{ label }}</mat-label>
-    <mat-chip-list #alarmTypeChipList formControlName="alarmTypes" [required]="required">
+    <mat-chip-list #itemsChipList formControlName="items" [required]="required">
-      <mat-chip *ngFor="let type of alarmTypeList"
+      <mat-chip *ngFor="let item of stringItemsList"
                 [selectable]="!disabled"
                 [removable]="!disabled"
-                (removed)="removeAlarmType(type)">
+                (removed)="removeItems(item)">
-        {{type}}
+        {{item}}
         <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
       </mat-chip>
-      <input placeholder="{{ !alarmTypeForm.get('alarmTypes').value?.length ? ('alarm.any-type' | translate) : '' }}"
+      <input placeholder="{{ placeholder }}"
-             [matChipInputFor]="alarmTypeChipList"
+             [matChipInputFor]="itemsChipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              matChipInputAddOnBlur
-             (matChipInputTokenEnd)="addAlarmType($event)">
+             (matChipInputTokenEnd)="addItem($event)">
     </mat-chip-list>
+    <mat-hint>{{ hint }}</mat-hint>
+    <mat-error *ngIf="stringItemsForm.get('items').hasError('required')">{{ requiredText }}</mat-error>
   </mat-form-field>
 </section>

ui-ngx/src/app/modules/home/pages/notification-center/rule-table/alarm-type-list.component.ts → ui-ngx/src/app/shared/components/string-items-list.component.ts

@@ -19,22 +19,23 @@ import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Valida
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
+import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field/form-field';
 
 @Component({
-  selector: 'tb-alarm-type-list',
+  selector: 'tb-string-items-list',
-  templateUrl: './alarm-type-list.component.html',
+  templateUrl: './string-items-list.component.html',
   styleUrls: [],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => AlarmTypeListComponent),
+      useExisting: forwardRef(() => StringItemsListComponent),
       multi: true
     }
   ]
 })
-export class AlarmTypeListComponent implements ControlValueAccessor{
+export class StringItemsListComponent implements ControlValueAccessor{
 
-  alarmTypeForm: FormGroup;
+  stringItemsForm: FormGroup;
   private modelValue: Array<string> | null;
 
   readonly separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON];
@@ -55,17 +56,35 @@ export class AlarmTypeListComponent implements ControlValueAccessor{
   @Input()
   disabled: boolean;
 
+  @Input()
+  label: string;
+
+  @Input()
+  placeholder: string;
+
+  @Input()
+  hint: string;
+
+  @Input()
+  requiredText: string;
+
+  @Input()
+  floatLabel: FloatLabelType = 'auto';
+
+  @Input()
+  appearance: MatFormFieldAppearance = 'standard';
+
   private propagateChange = (v: any) => { };
 
   constructor(private fb: FormBuilder) {
-    this.alarmTypeForm = this.fb.group({
+    this.stringItemsForm = this.fb.group({
-      alarmTypes: [null, this.required ? [Validators.required] : []]
+      items: [null, this.required ? [Validators.required] : []]
     });
   }
 
   updateValidators() {
-    this.alarmTypeForm.get('alarmTypes').setValidators(this.required ? [Validators.required] : []);
+    this.stringItemsForm.get('items').setValidators(this.required ? [Validators.required] : []);
-    this.alarmTypeForm.get('alarmTypes').updateValueAndValidity();
+    this.stringItemsForm.get('items').updateValueAndValidity();
   }
 
   registerOnChange(fn: any): void {
@@ -78,33 +97,33 @@ export class AlarmTypeListComponent implements ControlValueAccessor{
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
     if (isDisabled) {
-      this.alarmTypeForm.disable({emitEvent: false});
+      this.stringItemsForm.disable({emitEvent: false});
     } else {
-      this.alarmTypeForm.enable({emitEvent: false});
+      this.stringItemsForm.enable({emitEvent: false});
     }
   }
 
   writeValue(value: Array<string> | null): void {
     if (value != null && value.length > 0) {
       this.modelValue = [...value];
-      this.alarmTypeForm.get('alarmTypes').setValue(value);
+      this.stringItemsForm.get('items').setValue(value);
     } else {
-      this.alarmTypeForm.get('alarmTypes').setValue(null);
+      this.stringItemsForm.get('items').setValue(null);
       this.modelValue = null;
     }
   }
 
-  addAlarmType(event: MatChipInputEvent): void {
+  addItem(event: MatChipInputEvent): void {
-    let alarmType = event.value || '';
+    let item = event.value || '';
     const input = event.chipInput.inputElement;
-    alarmType = alarmType.trim();
+    item = item.trim();
-    if (alarmType) {
+    if (item) {
-      if (!this.modelValue || this.modelValue.indexOf(alarmType) === -1) {
+      if (!this.modelValue || this.modelValue.indexOf(item) === -1) {
         if (!this.modelValue) {
           this.modelValue = [];
         }
-        this.modelValue.push(alarmType);
+        this.modelValue.push(item);
-        this.alarmTypeForm.get('alarmTypes').setValue(this.modelValue);
+        this.stringItemsForm.get('items').setValue(this.modelValue);
       }
       this.propagateChange(this.modelValue);
       if (input) {
@@ -113,20 +132,20 @@ export class AlarmTypeListComponent implements ControlValueAccessor{
     }
   }
 
-  removeAlarmType(alarmType: string) {
+  removeItems(item: string) {
-    const index = this.modelValue.indexOf(alarmType);
+    const index = this.modelValue.indexOf(item);
     if (index >= 0) {
       this.modelValue.splice(index, 1);
       if (!this.modelValue.length) {
         this.modelValue = null;
       }
-      this.alarmTypeForm.get('alarmTypes').setValue(this.modelValue);
+      this.stringItemsForm.get('items').setValue(this.modelValue);
       this.propagateChange(this.modelValue);
     }
   }
 
-  get alarmTypeList(): string[] {
+  get stringItemsList(): string[] {
-    return this.alarmTypeForm.get('alarmTypes').value;
+    return this.stringItemsForm.get('items').value;
   }
 
 }

ui-ngx/src/app/shared/shared.module.ts

@@ -95,6 +95,7 @@ import { EntitySelectComponent } from '@shared/components/entity/entity-select.c
 import { DatetimeComponent } from '@shared/components/time/datetime.component';
 import { EntityKeysListComponent } from '@shared/components/entity/entity-keys-list.component';
 import { SocialSharePanelComponent } from '@shared/components/socialshare-panel.component';
+import { StringItemsListComponent } from '@shared/components/string-items-list.component';
 import { RelationTypeAutocompleteComponent } from '@shared/components/relation/relation-type-autocomplete.component';
 import { EntityListSelectComponent } from '@shared/components/entity/entity-list-select.component';
 import { JsonObjectEditComponent } from '@shared/components/json-object-edit.component';
@@ -255,6 +256,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     QueueAutocompleteComponent,
     RelationTypeAutocompleteComponent,
     SocialSharePanelComponent,
+    StringItemsListComponent,
     JsonObjectEditComponent,
     JsonObjectViewComponent,
     JsonContentComponent,
@@ -414,6 +416,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     QueueAutocompleteComponent,
     RelationTypeAutocompleteComponent,
     SocialSharePanelComponent,
+    StringItemsListComponent,
     JsonObjectEditComponent,
     JsonObjectViewComponent,
     JsonContentComponent,