Merge pull request #152 from SakuraIsayeki/develop

0.17.1 - Support for Profile Roles display

WowsKarma.Api/Controllers/ProfileController.cs

@@ -4,18 +4,21 @@
 using WowsKarma.Api.Infrastructure.Attributes;
 using WowsKarma.Api.Infrastructure.Exceptions;
 using WowsKarma.Api.Services;
+using WowsKarma.Api.Services.Authentication;
 using WowsKarma.Common;
 
 namespace WowsKarma.Api.Controllers;
 
 [ApiController, Route("api/[controller]")]
-public class ProfileController : ControllerBase
+public sealed class ProfileController : ControllerBase
 {
-	private readonly PlayerService playerService;
+	private readonly PlayerService _playerService;
+	private readonly UserService _userService;
 
-	public ProfileController(PlayerService playerService)
+	public ProfileController(PlayerService playerService, UserService userService)
 	{
-		this.playerService = playerService;
+		_playerService = playerService;
+		_userService = userService;
 	}
 
 	/// <summary>
@@ -26,9 +29,13 @@ public ProfileController(PlayerService playerService)
 	/// <response code="200">Returns player profile flags for given ID.</response>
 	/// <response code="404">No player Profile was found.</response>
 	[HttpGet("{id}"), ProducesResponseType(typeof(UserProfileFlagsDTO), 200), ProducesResponseType(404)]
-	public async Task<IActionResult> GetProfileFlagsAsync(uint id) => await playerService.GetPlayerAsync(id, true) is { } player
-		? StatusCode(200, player.Adapt<UserProfileFlagsDTO>() with { PostsBanned = player.IsBanned() })
-		: StatusCode(404);
+	public async Task<IActionResult> GetProfileFlagsAsync(uint id) => await _playerService.GetPlayerAsync(id, true) is { } player
+		? Ok(player.Adapt<UserProfileFlagsDTO>() with
+			{
+				PostsBanned = player.IsBanned(),
+				ProfileRoles = (await _userService.GetUserAsync(id))?.Roles.Select(r => r.Id) ?? Enumerable.Empty<byte>()
+			})
+		: NotFound();
 
 	/// <summary>
 	/// Updates user-settable profile values.
@@ -52,7 +59,7 @@ public async Task<IActionResult> UpdateProfileFlagsAsync([FromBody] UserProfileF
 				return StatusCode(403, "User can only update their own profile.");
 			}
 
-			await playerService.UpdateProfileFlagsAsync(flags);
+			await _playerService.UpdateProfileFlagsAsync(flags);
 			return StatusCode(200);
 		}
 		catch (CooldownException e)

WowsKarma.Api/WowsKarma.Api.csproj

@@ -3,8 +3,8 @@
   <PropertyGroup>
     <TargetFramework>net7.0</TargetFramework>
     <LangVersion>preview</LangVersion>
-    <Version>0.17.0.2</Version>
-    <ProductVersion>0.17.0.2</ProductVersion>
+    <Version>0.17.1</Version>
+    <ProductVersion>0.17.1</ProductVersion>
     <Authors>Sakura Akeno Isayeki</Authors>
     <Company>Nodsoft Systems</Company>
     <Product>WOWS Karma (API)</Product>

WowsKarma.Common/Models/DTOs/UserProfileFlagsDTO.cs

@@ -1,11 +1,13 @@
 namespace WowsKarma.Common.Models.DTOs;
 
-public record UserProfileFlagsDTO
+public sealed record UserProfileFlagsDTO
 {
 	public uint Id { get; init; }
 
 	public bool PostsBanned { get; init; }
 
 	public bool OptedOut { get; init; }
 	public DateTime OptOutChanged { get; init; }
+
+	public IEnumerable<byte> ProfileRoles { get; init; }
 }

