feat(datapoints-graph): code review suggestions

Refactor of translate pipe in template. Refactor fo includes pipe transform method. n/a
SoftwareAG · May 23, 2024 · 20853ba · 20853ba
1 parent d35f0c0
commit 20853ba
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 17 deletions.
diff --git a/...arm-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.html b/...arm-event-selector/alarm-event-attributes-form/alarm-event-attributes-form.component.html
@@ -1,7 +1,7 @@
 <div [formGroup]="formGroup">
   <c8y-form-group>
     <div class="d-flex a-i-center gap-8">
-      <label class="m-0" translate>Label</label>
+      <label class="m-0">{{ 'Label' | translate }}</label>
       <input
         class="form-control flex-grow"
         name="label"
@@ -23,7 +23,7 @@
   <div formGroupName="filters">
     <c8y-form-group>
       <div class="d-flex a-i-center gap-8">
-        <label class="m-0" translate>Type</label>
+        <label class="m-0">{{ 'Type' | translate }}</label>
         <input
           class="form-control flex-grow"
           name="type"

diff --git a/...event-selector/alarm-event-selector-list-item/alarm-event-selector-list-item.component.ts b/...event-selector/alarm-event-selector-list-item/alarm-event-selector-list-item.component.ts
@@ -1,12 +1,10 @@
 import {
-  AfterViewInit,
   Component,
   EventEmitter,
   forwardRef,
   Input,
   OnDestroy,
   Output,
-  ViewChild,
 } from '@angular/core';
 import {
   AbstractControl,
@@ -20,7 +18,6 @@ import {
 } from '@angular/forms';
 import { AlarmOrEvent, TimelineType } from '../alarm-event-selector.model';
 import { map, take, takeUntil } from 'rxjs/operators';
-import { ListItemComponent } from '@c8y/ngx-components';
 import { Observable, Subject } from 'rxjs';
 
 @Component({

diff --git a/src/datapoints-graph/alarm-event-selector/alarm-event-selector.component.html b/src/datapoints-graph/alarm-event-selector/alarm-event-selector.component.html
@@ -35,9 +35,11 @@
           <h1 class="c8y-icon c8y-icon-data-points c8y-icon-duocolor"></h1>
           <div>
             <p>
-              <strong translate>{{ timelineTypeTexts.emptyStateTitle }}</strong>
+              <strong>{{
+                timelineTypeTexts.emptyStateTitle | translate
+              }}</strong>
             </p>
-            <small translate>Select an asset from the list.</small>
+            <small>{{ 'Select an asset from the list.' | translate }}</small>
           </div>
         </div>
       </div>

diff --git a/src/datapoints-graph/alarm-event-selector/alarm-event-selector.component.ts b/src/datapoints-graph/alarm-event-selector/alarm-event-selector.component.ts
@@ -52,8 +52,8 @@ export class AlarmEventSelectorComponent implements OnInit {
   filteredItems$: Observable<AlarmOrEvent[]>;
   filterStringChanges$: Observable<string>;
   timelineTypeTexts: TimelineTypeTexts;
-  private filterString$ = new BehaviorSubject('');
   isExpanded = false;
+  private filterString$ = new BehaviorSubject('');
 
   constructor(private alarmEventSelectorService: AlarmEventSelectorService) {}
 

diff --git a/...graph/alarm-event-selector/custom-alarm-event-form/custom-alarm-event-form.component.html b/...graph/alarm-event-selector/custom-alarm-event-form/custom-alarm-event-form.component.html
@@ -3,7 +3,7 @@
     class="form-group d-flex a-i-center gap-8"
     [title]="'Change color' | translate"
   >
-    <label class="m-0" translate>Color</label>
+    <label class="m-0">{{ 'Color' | translate }}</label>
     <div class="c8y-colorpicker c8y-colorpicker--alarm">
       <input
         type="color"

diff --git a/src/datapoints-graph/alarm-event-selector/pipes/includes-alarm.pipe.ts b/src/datapoints-graph/alarm-event-selector/pipes/includes-alarm.pipe.ts
@@ -1,17 +1,14 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import {
-  AlarmDetails,
-  AlarmOrEvent,
-  EventDetails,
-} from '../alarm-event-selector.model';
+import { AlarmDetails, EventDetails } from '../alarm-event-selector.model';
 
 @Pipe({
   name: 'includesAlarmOrEvent',
 })
 export class IncludesAlarmOrEventPipe implements PipeTransform {
-  transform(itemList: EventDetails[], item?: EventDetails): boolean;
-  transform(itemList: AlarmDetails[], item?: AlarmDetails): boolean;
-  transform(itemList: any[], item?: any): boolean {
+  transform<T extends AlarmDetails | EventDetails>(
+    itemList: T[],
+    item?: T
+  ): boolean {
     if (!Array.isArray(itemList) || !item) {
       return false;
     }