UI: Refactoring

ui-ngx/src/app/core/http/calculated-fields.service.ts

@@ -15,7 +15,12 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { createDefaultHttpOptions, defaultHttpOptionsFromConfig, RequestConfig } from './http-utils';
+import {
+  createDefaultHttpOptions,
+  defaultHttpOptionsFromConfig,
+  defaultHttpOptionsFromParams,
+  RequestConfig
+} from './http-utils';
 import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { PageData } from '@shared/models/page/page-data';
@@ -52,11 +57,11 @@ export class CalculatedFieldsService {
   }
 
   public getCalculatedFieldsFilter(pageLink: PageLink, query: CalculatedFieldsQuery, config?: RequestConfig): Observable<PageData<CalculatedField>> {
-    return this.http.get<PageData<CalculatedField>>(`/api/calculatedFields${pageLink.toQuery()}`, createDefaultHttpOptions(query, config));
+    return this.http.get<PageData<CalculatedField>>(`/api/calculatedFields${pageLink.toQuery()}`, defaultHttpOptionsFromParams(query, config));
   }
 
   public getCalculatedFields({ entityType, id }: EntityId, pageLink: PageLink, type?: CalculatedFieldType, config?: RequestConfig): Observable<PageData<CalculatedField>> {
-    return this.http.get<PageData<CalculatedField>>(`/api/${entityType}/${id}/calculatedFields${pageLink.toQuery()}`, createDefaultHttpOptions(type ? {type} : null, config));
+    return this.http.get<PageData<CalculatedField>>(`/api/${entityType}/${id}/calculatedFields${pageLink.toQuery()}`, defaultHttpOptionsFromParams({type} , config));
   }
 
   public testScript(inputParams: CalculatedFieldTestScriptInputParams, config?: RequestConfig): Observable<EntityTestScriptResult> {
@@ -68,6 +73,6 @@ export class CalculatedFieldsService {
   }
 
   public getAlarmRuleNames(pageLink: PageLink, type: CalculatedFieldType, config?: RequestConfig): Observable<PageData<string>> {
-    return this.http.get<PageData<string>>(`/api/calculatedFields/names${pageLink.toQuery()}`, createDefaultHttpOptions({type}, config));
+    return this.http.get<PageData<string>>(`/api/calculatedFields/names${pageLink.toQuery()}`, defaultHttpOptionsFromParams({type}, config));
   }
 }

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html

