Added By Game tab to the enrollment report. resolves GBAPI#308.

cmu-sei · Nov 29, 2023 · c21312a · c21312a
1 parent 6b5dce4
commit c21312a
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 10 deletions.
diff --git a/...ollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component.html b/...ollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component.html
@@ -29,7 +29,8 @@
                         {{record.playerCount}}
                     </td>
                     <td class="report-field numerical">
-                        <p>{{record.sponsors.length}}</p>
+                        <p class="tooltipped-value" (click)="handleSponsorsCountClick(record.game, record.sponsors)">
+                            {{ record.sponsors.length }}</p>
                     </td>
                     <td class="report-field numerical">
                         <app-parameter-change-link *ngIf="record.topSponsor"
@@ -38,9 +39,9 @@
                                 [avatarUri]="record.topSponsor.logoFileName | relativeImage"
                                 [tooltip]="record.topSponsor.name" size="small"></app-player-avatar-legacy>
                         </app-parameter-change-link>
-                        <small class="subtle-info">{{record.topSponsorPlayerCount}} {{ "player" |
-                            pluralizer:record.topSponsorPlayerCount
-                            }}</small>
+                        <small class="subtle-info">
+                            {{record.topSponsor.playerCount}} {{ "player" | pluralizer:record.topSponsor.playerCount }}
+                        </small>
                     </td>
                 </tr>
             </tbody>

diff --git a/...nrollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component.ts b/...nrollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component.ts
@@ -1,10 +1,11 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { EnrollmentReportByGameRecord, EnrollmentReportFlatParameters } from '@/reports/components/reports/enrollment-report/enrollment-report.models';
-import { ReportResults } from '@/reports/reports-models';
+import { EnrollmentReportByGameRecord, EnrollmentReportByGameSponsor, EnrollmentReportFlatParameters } from '@/reports/components/reports/enrollment-report/enrollment-report.models';
+import { ReportGame, ReportResults } from '@/reports/reports-models';
 import { EnrollmentReportService } from '../../enrollment-report.service';
 import { firstValueFrom } from 'rxjs';
-import { PagingArgs } from '@/api/models';
 import { RouterService } from '@/services/router.service';
