SES-151 Added shopkeepers table #76

Merged
s426128 merged 1 commits from SES-151 into dev 2021-01-16 21:55:31 +01:00
5 changed files with 155 additions and 0 deletions

View File

@ -47,6 +47,7 @@ import { OtherEquipmentService } from '../services/other-equipment.service';
import { GameMasterMonstersTableComponent } from './components/game-master-monsters-table/game-master-monsters-table.component'; import { GameMasterMonstersTableComponent } from './components/game-master-monsters-table/game-master-monsters-table.component';
import { MonsterService } from '../services/monster.service'; import { MonsterService } from '../services/monster.service';
import { SpellDetailsDialogComponent } from './components/spell-details-dialog/spell-details-dialog.component'; import { SpellDetailsDialogComponent } from './components/spell-details-dialog/spell-details-dialog.component';
import { GameMasterShopkeepersTableComponent } from './components/game-master-shopkeepers-table/game-master-shopkeepers-table.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -65,6 +66,7 @@ import { SpellDetailsDialogComponent } from './components/spell-details-dialog/s
GameMasterCharacterActionsDialogComponent, GameMasterCharacterActionsDialogComponent,
GameMasterMonstersTableComponent, GameMasterMonstersTableComponent,
SpellDetailsDialogComponent, SpellDetailsDialogComponent,
GameMasterShopkeepersTableComponent,
], ],
imports: [ imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@ -111,6 +113,7 @@ import { SpellDetailsDialogComponent } from './components/spell-details-dialog/s
AbilitiesComponent, AbilitiesComponent,
GameMasterCharacterActionsDialogComponent, GameMasterCharacterActionsDialogComponent,
SpellDetailsDialogComponent, SpellDetailsDialogComponent,
GameMasterShopkeepersTableComponent,
], ],
}) })
export class AppModule {} export class AppModule {}

View File

@ -21,6 +21,7 @@ import { Store } from '@ngrx/store';
import { AppState } from '../../store/models/app-state.model'; import { AppState } from '../../store/models/app-state.model';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { GameMasterMonstersTableComponent } from '../game-master-monsters-table/game-master-monsters-table.component'; import { GameMasterMonstersTableComponent } from '../game-master-monsters-table/game-master-monsters-table.component';
import { GameMasterShopkeepersTableComponent } from '../game-master-shopkeepers-table/game-master-shopkeepers-table.component';
@Component({ @Component({
selector: 'app-game-master-dashboard', selector: 'app-game-master-dashboard',
@ -65,6 +66,12 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
componentToDisplay: 'GameMasterMonstersTableComponent', componentToDisplay: 'GameMasterMonstersTableComponent',
expanded: false, expanded: false,
}, },
{
displayName: 'Shopkeepers',
iconName: 'ra ra-wooden-sign',
componentToDisplay: 'GameMasterShopkeepersTableComponent',
expanded: false,
},
]; ];
rightSidenavExpanded = false; rightSidenavExpanded = false;
@ -142,6 +149,9 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
case 'GameMasterMonstersTableComponent': case 'GameMasterMonstersTableComponent':
this.middleComponentName = GameMasterMonstersTableComponent; this.middleComponentName = GameMasterMonstersTableComponent;
break; break;
case 'GameMasterShopkeepersTableComponent':
this.middleComponentName = GameMasterShopkeepersTableComponent;
break;
} }
} }

View File

@ -0,0 +1,44 @@
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;
}
.mat-green {
background-color: green;
color: #fff;
}
button {
margin: 10px;
width: 100px;
}
.mat-column-actions {
text-align: center;
}

View File

@ -0,0 +1,46 @@
<mat-form-field>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Bob" #input>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort class="w-100">
<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="itemsCount">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Items Count </th>
<td mat-cell *matCellDef="let row"> {{row.itemsCount}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let row">
<button mat-flat-button
*ngIf="row.isAvailable"
color="red">
Deactivate
</button>
<button mat-flat-button *ngIf="!row.isAvailable" color="green">
Activate
</button>
<button mat-flat-button color="warn" >
Remove
</button>
</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>

View File

@ -0,0 +1,52 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { MonsterViewModel } from '../../../types/viewmodels/monster-viewmodels/MonsterViewModel';
@Component({
selector: 'app-game-master-shopkeepers-table',
templateUrl: './game-master-shopkeepers-table.component.html',
styleUrls: ['./game-master-shopkeepers-table.component.css'],
})
export class GameMasterShopkeepersTableComponent implements OnInit {
displayedColumns: string[] = ['name', 'itemsCount', 'actions'];
dataSource: MatTableDataSource<{
name: string;
itemsCount: number;
isAvailable: boolean;
}>; //TODO zmienić na skopkeeper view model
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor() {}
ngOnInit() {
this.dataSource = new MatTableDataSource<{
name: string;
itemsCount: number;
isAvailable: boolean;
}>([
{
name: 'Test',
itemsCount: 12,
isAvailable: true,
},
{
name: 'Test2',
itemsCount: 12,
isAvailable: false,
},
]);
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}