feat: new linting #4

src/app/core-ui/main-header/main-header.component.html

@@ -125,7 +125,7 @@
       </ng-container>
     </div>
 
-    <simple-counter-button *ngFor="let simpleCounter of (simpleCounterService.enabledSimpleCounters$|async)"
+    <simple-counter-button *ngFor="let simpleCounter of (simpleCounterService.enabledSimpleCounters$|async); trackBy: trackById"
                            [simpleCounter]="simpleCounter"></simple-counter-button>
   </nav>
 </div>

src/app/core-ui/main-header/main-header.component.ts

@@ -24,6 +24,7 @@ import { Tag } from '../../features/tag/tag.model';
 import { Project } from '../../features/project/project.model';
 import { expandFadeHorizontalAnimation } from '../../ui/animations/expand.ani';
 import { SimpleCounterService } from '../../features/simple-counter/simple-counter.service';
+import { SimpleCounter } from '../../features/simple-counter/simple-counter.model';
 
 @Component({
   selector: 'main-header',
@@ -84,4 +85,8 @@ export class MainHeaderComponent implements OnInit, OnDestroy {
       this._renderer.setStyle(this.circleSvg.nativeElement, 'stroke-dashoffset', dashOffset);
     });
   }
+
+  trackById(i: number, item: SimpleCounter) {
+    return item.id;
+  }
 }

src/app/features/bookmark/dialog-edit-bookmark/dialog-edit-bookmark.component.html

