SES-145 Tables in GM screen are now connected to backend

SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts

@@ -26,6 +26,7 @@ import {
   MatTableModule,
   MatSortModule,
   MatDialogModule,
+  MatTooltipModule,
 } from '@angular/material';
 import { UserService } from '../services/user.service';
 import { StoreModule } from '@ngrx/store';
@@ -39,6 +40,10 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors-
 import { GameMasterCharacterActionsDialogComponent } from './components/game-master-character-actions-dialog/game-master-character-actions-dialog.component';
 import { GameMasterWeaponsTableComponent } from './components/game-master-weapons-table/game-master-weapons-table.component';
 import { AbilitiesComponent } from './components/abilities/abilities.component';
+import { SpellService } from '../services/spell.service';
+import { WeaponService } from '../services/weapon.service';
+import { ArmorService } from '../services/armor.service';
+import { OtherEquipmentService } from '../services/other-equipment.service';
 
 @NgModule({
   declarations: [
@@ -81,8 +86,16 @@ import { AbilitiesComponent } from './components/abilities/abilities.component';
     }),
     MatTableModule,
     MatSortModule,
+    MatTooltipModule,
+  ],
+  providers: [
+    UserService,
+    CharacterService,
+    SpellService,
+    WeaponService,
+    ArmorService,
+    OtherEquipmentService,
   ],
