From f49d471f26e433e8acfedeaff950c7753fbd9745 Mon Sep 17 00:00:00 2001
From: Jan-Gerrit Goebel <Jan-Gerrit.Goebel@sva.de>
Date: Mon, 6 May 2024 13:24:27 +0200
Subject: [PATCH] Export session data

---
 src/app/app.module.ts                         |   4 +-
 .../progress-dashboard.component.html         | 188 +++++++++++-------
 .../progress-dashboard.component.ts           |  51 ++++-
 3 files changed, 161 insertions(+), 82 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5343e63a..7e6ec6ff 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -145,6 +145,7 @@ import {
   timesIcon,
   buildingIcon,
   numberListIcon,
+  downloadIcon,
 } from '@cds/core/icon';
 
 ClarityIcons.addIcons(
@@ -183,7 +184,8 @@ ClarityIcons.addIcons(
   clockIcon,
   timesIcon,
   buildingIcon,
-  numberListIcon
+  numberListIcon,
+  downloadIcon
 );
 
 const appInitializerFn = (appConfig: AppConfigService) => {
diff --git a/src/app/dashboards/progress-dashboard/progress-dashboard.component.html b/src/app/dashboards/progress-dashboard/progress-dashboard.component.html
index 1e567130..bcdb6b23 100644
--- a/src/app/dashboards/progress-dashboard/progress-dashboard.component.html
+++ b/src/app/dashboards/progress-dashboard/progress-dashboard.component.html
@@ -1,83 +1,125 @@
 <div class="content-area">
-    <div class="clr-row clr-align-items-center clr-justify-content-between">
-        <div class="card clr-col-9">
-            <div class="clr-row clr-align-items-center">
-                <div class="clr-col">
-                    <clr-toggle-container id="includeFinishedToggle">
-                        <clr-toggle-wrapper>
-                            <input type="checkbox" clrToggle name="includeFinished" [disabled]="selectedEvent?.finished"
-                                [(ngModel)]="includeFinished" (change)="refresh()">
-                            <label>Include finished</label>
-                        </clr-toggle-wrapper>
-                        <clr-control-helper>Whether finished sessions should be included.
-                        </clr-control-helper>
-                    </clr-toggle-container>
-                </div>
-                <div class="clr-col ">
-                    <input id="userFilter" clrInput placeholder="filter users" name="userFilter"
-                        [(ngModel)]="userFilter" (ngModelChange)="filter()"
-                        [disabled]="filteredProgress.length == 0 && userFilter.length == 0" />
-                    <span class="clr-subtext">Filter by users email</span>
-                </div>
-                <div class="clr-col">
-                    <clr-dropdown>
-                        <button class="dropdown-toggle btn btn-link" clrDropdownTrigger
-                            [disabled]="scenarioList.size < 2">
-                            <span *ngIf="this.scenarioFilterList.size == 0">Filter
-                                scenario(s)</span>
-                            <span *ngIf="this.scenarioFilterList.size == 1">1 Scenario
-                                selected</span>
-                            <span *ngIf="this.scenarioFilterList.size > 1">{{this.scenarioFilterList.size}}
-                                Scenarios selected</span>
-                                <cds-icon shape="angle" direction="down"></cds-icon>
-                        </button>
-
-                        <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-                            <clr-row *ngFor="let sc of scenarioList" clrDropdownItem (click)="filterScenario(sc)"
-                                [ngClass]="{'selected' : this.scenarioFilterList.has(sc)}">
-                                {{sc}}
-                                <span class="filter-selected">
-                                    <cds-icon *ngIf="this.scenarioFilterList.has(sc)" shape="check">
-                                    </cds-icon>
-                                </span>
-                            </clr-row>
-                        </clr-dropdown-menu>
-                    </clr-dropdown>
-                </div>
-                <div class="clr-col">
-                    <p>Showing {{filteredProgress.length}} of {{currentProgress.length}} Sessions
-                    </p>
-                    <button class="btn btn-icon btn-warning" (click)="removeFilter()">
-                        <cds-icon shape="trash"></cds-icon> Clear Filter
-                    </button>
-                </div>
-            </div>
+  <div class="clr-row clr-align-items-center clr-justify-content-between">
+    <div class="card clr-col-9">
+      <div class="clr-row clr-align-items-center">
+        <div class="clr-col">
+          <clr-toggle-container id="includeFinishedToggle">
+            <clr-toggle-wrapper>
+              <input
+                type="checkbox"
+                clrToggle
+                name="includeFinished"
+                [disabled]="selectedEvent?.finished"
+                [(ngModel)]="includeFinished"
+                (change)="refresh()"
+              />
+              <label>Include finished</label>
+            </clr-toggle-wrapper>
+            <clr-control-helper
+              >Whether finished sessions should be included.
+            </clr-control-helper>
+          </clr-toggle-container>
         </div>
-        <div class="clr-col buttonCol">
-            <button class="btn btn-link userlistIcon" [disabled]="users?.length < 1" (click)="openUserList()">
-                <cds-icon shape="users" size="48" solid></cds-icon>{{users?.length}}
+        <div class="clr-col">
+          <input
+            id="userFilter"
+            clrInput
+            placeholder="username@example.com"
+            name="userFilter"
+            [(ngModel)]="userFilter"
+            (ngModelChange)="filter()"
+            [disabled]="filteredProgress.length == 0 && userFilter.length == 0"
+          />
+          <span class="clr-subtext">Filter by username</span>
+          <clr-dropdown>
+            <button
+              class="dropdown-toggle btn btn-link"
+              clrDropdownTrigger
+              [disabled]="scenarioList.size < 2"
+            >
+              <span *ngIf="this.scenarioFilterList.size == 0"
+                >Filter scenario(s)</span
+              >
+              <span *ngIf="this.scenarioFilterList.size == 1"
+                >1 Scenario selected</span
+              >
+              <span *ngIf="this.scenarioFilterList.size > 1"
+                >{{ this.scenarioFilterList.size }} Scenarios selected</span
+              >
+              <cds-icon shape="angle" direction="down"></cds-icon>
             </button>
+
+            <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
+              <clr-row
+                *ngFor="let sc of scenarioList"
+                clrDropdownItem
+                (click)="filterScenario(sc)"
+                [ngClass]="{ selected: this.scenarioFilterList.has(sc) }"
+              >
+                {{ sc }}
+                <span class="filter-selected">
+                  <cds-icon
+                    *ngIf="this.scenarioFilterList.has(sc)"
+                    shape="check"
+                  >
+                  </cds-icon>
+                </span>
+              </clr-row>
+            </clr-dropdown-menu>
+          </clr-dropdown>
         </div>
         <div class="clr-col">
-            <interval-timer (intervalElapsed)="refresh()"></interval-timer>
+          <p>
+            Showing {{ filteredProgress.length }} of
+            {{ currentProgress.length }} Sessions
+          </p>
+          <button class="btn btn-icon btn-warning" (click)="removeFilter()">
+            <cds-icon shape="trash"></cds-icon> Clear Filter
+          </button>
+          <button class="btn btn-icon btn-icon" (click)="exportCSV()">
+            <cds-icon shape="download"></cds-icon> Export CSV
+          </button>
         </div>
+      </div>
     </div>
-    <div class="clr-row">
-        <ng-container *ngIf="currentProgress?.length > 0; else no_sessions">
-            <div class="clr-col-12 clr-col-sm-6 clr-col-md-4 clr-col-lg-3" *ngFor="let p of filteredProgress">
-                <progress-card [progress]="p" [pause]="pause" (nameClickedEvent)="filterName($event)"></progress-card>
-            </div>
-        </ng-container>
+    <div class="clr-col buttonCol">
+      <button
+        class="btn btn-link userlistIcon"
+        [disabled]="users?.length < 1"
+        (click)="openUserList()"
+      >
+        <cds-icon shape="users" size="48" solid></cds-icon>{{ users?.length }}
+      </button>
     </div>
-    <ng-template #no_sessions>
-        <div class="clr-col-12">
-            <p>
-                No sessions found.
-            </p>
-        </div>
-    </ng-template>
+    <div class="clr-col">
+      <interval-timer (intervalElapsed)="refresh()"></interval-timer>
+    </div>
+  </div>
+  <div class="clr-row">
+    <ng-container *ngIf="currentProgress?.length > 0; else no_sessions">
+      <div
+        class="clr-col-12 clr-col-sm-6 clr-col-md-4 clr-col-lg-3"
+        *ngFor="let p of filteredProgress"
+      >
+        <progress-card
+          [progress]="p"
+          [pause]="pause"
+          (nameClickedEvent)="filterName($event)"
+        ></progress-card>
+      </div>
+    </ng-container>
+  </div>
+  <ng-template #no_sessions>
+    <div class="clr-col-12">
+      <p>No sessions found.</p>
+    </div>
+  </ng-template>
 </div>
 
-
-<event-user-list #userList [users]="users" [progress]="currentProgress" (userSelected)="filterName($event.email)">
-</event-user-list>
\ No newline at end of file
+<event-user-list
+  #userList
+  [users]="users"
+  [progress]="currentProgress"
+  (userSelected)="filterName($event.email)"
+>
+</event-user-list>
diff --git a/src/app/dashboards/progress-dashboard/progress-dashboard.component.ts b/src/app/dashboards/progress-dashboard/progress-dashboard.component.ts
index 65a9849d..d4fc2341 100644
--- a/src/app/dashboards/progress-dashboard/progress-dashboard.component.ts
+++ b/src/app/dashboards/progress-dashboard/progress-dashboard.component.ts
@@ -1,12 +1,6 @@
-import {
-  Component,
-  OnInit,
-  ViewChild,
-  Input,
-  SimpleChanges,
-} from '@angular/core';
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
 import { ProgressService } from 'src/app/data/progress.service';
-import { Progress, ProgressCount } from 'src/app/data/progress';
+import { Progress } from 'src/app/data/progress';
 import { UserService } from '../../data/user.service';
 import { ScheduledEvent } from '../../data/scheduledevent';
 import { ScheduledeventService } from '../../data/scheduledevent.service';
@@ -156,4 +150,45 @@ export class ProgressDashboardComponent implements OnInit {
       this.filter();
     });
   }
+
+  exportCSV() {
+    let progressCSV = '';
+    this.filteredProgress.forEach((progress) => {
+      progressCSV = progressCSV.concat(
+        progress.id +
+          ', ' +
+          progress.user +
+          ', ' +
+          progress.username +
+          ', ' +
+          progress.scenario +
+          ', ' +
+          progress.scenario_name +
+          ', ' +
+          progress.course +
+          ', ' +
+          progress.course_name +
+          ', ' +
+          progress.total_step +
+          ', ' +
+          progress.max_step +
+          ', ' +
+          progress.started +
+          ', ' +
+          progress.last_update +
+          '\n'
+      );
+    });
+    const filename = this.selectedEvent.event_name + '_sessions.csv';
+    var element = document.createElement('a');
+    element.setAttribute(
+      'href',
+      'data:text/plain;charset=utf-8,' + encodeURIComponent(progressCSV)
+    );
+    element.setAttribute('download', filename);
+    element.style.display = 'none';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+  }
 }