SES-156 create character from template

SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css

@@ -61,6 +61,14 @@ input {
   }
 }
 
+@media (max-width: 400px) {
+  .container {
+    margin-left: 0%;
+    width: 300px;
+    padding-top: 5%;
+  }
+}
+
 @media (min-width: 401px) {
   .container {
     margin-left: 1%;

SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html

@@ -6,8 +6,8 @@
   <mat-list>
     <mat-list-item *ngFor="let character of charactersTemplateList">
       <mat-icon mat-list-icon>account_circle</mat-icon>
-      <div mat-line (click)="onCharacterClick()">{{character.name}}</div>
+      <div mat-line (click)="onCharacterClick(character.id)">{{character.name}}</div>
-      <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick()">arrow_forward</mat-icon>
+      <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick(character.id)">arrow_forward</mat-icon>
       <div mat-line> {{character.class}}, {{character.race}}</div>
       <mat-divider class="mat-divider--custom-style"></mat-divider>
     </mat-list-item>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts

@@ -7,28 +7,43 @@ import { ErrorResponse } from '../../../types/ErrorResponse';
 import { HttpErrorResponse } from '@angular/common/http';
 import { CharacterFromTemplatesViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
 import { CharacterService } from '../../../services/character.service';
-import { CreateCharacterFromTemplate } from '../../store/actions/player.action';
+import {
+  ChooseTemplateToCreateCharacter,
+  ClearCharacterId,
+} from '../../store/actions/player.action';
 
 @Component({
   selector: 'app-create-character',
   templateUrl: './create-character.component.html',
-  styleUrls: ['./create-character.component.css']
+  styleUrls: ['./create-character.component.css'],
 })
 export class CreateCharacterComponent implements OnInit {
   charactersTemplateList: CharacterFromTemplatesViewModel[];
 
-  constructor(private router: Router, private store: Store<AppState>, private characterService: CharacterService) { }
+  constructor(
+    private router: Router,
+    private store: Store<AppState>,
+    private characterService: CharacterService
+  ) {}
 
   ngOnInit() {
     this.getTemplateCharacters();
   }
 
   onArrowBackClick() {
+    this.store
+      .select((s) => s.playerStore.characterId)
+      .pipe(first())
+      .subscribe((characterId) => {
+        if (characterId !== null) {
+          this.store.dispatch(new ClearCharacterId());
+        }
         this.router.navigate(['select-character']);
+      });
   }
 
-  onCharacterClick() {
+  onCharacterClick(characterId: number) {
-    this.store.dispatch(new CreateCharacterFromTemplate);
+    this.store.dispatch(new ChooseTemplateToCreateCharacter({ characterId }));
     this.router.navigate(['create-character-step-2']);
   }
 

SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html

@@ -1,7 +1,23 @@
-<div class="container">
+<div [formGroup]="personalizeTemplateFormGroup" class="container">
   <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
   <div class="primary-text header">Create character</div>
   <div class="primary-text header">Step 2 - Personalize template</div>
+  <mat-form-field class="form-container">
+    <input
+      id="newName"
+      matInput
+      formControlName="newName"
+      placeholder="New character name"
+      type="text"
+      name="newName">
+    <mat-error *ngIf="personalizeTemplateFormGroup?.get('newName').hasError('required')">
+      If the field is left blank, your character will have the default name
+    </mat-error>
+    <mat-icon matSuffix>person</mat-icon>
+  </mat-form-field>
+  <mat-error *ngIf="apiError">
+    {{apiErrorMessage}}
+  </mat-error>
   <button
     id="create-character-submit-button"
     mat-raised-button

SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts

@@ -1,24 +1,71 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { CharacterService } from '../../../services/character.service';
+import { ErrorResponse } from '../../../types/ErrorResponse';
+import { HttpErrorResponse } from '@angular/common/http';
+import { AppState } from '../../store/models/app-state.model';
+import { Store } from '@ngrx/store';
+import { first } from 'rxjs/operators';
 
 @Component({
   selector: 'app-personalize-template',
   templateUrl: './personalize-template.component.html',
-  styleUrls: ['./personalize-template.component.css']
+  styleUrls: ['./personalize-template.component.css'],
 })
 export class PersonalizeTemplateComponent implements OnInit {
+  allSubscriptions = new Subscription();
+  apiError = false;
+  apiErrorMessage = '';
 
-  constructor(private router: Router) { }
+  constructor(
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private characterService: CharacterService,
+    private store: Store<AppState>
+  ) {}
 
-  ngOnInit() {
+  public personalizeTemplateFormGroup: FormGroup = this.formBuilder.group({
-  }
+    newName: ['', [Validators.required]],
+  });
+
+  ngOnInit() {}
 
   onCreateCharacterButton() {
+    this.store
+      .select((s) => {
+        return {
+          userId: s.appStore.userId,
+          characterId: s.playerStore.characterId,
+        };
+      })
+      .pipe(first())
+      .subscribe((result) => {
+        this.characterService
+          .createCharacterFromTemplate(
+            result.characterId,
+            result.userId,
+            this.personalizeTemplateFormGroup.value['newName']
+          )
+          .pipe(first())
+          .subscribe(
+            () => {
               this.router.navigate(['select-character']);
+            },
+            (error: ErrorResponse | HttpErrorResponse) => {
+              console.error(error);
+              if (error instanceof HttpErrorResponse) {
+                error = error.error as ErrorResponse;
+              }
+              this.apiError = true;
+              this.apiErrorMessage = error.message;
+            }
+          );
+      });
   }
 
   onArrowBackClick() {
     this.router.navigate(['create-character-step-1']);
   }
-
 }

SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts

@@ -13,22 +13,20 @@ import { AppState } from '../../store/models/app-state.model';
 @Component({
   selector: 'app-player-weapons-table',
   templateUrl: './player-weapons-table.component.html',
-  styleUrls: ['./player-weapons-table.component.css']
+  styleUrls: ['./player-weapons-table.component.css'],
 })
 export class PlayerWeaponsTableComponent implements OnInit {
   weapons: WeaponViewModel[];
-  displayedColumns: string[] = [
+  displayedColumns: string[] = ['name', 'weaponType', 'weight', 'cost'];
-    'name',
-    'weaponType',
-    'weight',
-    'cost',
-  ];
   dataSource: MatTableDataSource<WeaponViewModel>;
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
-  constructor(private store: Store<AppState>, private equipmentService: EquipmentService) {}
+  constructor(
+    private store: Store<AppState>,
+    private equipmentService: EquipmentService
+  ) {}
 
   ngOnInit() {
     this.getCharacterWeapons();
@@ -40,7 +38,7 @@ export class PlayerWeaponsTableComponent implements OnInit {
       .pipe(first())
       .subscribe((characterId) => {
         this.equipmentService
-          .getCharacterWeapons(1)
+          .getCharacterWeapons(characterId)
           .pipe(first())
           .subscribe(
             (result) => {

SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html

@@ -38,7 +38,8 @@
           required
           placeholder="Confirm Password"
           type="password"
-          name="confirmPassword"/>
+          name="confirmPassword"
+          (keyup.enter)="Register()"/>
         <mat-icon matSuffix >lock</mat-icon>
         <mat-error *ngIf="signUpFormGroup?.get('newAccount')['controls']?.confirmPassword?.hasError('required')">
           Confirm your password

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html

@@ -1,7 +1,8 @@
 <div class="container">
   <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
-  <div *ngFor="let character of charactersList" class="primary-text header">Select character</div>
+  <div *ngIf="charactersList != null && charactersList.length > 0">
-  <mat-divider *ngFor="let character of charactersList" class="mat-divider--custom-style"></mat-divider>
+  <div class="primary-text header">Select character</div>
+  <mat-divider class="mat-divider--custom-style"></mat-divider>
   <mat-list>
     <mat-list-item *ngFor="let character of charactersList">
       <mat-icon mat-list-icon>account_circle</mat-icon>
@@ -11,7 +12,8 @@
       <mat-divider class="mat-divider--custom-style"></mat-divider>
     </mat-list-item>
   </mat-list>
-  <div *ngFor="let character of charactersList" class="primary-text header">or</div>
+  <div class="primary-text header">or</div>
+  </div>
   <div class="primary-text header">Create character</div>
   <mat-divider class="mat-divider--custom-style"></mat-divider>
   <mat-list>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts

@@ -13,27 +13,40 @@ import {AddCharacterId} from '../../store/actions/player.action';
 @Component({
   selector: 'app-select-character',
   templateUrl: './select-character.component.html',
-  styleUrls: ['./select-character.component.css']
+  styleUrls: ['./select-character.component.css'],
 })
 export class SelectCharacterComponent implements OnInit {
   charactersList: CharacterForLoginViewModel[];
 
-  constructor(private router: Router, private store: Store<AppState>, private characterService: CharacterService) {}
+  constructor(
+    private router: Router,
+    private store: Store<AppState>,
+    private characterService: CharacterService
+  ) {}
 
   ngOnInit() {
     this.getUserCharactersList();
   }
 
   getUserCharactersList() {
-    this.store.select(s => s.appStore.userId).pipe(first()).subscribe((userId) => {
+    this.store
-      this.characterService.getUserCharactersList(userId).pipe(first()).subscribe((charactersList) => {
+      .select((s) => s.appStore.userId)
+      .pipe(first())
+      .subscribe((userId) => {
+        this.characterService
+          .getUserCharactersList(userId)
+          .pipe(first())
+          .subscribe(
+            (charactersList) => {
               this.charactersList = charactersList;
-      }, (error: ErrorResponse | HttpErrorResponse) => {
+            },
+            (error: ErrorResponse | HttpErrorResponse) => {
               if (error instanceof HttpErrorResponse) {
                 error = error.error as ErrorResponse;
               }
               console.error(error.message);
-      } );
+            }
+          );
       });
   }
 

SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html

@@ -26,7 +26,9 @@
           required
           placeholder="Password"
           type="password"
-          name="password"/>
+          name="password"
+          (keyup.enter)="onLoginButtonClick()"
+          />
         <mat-icon matSuffix>lock</mat-icon>
         <mat-error *ngIf="signInFormGroup?.get('signIn')['controls']?.password?.hasError('required')">
           Password is required

SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts

@@ -3,6 +3,7 @@ import {Action} from '@ngrx/store';
 export enum PlayerActionTypes {
   ADD_CHARACTER_ID= '[PLAYER] Add character id',
   CLEAR_CHARACTER_ID = '[PLAYER] Clear character id',
+  CHOOSE_TEMPLATE_TO_CREATE_CHARACTER = '[PLAYER] Choose template to create character',
   CREATED_CHARACTER_FROM_TEMPLATE = '[PLAYER] Created character from template'
 }
 
@@ -22,6 +23,14 @@ export class ClearCharacterId implements Action {
   }
 }
 
+export class ChooseTemplateToCreateCharacter implements Action {
+  readonly type = PlayerActionTypes.CHOOSE_TEMPLATE_TO_CREATE_CHARACTER;
+
+  constructor(public payload: {characterId: number}) {
+
+  }
+}
+
 export class CreateCharacterFromTemplate implements Action {
   readonly type = PlayerActionTypes.CREATED_CHARACTER_FROM_TEMPLATE;
 
@@ -30,4 +39,4 @@ export class CreateCharacterFromTemplate implements Action {
   }
 }
 
-export type PlayerAction = AddCharacterId | ClearCharacterId | CreateCharacterFromTemplate;
+export type PlayerAction = AddCharacterId | ClearCharacterId | ChooseTemplateToCreateCharacter | CreateCharacterFromTemplate;

SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts

@@ -9,6 +9,8 @@ export function PlayerReducer(state: PlayerStoreModel = initialState, action: Pl
   switch (action.type) {
     case PlayerActionTypes.ADD_CHARACTER_ID:
       return {...state, characterId: action.payload.characterId};
+    case PlayerActionTypes.CHOOSE_TEMPLATE_TO_CREATE_CHARACTER:
+      return {...state, characterId: action.payload.characterId};
     case PlayerActionTypes.CREATED_CHARACTER_FROM_TEMPLATE:
       return {...state};
     case PlayerActionTypes.CLEAR_CHARACTER_ID:

SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts

@@ -8,10 +8,11 @@ import {switchMap, retry} from 'rxjs/operators';
 import { LoggedCharactersViewModel } from '../types/viewmodels/character-viewmodels/LoggedCharactersViewModel';
 import { CharacterStatsViewModel } from '../types/viewmodels/character-viewmodels/CharacterStatsViewModel';
 import { CharacterFromTemplatesViewModel } from '../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
+import { SuccessResponse } from '../types/SuccessResponse';
 
 Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
-})
+});
 export class CharacterService {
   private baseUrl = 'api/character/';
   constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
@@ -19,8 +20,12 @@ export class CharacterService {
   }
 
   getLoggedCharacters(): Observable<LoggedCharactersViewModel[]> {
-    return this.http.get<Either<LoggedCharactersViewModel[], ErrorResponse>>(this.baseUrl + 'loggedCharacters').pipe(
+    return this.http
-      switchMap(response => {
+      .get<Either<LoggedCharactersViewModel[], ErrorResponse>>(
+        this.baseUrl + 'loggedCharacters'
+      )
+      .pipe(
+        switchMap((response) => {
           if (response.isLeft) {
             return of(response.left);
           } else {
@@ -31,10 +36,17 @@ export class CharacterService {
       );
   }
 
-  getUserCharactersList(userId: number): Observable<CharacterForLoginViewModel[]> {
+  getUserCharactersList(
-    const params = new HttpParams().set('userId', userId.toString())
+    userId: number
-    return this.http.get<Either<CharacterForLoginViewModel[], ErrorResponse>>(this.baseUrl + 'userCharactersList', {params}).pipe(
+  ): Observable<CharacterForLoginViewModel[]> {
-      switchMap(response => {
+    const params = new HttpParams().set('userId', userId.toString());
+    return this.http
+      .get<Either<CharacterForLoginViewModel[], ErrorResponse>>(
+        this.baseUrl + 'userCharactersList',
+        { params }
+      )
+      .pipe(
+        switchMap((response) => {
           if (response.isLeft) {
             return of(response.left);
           } else {
@@ -44,10 +56,17 @@ export class CharacterService {
       );
   }
 
-  getCharacterStats(characterId: number): Observable<CharacterStatsViewModel[]> {
+  getCharacterStats(
-    const params = new HttpParams().set('characterId', characterId.toString())
+    characterId: number
-    return this.http.get<Either<CharacterStatsViewModel[], ErrorResponse>>( this.baseUrl + 'characterStats', {params}).pipe(
+  ): Observable<CharacterStatsViewModel[]> {
-      switchMap( response => {
+    const params = new HttpParams().set('characterId', characterId.toString());
+    return this.http
+      .get<Either<CharacterStatsViewModel[], ErrorResponse>>(
+        this.baseUrl + 'characterStats',
+        { params }
+      )
+      .pipe(
+        switchMap((response) => {
           if (response.isLeft) {
             return of(response.left);
           } else {
@@ -58,14 +77,44 @@ export class CharacterService {
   }
 
   getTemplateCharacters(): Observable<CharacterFromTemplatesViewModel[]> {
-    return this.http.get<Either<CharacterFromTemplatesViewModel[], ErrorResponse>>(this.baseUrl + 'getTemplateCharacters').pipe(
+    return this.http
-      switchMap(response => {
+      .get<Either<CharacterFromTemplatesViewModel[], ErrorResponse>>(
+        this.baseUrl + 'getTemplateCharacters'
+      )
+      .pipe(
+        switchMap((response) => {
           if (response.isLeft) {
             return of(response.left);
           } else {
             return throwError(response.right);
           }
-      }));
+        })
+      );
   }
 
+  createCharacterFromTemplate(
+    characterId: number,
+    userId: number,
+    newName: string
+  ): Observable<SuccessResponse> {
+    const params = new HttpParams()
+      .set('characterId', characterId.toString())
+      .set('userId', userId.toString())
+      .set('newName', newName);
+    return this.http
+      .post<Either<SuccessResponse, ErrorResponse>>(
+        this.baseUrl + 'createCharacterFromTemplate',
+        null,
+        { params }
+      )
+      .pipe(
+        switchMap((response) => {
+          if (response.isLeft) {
+            return of(response.left);
+          } else {
+            return throwError(response.right);
+          }
+        })
+      );
+  }
 }