SES-136 spell table model create

This commit is contained in:
Łukasz Góreczny 2021-01-08 14:55:26 +01:00
parent ae72c1ddac
commit bb2876f7a3
7 changed files with 204 additions and 29 deletions

View File

@ -8,8 +8,8 @@ import { appRoutingModule } from '../app.routing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SignInComponent } from './components/sign-in/sign-in.component';
import { RegistrationComponent } from './components/registration/registration.component';
import { GameMasterDashboardComponent} from './components/game-master-dashboard/game-master-dashboard.component';
import {PlayerDashboardComponent} from './components/player-dashboard/player-dashboard.component';
import { GameMasterDashboardComponent } from './components/game-master-dashboard/game-master-dashboard.component';
import { PlayerDashboardComponent } from './components/player-dashboard/player-dashboard.component';
import { SelectCharacterComponent } from './components/select-character/select-character.component';
import {
MatCardModule,
@ -18,15 +18,22 @@ import {
MatInputModule,
MatButtonModule,
MatCheckboxModule,
MatIconModule, MatSidenavModule, MatToolbarModule, MatListModule
MatIconModule,
MatSidenavModule,
MatToolbarModule,
MatListModule,
MatPaginatorModule,
MatTableModule,
MatSortModule,
} from '@angular/material';
import {UserService} from '../services/user.service';
import { UserService } from '../services/user.service';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import {environment} from '../environments/environment';
import {reducers} from './store/models/app-state.model';
import {CharacterService} from '../services/character.service';
import { environment } from '../environments/environment';
import { reducers } from './store/models/app-state.model';
import { CharacterService } from '../services/character.service';
import { AbilityCardComponent } from './components/ability-card/ability-card.component';
import { GameMasterSpellsTableComponent } from './components/game-master-spells-table/game-master-spells-table.component';
@NgModule({
declarations: [
@ -38,9 +45,10 @@ import { AbilityCardComponent } from './components/ability-card/ability-card.com
PlayerDashboardComponent,
SelectCharacterComponent,
AbilityCardComponent,
GameMasterSpellsTableComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
ReactiveFormsModule,
@ -56,15 +64,16 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
MatSidenavModule,
MatToolbarModule,
MatListModule,
MatPaginatorModule,
StoreModule.forRoot(reducers),
StoreDevtoolsModule.instrument({
logOnly: environment.production
})
logOnly: environment.production,
}),
MatTableModule,
MatSortModule,
],
providers: [
UserService,
CharacterService
],
bootstrap: [AppComponent]
providers: [UserService, CharacterService],
bootstrap: [AppComponent],
entryComponents: [GameMasterSpellsTableComponent],
})
export class AppModule { }
export class AppModule {}

View File