@@ -32,7 +32,7 @@ <h1 mat-dialog-title>{{ (bookmarkCopy.id ?
                     name="type"
                     required="true"
                     tabindex="1">
-          <mat-option *ngFor="let type of types"
+          <mat-option *ngFor="let type of types; trackBy: trackByIndex"
                       [innerHtml]="(type.title|translate)"
                       [value]="type.type">
           </mat-option>
@@ -50,7 +50,7 @@ <h1 mat-dialog-title>{{ (bookmarkCopy.id ?
           <mat-icon matPrefix="">{{bookmarkCopy.icon}}</mat-icon>
           <mat-autocomplete #auto="matAutocomplete"
                             [autoActiveFirstOption]="true">
-            <mat-option *ngFor="let icon of (filteredIcons$|async)"
+            <mat-option *ngFor="let icon of (filteredIcons$|async); trackBy: trackByIndex"
                         [value]="icon">
               <mat-icon>{{icon}}</mat-icon>
               <span>{{icon}}</span>

src/app/features/bookmark/dialog-edit-bookmark/dialog-edit-bookmark.component.ts

@@ -86,4 +86,8 @@ export class DialogEditBookmarkComponent implements OnInit {
         return T.F.BOOKMARK.DIALOG_EDIT.LABELS.LINK;
     }
   }
+
+  trackByIndex(i: number, p: any) {
+    return i;
+  }
 }

src/app/features/config/config-section/config-section.component.html

@@ -7,7 +7,7 @@
     <div *ngIf="section.help"
          [innerHtml]="section.help|translate"></div>
     <ng-container *ngIf="section.helpArr">
-      <ng-container *ngFor="let helpSection of section.helpArr">
+      <ng-container *ngFor="let helpSection of section.helpArr; trackBy: trackByIndex">
         <div *ngIf="helpSection.h"
              class="mat-caption">{{helpSection.h|translate}}</div>
         <p *ngIf="helpSection.p"

src/app/features/config/config-section/config-section.component.ts

@@ -54,7 +54,7 @@ export class ConfigSectionComponent implements OnInit, OnDestroy {
   @Input() set cfg(v: any) {
     this._cfg = v;
     if (v && this._instance) {
-      this._instance.cfg = {...v};
+      (this._instance as any).cfg = {...v};
     }
   }
 
@@ -95,6 +95,10 @@ export class ConfigSectionComponent implements OnInit, OnDestroy {
     this.save.emit($event);
   }
 
+  trackByIndex(i: number, p: any) {
+    return i;
+  }
+
   private _loadCustomSection(customSection: CustomCfgSection) {
     const componentToRender = customConfigFormSectionComponent(customSection);
 

src/app/features/config/keyboard-input/keyboard-input.component.ts

@@ -16,20 +16,22 @@ export class KeyboardInputComponent extends FieldType {
   }
 
   onKeyDown(ev: KeyboardEvent) {
+    const keyCode = ev.keyCode;
+
     // the tab key should continue to behave normally
-    if (ev.keyCode === 9 || ev.key === 'Tab') {
+    if (keyCode === 9 || ev.key === 'Tab') {
       return;
     }
 
     ev.preventDefault();
     ev.stopPropagation();
 
     // focus out on escape
-    if (ev.keyCode === 27 || ev.key === 'Escape') {
+    if (keyCode === 27 || ev.key === 'Escape') {
       // element.blur();
-    } else if (ev.keyCode === 13 || ev.key === 'Enter') {
+    } else if (keyCode === 13 || ev.key === 'Enter') {
       // element.blur();
-    } else if (ev.keyCode === 16 || ev.keyCode === 17 || ev.keyCode === 18) {
+    } else if (keyCode === 16 || keyCode === 17 || keyCode === 18) {
       // don't update if event is for ctrl alt or shift down itself
       return;
     } else {
@@ -49,7 +51,7 @@ export class KeyboardInputComponent extends FieldType {
 
       // custom key handling
       let keyName = ev.key;
-      if (ev.keyCode === 32) {
+      if (keyCode === 32) {
         keyName = 'Space';
       }
 

src/app/features/config/select-project/select-project.component.html

@@ -5,7 +5,7 @@
         [readonly]="to.readonly"
         matNativeControl>
   <option [ngValue]="null">{{T.G.NONE|translate}}</option>
-  <ng-container *ngFor="let opt of projectService.list$|async">
+  <ng-container *ngFor="let opt of projectService.list$|async; trackBy: trackById">
     <option [ngValue]="opt.id">{{ opt.title }}</option>
   </ng-container>
 </select>

src/app/features/config/select-project/select-project.component.ts

@@ -26,7 +26,7 @@ export class SelectProjectComponent extends FieldType {
     return this.to.type || 'text';
   }
 
-  trackByFn(i: number, item: Project) {
+  trackById(i: number, item: Project) {
     return item.id;
   }
 }

src/app/features/issue/providers/github/github-issue/github-issue-content/github-issue-content.component.html

@@ -29,7 +29,7 @@
         <th>{{T.F.GITHUB.ISSUE_CONTENT.LABELS|translate}}</th>
         <td>
           <mat-chip-list>
-            <mat-chip *ngFor="let label of issue?.labels"
+            <mat-chip *ngFor="let label of issue?.labels; trackBy: trackByIndex"
                       [title]="label.description">{{label.name}}
             </mat-chip>
           </mat-chip-list>
@@ -46,7 +46,7 @@
     </table>
 
     <div *ngIf="issue?.comments">
-      <div *ngFor="let comment of (issue?.comments|sort:'created_at')"
+      <div *ngFor="let comment of (issue?.comments|sort:'created_at'); trackBy: trackByIndex"
            class="comment">
         <!--<img [src]="comment.author.avatarUrl"-->
         <!--class="author-avatar">-->

src/app/features/issue/providers/github/github-issue/github-issue-content/github-issue-content.component.ts

@@ -28,4 +28,8 @@ export class GithubIssueContentComponent {
   hideUpdates() {
     this._taskService.markIssueUpdatesAsRead(this.task.id);
   }
+
+  trackByIndex(i: number, p: any) {
+    return i;
+  }
 }

src/app/features/issue/providers/github/github-issue/github-issue.effects.ts

@@ -24,7 +24,26 @@ import { IssueEffectHelperService } from '../../../issue-effect-helper.service';
 export class GithubIssueEffects {
 
   private _pollTimer$: Observable<any> = timer(GITHUB_INITIAL_POLL_DELAY, GITHUB_POLL_INTERVAL);
-
+  @Effect({dispatch: false})
+  pollNewIssuesToBacklog$: Observable<any> = this._issueEffectHelperService.pollToBacklogTriggerToProjectId$.pipe(
+    switchMap((pId) => this._projectService.getGithubCfgForProject$(pId).pipe(
+      first(),
+      filter(githubCfg => isGithubEnabled(githubCfg) && githubCfg.isAutoAddToBacklog),
+      switchMap(githubCfg => this._pollTimer$.pipe(
+        // NOTE: required otherwise timer stays alive for filtered actions
+        takeUntil(this._issueEffectHelperService.pollToBacklogActions$),
+        tap(() => console.log('GITHUB_POLL_BACKLOG_CHANGES')),
+        withLatestFrom(
+          this._githubApiService.getLast100IssuesForRepo$(githubCfg),
+          this._taskService.getAllIssueIdsForProject(pId, GITHUB_TYPE)
+        ),
+        tap(([, issues, allTaskGithubIssueIds]: [any, GithubIssueReduced[], number[]]) => {
+          const issuesToAdd = issues.filter(issue => !allTaskGithubIssueIds.includes(issue.id));
+          this._importNewIssuesToBacklog(pId, issuesToAdd);
+        })
+      )),
+    )),
+  );
   private _updateIssuesForCurrentContext$: Observable<any> = this._workContextService.allTasksForCurrentContext$.pipe(
     first(),
     switchMap((tasks) => {
@@ -46,27 +65,6 @@ export class GithubIssueEffects {
     ),
     tap((githubTasks: TaskWithSubTasks[]) => this._refreshIssues(githubTasks)),
   );
-
-  @Effect({dispatch: false})
-  pollNewIssuesToBacklog$: Observable<any> = this._issueEffectHelperService.pollToBacklogTriggerToProjectId$.pipe(
-    switchMap((pId) => this._projectService.getGithubCfgForProject$(pId).pipe(
-      first(),
-      filter(githubCfg => isGithubEnabled(githubCfg) && githubCfg.isAutoAddToBacklog),
-      switchMap(githubCfg => this._pollTimer$.pipe(
-        // NOTE: required otherwise timer stays alive for filtered actions
-        takeUntil(this._issueEffectHelperService.pollToBacklogActions$),
-        tap(() => console.log('GITHUB_POLL_BACKLOG_CHANGES')),
-        withLatestFrom(
-          this._githubApiService.getLast100IssuesForRepo$(githubCfg),
-          this._taskService.getAllIssueIdsForProject(pId, GITHUB_TYPE)
-        ),
-        tap(([, issues, allTaskGithubIssueIds]: [any, GithubIssueReduced[], number[]]) => {
-          const issuesToAdd = issues.filter(issue => !allTaskGithubIssueIds.includes(issue.id));
-          this._importNewIssuesToBacklog(pId, issuesToAdd);
-        })
-      )),
-    )),
-  );
   @Effect({dispatch: false})
   pollIssueChangesForCurrentContext$: Observable<any> = this._issueEffectHelperService.pollIssueTaskUpdatesActions$
     .pipe(

src/app/features/issue/providers/gitlab/gitlab-issue/gitlab-issue-content/gitlab-issue-content.component.html

@@ -46,7 +46,7 @@
     </table>
 
     <div *ngIf="issue?.comments">
-      <div *ngFor="let comment of (issue?.comments|sort:'created_at')"
+      <div *ngFor="let comment of (issue?.comments|sort:'created_at'); trackBy: trackByIndex"
            class="comment">
         <div class="name-and-comment-content">
           <div><span class="author-name">{{comment.author?.username}}</span>

src/app/features/issue/providers/gitlab/gitlab-issue/gitlab-issue-content/gitlab-issue-content.component.ts

@@ -26,4 +26,8 @@ export class GitlabIssueContentComponent {
   hideUpdates() {
     this._taskService.markIssueUpdatesAsRead(this.task.id);
   }
+
+  trackByIndex(i: number, p: any) {
+    return i;
+  }
 }

src/app/features/issue/providers/jira/jira-common-interfaces.service.ts

@@ -29,7 +29,7 @@ export class JiraCommonInterfacesService implements IssueServiceInterface {
 
   getById$(issueId: string | number, projectId: string) {
     return this._getCfgOnce$(projectId).pipe(
-      switchMap(jiraCfg => this._jiraApiService.getIssueById$(issueId, jiraCfg))
+      switchMap(jiraCfg => this._jiraApiService.getIssueById$(issueId as string, jiraCfg))
     );
   }
 

src/app/features/issue/providers/jira/jira-issue/jira-issue-content/jira-issue-content.component.html

@@ -51,7 +51,7 @@ <h3 class="mat-h3">{{T.F.JIRA.ISSUE_CONTENT.LIST_OF_CHANGES|translate}}</h3>
       <th>{{T.F.JIRA.ISSUE_CONTENT.COMPONENTS|translate}}</th>
       <td>
         <mat-chip-list>
-          <mat-chip *ngFor="let component of issue.components"
+          <mat-chip *ngFor="let component of issue.components; trackBy: trackByIndex"
                     [title]="component.description">{{component.name}}
           </mat-chip>
         </mat-chip-list>
@@ -80,7 +80,7 @@ <h3 class="mat-h3">{{T.F.JIRA.ISSUE_CONTENT.LIST_OF_CHANGES|translate}}</h3>
     <tr *ngIf="issue.comments">
       <th>{{T.F.JIRA.ISSUE_CONTENT.COMMENTS|translate}}</th>
       <td>
-        <div *ngFor="let comment of (issue.comments|sort:'created')"
+        <div *ngFor="let comment of (issue.comments|sort:'created'); trackBy: trackByIndex"
              class="comment">
 
           <img [src]="comment.author.avatarUrl"

src/app/features/issue/providers/jira/jira-issue/jira-issue-content/jira-issue-content.component.ts

@@ -47,4 +47,8 @@ export class JiraIssueContentComponent {
   hideUpdates() {
     this._taskService.markIssueUpdatesAsRead(this.task.id);
   }
+
+  trackByIndex(i: number, p: any) {
+    return i;
+  }
 }

src/app/features/issue/providers/jira/jira-view-components/dialog-jira-transition/dialog-jira-transition.component.html

@@ -21,7 +21,7 @@ <h1 mat-dialog-title>
     <mat-select [(ngModel)]="chosenTransition">
       <!--<mat-option value="DO_NOT">Don't transition</mat-option>-->
       <!--<mat-option value="ALWAYS_ASK">Always open dialog</mat-option>-->
-      <mat-option *ngFor="let transition of (availableTransitions$|async)"
+      <mat-option *ngFor="let transition of (availableTransitions$|async); trackBy: trackByIndex"
                   [value]="transition">
         <!--<img [src]="transition.to.iconUrl">-->
         {{transition.name}}

src/app/features/issue/providers/jira/jira-view-components/dialog-jira-transition/dialog-jira-transition.component.ts

@@ -65,4 +65,8 @@ export class DialogJiraTransitionComponent {
       });
     }
   }
+
+  trackByIndex(i: number, p: any) {
+    return i;
+  }
 }

src/app/features/metric/improvement-banner/improvement-banner.component.html

@@ -1,6 +1,6 @@
 <div [@improvementBanner]="improvements.length"
      class="improvements">
-  <div *ngFor="let improvement of improvements;"
+  <div *ngFor="let improvement of improvements; trackBy: trackById"
        class="improvement"
        mat-ripple>
     <button (click)="dismiss(improvement)"

src/app/features/metric/improvement-banner/improvement-banner.component.ts

@@ -37,4 +37,9 @@ export class ImprovementBannerComponent implements OnDestroy {
     this.improvementService.addCheckedDay(improvement.id, getWorklogStr());
     this.improvementService.hideImprovement(improvement.id);
   }
+
+  trackById(i: number, improvement: Improvement): string {
+    return improvement.id;
+  }
+
 }

src/app/features/note/notes/notes.component.ts

@@ -45,20 +45,20 @@ export class NotesComponent implements OnInit, OnDestroy {
   ) {
   }
 
-  @HostListener('dragenter', ['$event']) onDragEnter(ev: Event) {
+  @HostListener('dragenter', ['$event']) onDragEnter(ev: DragEvent) {
     this.dragEnterTarget = ev.target as HTMLElement;
     ev.preventDefault();
     this.isDragOver = true;
   }
 
-  @HostListener('dragleave', ['$event']) onDragLeave(ev: Event) {
+  @HostListener('dragleave', ['$event']) onDragLeave(ev: DragEvent) {
     if (this.dragEnterTarget === (ev.target as HTMLElement)) {
       ev.preventDefault();
       this.isDragOver = false;
     }
   }
 
-  @HostListener('drop', ['$event']) onDrop(ev: Event) {
+  @HostListener('drop', ['$event']) onDrop(ev: DragEvent) {
     this.isDragOver = false;
     this.noteService.createFromDrop(ev);
   }

src/app/features/tasks/dialog-time-estimate/dialog-time-estimate.component.html

@@ -23,7 +23,7 @@ <h1 mat-dialog-title>{{T.F.TASK.D_TIME.TITLE|translate}}</h1>
       </div>
 
       <div class="other-days">
-        <div *ngFor="let strDate of timeSpentOnDayCopy|keys:'reverse':todayStr"
+        <div *ngFor="let strDate of timeSpentOnDayCopy|keys:'reverse':todayStr;trackBy:trackByIndex"
              class="other-day">
           <mat-form-field class="mat-icon-float mat-block">
             <input [(ngModel)]="timeSpentOnDayCopy[strDate]"

src/app/features/tasks/dialog-time-estimate/dialog-time-estimate.component.ts

@@ -62,4 +62,8 @@ export class DialogTimeEstimateComponent {
   deleteValue(strDate: string) {
     delete this.timeSpentOnDayCopy[strDate];
   }
+
+  trackByIndex(i: number, p: any) {
+    return i;
+  }
 }

src/app/features/tasks/filter-done-tasks.pipe.ts

@@ -11,5 +11,5 @@ export const filterDoneTasks = (tasks: TaskWithSubTasks[], currentTaskId: string
   name: 'filterDoneTasks'
 })
 export class FilterDoneTasksPipe implements PipeTransform {
-  transform: (value: any, ...args: any[]) = filterDoneTasks;
+  transform: (value: any, ...args: any[]) => any = filterDoneTasks;
 }

src/app/features/tasks/task-additional-info/task-additional-info-wrapper/task-additional-info-wrapper.component.ts

@@ -3,7 +3,7 @@ import { TaskService } from '../../task.service';
 import { LayoutService } from '../../../../core-ui/layout/layout.service';
 import { delay, switchMap } from 'rxjs/operators';
 import { Observable, of } from 'rxjs';
-import { Task, TaskWithSubTasks } from '../../task.model';
+import { TaskWithSubTasks } from '../../task.model';
 
 @Component({
   selector: 'task-additional-info-wrapper',

src/app/features/tasks/task-additional-info/task-additional-info.component.ts

@@ -108,6 +108,13 @@ export class TaskAdditionalInfoComponent implements AfterViewInit, OnDestroy {
     switchMap((id) => id ? this.taskService.getByIdWithSubTaskData$(id) : of(null))
   );
   localAttachments: TaskAttachment[];
+  issueAttachments$: Observable<TaskAttachmentCopy[]> = this.issueData$.pipe(
+    withLatestFrom(this.issueIdAndTypeShared$),
+    map(([data, {type}]) => (data && type)
+      ? this._issueService.getMappedAttachments(type, data)
+      : [])
+  );
+  private _taskData: TaskWithSubTasks;
   issueData$: Observable<IssueData> = this.issueDataTrigger$.pipe(
     switchMap((args) => (args && args.id && args.type)
       ? this._issueService.getById$(args.type, args.id, this._taskData.projectId)
@@ -125,14 +132,6 @@ export class TaskAdditionalInfoComponent implements AfterViewInit, OnDestroy {
     // expandable closed when the data is loaded
     delay(0),
   );
-  issueAttachments$: Observable<TaskAttachmentCopy[]> = this.issueData$.pipe(
-    withLatestFrom(this.issueIdAndTypeShared$),
-    map(([data, {type}]) => (data && type)
-      ? this._issueService.getMappedAttachments(type, data)
-      : [])
-  );
-  private _taskData: TaskWithSubTasks;
-
   private _focusTimeout: number;
   private _subs: Subscription = new Subscription();