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

@@ -49,6 +49,7 @@ import { MatRadioModule } from '@angular/material/radio';
 import { GameMasterMonstersTableComponent } from './components/game-master-monsters-table/game-master-monsters-table.component';
 import { MonsterService } from '../services/monster.service';
 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({
   declarations: [
@@ -68,6 +69,7 @@ import { SpellDetailsDialogComponent } from './components/spell-details-dialog/s
     ThrowPrimaryAbilityComponent,
     GameMasterMonstersTableComponent,
     SpellDetailsDialogComponent,
+    GameMasterShopkeepersTableComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -116,6 +118,7 @@ import { SpellDetailsDialogComponent } from './components/spell-details-dialog/s
     GameMasterCharacterActionsDialogComponent,
     ThrowPrimaryAbilityComponent,
     SpellDetailsDialogComponent,
+    GameMasterShopkeepersTableComponent,
   ],
 })
 export class AppModule {}

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

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

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

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

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

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

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

@@ -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();
+    }
+  }
+}