Improve priority select component

frontend/src/app/app.module.ts

@@ -1,19 +1,19 @@
-import { HttpClientModule } from '@angular/common/http';
-import { APP_INITIALIZER, ErrorHandler, NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NG_ENTITY_SERVICE_CONFIG } from '@datorama/akita-ng-entity-service';
-import { AkitaNgRouterStoreModule } from '@datorama/akita-ng-router-store';
-import { AkitaNgDevtools } from '@datorama/akita-ngdevtools';
-import { environment } from '../environments/environment';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzSpinModule } from 'ng-zorro-antd/spin';
-import { QuillModule } from 'ngx-quill';
+import {HttpClientModule} from '@angular/common/http';
+import {APP_INITIALIZER, ErrorHandler, NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {NG_ENTITY_SERVICE_CONFIG} from '@datorama/akita-ng-entity-service';
+import {AkitaNgRouterStoreModule} from '@datorama/akita-ng-router-store';
+import {AkitaNgDevtools} from '@datorama/akita-ngdevtools';
+import {environment} from '../environments/environment';
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {NzIconModule} from 'ng-zorro-antd/icon';
+import {NzSpinModule} from 'ng-zorro-antd/spin';
+import {QuillModule} from 'ngx-quill';
 import * as Sentry from '@sentry/angular';
-import { Router } from '@angular/router';
+import {Router} from '@angular/router';
 
 @NgModule({
   declarations: [AppComponent],
@@ -32,7 +32,7 @@ import { Router } from '@angular/router';
   providers: [
     {
       provide: NG_ENTITY_SERVICE_CONFIG,
-      useValue: { baseUrl: 'https://jsonplaceholder.typicode.com' }
+      useValue: {baseUrl: 'https://jsonplaceholder.typicode.com'}
     },
     {
       provide: ErrorHandler,
@@ -44,11 +44,13 @@ import { Router } from '@angular/router';
     },
     {
       provide: APP_INITIALIZER,
-      useFactory: () => () => {},
+      useFactory: () => () => {
+      },
       deps: [Sentry.TraceService],
       multi: true,
     },
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {
+}

frontend/src/app/core/directives/target-click.directive.ts

@@ -0,0 +1,17 @@
+import {Directive, HostListener, Input} from '@angular/core';
+import {GoogleAnalyticsService} from '@trungk18/core/services/google-analytics.service';
+
+@Directive({
+  selector: '[targetClick]'
+})
+export class TargetClickDirective {
+  @Input() targetEventName: string;
+  @Input() targetEventCategory: string = 'button';
+
+  constructor(private _googleAnalytics: GoogleAnalyticsService) {
+  }
+
+  @HostListener('click') onClick($event) {
+    this._googleAnalytics.sendEvent(this.targetEventName, this.targetEventCategory);
+  }
+}

frontend/src/app/core/pipes/array-id-find.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ArrayIdFindPipe} from './array-id-find.pipe';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [ArrayIdFindPipe],
+  exports: [ArrayIdFindPipe]
+})
+export class ArrayIdFindModule {
+}

frontend/src/app/core/pipes/array-id-find.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'arrayIdFind'
+})
+export class ArrayIdFindPipe implements PipeTransform {
+
+  transform(value: {id: string}[], id: string): unknown {
+    return value.find(v => v.id === id);
+  }
+}

frontend/src/app/project/components/add-issue-modal/issue-priority-select/issue-priority-select.component.html

@@ -16,10 +16,10 @@
 <ng-template #defaultTemplate
              let-selected>
     <div class="flex items-center">
-        <svg-icon [name]="getPriorityIcon(selected.nzValue)?.icon"
-                  [style.color]="getPriorityIcon(selected.nzValue)?.color"
+        <svg-icon [name]="priorities[selected.nzValue]?.icon"
+                  [style.color]="priorities[selected.nzValue]?.color"
                   [size]="20">
         </svg-icon>
         <span class="ml-3 font-semibold uppercase text-textMedium text-13">{{ selected.nzValue }}</span>
     </div>
-</ng-template>
+</ng-template>

frontend/src/app/project/components/add-issue-modal/issue-priority-select/issue-priority-select.component.ts

@@ -1,24 +1,28 @@
-import { Component, Input } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { IssuePriorityIcon } from '@trungk18/interface/issue-priority-icon';
-import { IssueUtil } from '@trungk18/project/utils/issue';
-import { IssuePriority } from '@trungk18/interface/issue';
-import { ProjectConst } from '@trungk18/project/config/const';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {IssuePriorityIcon} from '@trungk18/interface/issue-priority-icon';
+import {ProjectConst} from '@trungk18/project/config/const';
+
+type IssuePriorityMap = { [key: string]: IssuePriorityIcon };
 
 @Component({
   selector: 'issue-priority-select',
   templateUrl: './issue-priority-select.component.html',
-  styleUrls: ['./issue-priority-select.component.scss']
+  styleUrls: ['./issue-priority-select.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
+// TODO implement ControlValueAccessor
 export class IssuePrioritySelectComponent {
   @Input() control: FormControl;
-  priorities: IssuePriorityIcon[];
+
+  public priorities: IssuePriorityIcon[];
+  public prioritiesMap: IssuePriorityMap = {};
 
   constructor() {
     this.priorities = ProjectConst.PrioritiesWithIcon;
-  }
 
-  getPriorityIcon(priority: IssuePriority) {
-    return IssueUtil.getIssuePriorityIcon(priority);
+    ProjectConst.PrioritiesWithIcon.forEach(p => {
+      this.prioritiesMap[p.value] = p;
+    });
   }
 }

frontend/src/app/project/components/add-issue-modal/issue-reporter-select/issue-reporter-select.component.html

@@ -10,5 +10,5 @@
 </nz-select>
 <ng-template #selectedReporterTmpl
              let-selected>
-    <j-user [user]="getUser(selected.nzValue)"></j-user>
-</ng-template>
+    <j-user [user]="users | arrayIdFind : selected.nzValue"></j-user>
+</ng-template>

frontend/src/app/project/components/add-issue-modal/issue-reporter-select/issue-reporter-select.component.ts

@@ -1,19 +1,14 @@
-import { Component, Input } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { JUser } from '@trungk18/interface/user';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {JUser} from '@trungk18/interface/user';
 
 @Component({
   selector: 'issue-reporter-select',
   templateUrl: './issue-reporter-select.component.html',
-  styleUrls: ['./issue-reporter-select.component.scss']
+  styleUrls: ['./issue-reporter-select.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class IssueReporterSelectComponent {
   @Input() control: FormControl;
   @Input() users: JUser[];
-
-  constructor() {}
-
-  getUser(userId: string) {
-    return this.users.find((user) => user.id === userId);
-  }
 }

frontend/src/app/project/project.module.ts

@@ -34,6 +34,7 @@ import { SettingsComponent } from './pages/settings/settings.component';
 import { ProjectRoutingModule } from './project-routing.module';
 import { ProjectComponent } from './project.component';
 import { TargetClickDirective } from '@trungk18/core/directives/target-click.directive';
+import {ArrayIdFindModule} from "@trungk18/core/pipes/array-id-find.module";
 
 @NgModule({
   declarations: [
@@ -73,7 +74,8 @@ import { TargetClickDirective } from '@trungk18/core/directives/target-click.dir
     ReactiveFormsModule,
     JiraControlModule,
     ContentLoaderModule,
-    QuillModule
+    QuillModule,
+    ArrayIdFindModule
   ]
 })
 export class ProjectModule {}