SES-165 added other equipment table connected with backend

This commit is contained in:
Natalia Gawron 2021-01-21 19:47:37 +01:00
parent 47f5132f14
commit 44e6fd20b9
7 changed files with 142 additions and 13 deletions

View File

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

View File

@ -1,4 +1,5 @@
<div class="text-centre">Your armors:</div> <div class="text-centre">Your armors:</div>
<div class="custom-container">
<mat-form-field> <mat-form-field>
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Shield" #input> <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Shield" #input>
@ -17,11 +18,6 @@
<td mat-cell *matCellDef="let row"> {{row.category}} </td> <td mat-cell *matCellDef="let row"> {{row.category}} </td>
</ng-container> </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"> <ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
<td mat-cell *matCellDef="let row"> {{row.weight}} </td> <td mat-cell *matCellDef="let row"> {{row.weight}} </td>
@ -40,5 +36,6 @@
</tr> </tr>
</table> </table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator> <mat-paginator [pageSizeOptions]="[5, 10]"></mat-paginator>
</div>
</div> </div>

View File

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

View File

@ -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
}

View File

@ -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>

View File

@ -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({ @Component({
selector: 'app-player-other-equipment-table', selector: 'app-player-other-equipment-table',
@ -6,10 +16,52 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./player-other-equipment-table.component.css'] styleUrls: ['./player-other-equipment-table.component.css']
}) })
export class PlayerOtherEquipmentTableComponent implements OnInit { 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() { 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();
}
}
} }

View File

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