+import { ModalConfirmService } from '@/services/modal-confirm.service';
+import { EnrollmentReportSponsorPlayerCountModalComponent, EnrollmentReportSponsorPlayerCountModalContext } from '../../enrollment-report-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal.component';
 
 @Component({
   selector: 'app-enrollment-report-by-game',
@@ -18,12 +19,23 @@ export class EnrollmentReportByGameComponent implements OnChanges {
 
   constructor(
     private enrollmentReportService: EnrollmentReportService,
+    private modalService: ModalConfirmService,
     private routerService: RouterService) { }
 
   async ngOnChanges(changes: SimpleChanges): Promise<void> {
     await this.loadData(this.parameters);
   }
 
+  protected handleSponsorsCountClick(game: ReportGame, sponsors: EnrollmentReportByGameSponsor[]) {
+    this.modalService.openComponent<EnrollmentReportSponsorPlayerCountModalComponent, EnrollmentReportSponsorPlayerCountModalContext>({
+      content: EnrollmentReportSponsorPlayerCountModalComponent,
+      context: {
+        game: { id: game.id, name: game.name },
+        sponsors: sponsors
+      }
+    });
+  }
+
   private async loadData(parameters: EnrollmentReportFlatParameters | null) {
     this.results = await firstValueFrom(this.enrollmentReportService.getByGameData(this.parameters));
   }

diff --git a/...rt-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal.component.html b/...rt-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal.component.html
@@ -0,0 +1,32 @@
+<div class="sponsor-challenge-performance-component" *ngIf="context; else loading">
+    <div class="modal-header">
+        <div class="modal-title pull-left d-flex align-items-center">
+
+            <div>
+                <h2>{{ context.game.name }}</h2>
+                <h4>Players per Sponsor</h4>
+            </div>
+        </div>
+        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="close()">
+            <span aria-hidden="true" class="visually-hidden">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body container d-flex flex-wrap">
+        <div class="d-flex flex-column align-items-center mr-3 sponsor-container"
+            *ngFor=" let sponsor of context.sponsors">
+            <app-player-avatar-legacy [avatarUri]="sponsor.logoFileName | relativeImage"
+                [tooltip]="sponsor.name"></app-player-avatar-legacy>
+            <span class="d-block">{{sponsor.name}}</span>
+            <span class="subtle-info">
+                {{ sponsor.playerCount }} {{ "player" | pluralizer:sponsor.playerCount }}
+            </span>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-info" (click)="close()">OK</button>
+    </div>
+</div>
+
+<ng-template #loading>
+    <app-spinner>Loading sponsor info...</app-spinner>
+</ng-template>
diff --git a/...rt-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal.component.scss b/...rt-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal.component.scss
diff --git a/...port-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal.component.ts b/...port-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal.component.ts
@@ -0,0 +1,26 @@
+import { SimpleEntity } from '@/api/models';
+import { IModalReady } from '@/core/components/modal/modal.models';
+import { Component } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { EnrollmentReportByGameSponsor } from '../../enrollment-report.models';
+
+export interface EnrollmentReportSponsorPlayerCountModalContext {
+  game: SimpleEntity;
+  sponsors: EnrollmentReportByGameSponsor[]
+}
+
+@Component({
+  selector: 'app-enrollment-report-sponsor-player-count-modal',
+  templateUrl: './enrollment-report-sponsor-player-count-modal.component.html',
+  styleUrls: ['./enrollment-report-sponsor-player-count-modal.component.scss']
+})
+export class EnrollmentReportSponsorPlayerCountModalComponent implements IModalReady<EnrollmentReportSponsorPlayerCountModalContext> {
+  context!: EnrollmentReportSponsorPlayerCountModalContext;
+
+  constructor(private modalRef: BsModalRef) { }
+
+  protected close() {
+    if (this.modalRef)
+      this.modalRef.hide();
+  }
+}
diff --git a/...board-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts b/...board-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts
@@ -67,9 +67,15 @@ export interface EnrollmentReportRecord {
 export interface EnrollmentReportByGameRecord {
     game: ReportGame;
     playerCount: number;
-    sponsors: ReportSponsor[];
-    topSponsor: ReportSponsor;
-    topSponsorPlayerCount: number;
+    sponsors: EnrollmentReportByGameSponsor[];
+    topSponsor: EnrollmentReportByGameSponsor;
+}
+
+export interface EnrollmentReportByGameSponsor {
+    id: string;
+    name: string;
+    logoFileName: string;
+    playerCount: string;
 }
 
 export interface EnrollmentReportStatSummary {

diff --git a/projects/gameboard-ui/src/app/reports/reports.module.ts b/projects/gameboard-ui/src/app/reports/reports.module.ts
@@ -35,6 +35,7 @@ import { ArrayToCountPipe } from './pipes/array-to-count.pipe';
 import { CountToTooltipClassPipe } from './pipes/count-to-tooltip-class.pipe';
 import { PlayerChallengeAttemptsModalComponent } from './components/player-challenge-attempts-modal/player-challenge-attempts-modal.component';
 import { EnrollmentReportByGameComponent } from './components/reports/enrollment-report/enrollment-report-by-game/enrollment-report-by-game/enrollment-report-by-game.component';
+import { EnrollmentReportSponsorPlayerCountModalComponent } from './components/reports/enrollment-report/enrollment-report-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal.component';
 
 @NgModule({
   declarations: [
@@ -70,6 +71,7 @@ import { EnrollmentReportByGameComponent } from './components/reports/enrollment
     PlayerChallengeAttemptsModalComponent,
     ParameterSponsorComponent,
     EnrollmentReportByGameComponent,
+    EnrollmentReportSponsorPlayerCountModalComponent,
   ],
   imports: [
     CommonModule,