From 745ab330b764727dd7dcc194d22d6a62b4cdda3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Ko=C4=8Damba?= <445661@mail.muni.cz>
Date: Mon, 21 Mar 2022 13:53:04 +0100
Subject: [PATCH] Update player select
---
angular.json | 3 +++
package.json | 19 ++++++++++++++--
.../player-selection.component.html | 8 +++++--
.../player-selection.component.ts | 8 +++----
.../kypo-player-selection.component.html | 6 ++---
.../kypo-player-selection.component.scss | 4 ++++
.../kypo-player-selection.component.ts | 22 ++++++++++---------
.../kypo-player-selection.module.ts | 18 ++++-----------
.../player-tab/player-tab.component.ts | 4 ++--
.../src/model/player-data.ts | 4 ++--
.../kypo-player-selection/src/public-api.ts | 6 +++++
11 files changed, 63 insertions(+), 39 deletions(-)
diff --git a/angular.json b/angular.json
index ebfb214..0563f94 100644
--- a/angular.json
+++ b/angular.json
@@ -1,5 +1,8 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "cli": {
+ "analytics": false
+ },
"version": 1,
"newProjectRoot": "projects",
"projects": {
diff --git a/package.json b/package.json
index be8a3bb..4148851 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,23 @@
"ng": "ng",
"start": "ng serve",
"build": "ng build",
- "watch": "ng build --watch --configuration development",
- "test": "ng test"
+ "test": "ng test",
+ "lint": "ng lint && npm run prettier-check",
+ "prettier-check": "prettier --check \"projects/**/*.ts\"",
+ "prettier-fix": "prettier --write \"./projects/**/*.ts\"",
+ "ci-test": "ng test --browsers ChromeHeadless --watch=false",
+ "build-example-app": "ng build kypo-player-selection-example-app --configuration production",
+ "build-library": "ng build kypo-player-selection --configuration production",
+ "create-package": "cd dist/kypo-player-selection && npm pack",
+ "build-and-pack": "npm install && npm run build-library && npm run create-package",
+ "ci-update-version": "cd ./projects/kypo-player-selection/ && npm version $TAG_VERSION",
+ "ci-build-and-pack": "npm ci --cache .npm --prefer-offline && npm run build-library && npm run create-package",
+ "ci-publish-package": "cd dist/kypo-player-selection && npm publish"
+ },
+ "husky": {
+ "hooks": {
+ "pre-commit": "npm run prettier-check"
+ }
},
"private": true,
"dependencies": {
diff --git a/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.html b/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.html
index 6905231..05d7fc1 100644
--- a/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.html
+++ b/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.html
@@ -1,3 +1,7 @@
<mat-card>
- <kypo-player-selection [playerData]="mock" (playerDataChange)="onPlayerDataChange($event)"></kypo-player-selection>
-</mat-card>
\ No newline at end of file
+ <kypo-player-selection
+ [playerData]="mock"
+ (playerSelectionChange)="onPlayerSelectionChange($event)"
+ (hoveredPlayerChange)="onPlayerHoverChange($event)"
+ ></kypo-player-selection>
+</mat-card>
diff --git a/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.ts b/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.ts
index ced4aea..c28f20e 100644
--- a/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.ts
+++ b/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.ts
@@ -12,12 +12,12 @@ export class PlayerSelectionComponent implements OnInit {
ngOnInit(): void {}
- onPlayerDataChange(playerSelections: PlayerData[]) {
- console.log(playerSelections);
+ onPlayerSelectionChange(selectedPlayersIds: number[]) {
+ console.log(selectedPlayersIds);
}
- onPlayerHoverChange(playerData: PlayerData) {
- console.log(playerData);
+ onPlayerHoverChange(playerId: number) {
+ console.log(playerId);
}
players = [
diff --git a/projects/kypo-player-selection/src/components/kypo-player-selection.component.html b/projects/kypo-player-selection/src/components/kypo-player-selection.component.html
index c12305a..aba629b 100644
--- a/projects/kypo-player-selection/src/components/kypo-player-selection.component.html
+++ b/projects/kypo-player-selection/src/components/kypo-player-selection.component.html
@@ -3,12 +3,12 @@
<span>{{ playerSelections.length }} trainees</span>
displayed
<span>
- <button class="trainee-selector" mat-button (click)="showAllPlayers()">Show all</button>
+ <button class="trainee-selector" mat-button color="primary" (click)="showAllPlayers()">Show all</button>
</span>
<span>
- <button class="trainee-selector" mat-button (click)="hideAllPlayers()">Hide all</button>
+ <button class="trainee-selector" mat-button color="primary" (click)="hideAllPlayers()">Hide all</button>
</span>
-</div>
+</div>
<div class="container">
<ng-container *ngFor="let playerSelection of playerSelections">
diff --git a/projects/kypo-player-selection/src/components/kypo-player-selection.component.scss b/projects/kypo-player-selection/src/components/kypo-player-selection.component.scss
index e30bb8b..bbc756f 100644
--- a/projects/kypo-player-selection/src/components/kypo-player-selection.component.scss
+++ b/projects/kypo-player-selection/src/components/kypo-player-selection.component.scss
@@ -4,4 +4,8 @@
justify-content: center;
flex-wrap: wrap;
gap: 2%;
+}
+
+.displayed-indicator {
+ text-align: center;
}
\ No newline at end of file
diff --git a/projects/kypo-player-selection/src/components/kypo-player-selection.component.ts b/projects/kypo-player-selection/src/components/kypo-player-selection.component.ts
index 7c8fc06..0b51627 100644
--- a/projects/kypo-player-selection/src/components/kypo-player-selection.component.ts
+++ b/projects/kypo-player-selection/src/components/kypo-player-selection.component.ts
@@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { View } from 'src/model/enums/view';
-import { PlayerData } from 'src/model/player-data';
-import { PlayerSelection } from 'src/model/player-selection';
+import { View } from '../model/enums/view';
+import { PlayerData } from '../model/player-data';
+import { PlayerSelection } from '../model/player-selection';
@Component({
selector: 'kypo-player-selection',
@@ -13,8 +13,8 @@ export class KypoPlayerSelectionComponent implements OnInit {
@Input() playerData!: PlayerData[];
@Input() view: View = View.BOTH;
- @Output() playerDataChange: EventEmitter<PlayerData[]> = new EventEmitter();
- @Output() hoveredPlayer: EventEmitter<PlayerData> = new EventEmitter();
+ @Output() playerSelectionChange: EventEmitter<number[]> = new EventEmitter();
+ @Output() hoveredPlayerChange: EventEmitter<number> = new EventEmitter();
playerSelections!: PlayerSelection[];
@@ -28,17 +28,19 @@ export class KypoPlayerSelectionComponent implements OnInit {
onPlayerSelectionChange(playerSelection: PlayerSelection): void {
this.playerSelections.find((ps) => ps.id === playerSelection.id)!.isSelected = playerSelection.isSelected;
- this.playerDataChange.emit(
+ this.emitSelected();
+ }
+
+ private emitSelected(): void {
+ this.playerSelectionChange.emit(
this.playerSelections
.filter((playerSelection) => playerSelection.isSelected)
- .map(
- (playerSelection) => new PlayerData(playerSelection.id, playerSelection.player, playerSelection.alertMessage)
- )
+ .map((playerSelection) => playerSelection.id)
);
}
onPlayerTabHover(playerSelection: PlayerSelection) {
- this.hoveredPlayer.emit(new PlayerData(playerSelection.id, playerSelection.player, playerSelection.alertMessage));
+ this.hoveredPlayerChange.emit(playerSelection?.id);
}
getSelectedPlayersCount(): number {
diff --git a/projects/kypo-player-selection/src/components/kypo-player-selection.module.ts b/projects/kypo-player-selection/src/components/kypo-player-selection.module.ts
index 1488f77..af2cd4a 100644
--- a/projects/kypo-player-selection/src/components/kypo-player-selection.module.ts
+++ b/projects/kypo-player-selection/src/components/kypo-player-selection.module.ts
@@ -4,19 +4,9 @@ import { KypoPlayerSelectionmaterialModule } from './kypo-player-selection-mater
import { KypoPlayerSelectionComponent } from './kypo-player-selection.component';
import { PlayerTabComponent } from './player-tab/player-tab.component';
-
-
@NgModule({
- declarations: [
- KypoPlayerSelectionComponent,
- PlayerTabComponent
- ],
- imports: [
- CommonModule,
- KypoPlayerSelectionmaterialModule
- ],
- exports: [
- KypoPlayerSelectionComponent
- ]
+ declarations: [KypoPlayerSelectionComponent, PlayerTabComponent],
+ imports: [CommonModule, KypoPlayerSelectionmaterialModule],
+ exports: [KypoPlayerSelectionComponent],
})
-export class KypoPlayerSelectionModule { }
+export class KypoPlayerSelectionModule {}
diff --git a/projects/kypo-player-selection/src/components/player-tab/player-tab.component.ts b/projects/kypo-player-selection/src/components/player-tab/player-tab.component.ts
index b033ad0..a796809 100644
--- a/projects/kypo-player-selection/src/components/player-tab/player-tab.component.ts
+++ b/projects/kypo-player-selection/src/components/player-tab/player-tab.component.ts
@@ -1,6 +1,6 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { View } from 'src/model/enums/view';
-import { PlayerSelection } from 'src/model/player-selection';
+import { View } from '../../model/enums/view';
+import { PlayerSelection } from '../../model/player-selection';
@Component({
selector: 'kypo-player-tab',
diff --git a/projects/kypo-player-selection/src/model/player-data.ts b/projects/kypo-player-selection/src/model/player-data.ts
index 7658840..9cf36e7 100644
--- a/projects/kypo-player-selection/src/model/player-data.ts
+++ b/projects/kypo-player-selection/src/model/player-data.ts
@@ -1,11 +1,11 @@
import { Player } from "./player";
export class PlayerData {
- id!: number | string;
+ id!: number;
player!: Player;
alertMessage!: string;
- constructor(id: number | string, player: Player, alertMessage: string) {
+ constructor(id: number, player: Player, alertMessage: string) {
this.id = id;
this.player = player;
this.alertMessage = alertMessage;
diff --git a/projects/kypo-player-selection/src/public-api.ts b/projects/kypo-player-selection/src/public-api.ts
index 9b25e95..12d1fd5 100644
--- a/projects/kypo-player-selection/src/public-api.ts
+++ b/projects/kypo-player-selection/src/public-api.ts
@@ -4,3 +4,9 @@
export * from './components/kypo-player-selection.component';
export * from './components/kypo-player-selection.module';
+
+
+export * from './model/player';
+export * from './model/player-data';
+export * from './model/player-selection';
+export * from './model/enums/view';
\ No newline at end of file
--
GitLab