Merge pull request #30 from SwimResults/develop

`v1.0.4` User Athlete

src/app/app-routing.module.ts

@@ -9,7 +9,7 @@ import {PageTeamComponent, PageTeamsEventComponent, PageTeamsGeneralComponent} f
 import {PageStatsEventComponent, PageStatsGeneralComponent} from "./content/stats";
 import {PageEventComponent, PageEventsComponent} from "./content/events";
 import {AuthComponent} from "./content/auth/auth.component";
-import {UserProfileComponent} from "./content/account";
+import {PageUserSettingsComponent, UserProfileComponent} from "./content/account";
 import {PageMeetingsComponent} from "./content/meetings";
 import {LogoutComponent} from "./content/auth/logout/logout.component";
 import {PageAdminEventComponent} from "./content/admin";
@@ -20,6 +20,7 @@ const routes: Routes = [
   { path: 'auth',                     component: AuthComponent },
   { path: 'auth/logout',              component: LogoutComponent },
   { path: 'account/profile',          component: UserProfileComponent },
+  { path: 'account/settings',         component: PageUserSettingsComponent },
   { path: 'dashboard',                component: PageDashboardGeneralComponent },
   { path: 'calendar',                 component: CalendarComponent },
   { path: 'meetings',                 redirectTo: '/' },

src/app/content/account/account.module.ts

@@ -1,17 +1,21 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { UserProfileComponent } from './pages';
-import { UserProfileViewComponent } from './components/user-profile-view/user-profile-view.component';
+import {PageUserSettingsComponent, UserProfileComponent} from './pages';
+import { UserProfileViewComponent, SettingsViewComponent} from './components';
 import {ElementsModule} from "../../shared/elements/elements.module";
 import {CoreModule} from "../../core/core.module";
 import {MatIconModule} from "@angular/material/icon";
+import { SettingsUserAthleteComponent } from './components/settings-user-athlete/settings-user-athlete.component';
 
 
 
 @NgModule({
   declarations: [
     UserProfileComponent,
-    UserProfileViewComponent
+    UserProfileViewComponent,
+    PageUserSettingsComponent,
+    SettingsViewComponent,
+    SettingsUserAthleteComponent
   ],
     imports: [
         CommonModule,

src/app/content/account/components/index.ts

@@ -0,0 +1,2 @@
+export * from './settings-view/settings-view.component';
+export * from './user-profile-view/user-profile-view.component';

src/app/content/account/components/settings-user-athlete/settings-user-athlete.component.html

@@ -0,0 +1,25 @@
+<h1>{{'USER.SETTINGS.USER_ATHLETE.TITLE' | translate}}</h1>
+<p>{{'USER.SETTINGS.USER_ATHLETE.INFO_TEXT' | translate}}</p>
+
+<ng-container *ngIf="user">
+    <ng-container *ngIf="listUserAthlete && userAthlete">
+        <h2>{{'USER.SETTINGS.USER_ATHLETE.THIS_IS_YOU_TITLE' | translate}}</h2>
+        <sr-list-view
+                      [data]="listUserAthlete"
+                      [useSearch]="false"
+                      [config]="configUserAthlete"
+        ></sr-list-view>
+    </ng-container>
+    <div *ngIf="!user.own_athlete_id">
+        <i>{{'USER.SETTINGS.USER_ATHLETE.NO_USER_SET' | translate}}</i>
+    </div>
+
+    <br><br>
+
+    <sr-list-view *ngIf="listAthletes"
+                  [data]="listAthletes"
+                  [fetching]="fetchingAthletes"
+                  [config]="config"
+                  (refreshData)="fetchAthletes($event)"
+    ></sr-list-view>
+</ng-container>

src/app/content/account/components/settings-user-athlete/settings-user-athlete.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsUserAthleteComponent } from './settings-user-athlete.component';
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {TranslateModule} from "@ngx-translate/core";
+
+describe('SettingsUserAthleteComponent', () => {
+  let component: SettingsUserAthleteComponent;
+  let fixture: ComponentFixture<SettingsUserAthleteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SettingsUserAthleteComponent ],
+        imports: [
+            HttpClientTestingModule,
+            TranslateModule.forRoot()
+        ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SettingsUserAthleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/account/components/settings-user-athlete/settings-user-athlete.component.ts

@@ -0,0 +1,73 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {IListTile} from "../../../../core/model/list/list-tile.model";
+import {Athlete} from "../../../../core/model";
+import {AthleteService, UserService} from "../../../../core/service/api";
+import {RefreshListRequest} from "../../../../core/model/list/refresh-list-request.model";
+import {FetchingModel} from "../../../../core/model/common/fetching.model";
+import {ListConfig} from "../../../../core/model/list/list-config.model";
+import {User} from "../../../../core/model/user/user.model";
+import {UserAthleteListTile} from "../../../../core/model/list/user-athlete-list-tile.model";
+
+@Component({
+  selector: 'sr-settings-user-athlete',
+  templateUrl: './settings-user-athlete.component.html',
+  styleUrls: ['./settings-user-athlete.component.scss']
+})
+export class SettingsUserAthleteComponent implements OnInit {
+    user?: User;
+
+    userAthlete?: Athlete;
+    listUserAthlete: IListTile[] = [];
+
+    athletes: Athlete[] = [];
+    listAthletes: IListTile[] = [];
+    fetchingAthletes: FetchingModel = {fetching: false};
+
+    config: ListConfig = {showSetUserAthleteButton: true, showUnsetUserAthleteButton: false, showMoreButton: true};
+    configUserAthlete: ListConfig = {showUnsetUserAthleteButton: true, showMoreButton: true, showSetUserAthleteButton: false};
+
+    constructor(
+        private athleteService: AthleteService,
+        private userService: UserService
+    ) {
+    }
+
+    ngOnInit() {
+        this.fetchUser();
+    }
+
+    fetchUser() {
+        this.userService.getUser().subscribe(data => {
+            console.log("fetching athlete for user: " + data.keycloak_id);
+            this.user = data;
+            if (this.user && this.user.own_athlete_id) {
+                this.athleteService.getAthleteById(this.user.own_athlete_id).subscribe(data => {
+                    this.userAthlete = data;
+                    this.listUserAthlete = [];
+                    this.listUserAthlete.push(new UserAthleteListTile(this.userAthlete));
+                })
+            }
+        });
+    }
+
+    fetchAthletes(request: RefreshListRequest) {
+        this.fetchingAthletes.fetching = true;
+        if (request.paging.offset == 0) {
+            this.athletes = [];
+            this.listAthletes = [];
+            this.fetchUser(); // update user on list update;
+        }
+        this.athleteService.getAthletes(request.paging).subscribe(data => {
+            this.appendAthletes(data);
+            this.fetchingAthletes.fetching = false;
+        })
+    }
+
+    appendAthletes(athletes: Athlete[]) {
+        if (!athletes) return;
+        this.athletes.concat(athletes);
+        athletes.forEach(athlete => {
+            this.listAthletes.push(new UserAthleteListTile(athlete));
+        })
+    }
+}

src/app/content/account/components/settings-view/settings-view.component.html

@@ -0,0 +1 @@
+<sr-settings-user-athlete></sr-settings-user-athlete>

src/app/content/account/components/settings-view/settings-view.component.spec.ts

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsViewComponent } from './settings-view.component';
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {TranslateModule} from "@ngx-translate/core";
+import {AccountModule} from "../../account.module";
+
+describe('SettingsViewComponent', () => {
+  let component: SettingsViewComponent;
+  let fixture: ComponentFixture<SettingsViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SettingsViewComponent ],
+        imports: [
+            HttpClientTestingModule,
+            TranslateModule.forRoot(),
+            AccountModule
+        ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SettingsViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/account/components/settings-view/settings-view.component.ts

@@ -0,0 +1,25 @@
+import {Component, OnInit} from '@angular/core';
+import {User} from "../../../../core/model/user/user.model";
+import {UserService} from "../../../../core/service/api";
+
+@Component({
+  selector: 'sr-settings-view',
+  templateUrl: './settings-view.component.html',
+  styleUrls: ['./settings-view.component.scss']
+})
+export class SettingsViewComponent implements OnInit {
+    user?: User;
+
+    constructor(
+        private userService: UserService
+    ) {
+    }
+
+    ngOnInit() {
+        this.fetchUser();
+    }
+
+    fetchUser() {
+        this.userService.getUser().subscribe(data => this.user = data);
+    }
+}

src/app/content/account/pages/index.ts

@@ -1 +1,2 @@
 export * from './user-profile/user-profile.component';
+export * from './page-user-settings/page-user-settings.component';

src/app/content/account/pages/page-user-settings/page-user-settings.component.html

@@ -0,0 +1 @@
+<sr-settings-view></sr-settings-view>

src/app/content/account/pages/page-user-settings/page-user-settings.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageUserSettingsComponent } from './page-user-settings.component';
+import {AccountModule} from "../../account.module";
+import {TranslateModule} from "@ngx-translate/core";
+
+describe('PageUserSettingsComponent', () => {
+  let component: PageUserSettingsComponent;
+  let fixture: ComponentFixture<PageUserSettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageUserSettingsComponent ],
+        imports: [
+            AccountModule,
+            TranslateModule.forRoot()
+        ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PageUserSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/account/pages/page-user-settings/page-user-settings.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sr-page-user-settings',
+  templateUrl: './page-user-settings.component.html',
+  styleUrls: ['./page-user-settings.component.scss']
+})
+export class PageUserSettingsComponent {
+
+}

src/app/core/model/list/athlete-list-tile.model.ts

@@ -18,8 +18,4 @@ export class AthleteListTile implements IListTile {
     this.nameLink = "" + athlete.alias[0] + "-" + athlete.year;
     this.teamLink = "../team/@" + athlete.team.alias[0];
   }
-
-
-
-
 }

src/app/core/model/list/list-config.model.ts

@@ -0,0 +1,5 @@
+export class ListConfig {
+    showMoreButton: boolean = true;
+    showSetUserAthleteButton: boolean = false;
+    showUnsetUserAthleteButton: boolean = false;
+}

src/app/core/model/list/list-tile.model.ts

@@ -7,5 +7,4 @@ export interface IListTile {
   teamLink?: string;
   country?: string;
   entryType: "athlete" | "team" | undefined;
-
 }

src/app/core/model/list/user-athlete-list-tile.model.ts

@@ -0,0 +1,21 @@
+import {IListTile} from "./list-tile.model";
+import {Athlete} from "../athlete";
+
+export class UserAthleteListTile implements IListTile {
+  id: string;
+  name: string;
+  nameLink?: string;
+  badge?: string;
+  team?: string;
+  teamLink?: string;
+  entryType: "athlete" = "athlete";
+
+  constructor(athlete: Athlete) {
+    this.id = athlete._id;
+    this.name = athlete.name;
+    this.badge = athlete.year;
+    this.team = athlete.team.name;
+    this.nameLink = "../../athlete/" + athlete.alias[0] + "-" + athlete.year;
+    this.teamLink = "../../team/@" + athlete.team.alias[0];
+  }
+}

src/app/core/service/api/user/user.service.ts

@@ -23,4 +23,8 @@ export class UserService extends BaseService {
   public setFollowing(athlete_id: string, follow: boolean): Observable<User> {
     return this.apiService.post(this.API_URL, "user/athlete", {athlete: athlete_id, follow: follow});
   }
+
+    public setUserAthlete(athlete_id: string, set: boolean): Observable<User> {
+        return this.apiService.post(this.API_URL, "user/me", {athlete: athlete_id, set: set});
+    }
 }

src/app/shared/elements/list/list-tile/list-tile.component.html

@@ -16,13 +16,33 @@
   <span *ngIf="entry.country" class="country-flag" [title]="entry.country">
     <img class="flag" src="https://flagsapi.com/{{flags.get(entry.country)}}/flat/24.png" alt="flag">
   </span>
-  <button class="sr-btn-bar sr-btn-icon sr-btn sr-right" [matMenuTriggerFor]="contextMenu"><mat-icon>more_horiz</mat-icon></button>
+
+  <button *ngIf="config.showMoreButton" class="sr-btn-bar sr-btn-icon sr-btn sr-right" [matMenuTriggerFor]="contextMenu"><mat-icon>more_horiz</mat-icon></button>
+
+  <button
+      *ngIf="config.showSetUserAthleteButton"
+      (click)="onSetUserAthlete()"
+      class="sr-btn-bar sr-btn-icon sr-btn sr-right"
+  >
+      <sr-spinner *ngIf="fetchingSetUserAthlete.fetching" spinnerSize="btn" [style]="'material'" materialColor="first"></sr-spinner>
+      <mat-icon *ngIf="!fetchingSetUserAthlete.fetching">person_add</mat-icon>
+  </button>
+
+  <button
+      *ngIf="config.showUnsetUserAthleteButton"
+      (click)="onUnsetUserAthlete()"
+      class="sr-btn-bar sr-btn-icon sr-btn sr-right"
+  >
+      <sr-spinner *ngIf="fetchingSetUserAthlete.fetching" spinnerSize="btn" [style]="'material'" materialColor="first"></sr-spinner>
+      <mat-icon *ngIf="!fetchingSetUserAthlete.fetching">person_remove</mat-icon>
+  </button>
 
 
   <!-- an hidden div is created to set the position of appearance of the menu-->
   <div style="visibility: hidden; position: fixed;"
        [style.left.px]="menuTopLeftPosition.x"
        [style.top.px]="menuTopLeftPosition.y"
+       *ngIf="config.showMoreButton"
        #contextMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="contextMenu"></div>