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

@@ -1,5 +1,11 @@
+.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;
 }
 
@@ -28,7 +34,6 @@ mat-paginator {
 td,
 th {
   color: whitesmoke;
-  width: 25%;
 }
 
 .text-centre {

SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html

@@ -1,4 +1,5 @@
 <div class="text-centre">Your armors:</div>
+<div class="custom-container">
 <mat-form-field>
   <mat-label>Filter</mat-label>
   <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Shield" #input>
@@ -17,11 +18,6 @@
       <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>
@@ -40,5 +36,6 @@
     </tr>
   </table>
 
-  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10]"></mat-paginator>
+</div>
 </div>

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

@@ -19,7 +19,6 @@ export class PlayerArmorsTableComponent implements OnInit {
   displayedColumns: string[] = [
     'name',
     'category',
-    'minimumStrength',
     'weight',
     'cost',
   ];

SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css

@@ -0,0 +1,43 @@
+.text-cut {
+  max-width: 60px; /* feel free to include any other value */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+table {
+  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;
+}
+
+.text-centre {
+  padding: 1%;
+  text-align: center;
+  align-items: center
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html

@@ -1 +1,34 @@
-<p>player-other-equipment-table works!</p>
+<div class="text-centre">Your other equipment:</div>
+<mat-form-field class="filter-class">
+  <mat-label>Filter</mat-label>
+  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Equipment" #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="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"> {{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]"></mat-paginator>
+</div>

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

@@ -1,4 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+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 { OtherEquipmentViewModel} from '../../../types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel';
+import { first } from 'rxjs/operators';
+import { ErrorResponse } from '../../../types/ErrorResponse';
+import { HttpErrorResponse } from '@angular/common/http';
+import { EquipmentService } from '../../../services/equipment.service';
+import { Store } from '@ngrx/store';
+import { AppState } from '../../store/models/app-state.model';
 
 @Component({
   selector: 'app-player-other-equipment-table',
@@ -6,10 +16,52 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./player-other-equipment-table.component.css']
 })
 export class PlayerOtherEquipmentTableComponent implements OnInit {
+  displayedColumns: string[] = [
+    'name',
+    'cost',
+    'description',
+  ];
+  dataSource: MatTableDataSource<OtherEquipmentViewModel>;
 
-  constructor() { }
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  constructor(private store: Store<AppState>, private equipmentService: EquipmentService) {}
 
   ngOnInit() {
+    this.getCharacterOtherEquipment();
   }
 
+  getCharacterOtherEquipment() {
+    this.store
+      .select((s) => s.playerStore.characterId)
+      .pipe(first())
+      .subscribe((characterId) => {
+        this.equipmentService
+          .getCharacterOtherEquipment(characterId)
+          .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.error(error.message);
+            }
+          );
+      });
+  }
+
+  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/player-weapons-table/player-weapons-table.component.html

@@ -35,5 +35,5 @@
     </tr>
   </table>
 
-  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10]"></mat-paginator>
 </div>