diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css index 63c69a9..a4eef06 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css +++ b/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 { diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html index 779c60c..0708404 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html @@ -1,4 +1,5 @@
Your armors:
+
Filter @@ -17,11 +18,6 @@ {{row.category}} - - Minimum Strength - {{row.minimumStrength}}% - - Weight {{row.weight}} @@ -40,5 +36,6 @@ - + +
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts index e8e5cfe..9ebcadc 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts +++ b/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', ]; diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css index e69de29..a4eef06 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css +++ b/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 +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html index 219c271..7db917a 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html @@ -1 +1,34 @@ -

player-other-equipment-table works!

+
Your other equipment:
+ + Filter + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
Name {{row.name}} Cost {{row.cost}} $ Description {{row.description}}
No data matching the filter "{{input.value}}"
+ + +
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts index 5f934a0..e40a32b 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts +++ b/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; - constructor() { } + @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; + @ViewChild(MatSort, { static: true }) sort: MatSort; + + constructor(private store: Store, 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(); + } + } } diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html index a4d1940..a813753 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html @@ -35,5 +35,5 @@ - +