#8 Localize order-by in teams-skills compnent

Use the same approach as in overview-skills component: Move the
sort logic into the component code instead doing logic in the template.

Signed-off-by: Sven Strittmatter <[email protected]>

src/main/webapp/app/custom/teams/skills/teams-skills.component.html

@@ -15,7 +15,7 @@ <h4>{{ 'teamDojoApp.teams.skills.title' | translate }}</h4>
           <label class="form-check-label" for="checkIncomplete" jhiTranslate="teamDojoApp.teams.skills.search.filter.label"> </label>
         </div>
         <div class="mb-3 skill-sort">
-          <select class="form-control" name="orderBy" [(ngModel)]="orderBy" id="field_orderBy">
+          <select class="form-control" name="orderBy" [(ngModel)]="orderBy" id="field_orderBy" (ngModelChange)="onSkillSort()">
             <option value="title">{{ 'teamDojoApp.teams.skills.search.orderBy.title' | translate }}</option>
             <option value="score">{{ 'teamDojoApp.teams.skills.search.orderBy.score' | translate }}</option>
             <option value="rateCount">{{ 'teamDojoApp.teams.skills.search.orderBy.rateCount' | translate }}</option>
@@ -39,7 +39,7 @@ <h4>{{ 'teamDojoApp.teams.skills.title' | translate }}</h4>
       <div
         class="list-group-item list-group-item-action flex-column align-items-start mb-3 skill-list-item"
         [ngClass]="{ 'active-skill': isActiveSkill(skill), 'irrelevant-skill': skill.irrelevant, 'in-skill-details': isInSkillDetails() }"
-        *ngFor="let skill of skills | achievableSkillFilter: search | achievableSkillSort: orderBy"
+        *ngFor="let skill of skills | achievableSkillFilter: search"
       >
         <div class="d-flex flex-column justify-content-between h-100">
           <div class="d-flex flex-grow-1 skill-info skill-status-{{ getStatusClass(skill) }}">

src/main/webapp/app/custom/teams/skills/teams-skills.component.ts

@@ -22,12 +22,14 @@ import { DimensionService } from 'app/entities/dimension/service/dimension.servi
 import { SkillStatusUtils } from 'app/custom/entities/skill-status';
 import { TeamsSkillsService } from 'app/custom/teams/teams-skills.service';
 import { SkillService } from 'app/entities/skill/service/skill.service';
-import { ISkill } from 'app/entities/skill/skill.model';
+import { ISkill, Skill } from 'app/entities/skill/skill.model';
 import { TeamsSelectionService } from 'app/custom/teams-selection/teams-selection.service';
 import { ITeam } from 'app/entities/team/team.model';
 import { AlertService } from 'app/core/util/alert.service';
 import { ParseLinks } from 'app/core/util/parse-links.service';
 import { ISkillObjects } from 'app/custom/entities/skill-objects/skill-objects.model';
+import { AchievableSkillSortPipe } from '../../shared/pipe/achievable-skill-sort.pipe';
+import { TranslateModelService } from '../../shared/translate-model/translate-model.service';
 
 const ROLES_ALLOWED_TO_UPDATE = ['ROLE_ADMIN'];
 
@@ -37,6 +39,7 @@ const ROLES_ALLOWED_TO_UPDATE = ['ROLE_ADMIN'];
   styleUrls: ['./teams-skills.scss'],
 })
 export class TeamsSkillsComponent implements OnInit, OnChanges {
+  static readonly DEFAULT_ORDER_BY: string = 'title';
   @Input() team?: ITeam;
   @Input() skill?: IAchievableSkill;
   @Output() skillClicked = new EventEmitter<ISkillObjects>();
@@ -52,7 +55,7 @@ export class TeamsSkillsComponent implements OnInit, OnChanges {
   activeSkill: ISkill | null = null;
   search$: Subject<string> = new Subject<string>();
   search = '';
-  orderBy: keyof IAchievableSkill = 'titleEN'; // FIXME: #8 Localize attribute here.
+  orderBy = TeamsSkillsComponent.DEFAULT_ORDER_BY;
   hasAuthority = false;
 
   constructor(
@@ -69,7 +72,8 @@ export class TeamsSkillsComponent implements OnInit, OnChanges {
     private levelService: LevelService,
     private badgeService: BadgeService,
     private dimensionService: DimensionService,
-    private accountService: AccountService
+    private accountService: AccountService,
+    private translateModelService: TranslateModelService
   ) {}
 
   ngOnInit(): void {
@@ -393,6 +397,28 @@ export class TeamsSkillsComponent implements OnInit, OnChanges {
     this.updateSkill(s);
   }
 
+  onSkillSort(): void {
+    this.skills = this.sortSkills(this.skills);
+  }
+
+  sortSkills(skills: IAchievableSkill[]): IAchievableSkill[] {
+    return new AchievableSkillSortPipe().transform(skills, this.localizeOrderBy(this.orderBy));
+  }
+
+  private localizeOrderBy(propertyName: string): keyof AchievableSkill {
+    type AchievableSkillObjectKey = keyof AchievableSkill;
+
+    if (this.isLocalizedModelProperty(propertyName)) {
+      return this.translateModelService.localizePropertyName(propertyName) as AchievableSkillObjectKey;
+    }
+
+    return propertyName as AchievableSkillObjectKey;
+  }
+
+  private isLocalizedModelProperty(propertyName: string): boolean {
+    return propertyName === TeamsSkillsComponent.DEFAULT_ORDER_BY;
+  }
+
   private getFiltersFromStorage(): string[] {
     const filters = this.storage.retrieve('filterKey');
     return filters ? (filters as string[]) : [];