@ -10,6 +10,16 @@
right: 0;
}
.no-wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.left-nav-item *{
padding-right: 0px !important;
}
.leftnav{
background-color: #3D4751;
border-right:none;

View File

@ -17,25 +17,41 @@
</div>
<mat-divider></mat-divider>
<mat-nav-list>
<mat-list-item *ngFor="let item of leftSidenavItems">
<mat-icon mat-list-icon ><i class="{{item.iconName}}"></i></mat-icon>
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'">
<div class="mat-list-text"
style="color: white"
>
<div *ngFor="let item of leftSidenavItems">
<mat-list-item class="left-nav-item" (click)="(item.children && item.children.length) ? false :ChangeMiddleComponent(item.componentToDisplay)">
<mat-icon mat-list-icon ><i class="{{item.iconName}}"></i></mat-icon>
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" class="mat-list-text" style="color: white">
{{item.displayName}}
</div>
<mat-icon mat-list-icon>
expand_more
</mat-icon>
<a *ngIf="item.children && item.children.length" mat-icon-button style="right: -35px;" (click)="item.expanded = !item.expanded">
<mat-icon *ngIf="!item.expanded" class="mat-24">expand_more</mat-icon>
<mat-icon *ngIf="item.expanded" class="mat-24">expand_less</mat-icon>
</a>
</span>
</mat-list-item>
</mat-list-item>
<mat-divider></mat-divider>
<div *ngIf="item.expanded" >
<div *ngFor="let child of item.children" style="background-color: #4a5867">
<mat-list-item style="padding-left: 10px" (click)="ChangeMiddleComponent(child.componentToDisplay)">
<mat-icon mat-list-icon ><i class="{{child.iconName}}"></i></mat-icon>
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" class="mat-list-text" style="color: white">
{{child.displayName}}
</span>
</mat-list-item>
<mat-divider></mat-divider>
</div>
</div>
</div>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary" class="gm-toolbar">
<span>SessionCompanion</span>
</mat-toolbar>
<div style="padding: 20px">
<ng-container *ngComponentOutlet="middleComponentName">
</ng-container>
</div>
</mat-sidenav-content>
<mat-sidenav
class="rightnav"

View File

@ -10,7 +10,8 @@ import { ErrorResponse } from '../../../types/ErrorResponse';
import { HttpErrorResponse } from '@angular/common/http';
import { LoggedCharactersViewModel } from '../../../types/viewmodels/character-viewmodels/LoggedCharactersViewModel';
import { first } from 'rxjs/operators';
import {LeftNavItem} from '../../../types/LeftNavItem';
import { LeftNavItem } from '../../../types/LeftNavItem';
import { GameMasterSpellsTableComponent } from '../game-master-spells-table/game-master-spells-table.component';
@Component({
selector: 'app-game-master-dashboard',
@ -19,6 +20,7 @@ import {LeftNavItem} from '../../../types/LeftNavItem';
animations: [onSideNavChange, animateText],
})
export class GameMasterDashboardComponent implements OnInit, OnDestroy {
middleComponentName;
allSubscriptions = new Subscription();
leftSidenavExpanded = false;
leftSidenavTextExpanded = false;
@ -26,8 +28,9 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
{
displayName: 'Spells',
iconName: 'ra ra-aura',
componentToDisplay: 'GameMasterSpellsTableComponent',
expanded: false,
}
},
];
rightSidenavExpanded = false;
@ -79,6 +82,14 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
);
}
ChangeMiddleComponent(componentName: string): void {
switch (componentName) {
case 'GameMasterSpellsTableComponent':
this.middleComponentName = GameMasterSpellsTableComponent;
break;
}
}
private SubscribeToEvents(): void {
this.signalRService.message.subscribe((message: string) => {
if (

View File

@ -0,0 +1,38 @@
table {
width: 100%;
background-color: initial;
}
mat-paginator{
background-color: initial;
color: white;
}
th{
color: whitesmoke;
}
td{
color: whitesmoke;
}
::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 {
width: 25%;
}

View File

@ -0,0 +1,43 @@
<mat-form-field>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<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>
<!-- Progress Column -->
<ng-container matColumnDef="Range">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Range </th>
<td mat-cell *matCellDef="let row"> {{row.range}}% </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="Level">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Level </th>
<td mat-cell *matCellDef="let row"> {{row.level}} </td>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="School">
<th mat-header-cell *matHeaderCellDef mat-sort-header> School </th>
<td mat-cell *matCellDef="let row"> {{row.school}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<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,48 @@
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';
export interface SpellData {
name: string;
range: string;
level: number;
school: string;
}
@Component({
selector: 'app-game-master-spells-table',
templateUrl: './game-master-spells-table.component.html',
styleUrls: ['./game-master-spells-table.component.css'],
})
export class GameMasterSpellsTableComponent implements OnInit {
displayedColumns: string[] = ['Name', 'Range', 'Level', 'School'];
dataSource: MatTableDataSource<SpellData>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor() {
const users = Array.from({ length: 100 }, (_, k) => this.createSepll());
this.dataSource = new MatTableDataSource(users);
}
createSepll(): SpellData {
return { name: 'test', range: 'asd', level: 2, school: 'UAM!!!!' };
}
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}