-  providers: [UserService, CharacterService],
   bootstrap: [AppComponent],
   entryComponents: [
     GameMasterSpellsTableComponent,

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-armors-table/game-master-armors-table.component.ts

@@ -3,6 +3,10 @@ import { MatTableDataSource } from '@angular/material/table';
 import { ArmorViewModel } from '../../../types/viewmodels/armor-viewmodels/ArmorViewModel';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
+import { first } from 'rxjs/operators';
+import { ErrorResponse } from '../../../types/ErrorResponse';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ArmorService } from '../../../services/armor.service';
 
 @Component({
   selector: 'app-game-master-armors-table',
@@ -22,29 +26,27 @@ export class GameMasterArmorsTableComponent implements OnInit {
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
-  constructor() {
+  constructor(private armorService: ArmorService) {
-    const armors = [
+    armorService
-      {
+      .GetAllArmors()
-        id: 1,
+      .pipe(first())
-        name: 'Test',
+      .subscribe(
-        category: 'Testowa',
+        (result) => {
-        minimumStrength: 12,
+          console.log(result);
-        weight: 98,
+          this.dataSource = new MatTableDataSource(result);
-        cost: 123,
+          this.dataSource.paginator = this.paginator;
-        armorClassBase: 10,
+          this.dataSource.sort = this.sort;
-        haveDexterityBonus: false,
+        },
-        haveStealthDisadvantage: false,
+        (error: ErrorResponse | HttpErrorResponse) => {
-        currencyType: 1,
+          if (error instanceof HttpErrorResponse) {
-      },
+            error = error.error as ErrorResponse;
-    ];
+          }
-
+          console.log(error.message);
-    this.dataSource = new MatTableDataSource(armors);
+        }
+      );
   }
 
-  ngOnInit() {
+  ngOnInit() {}
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
-  }
 
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.ts

@@ -2,13 +2,11 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-
+import { SpellViewModel } from '../../../types/viewmodels/spell-viewmodels/SpellViewModel';
-export interface SpellData {
+import { SpellService } from '../../../services/spell.service';
-  name: string;
+import { first } from 'rxjs/operators';
-  range: string;
+import { ErrorResponse } from '../../../types/ErrorResponse';
-  level: number;
+import { HttpErrorResponse } from '@angular/common/http';
-  school: string;
-}
 
 @Component({
   selector: 'app-game-master-spells-table',
@@ -17,25 +15,31 @@ export interface SpellData {
 })
 export class GameMasterSpellsTableComponent implements OnInit {
   displayedColumns: string[] = ['Name', 'Range', 'Level', 'School'];
-  dataSource: MatTableDataSource<SpellData>;
+  dataSource: MatTableDataSource<SpellViewModel>;
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
-  constructor() {
+  constructor(private spellService: SpellService) {
-    const users = Array.from({ length: 100 }, (_, k) => this.createSepll());
+    spellService
-
+      .GetAllSpells()
-    this.dataSource = new MatTableDataSource(users);
+      .pipe(first())
+      .subscribe(
+        (result) => {
+          this.dataSource = new MatTableDataSource(result);
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+        },
+        (error: ErrorResponse | HttpErrorResponse) => {
+          if (error instanceof HttpErrorResponse) {
+            error = error.error as ErrorResponse;
+          }
+          console.log(error.message);
+        }
+      );
   }
 
-  createSepll(): SpellData {
+  ngOnInit() {}
-    return { name: 'test', range: 'asd', level: 2, school: 'UAM!!!!' };
-  }
-
-  ngOnInit() {
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
-  }
 
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.css

@@ -1,11 +1,11 @@
-.description-weapon-column {
+.text-cut {
+  max-width: 60px; /* feel free to include any other value */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 table {
-  width: 100%;
   background-color: initial;
 }
 
@@ -34,5 +34,4 @@ mat-paginator {
 td,
 th {
   color: whitesmoke;
-  width: 25%;
 }

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-weapons-table/game-master-weapons-table.component.html

@@ -3,8 +3,8 @@
   <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Sword" #input>
 </mat-form-field>
 
-<div class="mat-elevation-z8">
+<div>
-  <table mat-table [dataSource]="dataSource" matSort>
+  <table mat-table [dataSource]="dataSource" matSort class="w-100 mat-elevation-z8">
 
     <ng-container matColumnDef="Name">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
@@ -28,7 +28,9 @@
 
     <ng-container matColumnDef="Description">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
-      <td mat-cell *matCellDef="let row" class="description-weapon-column"> {{row.description}} </td>
+      <td mat-cell *matCellDef="let row" class="text-cut" [matTooltip]="row.description">
+        {{row.description}}
+      </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

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

@@ -3,6 +3,10 @@ import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { WeaponViewModel } from '../../../types/viewmodels/weapon-viewmodels/WeaponViewModel';
+import { WeaponService } from '../../../services/weapon.service';
+import { first } from 'rxjs/operators';
+import { ErrorResponse } from '../../../types/ErrorResponse';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-game-master-weapons-table',
@@ -22,30 +26,27 @@ export class GameMasterWeaponsTableComponent implements OnInit {
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
-  constructor() {
+  constructor(private weaponService: WeaponService) {
-    const weapons = [
+    weaponService
-      {
+      .GetAllWeapons()
-        id: 1,
+      .pipe(first())
-        name: 'Test',
+      .subscribe(
-        cost: 123,
+        (result) => {
-        weight: 98,
+          console.log(result);
-        diceCount: 2,
+          this.dataSource = new MatTableDataSource(result);
-        diceValue: 20,
+          this.dataSource.paginator = this.paginator;
-        twoHandDamageType: 'Toxic',
+          this.dataSource.sort = this.sort;
-        description:
+        },
-          'A japanase battleaxe with a spike on the opposite side of the blade.',
+        (error: ErrorResponse | HttpErrorResponse) => {
-        weaponType: 'Two-Handed Melee Weapons',
+          if (error instanceof HttpErrorResponse) {
-        rangeMeele: 50,
+            error = error.error as ErrorResponse;
-      },
+          }
-    ];
+          console.log(error.message);
-
+        }
-    this.dataSource = new MatTableDataSource(weapons);
+      );
   }
 
-  ngOnInit() {
+  ngOnInit() {}
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
-  }
 
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;

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

@@ -0,0 +1,34 @@
+import { Inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of, throwError } from 'rxjs';
+import { WeaponViewModel } from '../types/viewmodels/weapon-viewmodels/WeaponViewModel';
+import { Either } from '../types/Either';
+import { ErrorResponse } from '../types/ErrorResponse';
+import { switchMap } from 'rxjs/operators';
+import { ArmorViewModel } from '../types/viewmodels/armor-viewmodels/ArmorViewModel';
+
+Injectable({
+  providedIn: 'root',
+});
+export class ArmorService {
+  private baseUrl = 'api/armor/';
+  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
+    this.baseUrl = baseUrl + this.baseUrl;
+  }
+
+  GetAllArmors(): Observable<ArmorViewModel[]> {
+    return this.http
+      .get<Either<ArmorViewModel[], ErrorResponse>>(
+        this.baseUrl + 'getAllArmor'
+      )
+      .pipe(
+        switchMap((response) => {
+          if (response.isLeft) {
+            return of(response.left);
+          } else {
+            return throwError(response.right);
+          }
+        })
+      );
+  }
+}

SessionCompanion/SessionCompanion/ClientApp/src/services/other-equipment.service.ts

@@ -0,0 +1,12 @@
+import { Inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+Injectable({
+  providedIn: 'root',
+});
+export class OtherEquipmentService {
+  private baseUrl = 'api/otherEquipment/';
+  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
+    this.baseUrl = baseUrl + this.baseUrl;
+  }
+}

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

@@ -0,0 +1,33 @@
+import { Inject, Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable, of, throwError } from 'rxjs';
+import { SpellViewModel } from '../types/viewmodels/spell-viewmodels/SpellViewModel';
+import { Either } from '../types/Either';
+import { ErrorResponse } from '../types/ErrorResponse';
+import { switchMap } from 'rxjs/operators';
+
+Injectable({
+  providedIn: 'root',
+});
+export class SpellService {
+  private baseUrl = 'api/spell/';
+  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
+    this.baseUrl = baseUrl + this.baseUrl;
+  }
+
+  GetAllSpells(): Observable<SpellViewModel[]> {
+    return this.http
+      .get<Either<SpellViewModel[], ErrorResponse>>(
+        this.baseUrl + 'getAllSpells'
+      )
+      .pipe(
+        switchMap((response) => {
+          if (response.isLeft) {
+            return of(response.left);
+          } else {
+            return throwError(response.right);
+          }
+        })
+      );
+  }
+}

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

@@ -0,0 +1,34 @@
+import { Inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of, throwError } from 'rxjs';
+import { SpellViewModel } from '../types/viewmodels/spell-viewmodels/SpellViewModel';
+import { Either } from '../types/Either';
+import { ErrorResponse } from '../types/ErrorResponse';
+import { switchMap } from 'rxjs/operators';
+import { WeaponViewModel } from '../types/viewmodels/weapon-viewmodels/WeaponViewModel';
+
+Injectable({
+  providedIn: 'root',
+});
+export class WeaponService {
+  private baseUrl = 'api/weapon/';
+  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
+    this.baseUrl = baseUrl + this.baseUrl;
+  }
+
+  GetAllWeapons(): Observable<WeaponViewModel[]> {
+    return this.http
+      .get<Either<WeaponViewModel[], ErrorResponse>>(
+        this.baseUrl + 'getAllWeapons'
+      )
+      .pipe(
+        switchMap((response) => {
+          if (response.isLeft) {
+            return of(response.left);
+          } else {
+            return throwError(response.right);
+          }
+        })
+      );
+  }
+}

SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/spell-viewmodels/SpellViewModel.ts

@@ -0,0 +1,17 @@
+export interface SpellViewModel {
+  id: number;
+  name: string;
+  descriptions: string[];
+  higherLevel: string[];
+  range: string;
+  components: string;
+  material: string;
+  ritual: boolean;
+  duration: string;
+  concentration: boolean;
+  castingTime: string;
+  level: number;
+  school: string;
+  classes: string;
+  subclasses: string;
+}