ahmed/Tasks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add changes

Browse Source
This commit is contained in:
AD2025
2025-12-19 21:18:47 +02:00
parent b2c564225e
commit 665919c1e2
20 changed files with 841 additions and 879 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/src/app/features/history/quiz-history.component.html
View File

@@ -17,7 +17,7 @@
<!-- History Content -->
<div *ngIf="!isLoading() && !error()" class="history-container">
<!-- Header -->
<div class="history-header">
<div class="header-title">
@@ -32,7 +32,7 @@
Export CSV
</button>
</div>
<!-- Filters and Sort -->
<mat-card class="filters-card">
<mat-card-content>
@@ -46,7 +46,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="filter-field">
<mat-label>Sort By</mat-label>
<mat-select [value]="sortBy()" (selectionChange)="onSortChange($event.value)">
@@ -54,14 +54,14 @@
<mat-option value="score">Score (Highest First)</mat-option>
</mat-select>
</mat-form-field>
<button mat-icon-button (click)="refresh()" matTooltip="Refresh">
<mat-icon>refresh</mat-icon>
</button>
</div>
</mat-card-content>
</mat-card>
<!-- Empty State -->
<div *ngIf="isEmpty()" class="empty-state">
<mat-icon class="empty-icon">quiz</mat-icon>
@@ -72,11 +72,11 @@
Start a Quiz
</button>
</div>
<!-- Desktop Table View -->
<mat-card class="table-card desktop-only" *ngIf="!isEmpty()">
<table mat-table [dataSource]="history()" class="history-table">
<!-- Date Column -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef>Date</th>
@@ -84,74 +84,66 @@
{{ formatDate(session.completedAt || session.startedAt) }}
</td>
</ng-container>
<!-- Category Column -->
<ng-container matColumnDef="category">
<th mat-header-cell *matHeaderCellDef>Category</th>
<td mat-cell *matCellDef="let session">
{{ session.categoryName || 'Unknown' }}
{{ session.category.name || 'Unknown' }}
</td>
</ng-container>
<!-- Score Column -->
<ng-container matColumnDef="score">
<th mat-header-cell *matHeaderCellDef>Score</th>
<td mat-cell *matCellDef="let session">
<span class="score-badge" [ngClass]="getScoreColor(session.score, session.totalQuestions)">
{{ session.score }}/{{ session.totalQuestions }}
<span class="percentage">({{ ((session.score / session.totalQuestions) * 100).toFixed(0) }}%)</span>
{{ session.score.earned }}/{{ session.questions.total }}
<span class="percentage">({{ ((session.score.earned / session.questions.total) * 100).toFixed(0) }}%)</span>
</span>
</td>
</ng-container>
<!-- Time Column -->
<ng-container matColumnDef="time">
<th mat-header-cell *matHeaderCellDef>Time Spent</th>
<td mat-cell *matCellDef="let session">
{{ formatDuration(session.timeSpent) }}
{{ formatDuration(session.time.spent) }}
</td>
</ng-container>
<!-- Status Column -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let session">
<mat-chip [ngClass]="getStatusClass(session.status)">
{{ session.status === 'in_progress' ? 'In Progress' :
session.status === 'completed' ? 'Completed' :
'Abandoned' }}
{{ session.status === 'in_progress' ? 'In Progress' :
session.status === 'completed' ? 'Completed' :
'Abandoned' }}
</mat-chip>
</td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let session">
<button
mat-icon-button
(click)="viewResults(session.id)"
matTooltip="View Results"
*ngIf="session.status === 'completed'"
>
<button mat-icon-button (click)="viewResults(session.id)" matTooltip="View Results"
*ngIf="session.status === 'completed'">
<mat-icon>visibility</mat-icon>
</button>
<button
mat-icon-button
(click)="reviewQuiz(session.id)"
matTooltip="Review Quiz"
*ngIf="session.status === 'completed'"
>
<button mat-icon-button (click)="reviewQuiz(session.id)" matTooltip="Review Quiz"
*ngIf="session.status === 'completed'">
<mat-icon>rate_review</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-card>
<!-- Mobile Card View -->
<div class="mobile-cards mobile-only" *ngIf="!isEmpty()">
<mat-card *ngFor="let session of history()" class="history-card">
@@ -159,15 +151,15 @@
<div class="card-header">
<div class="card-title">
<mat-icon>quiz</mat-icon>
<span>{{ session.categoryName || 'Unknown' }}</span>
<span>{{ session.category?.name || 'Unknown' }}</span>
</div>
<mat-chip [ngClass]="getStatusClass(session.status)">
{{ session.status === 'in_progress' ? 'In Progress' :
session.status === 'completed' ? 'Completed' :
'Abandoned' }}
{{ session.status === 'in_progress' ? 'In Progress' :
session.status === 'completed' ? 'Completed' :
'Abandoned' }}
</mat-chip>
</div>
<div class="card-details">
<div class="detail-row">
<mat-icon>calendar_today</mat-icon>
@@ -175,17 +167,17 @@
</div>
<div class="detail-row">
<mat-icon>timer</mat-icon>
<span>{{ formatDuration(session.timeSpent) }}</span>
<span>{{ formatDuration(session.time.spent) }}</span>
</div>
<div class="detail-row score-row">
<span class="score-label">Score:</span>
<span class="score-value" [ngClass]="getScoreColor(session.score, session.totalQuestions)">
{{ session.score }}/{{ session.totalQuestions }}
({{ ((session.score / session.totalQuestions) * 100).toFixed(0) }}%)
<span class="score-value" [ngClass]="getScoreColor(session.score.earned, session.questions.total)">
{{ session.score.earned }}/{{ session.questions.total }}
({{ ((session.score.earned / session.questions.total) * 100).toFixed(0) }}%)
</span>
</div>
</div>
<div class="card-actions" *ngIf="session.status === 'completed'">
<button mat-button color="primary" (click)="viewResults(session.id)">
<mat-icon>visibility</mat-icon>
@@ -199,16 +191,9 @@
</mat-card-content>
</mat-card>
</div>
<!-- Pagination -->
<mat-paginator
*ngIf="!isEmpty()"
[length]="totalItems()"
[pageSize]="pageSize()"
[pageIndex]="currentPage() - 1"
[pageSizeOptions]="[5, 10, 20, 50]"
(page)="onPageChange($event)"
showFirstLastButtons
>
<mat-paginator *ngIf="!isEmpty()" [length]="totalItems()" [pageSize]="pageSize()" [pageIndex]="currentPage() - 1"
[pageSizeOptions]="[5, 10, 20, 50]" (page)="onPageChange($event)" showFirstLastButtons>
</mat-paginator>
</div>
</div>