convert User to class

frontend/src/app/components/application-top-bar/application-top-bar.component.ts

@@ -4,7 +4,6 @@ import { BehaviorSubject, Subscription } from 'rxjs';
 import { ConfigService } from '../../services/config.service';
 import { NavigationEnd, Router } from '@angular/router';
 import { UserService } from '../../services/user.service';
-import { getFullNameOfUser } from '../../shared/types/model/user';
 
 @Component({
   selector: 'app-application-top-bar',
@@ -62,7 +61,7 @@ export class ApplicationTopBarComponent implements OnInit, OnDestroy {
     // user is loaded on base route resolver. We have to wait until routing is done.
     this.router.events.subscribe((val) => {
       if (!this.userFullName && val instanceof NavigationEnd) {
-        this.userFullName = getFullNameOfUser(this.userService.getCurrentUser());
+        this.userFullName = this.userService.getCurrentUser().fullName;
         this.cd.markForCheck();
       }
     });

frontend/src/app/components/key-result-dialog/key-result-dialog.component.ts

@@ -86,14 +86,11 @@ export class KeyResultDialogComponent {
   }
 
   isTouchedOrDirty(name: string) {
-    return this.keyResultForm.get(name)?.dirty || this.keyResultForm.get(name)?.touched;
+    return this.keyResultForm.get(name)?.dirty || this.keyResultForm.get(name)?.touched || false;
   }
 
   invalidOwner(): boolean {
-    return (
-      !!this.isTouchedOrDirty('owner') &&
-      (typeof this.keyResultForm.value.owner === 'string' || !this.keyResultForm.value.owner)
-    );
+    return this.isTouchedOrDirty('owner') && (typeof this.keyResultForm.value.owner === 'string' || !this.keyResultForm.value.owner);
   }
 
   getDialogTitle(): string {

frontend/src/app/components/key-result-form/key-result-form.component.html

@@ -19,30 +19,9 @@
     (formValidityEmitter)="updateFormValidity()"
     [keyResult]="keyResult"
     [keyResultForm]="keyResultForm"
+    [users]="filteredUsers$ "
   ></app-key-result-type>
 
-  <div class="okr-form-row okr-form-label-input-container">
-    <label class="okr-form-label okr-form-col" for="owner">Owner</label>
-    <div class="okr-form-input">
-      <input
-        (keydown.enter)="$event.preventDefault()"
-        [ngClass]="invalidOwner() ? 'dialog-form-field-error' : 'dialog-form-field'"
-        class="owner-input"
-        [attr.data-testId]="'owner-input'"
-        [matAutocomplete]="auto"
-        formControlName="owner"
-        id="owner"
-      />
-      <mat-autocomplete #auto="matAutocomplete" [displayWith]="getFullNameOfUser.bind(this)">
-        <mat-option *ngFor="let user of filteredUsers$ | async" [value]="user">
-          {{ user.firstName + " " + user.lastName }}
-        </mat-option>
-      </mat-autocomplete>
-      <mat-error *ngIf="invalidOwner()">
-        <span>{{ getErrorMessage("MUST_SELECT", "Owner", null, null) }}</span>
-      </mat-error>
-    </div>
-  </div>
 
   <div class="okr-form-row okr-form-label-input-container">
     <label class="okr-form-label okr-form-col" for="description">Beschreibung (optional)</label>

frontend/src/app/components/key-result-form/key-result-form.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { getFullNameOfUser, User } from '../../shared/types/model/user';
+import { User } from '../../shared/types/model/user';
 import { KeyResult } from '../../shared/types/model/key-result';
 import { KeyResultMetric } from '../../shared/types/model/key-result-metric';
 import { KeyResultOrdinal } from '../../shared/types/model/key-result-ordinal';
@@ -19,7 +19,7 @@ import { TranslateService } from '@ngx-translate/core';
 export class KeyResultFormComponent implements OnInit, OnDestroy {
   users$!: Observable<User[]>;
 
-  filteredUsers$: Observable<User[]> | undefined = of([]);
+  filteredUsers$: Observable<User[]> = of([]);
 
   actionList$: BehaviorSubject<Action[] | null> = new BehaviorSubject<Action[] | null>([] as Action[]);
 
@@ -40,7 +40,7 @@ export class KeyResultFormComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.users$ = this.userService.getUsers();
-    this.filteredUsers$ = this.keyResultForm.get('owner')?.valueChanges.pipe(startWith(''), filter((value) => typeof value === 'string'), switchMap((value) => this.filter(value)));
+    this.filteredUsers$ = this.keyResultForm.get('owner')?.valueChanges.pipe(startWith(''), filter((value) => typeof value === 'string'), switchMap((value) => this.filter(value))) || of([]);
     if (this.keyResult) {
       this.keyResultForm.patchValue({ actionList: this.keyResult.actionList });
       this.keyResultForm.controls['title'].setValue(this.keyResult.title);
@@ -77,7 +77,7 @@ export class KeyResultFormComponent implements OnInit, OnDestroy {
         .subscribe((users) => {
           const loggedInUser = this.getFullNameOfLoggedInUser();
           users.forEach((user) => {
-            if (getFullNameOfUser(user) === loggedInUser) {
+            if (user.fullName === loggedInUser) {
               this.keyResultForm.controls['owner'].setValue(user);
             }
           });
@@ -123,7 +123,7 @@ export class KeyResultFormComponent implements OnInit, OnDestroy {
 
   filter(value: string): Observable<User[]> {
     const filterValue = value.toLowerCase();
-    return this.users$.pipe(map((users) => users.filter((user) => getFullNameOfUser(user)
+    return this.users$.pipe(map((users) => users.filter((user) => user.fullName
       .toLowerCase()
       .includes(filterValue))));
   }
@@ -136,7 +136,7 @@ export class KeyResultFormComponent implements OnInit, OnDestroy {
   }
 
   getFullNameOfUser(user: User): string {
-    return user ? getFullNameOfUser(user) : '';
+    return user?.fullName || '';
   }
 
   getKeyResultId(): number | null {

frontend/src/app/components/key-result-type/key-result-type.component.html

@@ -26,28 +26,52 @@
 
 <ng-container *ngIf="isMetric; else ordinalBlock">
   <form [formGroup]="keyResultForm" class="okr-form-row row-cols-1 row-cols-md-3">
-    <div class="col">
-      <div class="okr-form-row">
+    <div class="col-4 ">
+      <div class="okr-form-row okr-form-label-input-container">
         <label class="okr-form-label okr-form-col" for="unit">Einheit</label>
-        <div class="col">
-          <select
-            class="dialog-form-field unit-dropdown bg-white"
-            [ngClass]="formInputCheck(keyResultForm, 'unit')"
-            formControlName="unit"
-            id="unit"
-            [attr.data-testId]="'unit'"
-          >
-            <option *ngFor="let unit of Unit | keyvalue" value="{{ unit.value }}">
-              {{ "UNIT." + unit.value | translate }}
-            </option>
-          </select>
-          <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'unit')">
-            <span>{{ getErrorMessage("MUST_SELECT", "Einheit", null, null) }}</span>
+        <select
+          class="dialog-form-field unit-dropdown bg-white"
+          [ngClass]="formInputCheck(keyResultForm, 'unit')"
+          formControlName="unit"
+          id="unit"
+          [attr.data-testId]="'unit'"
+        >
+          <option *ngFor="let unit of Unit | keyvalue" value="{{ unit.value }}">
+            {{ "UNIT." + unit.value | translate }}
+          </option>
+        </select>
+        <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'unit')">
+          <span>{{ getErrorMessage("MUST_SELECT", "Einheit", null, null) }}</span>
+        </mat-error>
+      </div>
+    </div>
+
+    <div class="col-8">
+      <div class="okr-form-row okr-form-label-input-container">
+        <label class="okr-form-label okr-form-col" for="owner">Owner</label>
+        <div class="okr-form-input">
+          <input
+            (keydown.enter)="$event.preventDefault()"
+            [attr.data-testId]="'owner-input'"
+            [matAutocomplete]="auto"
+            [ngClass]="invalidOwner() ? 'dialog-form-field-error' : 'dialog-form-field'"
+            class="owner-input"
+            formControlName="owner"
+            id="owner"
+          />
+          <mat-autocomplete #auto="matAutocomplete" [displayWith]="User.getFullNameOfUser.bind(this)">
+            <mat-option *ngFor="let user of users | async" [value]="user">
+              {{ user.firstName + " " + user.lastName }}
+            </mat-option>
+          </mat-autocomplete>
+          <mat-error *ngIf="invalidOwner()">
+            <span>{{ getErrorMessage("MUST_SELECT", "Owner", null, null) }}</span>
           </mat-error>
         </div>
       </div>
     </div>
 
+
     <div class="col">
       <div class="okr-form-row">
         <label class="okr-form-label okr-form-col" for="baseline">Baseline</label>

frontend/src/app/components/key-result-type/key-result-type.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+// @ts-ignore
 import * as de from '../../../assets/i18n/de.json';
 
 import { KeyResultTypeComponent } from './key-result-type.component';
@@ -8,6 +9,7 @@ import { TranslateTestingModule } from 'ngx-translate-testing';
 import { By } from '@angular/platform-browser';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { User } from '../../shared/types/model/user';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 
 describe('KeyResultTypeComponent', () => {
   let component: KeyResultTypeComponent;
@@ -71,6 +73,8 @@ describe('KeyResultTypeComponent', () => {
         imports: [TranslateTestingModule.withTranslations({
           de: de
         }),
+        MatAutocompleteModule,
+
         ReactiveFormsModule]
       });
       fixture = TestBed.createComponent(KeyResultTypeComponent);
@@ -149,6 +153,7 @@ describe('KeyResultTypeComponent', () => {
         imports: [TranslateTestingModule.withTranslations({
           de: de
         }),
+        MatAutocompleteModule,
         ReactiveFormsModule]
       });
       fixture = TestBed.createComponent(KeyResultTypeComponent);
@@ -227,6 +232,7 @@ describe('KeyResultTypeComponent', () => {
         imports: [TranslateTestingModule.withTranslations({
           de: de
         }),
+        MatAutocompleteModule,
         ReactiveFormsModule]
       });
       fixture = TestBed.createComponent(KeyResultTypeComponent);

frontend/src/app/components/key-result-type/key-result-type.component.ts

@@ -6,6 +6,8 @@ import { KeyResultOrdinal } from '../../shared/types/model/key-result-ordinal';
 import { Unit } from '../../shared/types/enums/unit';
 import { formInputCheck, hasFormFieldErrors } from '../../shared/common';
 import { TranslateService } from '@ngx-translate/core';
+import { User } from '../../shared/types/model/user';
+import { Observable, Subject } from 'rxjs';
 
 @Component({
   selector: 'app-key-result-type',
@@ -18,6 +20,8 @@ export class KeyResultTypeComponent implements OnInit {
 
   @Input() keyResult!: KeyResult | null;
 
+  @Input() users: Observable<User[]> = new Subject();
+
 
   isMetric = true;
 
@@ -112,4 +116,17 @@ export class KeyResultTypeComponent implements OnInit {
     return field + this.translate.instant('DIALOG_ERRORS.' + error)
       .format(firstNumber, secondNumber);
   }
+
+  isTouchedOrDirty(name: string) {
+    return this.keyResultForm.get(name)?.dirty || this.keyResultForm.get(name)?.touched;
+  }
+
+  invalidOwner(): boolean {
+    return (
+      !!this.isTouchedOrDirty('owner') &&
+      (typeof this.keyResultForm.value.owner === 'string' || !this.keyResultForm.value.owner)
+    );
+  }
+
+  protected readonly User = User;
 }

frontend/src/app/components/team-filter/team-filter.component.spec.ts

@@ -11,7 +11,6 @@ import { team1, team2, team3, teamList, testUser } from '../../shared/test-data'
 import { Router } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
 import { UserService } from '../../services/user.service';
-import { extractTeamsFromUser } from '../../shared/types/model/user';
 import { ApplicationBannerComponent } from '../application-banner/application-banner.component';
 
 const teamServiceMock = {
@@ -264,7 +263,7 @@ describe('TeamFilterComponent', () => {
     expect(component.activeTeams.length)
       .toBe(1);
     expect(component.activeTeams)
-      .toStrictEqual(extractTeamsFromUser(testUser)
+      .toStrictEqual(testUser.teamList
         .map((team) => team.id));
     expect(component.changeTeamFilterParams)
       .toHaveBeenCalledTimes(1);
@@ -283,7 +282,7 @@ describe('TeamFilterComponent', () => {
     expect(component.activeTeams.length)
       .toBe(1);
     expect(component.activeTeams)
-      .toStrictEqual(extractTeamsFromUser(testUser)
+      .toStrictEqual(testUser.teamList
         .map((team) => team.id));
     expect(component.changeTeamFilterParams)
       .toHaveBeenCalledTimes(1);

frontend/src/app/components/team-filter/team-filter.component.ts

@@ -6,7 +6,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { areEqual, getValueFromQuery, optionalReplaceWithNulls, trackByFn } from '../../shared/common';
 import { RefreshDataService } from '../../services/refresh-data.service';
 import { UserService } from '../../services/user.service';
-import { extractTeamsFromUser } from '../../shared/types/model/user';
 import { BreakpointObserver } from '@angular/cdk/layout';
 
 @Component({
@@ -70,7 +69,7 @@ export class TeamFilterComponent implements OnInit, OnDestroy {
         const knownTeams = this.getAllTeamIds()
           .filter((teamId) => teamIds?.includes(teamId));
         if (knownTeams.length == 0) {
-          this.activeTeams = extractTeamsFromUser(this.userService.getCurrentUser())
+          this.activeTeams = this.userService.getCurrentUser().teamList
             .map((team) => team.id);
         } else {
           this.activeTeams = knownTeams;

frontend/src/app/shared/test-data.ts

@@ -17,6 +17,7 @@ import { CheckInOrdinal } from './types/model/check-in-ordinal';
 import { CheckInMetric } from './types/model/check-in-metric';
 import { CheckInOrdinalMin } from './types/model/check-in-ordinal-min';
 import { CheckInMetricMin } from './types/model/check-in-metric-min';
+import { UserTeam } from './types/model/user-team';
 
 export const teamFormObject = {
   name: 'newTeamName'
@@ -383,45 +384,27 @@ export const secondCheckIn: CheckInMetricMin = {
   isWriteable: true
 };
 
-export const testUser: User = {
+const userTeamList: UserTeam[] = [{
   id: 1,
-  firstName: 'Bob',
-  lastName: 'Baumeister',
-  isOkrChampion: false,
-  userTeamList: [{
-    id: 1,
-    team: team1,
-    isTeamAdmin: false
-  }],
-  email: '[email protected]'
-};
+  team: team1,
+  isTeamAdmin: false
+}];
+
+export const testUser: User = new User(
+  1, 'Bob', 'Baumeister', '[email protected]', userTeamList, false
+);
 
 export const users: User[] = [
   testUser,
-  {
-    id: 2,
-    firstName: 'Paco',
-    lastName: 'Egiman',
-    isOkrChampion: true,
-    userTeamList: [],
-    email: '[email protected]'
-  },
-  {
-    id: 3,
-    firstName: 'Robin',
-    lastName: 'Papier',
-    isOkrChampion: false,
-    userTeamList: [],
-    email: '[email protected]'
-  },
-  {
-    id: 4,
-    firstName: 'Key Result',
-    lastName: 'Owner',
-    isOkrChampion: false,
-    userTeamList: [],
-    email: '[email protected]'
-  }
+  new User(
+    2, 'Paco', 'Egiman', '[email protected]', [], true
+  ),
+  new User(
+    3, 'Robin', 'Papier', '[email protected]', [], false
+  ),
+  new User(
+    4, 'Key Result', 'Owner', '[email protected]', [], false
+  )
 ];
 
 export const keyResult: KeyResultOrdinal = {