Merge pull request 'SES-138 added table with armor in gm screen' (#60) from SES-138 into dev

Reviewed-on: #60

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

@@ -34,6 +34,7 @@ import { reducers } from './store/models/app-state.model';
 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';
 
 @NgModule({
   declarations: [
@@ -46,6 +47,7 @@ import { GameMasterSpellsTableComponent } from './components/game-master-spells-
     SelectCharacterComponent,
     AbilityCardComponent,
     GameMasterSpellsTableComponent,
+    GameMasterArmorsTableComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -74,6 +76,9 @@ import { GameMasterSpellsTableComponent } from './components/game-master-spells-
   ],
   providers: [UserService, CharacterService],
   bootstrap: [AppComponent],
-  entryComponents: [GameMasterSpellsTableComponent],
+  entryComponents: [
+    GameMasterSpellsTableComponent,
+    GameMasterArmorsTableComponent,
+  ],
 })
 export class AppModule {}

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

@@ -0,0 +1,32 @@
+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-armors-table/game-master-armors-table.component.html

@@ -0,0 +1,43 @@
+<mat-form-field>
+  <mat-label>Filter</mat-label>
+  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Shield" #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="Category">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Category </th>
+      <td mat-cell *matCellDef="let row"> {{row.category}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="MinimumStrength">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Minimum Strength </th>
+      <td mat-cell *matCellDef="let row"> {{row.minimumStrength}}% </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>
+
+    <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-armors-table/game-master-armors-table.component.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+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';
+
+@Component({
+  selector: 'app-game-master-armors-table',
+  templateUrl: './game-master-armors-table.component.html',
+  styleUrls: ['./game-master-armors-table.component.css'],
+})
+export class GameMasterArmorsTableComponent implements OnInit {
+  displayedColumns: string[] = [
+    'Name',
+    'Category',
+    'MinimumStrength',
+    'Weight',
+    'Cost',
+  ];
+  dataSource: MatTableDataSource<ArmorViewModel>;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  constructor() {
+    const armors = [
+      {
+        id: 1,
+        name: 'Test',
+        category: 'Testowa',
+        minimumStrength: 12,
+        weight: 98,
+        cost: 123,
+        armorClassBase: 10,
+        haveDexterityBonus: false,
+        haveStealthDisadvantage: false,
+        currencyType: 1,
+      },
+    ];
+
+    this.dataSource = new MatTableDataSource(armors);
+  }
+
+  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/app/components/game-master-dashboard/game-master-dashboard.component.html

@@ -18,7 +18,7 @@
       <mat-divider></mat-divider>
       <mat-nav-list>
         <div *ngFor="let item of leftSidenavItems">
-          <mat-list-item class="left-nav-item" (click)="(item.children && item.children.length) ? false :ChangeMiddleComponent(item.componentToDisplay)">
+          <mat-list-item class="left-nav-item" (click)="(item.children && item.children.length) ? item.expanded = !item.expanded :ChangeMiddleComponent(item.componentToDisplay)">
             <mat-icon mat-list-icon ><i class="{{item.iconName}}"></i></mat-icon>
             <span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" class="mat-list-text" style="color: white">
             {{item.displayName}}

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

@@ -12,6 +12,7 @@ import { LoggedCharactersViewModel } from '../../../types/viewmodels/character-v
 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';
 
 @Component({
   selector: 'app-game-master-dashboard',
@@ -25,6 +26,19 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
   leftSidenavExpanded = false;
   leftSidenavTextExpanded = false;
   leftSidenavItems: LeftNavItem[] = [
+    {
+      displayName: 'Equipment',
+      iconName: 'ra ra-anvil',
+      expanded: false,
+      children: [
+        {
+          displayName: 'Armor',
+          iconName: 'ra  ra-vest',
+          expanded: false,
+          componentToDisplay: 'GameMasterArmorsTableComponent',
+        },
+      ],
+    },
     {
       displayName: 'Spells',
       iconName: 'ra ra-aura',
@@ -87,6 +101,9 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
       case 'GameMasterSpellsTableComponent':
         this.middleComponentName = GameMasterSpellsTableComponent;
         break;
+      case 'GameMasterArmorsTableComponent':
+        this.middleComponentName = GameMasterArmorsTableComponent;
+        break;
     }
   }
 

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

@@ -6,25 +6,21 @@
 <div class="mat-elevation-z8">
   <table mat-table [dataSource]="dataSource" matSort>
 
-    <!-- ID Column -->
     <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>
 
-    <!-- Progress Column -->
     <ng-container matColumnDef="Range">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Range </th>
       <td mat-cell *matCellDef="let row"> {{row.range}}% </td>
     </ng-container>
 
-    <!-- Name Column -->
     <ng-container matColumnDef="Level">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Level </th>
       <td mat-cell *matCellDef="let row"> {{row.level}} </td>
     </ng-container>
 
-    <!-- Color Column -->
     <ng-container matColumnDef="School">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> School </th>
       <td mat-cell *matCellDef="let row"> {{row.school}} </td>
@@ -33,7 +29,6 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 
-    <!-- Row shown when there is no matching data. -->
     <tr class="mat-row" *matNoDataRow>
       <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
     </tr>

SessionCompanion/SessionCompanion/ClientApp/src/app/shared/animations/sidenav-animations.ts

@@ -1,14 +1,22 @@
-import { trigger, state, style, transition, animate, animateChild, query } from '@angular/animations';
+import {
+  trigger,
+  state,
+  style,
+  transition,
+  animate,
+} from '@angular/animations';
 
 export const onSideNavChange = trigger('onSideNavChange', [
-  state('close',
+  state(
+    'close',
     style({
-      'min-width': '50px'
+      'min-width': '50px',
     })
   ),
-  state('open',
+  state(
+    'open',
     style({
-      'min-width': '200px'
+      'min-width': '250px',
     })
   ),
   transition('close => open', animate('250ms ease-in')),
@@ -16,15 +24,17 @@ export const onSideNavChange = trigger('onSideNavChange', [
 ]);
 
 export const animateText = trigger('animateText', [
-  state('hide',
+  state(
+    'hide',
     style({
-      'display': 'none',
+      display: 'none',
       opacity: 0,
     })
   ),
-  state('show',
+  state(
+    'show',
     style({
-      'display': 'block',
+      display: 'block',
       opacity: 1,
     })
   ),

SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/armor-viewmodels/ArmorViewModel.ts

@@ -0,0 +1,12 @@
+export interface ArmorViewModel {
+  id: number;
+  name: string;
+  category: string;
+  armorClassBase: number;
+  haveDexterityBonus: boolean;
+  minimumStrength: number;
+  haveStealthDisadvantage: boolean;
+  weight: number;
+  cost: number;
+  currencyType: number;
+}