@@ -54,18 +54,14 @@
         </div>
         @if (!data.entityId) {
           <div class="flex flex-col gap-4" formGroupName="entityId">
-            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-              <mat-label translate>alarm-rule.target-entity-type</mat-label>
-              <mat-select formControlName="entityType">
-                @for (type of alarmRuleEntityTypeList; track type) {
-                  <mat-option [value]="type">{{ entityTypeTranslations.get(type).type | translate }}</mat-option>
-                }
-              </mat-select>
-
-              @if (fieldFormGroup.get('entityId.entityType').hasError('required')) {
-                <mat-error>{{ 'alarm-rule.entity-type-required' | translate }}</mat-error>
-              }
-            </mat-form-field>
+            <tb-entity-type-select appearance="outline"
+                                   subscriptSizing="dynamic"
+                                   showLabel
+                                   label="{{ 'alarm-rule.target-entity-type' | translate }}"
+                                   [filterAllowedEntityTypes]="false"
+                                   [allowedEntityTypes]="alarmRuleEntityTypeList"
+                                   formControlName="entityType">
+            </tb-entity-type-select>
             @if (fieldFormGroup.get('entityId.entityType').value) {
               <tb-entity-autocomplete
                 formControlName="id"

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.scss

@@ -37,15 +37,14 @@
 }
 
 ::ng-deep {
-  .tb-form-panel {
+
+  .tb-alarm-filter-config-component {
     max-width: 100%;
     width: 600px;
     min-width: 100%;
-  }
-
-  .tb-alarm-filter-config-component {
     flex: 1;
 
+
     tb-entity-subtype-list {
       flex: 1;
       @media #{$mat-gt-xs} {

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.ts

@@ -22,7 +22,6 @@ import {
   Inject,
   InjectionToken,
   Input,
-  OnDestroy,
   OnInit,
   Optional,
   TemplateRef,
@@ -51,7 +50,6 @@ export interface AlarmRuleFilterConfigData {
   initialAlarmRuleFilterConfig?: AlarmRuleFilterConfig;
 }
 
-// @dynamic
 @Component({
   selector: 'tb-alarm-rule-filter-config',
   templateUrl: './alarm-rule-filter-config.component.html',
@@ -64,7 +62,7 @@ export interface AlarmRuleFilterConfigData {
     }
   ]
 })
-export class AlarmRuleFilterConfigComponent implements OnInit, OnDestroy, ControlValueAccessor {
+export class AlarmRuleFilterConfigComponent implements OnInit, ControlValueAccessor {
 
   @ViewChild('alarmRuleFilterPanel')
   alarmRuleFilterPanel: TemplateRef<any>;
@@ -152,9 +150,6 @@ export class AlarmRuleFilterConfigComponent implements OnInit, OnDestroy, Contro
     }
   }
 
-  ngOnDestroy(): void {
-  }
-
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-table-header.component.ts

@@ -19,7 +19,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityTableHeaderComponent } from '../../components/entity/entity-table-header.component';
 import { AlarmFilterConfig } from '@shared/models/query/query.models';
-import { CalculatedFieldAlarmRule } from "@shared/models/calculated-field.models";
+import { CalculatedFieldAlarmRule, CalculatedFieldsQuery } from "@shared/models/calculated-field.models";
 import { AlarmRulesTableConfig } from "@home/components/alarm-rules/alarm-rules-table-config";
 
 @Component({
@@ -37,7 +37,7 @@ export class AlarmRuleTableHeaderComponent extends EntityTableHeaderComponent<Ca
     super(store);
   }
 
-  alarmRuleFilterChanged(alarmRuleFilterConfig: AlarmFilterConfig) {
+  alarmRuleFilterChanged(alarmRuleFilterConfig: CalculatedFieldsQuery) {
     this.alarmRuleTableConfig.alarmRuleFilterConfig = alarmRuleFilterConfig;
     this.alarmRuleTableConfig.getTable().resetSortAndFilter(true, true);
   }

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rules-table-config.ts

@@ -41,6 +41,7 @@ import {
   ArgumentEntityType,
   CalculatedField,
   CalculatedFieldAlarmRule,
+  CalculatedFieldsQuery,
   CalculatedFieldType,
 } from '@shared/models/calculated-field.models';
 import { ImportExportService } from '@shared/import-export/import-export.service';
@@ -67,7 +68,7 @@ export class AlarmRulesTableConfig extends EntityTableConfig<any> {
     action: (calculatedField: CalculatedField) => this.openDebugEventsDialog.call(this, calculatedField),
   };
 
-  alarmRuleFilterConfig: any;
+  alarmRuleFilterConfig: CalculatedFieldsQuery;
 
   constructor(private calculatedFieldsService: CalculatedFieldsService,
               private translate: TranslateService,

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

@@ -16,7 +16,7 @@
 
 -->
 <mat-form-field [formGroup]="entityTypeFormGroup"
-                [subscriptSizing]="inlineField ? 'dynamic' : 'fixed'"
+                [subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing"
                 [appearance]="inlineField ? 'outline' : appearance">
   <mat-label *ngIf="showLabel && !inlineField">{{ label }}</mat-label>
   <mat-select [required]="required" formControlName="entityType">

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

@@ -21,7 +21,7 @@ import { AliasEntityType, EntityType, entityTypeTranslations } from '@app/shared
 import { EntityService } from '@core/http/entity.service';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 
 @Component({
   selector: 'tb-entity-type-select',
@@ -68,6 +68,9 @@ export class EntityTypeSelectComponent implements ControlValueAccessor, OnInit,
   @Input()
   appearance: MatFormFieldAppearance = 'fill';
 
+  @Input()
+  subscriptSizing: SubscriptSizing = 'fixed';
+
   @Input()
   @coerceBoolean()
   inlineField: boolean;