UI improvements.

Backend/Controllers/MatchHistoryController.cs

@@ -20,7 +20,7 @@ public class MatchHistoryController : IDisposable {
 
         [HttpGet]
         public IEnumerable<MatchHistory> Get() {
-            return _repository.Lobbies.Include(l => l.Reputations).ThenInclude(r => r.Reputation).Include(l => l.Players).OrderBy(l => l.Joined).Select(l => new MatchHistory() {
+            return _repository.Lobbies.Include(l => l.Reputations).ThenInclude(r => r.Reputation).Include(l => l.Players).OrderByDescending(l => l.Joined).Select(l => new MatchHistory() {
                 Id = l.Id,
                 Joined = l.Joined.ToString("d"),
                 Name = l.Name,
@@ -44,6 +44,7 @@ public class MatchHistoryController : IDisposable {
                 Players = lobby.Players.Count(p => p.User != null && p.Position > 0),
                 LobbySlots = new List<MatchHistoryLobbySlot>(),
                 Reputations = lobby.Reputations.OrderBy(r => r.Reputation.Type).Select(r => new Models.UserReputation {
+                    Id = r.Id,
                     Added = r.Added.ToString("d"),
                     Comment = r.Comment,
                     User = new Models.User {

Client/Client/Client.csproj

@@ -37,7 +37,6 @@
     <Content Include="src\app\lobby\running-session-page\running-session-page.component.html" />
     <Content Include="src\app\players\players-page\players-page.component.html" />
     <Content Include="src\app\reputations\delete-reputation-dialog\delete-reputation-dialog.component.html" />
-    <Content Include="src\app\reputations\reputation-details-dialog\reputation-details-dialog.component.html" />
     <Content Include="src\app\reputations\reputations-page\reputations-page.component.html" />
     <Content Include="src\app\reputations\save-reputation-dialog\save-reputation-dialog.component.html" />
     <Content Include="src\app\settings\general-page\general-page.component.html" />
@@ -48,6 +47,7 @@
     <Content Include="src\app\shared\help-page\help-page.component.html" />
     <Content Include="src\app\shared\match-details-dialog\match-details-dialog.component.html" />
     <Content Include="src\app\shared\navbar\navbar.component.html" />
+    <Content Include="src\app\shared\reputation-details-dialog\reputation-details-dialog.component.html" />
     <Content Include="src\app\shared\update-available-dialog\update-available-dialog.component.html" />
     <Content Include="src\app\shared\user-profile-dialog\user-profile-dialog.component.html" />
     <Content Include="src\assets\icomoon\style.css" />
@@ -62,10 +62,10 @@
     <Content Include="_config.yml" />
     <Content Include="src\assets\icomoon\selection.json" />
     <Content Include="src\app\reputations\reputations-page\reputations-page.component.scss" />
-    <Content Include="src\app\reputations\reputation-details-dialog\reputation-details-dialog.component.scss" />
     <Content Include="src\app\history\history-page\history-page.component.scss" />
     <Content Include="src\app\shared\match-details-dialog\match-details-dialog.component.scss" />
     <Content Include="src\app\players\players-page\players-page.component.scss" />
+    <Content Include="src\app\shared\reputation-details-dialog\reputation-details-dialog.component.scss" />
   </ItemGroup>
   <ItemGroup>
     <Content Include="karma.conf.js" />
@@ -104,8 +104,6 @@
     <TypeScriptCompile Include="src\app\reputations\delete-reputation-dialog\delete-reputation-dialog.component.ts" />
     <TypeScriptCompile Include="src\app\reputations\delete-reputation-dialog\index.ts" />
     <TypeScriptCompile Include="src\app\reputations\index.ts" />
-    <TypeScriptCompile Include="src\app\reputations\reputation-details-dialog\index.ts" />
-    <TypeScriptCompile Include="src\app\reputations\reputation-details-dialog\reputation-details-dialog.component.ts" />
     <TypeScriptCompile Include="src\app\reputations\reputations-page\index.ts" />
     <TypeScriptCompile Include="src\app\reputations\reputations-page\reputations-page.component.ts" />
     <TypeScriptCompile Include="src\app\reputations\reputations.module.ts" />
@@ -142,6 +140,9 @@
     <TypeScriptCompile Include="src\app\shared\navbar\index.ts" />
     <TypeScriptCompile Include="src\app\shared\navbar\navbar.component.ts" />
     <TypeScriptCompile Include="src\app\shared\navbar\navbar.module.ts" />
+    <TypeScriptCompile Include="src\app\shared\reputation-details-dialog\index.ts" />
+    <TypeScriptCompile Include="src\app\shared\reputation-details-dialog\reputation-details-dialog.component.ts" />
+    <TypeScriptCompile Include="src\app\shared\reputation-details-dialog\reputation-details-dialog.module.ts" />
     <TypeScriptCompile Include="src\app\shared\reputation.service.ts" />
     <TypeScriptCompile Include="src\app\shared\tracking.service.ts" />
     <TypeScriptCompile Include="src\app\shared\update-available-dialog\index.ts" />

Client/Client/src/app/app.module.ts

@@ -10,7 +10,7 @@ import { MdButtonModule, MdInputModule, MdDialogModule } from '@angular/material
 import { ToastModule } from 'ng2-toastr/ng2-toastr';
 
 import { AppRoutingModule } from './app-routing.module';
-import { AppService, HttpService, CommandService, ConfigurationService, ReputationService, TrackingService, UpdateAvailableModule, MatchDetailsDialogModule } from './shared';
+import { AppService, HttpService, CommandService, ConfigurationService, ReputationService, TrackingService, UpdateAvailableModule, MatchDetailsDialogModule, ReputationDetailsDialogModule } from './shared';
 import { AppComponent } from './app.component';
 import { LobbyModule } from './lobby';
 import { SettingsModule } from './settings';
@@ -41,7 +41,7 @@ import { CenterSpinnerModule, NavBarModule } from './shared'
         HistoryModule,
         PlayersModule,
         UpdateAvailableModule,
-        MatchDetailsDialogModule
+        ReputationDetailsDialogModule
     ],
     providers: [AppService, HttpService, CommandService, ConfigurationService, ReputationService, TrackingService],
     bootstrap: [AppComponent]

Client/Client/src/app/history/history-page/history-page.component.ts

@@ -34,7 +34,8 @@ export class HistoryPageComponent implements OnInit {
     public openMatchDetails(match: MatchHistory) {
         let dialog = this.dialogController.open(MatchDetailsDialogComponent, {
             data: <MatchDetailsDialogData>{
-                id: match.id
+                id: match.id,
+                reputationDeleted: () => this.getMatches()
             },
             width: window.innerWidth * 0.75 + "px",
         });

Client/Client/src/app/players/players-page/players-page.component.ts

@@ -58,7 +58,8 @@ export class PlayersPageComponent implements OnInit {
     public openUserProfileDialog(player: Player) {
         let dialog = this.dialogController.open(UserProfileDialogComponent, {
             data: <UserProfileDialogData>{
-                steamId: player.sSteamId
+                steamId: player.sSteamId,
+                reputationDeleted: () => this.getPlayers()
             },
             width: window.innerWidth * 0.75 + "px",
         });

Client/Client/src/app/reputations/reputations-page/reputations-page.component.ts

@@ -3,10 +3,9 @@ import { DataSource, CollectionViewer } from '@angular/cdk';
 import { MdDialog } from '@angular/material';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-import { AppService, ReputationService, ReputationWithCount,  SaveReputationRequest, TrackingService } from '../../shared';
+import { AppService, ReputationService, ReputationWithCount, SaveReputationRequest, TrackingService } from '../../shared';
 import { SaveReputationDialogComponent, SaveReputationDialogData } from '../save-reputation-dialog';
 import { DeleteReputationDialogComponent } from '../delete-reputation-dialog';
-import { ReputationDetailsDialogComponent, ReputationDetailsDialogData } from '../reputation-details-dialog';
 import { ReputationType } from '../../app.models';
 
 @Component({
@@ -62,14 +61,7 @@ export class ReputationsPageComponent implements OnInit {
     }
 
     public openReputationDetailsDialog(reputation: ReputationWithCount) {
-        this.dialog.open(ReputationDetailsDialogComponent, {
-            data: <ReputationDetailsDialogData>{
-                reputation: reputation,
-                reputationDeleted: () => this.getReputations()
-            },
-            width: window.innerWidth * 0.75 + "px"
-        });
-        this.trackingService.sendEvent("Reputations", "ReputationTypeDetailsOpened");
+        this.appService.openReputationDetailsDialog("ReputationsPage", reputation, () => this.getReputations());
     }
 
     public moveUp(reputation: ReputationWithCount) {

Client/Client/src/app/reputations/reputations.module.ts

@@ -8,12 +8,11 @@ import { CenterSpinnerModule, ConfirmationDialogModule, UserProfileDialogModule
 import { ReputationsPageComponent } from './reputations-page';
 import { SaveReputationDialogComponent } from './save-reputation-dialog';
 import { DeleteReputationDialogComponent } from './delete-reputation-dialog';
-import { ReputationDetailsDialogComponent } from './reputation-details-dialog';
 
 @NgModule({
     imports: [BrowserModule, FormsModule, MdButtonModule, MdInputModule, MdCheckboxModule, MdTableModule, MdTooltipModule, MdDialogModule, MdSelectModule, MdPaginatorModule, CdkTableModule, CenterSpinnerModule, ConfirmationDialogModule, UserProfileDialogModule],
     exports: [ReputationsPageComponent],
-    declarations: [ReputationsPageComponent, SaveReputationDialogComponent, DeleteReputationDialogComponent, ReputationDetailsDialogComponent],
-    entryComponents: [SaveReputationDialogComponent, DeleteReputationDialogComponent, ReputationDetailsDialogComponent]
+    declarations: [ReputationsPageComponent, SaveReputationDialogComponent, DeleteReputationDialogComponent],
+    entryComponents: [SaveReputationDialogComponent, DeleteReputationDialogComponent]
 })
 export class ReputationsModule { }

Client/Client/src/app/shared/app.service.ts

@@ -1,11 +1,13 @@
-import { Injectable, Inject, forwardRef } from '@angular/core';
+import { Injectable, Inject, forwardRef } from '@angular/core';
 import { remote } from 'electron';
 import { spawn, spawnSync, ChildProcess } from 'child_process';
+import { MdDialog } from '@angular/material';
 
 import { Subject } from 'rxjs/Subject';
 import { ToastsManager } from 'ng2-toastr/ng2-toastr';
 
-import { TrackingService, ConfigurationService } from './';
+import { TrackingService, ConfigurationService, ReputationDetailsDialogComponent, ReputationDetailsDialogData } from './';
+import { Reputation } from '../app.models';
 
 @Injectable()
 export class AppService {
@@ -18,7 +20,7 @@ export class AppService {
         gameStarted: new Subject<any>()
     }
 
-    constructor(private toastsManager: ToastsManager, private trackingService: TrackingService, private configurationService: ConfigurationService) {
+    constructor(private toastsManager: ToastsManager, private trackingService: TrackingService, private configurationService: ConfigurationService, private dialogController: MdDialog) {
         this.startBackend();
         window.onbeforeunload = (e) => {
             if (this.nethookActive) {
@@ -71,6 +73,18 @@ export class AppService {
         }
     }
 
+    //To avoid circular module imports then opening a reputation details dialog is performed here
+    public openReputationDetailsDialog(uiSource: string, reputation: Reputation, reputationDeleted: () => void) {
+        this.dialogController.open(ReputationDetailsDialogComponent, {
+            data: <ReputationDetailsDialogData>{
+                reputation: reputation,
+                reputationDeleted: reputationDeleted
+            },
+            width: window.innerWidth * 0.75 + "px"
+        });
+        this.trackingService.sendEvent(uiSource, "ReputationTypeDetailsOpened");
+    }
+
     private startBackend() {
         try {
             this.backendProcess = spawn(this.getWorkingDir() + "\\Backend\\Backend.exe", [], {
@@ -85,4 +99,4 @@ export class AppService {
     private getWorkingDir() {
         return remote.app.getAppPath().replace("\\resources\\app.asar", "");
     }
-}
+}

Client/Client/src/app/shared/index.ts

@@ -8,7 +8,8 @@ export * from './navbar';
 export * from './center-spinner';
 export * from './confirmation-dialog';
 export * from './assign-reputation-dialog';
-export * from './user-profile-dialog';
 export * from './update-available-dialog';
 export * from './match-details-dialog';
+export * from './reputation-details-dialog';
+export * from './user-profile-dialog';
 export * from './help-page';

Client/Client/src/app/shared/match-details-dialog/match-details-dialog.component.html

@@ -64,21 +64,14 @@
                     </ng-container>
                     <ng-container cdkColumnDef="reputation">
                         <md-header-cell *cdkHeaderCellDef>Reputation</md-header-cell>
-                        <md-cell *cdkCellDef="let player">
-                            <table *ngIf="player.reputation.type == 0">
-                                <tr>
-                                    <td>
-                                        <i class="material-icons md-24 cellColorDanger" style="margin-top: 7px; margin-right: 5px;">thumb_down</i>
-                                    </td>
-                                    <td>{{player.reputation.name}}</td>
-                                </tr>
-                            </table>
-                            <table *ngIf="player.reputation.type == 1">
+                        <md-cell *cdkCellDef="let reputation">
+                            <table>
                                 <tr>
                                     <td>
-                                        <i class="material-icons md-24 cellColorSafe" style="margin-top: -4px; margin-right: 5px;">thumb_up</i>
+                                        <i *ngIf="reputation.reputation.type == 0" class="material-icons md-24 cellColorDanger" style="margin-top: 7px; margin-right: 5px;">thumb_down</i>
+                                        <i *ngIf="reputation.reputation.type == 1" class="material-icons md-24 cellColorSafe" style="margin-top: -4px; margin-right: 5px;">thumb_up</i>
                                     </td>
-                                    <td>{{player.reputation.name}}</td>
+                                    <td><span class="clickable" (click)="openReputationDetailsDialog(reputation)">{{reputation.reputation.name}}</span></td>
                                 </tr>
                             </table>
                         </md-cell>
@@ -87,6 +80,10 @@
                         <md-header-cell *cdkHeaderCellDef>Comment</md-header-cell>
                         <md-cell *cdkCellDef="let reputation"><div style="max-width: 150px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;" [title]="reputation.comment">{{reputation.comment}}</div></md-cell>
                     </ng-container>
+                    <ng-container cdkColumnDef="actions">
+                        <md-header-cell *cdkHeaderCellDef></md-header-cell>
+                        <md-cell *cdkCellDef="let reputation"><i class="material-icons md-24 clickable" mdTooltip="Delete Reputation" (click)="deleteReputation(reputation)">delete_forever</i></md-cell>
+                    </ng-container>
 
                     <md-header-row *cdkHeaderRowDef="reputationsDisplayedColumns"></md-header-row>
                     <md-row *cdkRowDef="let player; columns: reputationsDisplayedColumns;"></md-row>
@@ -96,5 +93,5 @@
     </div>
 </md-dialog-content>
 <md-dialog-actions *ngIf="match">
-    <button md-button style="margin-left: auto; margin-right: auto;" md-dialog-close>Close</button>
+    <button md-raised-button style="margin-left: auto; margin-right: auto;" md-dialog-close>Close</button>
 </md-dialog-actions>

Client/Client/src/app/shared/match-details-dialog/match-details-dialog.component.scss

@@ -20,4 +20,8 @@
 
 .cdk-column-comment {
     flex: 0 0 150px;
+}
+
+.cdk-column-actions {
+    flex: 0 0 30px;
 }

Client/Client/src/app/shared/match-details-dialog/match-details-dialog.component.ts

@@ -5,7 +5,7 @@ import { DataSource, CollectionViewer } from '@angular/cdk';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { MatchHistory, MatchHistoryLobbySlot, UserReputation } from '../../app.models';
-import { HttpService, AppService, TrackingService, UserProfileDialogComponent, UserProfileDialogData } from '../';
+import { HttpService, AppService, TrackingService, ReputationService, UserProfileDialogComponent, UserProfileDialogData, ConfirmationDialogComponent, ConfirmationDialogData } from '../';
 
 @Component({
     selector: 'match-details-dialog',
@@ -17,9 +17,9 @@ export class MatchDetailsDialogComponent implements OnInit {
     public playersDataSource: PlayersDataSource;
     public reputationsDataSource: ReputationsDataSource;
     public playersDisplayedColumns = ["name", "rank", "totalGames", "winRatio", "dropRatio"];
-    public reputationsDisplayedColumns = ["player", "reputation", "comment"];
+    public reputationsDisplayedColumns = ["player", "reputation", "comment", "actions"];
 
-    constructor( @Inject(MD_DIALOG_DATA) private data: MatchDetailsDialogData, private appService: AppService, private httpService: HttpService, private trackingService: TrackingService, private dialog: MdDialogRef<MatchDetailsDialogComponent>, private dialogController: MdDialog) {
+    constructor( @Inject(MD_DIALOG_DATA) private data: MatchDetailsDialogData, private appService: AppService, private httpService: HttpService, private trackingService: TrackingService, private reputationService: ReputationService, private dialog: MdDialogRef<MatchDetailsDialogComponent>, private dialogController: MdDialog) {
     }
 
     public ngOnInit() {
@@ -36,6 +36,37 @@ export class MatchDetailsDialogComponent implements OnInit {
         this.trackingService.sendEvent("MatchDetails", "OpenUserProfile");
     }
 
+    public openReputationDetailsDialog(reputation: UserReputation) {
+        console.log(reputation);
+        this.appService.openReputationDetailsDialog("UserProfileDialog", reputation.reputation, () => this.fetchMatchDetails());
+    }
+
+    public deleteReputation(reputation: UserReputation) {
+        let dialog = this.dialogController.open(ConfirmationDialogComponent, {
+            data: <ConfirmationDialogData>{
+                title: "Deleting Reputation",
+                question: "Are you sure you want to delete assigned reputation?"
+            }
+        });
+        dialog.afterClosed().subscribe((confirmation: boolean) => {
+            if (confirmation) {
+                this.match = null;
+                this.reputationService.deleteReputation(reputation.id).subscribe(() => {
+                    this.fetchMatchDetails();
+                    if (this.data.reputationDeleted) {
+                        this.data.reputationDeleted();
+                    }
+                    this.appService.toastSuccess("Reputation deleted.");
+                    this.trackingService.sendEvent("UserProfileDialog", "DeleteReputation");
+                }, error => {
+                    this.dialog.close();
+                    console.log("Error occurred while deleting reputation", error);
+                    this.appService.toastError("Failed to delete reputation. Check the logs.");
+                });
+            }
+        });
+    }
+
     private fetchMatchDetails() {
         this.httpService.get<MatchHistory>("/api/matchHistory/" + this.data.id).subscribe(response => {
             this.match = response;
@@ -83,4 +114,5 @@ export class ReputationsDataSource extends DataSource<UserReputation> {
 
 export interface MatchDetailsDialogData {
     id: number;
+    reputationDeleted?(): void;
 }