Add users tab to ScheduledEvent dashboard (hobbyfarm#234)

* Add users dashboard tab

* Move download CSV button to list actions

* Retreive scenarios on courses directly

* Remove unused imports

* Add CSV Export of user data

* More efficient to calculate eventScenarioIds once instead of multiple times

* fetch dynamic scenarios

* Remove switchMap that was not used

Author: jggoebel

src/app/app.module.ts

@@ -54,6 +54,7 @@ import { IntervalTimer } from './IntervalTimer/interval-timer.component';
 import { ProgressDashboardComponent } from './dashboards/progress-dashboard/progress-dashboard.component';
 import { DashboardsComponent } from './dashboards/dashboards.component';
 import { VmDashboardComponent } from './dashboards/vm-dashboard/vm-dashboard.component';
+import { UsersDashboardComponent } from './dashboards/users-dashboard/users-dashboard.component';
 import { StepComponent } from './step/step-component/step.component';
 import { CtrService } from './data/ctr.service';
 import { SessionService } from './data/session.service';
@@ -277,6 +278,7 @@ export function jwtOptionsFactory(): JwtConfig {
     ProgressDashboardComponent,
     DashboardsComponent,
     VmDashboardComponent,
+    UsersDashboardComponent,
     StepComponent,
     HfMarkdownComponent,
     TerminalComponent,

src/app/dashboards/dashboard-details/dashboard-details.component.html

@@ -4,6 +4,8 @@
       <h3>Sessions for {{ selectedEvent.event_name }}</h3>
     } @else if (vmDashboardActive && rbacSuccessVms) {
       <h3>VMs for {{ selectedEvent.event_name }}</h3>
+    } @else if (usersDashboardActive && rbacSuccessVms) {
+      <h3>Users participating in {{ selectedEvent.event_name }}</h3>
     } @else if (statisticsDashboardActive && rbacSuccessSessions) {
       <h3>Statistics for {{ selectedEvent.event_name }}</h3>
     }
@@ -48,6 +50,20 @@ <h3>Statistics for {{ selectedEvent.event_name }}</h3>
           </ng-template>
         </clr-tab>
       }
+      @if (rbacSuccessSessions) {
+        <clr-tab>
+          <button clrTabLink>Users</button>
+          <ng-template [(clrIfActive)]="usersDashboardActive">
+            <clr-tab-content *clrIfActive>
+              <div class="content-area">
+                <users-dashboard
+                  [selectedEvent]="selectedEvent"
+                ></users-dashboard>
+              </div>
+            </clr-tab-content>
+          </ng-template>
+        </clr-tab>
+      }
       @if (rbacSuccessSessions) {
         <clr-tab>
           <button clrTabLink>Statistics</button>

src/app/dashboards/dashboard-details/dashboard-details.component.ts

@@ -15,6 +15,7 @@ export class DashboardDetailsComponent implements OnInit, OnDestroy {
   public sessionDashboardActive: boolean = true;
   public vmDashboardActive: boolean = false;
   public statisticsDashboardActive: boolean = false;
+  public usersDashboardActive: boolean = false;
 
   public selectedEvent?: DashboardScheduledEvent;
   public loggedInAdminEmail: string;
@@ -28,7 +29,7 @@ export class DashboardDetailsComponent implements OnInit, OnDestroy {
   constructor(
     private route: ActivatedRoute,
     private scheduledeventService: ScheduledeventService,
-    private rbacService: RbacService
+    private rbacService: RbacService,
   ) {}
   ngOnDestroy(): void {
     this.eventSubscription.unsubscribe();
@@ -40,7 +41,7 @@ export class DashboardDetailsComponent implements OnInit, OnDestroy {
         tap((params: Params) => {
           this.eventId = params['id'] ?? '';
         }),
-        switchMap(() => this.scheduledeventService.getDashboardCache())
+        switchMap(() => this.scheduledeventService.getDashboardCache()),
       )
       .subscribe((cache: Map<string, DashboardScheduledEvent>) => {
         const currentEvent = cache.get(this.eventId);
@@ -59,14 +60,14 @@ export class DashboardDetailsComponent implements OnInit, OnDestroy {
         'courses',
         'scenarios',
       ],
-      ['list', 'get']
+      ['list', 'get'],
     ).then((rbacCheckSessions: boolean) => {
       this.rbacSuccessSessions = rbacCheckSessions;
     });
 
     this.setRbacCheck(
       ['scheduledevents', 'virtualmachines', 'virtualmachinesets', 'users'],
-      ['list', 'get']
+      ['list', 'get'],
     ).then((rbacCheck: boolean) => {
       this.rbacSuccessVms = rbacCheck;
     });

src/app/dashboards/users-dashboard/users-dashboard.component.html

@@ -0,0 +1,66 @@
+@if (loading) {
+  <span class="spinner spinner-inline"> Loading... </span>
+  <span> Loading... </span>
+} @else {
+  @if (dashboardUsers.length < 1) {
+    <div>No Users found</div>
+  }
+
+  <clr-datagrid>
+    <clr-dg-column>ID</clr-dg-column>
+    <clr-dg-column [clrDgField]="'email'">Username</clr-dg-column>
+    <clr-dg-column [clrDgField]="'otac'">OTAC</clr-dg-column>
+    <clr-dg-column [clrDgSortBy]="'started'">Started</clr-dg-column>
+    <clr-dg-column [clrDgSortBy]="'progresses.size'">Sessions</clr-dg-column>
+    <clr-dg-column [clrDgSortBy]="'uniqueScenarios'"
+      >Unique Scenarios</clr-dg-column
+    >
+    <clr-dg-column [clrDgField]="'status'">Status</clr-dg-column>
+
+    <clr-dg-row *clrDgItems="let user of dashboardUsers">
+      <clr-dg-cell>{{ user.id }} </clr-dg-cell>
+      <clr-dg-cell>{{ user.email }}</clr-dg-cell>
+      <clr-dg-cell>
+        @if (user.otac) {
+          {{ user.otac.name }}
+        } @else {
+          -
+        }
+      </clr-dg-cell>
+      <clr-dg-cell>
+        {{ user.started | date: "MMMM d, y, HH:mm:ss z" }}
+      </clr-dg-cell>
+      <clr-dg-cell>
+        {{ user.progresses?.length ?? 0 }}
+      </clr-dg-cell>
+      <clr-dg-cell>{{ user.uniqueScenarios }}</clr-dg-cell>
+      <clr-dg-cell>
+        @if (user.status == "completed") {
+          <span class="badge badge-success">COMPLETED</span>
+        } @else if (user.status == "in-progress") {
+          <span class="badge badge-info">IN PROGRESS</span>
+        } @else if (user.status == "out-of-time") {
+          <span class="badge badge-danger">OUT OF TIME</span>
+        }
+      </clr-dg-cell>
+    </clr-dg-row>
+    <clr-dg-footer>
+      <clr-dg-action-bar>
+        <button
+          type="button"
+          class="btn btn-sm btn-secondary btn-outline"
+          (click)="downloadCSV()"
+        >
+          <cds-icon shape="download"></cds-icon> Download CSV
+        </button>
+      </clr-dg-action-bar>
+      <clr-dg-pagination #pagination [clrDgPageSize]="20">
+        <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50]"
+          >Users per page</clr-dg-page-size
+        >
+        {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
+        {{ pagination.totalItems }} users
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+}

src/app/dashboards/users-dashboard/users-dashboard.component.scss

@@ -0,0 +1,3 @@
+.badge {
+  padding: 10px;
+}