From ae3b11c8d5a7d09dfc648c0ef821ce2a7db054fe Mon Sep 17 00:00:00 2001
From: Tomas Madeja <t.mm.madeja@gmail.com>
Date: Thu, 27 May 2021 23:34:39 +0200
Subject: [PATCH] feat: change players table to material table
---
web/angular.json | 2 ++
web/package-lock.json | 25 +++++++++++++++++++
web/package.json | 2 ++
web/src/app/app.module.ts | 6 ++++-
.../components/players/players.component.css | 3 +++
.../components/players/players.component.html | 14 +++++++----
.../components/players/players.component.ts | 18 ++++++++++++-
web/src/app/services/player.service.ts | 4 +++
web/src/index.html | 5 +++-
web/src/styles.css | 3 +++
10 files changed, 74 insertions(+), 8 deletions(-)
diff --git a/web/angular.json b/web/angular.json
index 6efbadb..bc0e6e3 100644
--- a/web/angular.json
+++ b/web/angular.json
@@ -27,6 +27,7 @@
"src/assets"
],
"styles": [
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
@@ -94,6 +95,7 @@
"src/assets"
],
"styles": [
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
diff --git a/web/package-lock.json b/web/package-lock.json
index 0ad6c65..3060609 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -143,6 +143,23 @@
"tslib": "^2.1.0"
}
},
+ "@angular/cdk": {
+ "version": "12.0.2",
+ "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.0.2.tgz",
+ "integrity": "sha512-1JGayyUJmwaul5YSEgb780aWxk+MLVG5FakVaxz5NtbPZx19ZyOuZqytCh5js11LsBDipF5/kirYhJPBFlMbWQ==",
+ "requires": {
+ "parse5": "^5.0.0",
+ "tslib": "^2.1.0"
+ },
+ "dependencies": {
+ "parse5": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+ "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+ "optional": true
+ }
+ }
+ },
"@angular/cli": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.0.0.tgz",
@@ -314,6 +331,14 @@
"tslib": "^2.1.0"
}
},
+ "@angular/material": {
+ "version": "12.0.2",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.0.2.tgz",
+ "integrity": "sha512-jTH53w4iVNk+3K5ciFyHeRhNNtV6TzeuNTSELeme4l3t5FP3VqFTdE56Q55MrV2RMIzDKLYEpiqSiQf+8ZuGSA==",
+ "requires": {
+ "tslib": "^2.1.0"
+ }
+ },
"@angular/platform-browser": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.0.0.tgz",
diff --git a/web/package.json b/web/package.json
index 8f93084..cb01b73 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,10 +11,12 @@
"private": true,
"dependencies": {
"@angular/animations": "~12.0.0",
+ "@angular/cdk": "^12.0.2",
"@angular/common": "~12.0.0",
"@angular/compiler": "~12.0.0",
"@angular/core": "~12.0.0",
"@angular/forms": "~12.0.0",
+ "@angular/material": "^12.0.2",
"@angular/platform-browser": "~12.0.0",
"@angular/platform-browser-dynamic": "~12.0.0",
"@angular/router": "~12.0.0",
diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts
index d3fe87d..7a52b6b 100644
--- a/web/src/app/app.module.ts
+++ b/web/src/app/app.module.ts
@@ -1,6 +1,7 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
+import { MatTableModule } from '@angular/material/table';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@@ -17,6 +18,7 @@ import { CreateTeamFormComponent } from './components/create-team-form/create-te
import { RecruitNewPlayerFormComponent } from './components/recruit-new-player-form/recruit-new-player-form.component';
import { RecruitVeteranPlayerFormComponent } from './components/recruit-veteran-player-form/recruit-veteran-player-form.component';
import { UpdateGameWinnerFormComponent } from './components/update-game-winner-form/update-game-winner-form.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
@@ -38,7 +40,9 @@ import { UpdateGameWinnerFormComponent } from './components/update-game-winner-f
imports: [
BrowserModule,
AppRoutingModule,
- FormsModule
+ FormsModule,
+ MatTableModule,
+ BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/web/src/app/components/players/players.component.css b/web/src/app/components/players/players.component.css
index e69de29..854f0db 100644
--- a/web/src/app/components/players/players.component.css
+++ b/web/src/app/components/players/players.component.css
@@ -0,0 +1,3 @@
+.highlight{
+ background: #679cec; /* green */
+}
diff --git a/web/src/app/components/players/players.component.html b/web/src/app/components/players/players.component.html
index 6ebce1a..8891193 100644
--- a/web/src/app/components/players/players.component.html
+++ b/web/src/app/components/players/players.component.html
@@ -1,8 +1,12 @@
<h2>Players</h2>
-<table class="playerList">
- <tr *ngFor="let player of players">
- <span class="badge">{{player.id}}</span>
- <th>{{player.name}}</th>
- </tr>
+<table mat-table [dataSource]="players">
+ <ng-container matColumnDef="name">
+ <th mat-header-cell *matHeaderCellDef> Name </th>
+ <td mat-cell *matCellDef="let player"> {{player.name}} </td>
+ </ng-container>
+ <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+ <tr mat-row *matRowDef="let row; columns: columnsToDisplay"
+ [ngClass]="{'highlight': selectedRowIndex == row.id && highlightSelected}"
+ (click)="highlight(row)"></tr>
</table>
diff --git a/web/src/app/components/players/players.component.ts b/web/src/app/components/players/players.component.ts
index 49e68b7..d26ceb4 100644
--- a/web/src/app/components/players/players.component.ts
+++ b/web/src/app/components/players/players.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Player } from 'src/app/models/player';
@Component({
@@ -10,9 +10,25 @@ export class PlayersComponent implements OnInit {
@Input() players!: Player[];
+ @Input() highlightSelected: boolean = false;
+
+ @Output() selectRowEvent: EventEmitter<number> = new EventEmitter();
+
+ columnsToDisplay = ['name'];
+
+ selectedRowIndex: number = -1;
+
constructor() { }
ngOnInit(): void {
}
+ highlight(row: Player): void {
+ if (this.selectedRowIndex == row.id) {
+ this.selectedRowIndex = -1;
+ } else {
+ this.selectedRowIndex = row.id
+ }
+ this.selectRowEvent.emit(this.selectedRowIndex);
+ }
}
diff --git a/web/src/app/services/player.service.ts b/web/src/app/services/player.service.ts
index 517cd1e..0f54f9b 100644
--- a/web/src/app/services/player.service.ts
+++ b/web/src/app/services/player.service.ts
@@ -49,4 +49,8 @@ export class PlayerService {
recruitVeteranPlayer(player: Player, team: Team) : void {
}
+
+ firePlayer(player: Player): void {
+
+ }
}
diff --git a/web/src/index.html b/web/src/index.html
index 52f51d7..7948271 100644
--- a/web/src/index.html
+++ b/web/src/index.html
@@ -6,8 +6,11 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
-<body>
+<body class="mat-typography">
<app-root></app-root>
</body>
</html>
diff --git a/web/src/styles.css b/web/src/styles.css
index 90d4ee0..7e7239a 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
--
GitLab