wowskarma.app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wowskarma.app",
-  "version": "0.17",
+  "version": "0.17.1",
   "scripts": {
     "ng": "ng",
     "dev": "ng serve --watch",

wowskarma.app/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { ServiceWorkerModule } from "@angular/service-worker";
-import { NgbCollapseModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule, NgbPaginationModule, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { ModActionTypeDisplayPipe } from 'src/app/services/pipes/mod-action-type-display.pipe';
 import { AppRoutingModule } from "./app-routing.module";
 import { AppWrapperComponent } from "./app-wrapper.component";
@@ -64,6 +64,7 @@ import { ClanRankComponent } from './shared/components/icons/clan-rank/clan-rank
 import { PlayerNamelinkComponent } from './shared/components/player-namelink/player-namelink.component';
 import { ProfileModActionsViewComponent } from './shared/modals/profile-mod-actions-view/profile-mod-actions-view.component';
 import { ProfilePlatformBansViewComponent } from './shared/modals/profile-platform-bans-view/profile-platform-bans-view.component';
+import { UserRolesComponent } from './shared/components/icons/user-roles/user-roles.component';
 
 @NgModule({
     declarations: [
@@ -116,24 +117,26 @@ import { ProfilePlatformBansViewComponent } from './shared/modals/profile-platfo
         PlayerNamelinkComponent,
         ProfileModActionsViewComponent,
         ProfilePlatformBansViewComponent,
-        ModActionTypeDisplayPipe
-    ],
-    imports: [
-        BrowserModule,
-        AppRoutingModule,
-        ReactiveFormsModule,
-        FormsModule,
-        HttpClientModule,
-        ApiModule,
-        ServiceWorkerModule.register("ngsw-worker.js", {
-            // enabled: environment.production,
-            // Register the ServiceWorker as soon as the application is stable
-            // or after 30 seconds (whichever comes first).
-            registrationStrategy: "registerWhenStable:30000",
-        }),
-        NgbCollapseModule,
-        NgbPaginationModule,
+        ModActionTypeDisplayPipe,
+        UserRolesComponent
     ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    ReactiveFormsModule,
+    FormsModule,
+    HttpClientModule,
+    ApiModule,
+    ServiceWorkerModule.register("ngsw-worker.js", {
+      // enabled: environment.production,
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: "registerWhenStable:30000",
+    }),
+    NgbCollapseModule,
+    NgbPaginationModule,
+    NgbTooltip,
+  ],
     providers: [
         AuthService,
         AppConfigService,

wowskarma.app/src/app/pages/player/profile/profile.component.html

@@ -3,7 +3,9 @@
     <div class="text-center mb-5">
       <h1>
         <ng-container *ngIf="profile.clan?.clanInfo as clan">
-          <icon-clan-rank [clanRank]="profile.clan?.clanMemberRole" class="pe-1"></icon-clan-rank>
+          <div class="d-inline-flex flex-row pe-1 pb-2">
+            <icon-clan-rank [clanRank]="profile.clan?.clanMemberRole" class="pe-1"></icon-clan-rank>
+          </div>
 
           <a [style.color]="clan.leagueColor | colorHex"
              [routerLink]="['/clan', clan.id + ',' + clan.tag + '-' + clan.name]"
@@ -14,22 +16,26 @@ <h1>
         <span class="mx-3">{{profile.username}}</span>
 
         <ng-container *ngIf="profileTotalKarma$ | async as profileTotalKarma">
-          <sup class="text-{{profileTotalKarma | karmaColor}}">{{profileTotalKarma}}</sup>
+          <sup class="text-{{profileTotalKarma | karmaColor}}" ngbTooltip="Total Karma" placement="bottom">{{profileTotalKarma}}</sup>
         </ng-container>
       </h1>
+
+      <div class="h1">
+        <icon-user-roles *ngIf="profileRoles$ | async as profileRoles" [UserRoles]="profileRoles" class="ms-3"></icon-user-roles>
+      </div>
     </div>
 
     <div class="row justify-content-center text-center my-5">
       <div class="col-4 m-4">
         <h4>In-Game :</h4>
         <h2 *ngIf="profile.wgHidden" class="text-danger">N/A</h2>
-        <h2 *ngIf="!profile.wgHidden" class="text-{{profile.gameKarma | karmaColor}}">{{profile.gameKarma!}}</h2>
+        <h2 *ngIf="!profile.wgHidden" class="text-{{profile.gameKarma | karmaColor}}" ngbTooltip="In-Game Karma" placement="bottom">{{profile.gameKarma!}}</h2>
       </div>
 
       <div class="col-4 m-4">
         <h4>Platform :</h4>
         <h2 *ngIf="profile.optedOut" class="text-danger">N/A</h2>
-        <h2 *ngIf="!profile.optedOut" class="text-{{profile.siteKarma | karmaColor}}">{{profile.siteKarma!}}</h2>
+        <h2 *ngIf="!profile.optedOut" class="text-{{profile.siteKarma | karmaColor}}" ngbTooltip="Platform Karma" placement="bottom">{{profile.siteKarma!}}</h2>
       </div>
     </div>
 

wowskarma.app/src/app/pages/player/profile/profile.component.ts

@@ -11,6 +11,7 @@ import { ProfilePlatformBansViewComponent } from 'src/app/shared/modals/profile-
 import { PlayerService } from "../../../services/api/services/player.service";
 import { getWowsNumbersPlayerLink } from "../../../services/helpers";
 import { filterNotNull, mapApiModelState, routeParam, shareReplayRefCount, switchMapCatchError, tapAny } from "../../../shared/rxjs-operators";
+import { ProfileService } from "../../../services/api/services/profile.service";
 
 
 @Component({
@@ -47,6 +48,14 @@ export class ProfileComponent {
     shareReplayRefCount(1)
   );
 
+  profileRoles$ = this.request$.pipe(
+    map(result => this.profileService.apiProfileIdGet$Json({id: result.model!.id!})),
+    switchMapCatchError((profile) => profile),
+    map(profile => profile?.profileRoles ?? []),
+    shareReplayRefCount(1)
+  );
+
+
   // Gets the profile's total karma, as a sum of game + platform karma.
   // Observable profile$ must first successfully emit a profile before calculating the total karma.
   profileTotalKarma$ = this.profile$.pipe(map(profile => (profile?.gameKarma ?? 0) + (profile?.siteKarma ?? 0)));
@@ -61,6 +70,7 @@ export class ProfileComponent {
   constructor(
     private route: ActivatedRoute,
     private playerService: PlayerService,
+    private profileService: ProfileService,
     public authService: AuthService,
     private modActionsService: ModActionService,
     private platformBansService: PlatformBansService,

wowskarma.app/src/app/services/api/models/user-profile-flags-dto.ts

@@ -5,4 +5,5 @@ export interface UserProfileFlagsDto {
   optOutChanged?: string;
   optedOut?: boolean;
   postsBanned?: boolean;
+  profileRoles?: number[];
 }

wowskarma.app/src/app/shared/components/icons/clan-rank/clan-rank.component.ts

@@ -3,7 +3,7 @@ import { ClanRole } from 'src/app/services/api/models/clan-role';
 
 @Component({
   selector: 'icon-clan-rank',
-  template: `<i [className]="clanRankIconName" [title]="clanRankDisplayName"></i>`,
+  template: `<i [className]="clanRankIconName" [ngbTooltip]="clanRankDisplayName" placement="bottom" [title]="clanRankDisplayName"></i>`,
   styleUrls: ['./clan-rank.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })

wowskarma.app/src/app/shared/components/icons/user-roles/user-roles.component.html

@@ -0,0 +1,11 @@
+<sup class="d-inline-flex flex-row gap-3">
+  <ng-container *ngFor="let role of UserRolesMap">
+    <ng-container *ngIf="UserRoles.includes(role.id)">
+      <i [style]="'color: ' + role.color"
+         [class]="'bi ' + role.icon"
+         [title]="role.name"
+         [ngbTooltip]="role.name" placement="bottom">
+      </i>
+    </ng-container>
+  </ng-container>
+</sup>

wowskarma.app/src/app/shared/components/icons/user-roles/user-roles.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'icon-user-roles',
+  templateUrl: './user-roles.component.html',
+  styleUrls: ['./user-roles.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class UserRolesComponent {
+  @Input() UserRoles: number[] = [];
+
+  constructor() { }
+
+  protected readonly UserRolesMap = UserRolesMap;
+}
+
+const UserRolesMap = [
+  {
+    "id": 1,
+    "name": "Platform Administrator",
+    "icon": "bi-tools",
+    "color": "#e74c3c"
+  },
+  {
+    "id": 2,
+    "name": "Community Manager",
+    "icon": "bi-shield-shaded",
+    "color": "#1abc9c"
+  }
+]

wowskarma.app/src/styles.scss

@@ -120,3 +120,11 @@ body {
 .invalid {
   outline: 2px solid red;
 }
+
+
+/* Tooltips and popovers
+-------------------------------------------------- */
+.tooltip {
+  --bs-tooltip-color: #fff;
+  --bs-tooltip-bg: #222;
+}