Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Export session data #208

Merged
merged 1 commit into from
May 6, 2024
Merged

Export session data #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ import {
timesIcon,
buildingIcon,
numberListIcon,
downloadIcon,
} from '@cds/core/icon';

ClarityIcons.addIcons(
Expand Down Expand Up @@ -183,7 +184,8 @@ ClarityIcons.addIcons(
clockIcon,
timesIcon,
buildingIcon,
numberListIcon
numberListIcon,
downloadIcon
);

const appInitializerFn = (appConfig: AppConfigService) => {
Expand Down
188 changes: 115 additions & 73 deletions src/app/dashboards/progress-dashboard/progress-dashboard.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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="[email protected]"
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>
<event-user-list
#userList
[users]="users"
[progress]="currentProgress"
(userSelected)="filterName($event.email)"
>
</event-user-list>
51 changes: 43 additions & 8 deletions src/app/dashboards/progress-dashboard/progress-dashboard.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
}
}
Loading