SES-137 Weapon table added

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

@@ -35,6 +35,7 @@ import { CharacterService } from '../services/character.service';
 import { AbilityCardComponent } from './components/ability-card/ability-card.component';
 import { GameMasterSpellsTableComponent } from './components/game-master-spells-table/game-master-spells-table.component';
 import { GameMasterArmorsTableComponent } from './components/game-master-armors-table/game-master-armors-table.component';
+import { GameMasterWeaponsTableComponent } from './components/game-master-weapons-table/game-master-weapons-table.component';
 
 @NgModule({
   declarations: [
@@ -48,6 +49,7 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors-
     AbilityCardComponent,
     GameMasterSpellsTableComponent,
     GameMasterArmorsTableComponent,
+    GameMasterWeaponsTableComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -79,6 +81,7 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors-
   entryComponents: [
     GameMasterSpellsTableComponent,
     GameMasterArmorsTableComponent,
+    GameMasterWeaponsTableComponent,
   ],
 })
 export class AppModule {}

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

@@ -13,6 +13,7 @@ import { first } from 'rxjs/operators';
 import { LeftNavItem } from '../../../types/LeftNavItem';
 import { GameMasterSpellsTableComponent } from '../game-master-spells-table/game-master-spells-table.component';
 import { GameMasterArmorsTableComponent } from '../game-master-armors-table/game-master-armors-table.component';
+import { GameMasterWeaponsTableComponent } from '../game-master-weapons-table/game-master-weapons-table.component';
 
 @Component({
   selector: 'app-game-master-dashboard',
@@ -37,6 +38,12 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
           expanded: false,
           componentToDisplay: 'GameMasterArmorsTableComponent',
         },
+        {
+          displayName: 'Weapon',
+          iconName: 'ra ra-large-hammer',
+          expanded: false,
+          componentToDisplay: 'GameMasterWeaponsTableComponent',
+        },
       ],
     },
     {
@@ -104,6 +111,9 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
       case 'GameMasterArmorsTableComponent':
         this.middleComponentName = GameMasterArmorsTableComponent;
         break;
+      case 'GameMasterWeaponsTableComponent':
+        this.middleComponentName = GameMasterWeaponsTableComponent;
+        break;
     }
   }
 

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

@@ -0,0 +1,38 @@
+.description-weapon-column {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+table {
+  width: 100%;
+  background-color: initial;
+}
+
+mat-paginator {
+  background-color: initial;
+  color: white;
+}
+
+::ng-deep .mat-select-arrow {
+  color: whitesmoke;
+}
+
+::ng-deep .mat-select-value {
+  color: white;
+}
+
+.mat-sort-header-container {
+  color: whitesmoke !important;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+td,
+th {
+  color: whitesmoke;
+  width: 25%;
+}

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

@@ -0,0 +1,43 @@
+<mat-form-field>
+  <mat-label>Filter</mat-label>
+  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Sword" #input>
+</mat-form-field>
+
+<div class="mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource" matSort>
+
+    <ng-container matColumnDef="Name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="WeaponType">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Weapon Type </th>
+      <td mat-cell *matCellDef="let row"> {{row.weaponType}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Weight">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
+      <td mat-cell *matCellDef="let row"> {{row.weight}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="Cost">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Cost </th>
+      <td mat-cell *matCellDef="let row"> {{row.cost}} $ </td>
+    </ng-container>
+
+    <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>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    <tr class="mat-row" *matNoDataRow>
+      <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
+    </tr>
+  </table>
+
+  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+</div>

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

@@ -0,0 +1,58 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+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';
+
+@Component({
+  selector: 'app-game-master-weapons-table',
+  templateUrl: './game-master-weapons-table.component.html',
+  styleUrls: ['./game-master-weapons-table.component.css'],
+})
+export class GameMasterWeaponsTableComponent implements OnInit {
+  displayedColumns: string[] = [
+    'Name',
+    'WeaponType',
+    'Weight',
+    'Cost',
+    'Description',
+  ];
+  dataSource: MatTableDataSource<WeaponViewModel>;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  constructor() {
+    const weapons = [
+      {
+        id: 1,
+        name: 'Test',
+        cost: 123,
+        weight: 98,
+        diceCount: 2,
+        diceValue: 20,
+        twoHandDamageType: 'Toxic',
+        description:
+          'A japanase battleaxe with a spike on the opposite side of the blade.',
+        weaponType: 'Two-Handed Melee Weapons',
+        rangeMeele: 50,
+      },
+    ];
+
+    this.dataSource = new MatTableDataSource(weapons);
+  }
+
+  ngOnInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+}

SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/weapon-viewmodels/WeaponViewModel.ts

@@ -0,0 +1,17 @@
+export interface WeaponViewModel {
+  id: number;
+  name: string;
+  cost: number;
+  weight: number;
+  diceCount: number;
+  diceValue: number;
+  twoHandDiceCount?: number;
+  twoHandDiceValue?: number;
+  twoHandDamageType: string;
+  description: string;
+  weaponType: string;
+  rangeMeele: number;
+  rangeThrowNormal?: number;
+  rangeThrowLong?: number;
+  rangeLong?: number;
+}