Merge pull request #134 from Clean-CaDET/development

Course monitoring UX improvement
Clean-CaDET · Jan 12, 2025 · 895abae · 895abae
2 parents b952ca1 + 3511c1f
commit 895abae
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 15 deletions.
diff --git a/src/app/modules/monitoring/course-monitoring/course-monitoring.component.html b/src/app/modules/monitoring/course-monitoring/course-monitoring.component.html
@@ -15,26 +15,34 @@
         </span>
         <small>
             <mat-icon>traffic</mat-icon> Mišljenje mentora o napretku<br>
+            <mat-icon color="primary">circle</mat-icon> Snalazi se<br>
+            <mat-icon color="accent">circle</mat-icon> Bori se, ali paziti<br>
+            <mat-icon color="warn">circle</mat-icon> Ne snalazi se
+        </small>
+        <small>
             <mat-icon>record_voice_over</mat-icon> Mišljenje studenta o napretku<br>
-            <mat-icon>checklist_rtl</mat-icon> Osvojeni poeni na zadacima
+            <mat-icon color="primary">circle</mat-icon> Zadovoljan tempom<br>
+            <mat-icon color="accent">circle</mat-icon> Negde između<br>
+            <mat-icon color="warn">circle</mat-icon> Nije zadovoljan
         </small>
         <small>
-            <mat-icon color="primary">circle</mat-icon> - Dobro ide<br>
-            <mat-icon color="accent">circle</mat-icon> - Prihvatljivo, ali paziti<br>
-            <mat-icon color="warn">circle</mat-icon> - Ne ide dobro
+            <mat-icon>checklist_rtl</mat-icon> Osvojeni poeni na zadacima<br>
+            <mat-icon color="primary">circle</mat-icon> Preko 65%<br>
+            <mat-icon color="accent">circle</mat-icon> Od 35% do 65%<br>
+            <mat-icon color="warn">circle</mat-icon> Ispod 35%
         </small>
     </div>
     <mat-divider></mat-divider>
     <div class="flex-col gap course-overview" style="padding: 10px;" *ngIf="groups?.length">
         <div *ngFor="let g of groups">
             <h3>{{g.name}}</h3>
             <div class="flex-row gap" style="flex-wrap: wrap;">
-            <mat-card *ngFor="let l of g.learners" appearance="outline" style="padding: 10px;">
+            <mat-card *ngFor="let l of g.learners" appearance="outline" style="padding: 10px; width: 200px;">
                 <div class="flex-row" style="align-items: center;">
                     <small style="flex-grow: 1;">{{l.name}} {{l.surname}} <br>{{l.index}}</small>
-                    <mat-icon style="scale: 1.5;" *ngIf="l.summarySemaphore != -1"
-                        [color]="l.summarySemaphore == 1 ? 'warn' : l.summarySemaphore == 2 ? 'accent' : 'primary'"
-                        [matTooltip]="l.summarySemaphore == 1 ? 'Kontaktiraj studenta' : l.summarySemaphore == 2 ? 'Proveri sa mentorom' : 'Sve ok'">circle</mat-icon>
+                    <mat-icon style="scale: 1.8" *ngIf="l.summarySemaphore != -1"
+                        [matTooltip]="l.summarySemaphore == 1 ? 'Kontaktiraj studenta' : l.summarySemaphore == 2 ? 'Proveri sa mentorom' : 'Sve ok'"
+                        [color]="l.summarySemaphore == 1 ? 'warn' : l.summarySemaphore == 2 ? 'accent' : 'primary'">circle</mat-icon>
                 </div>
                 <small *ngIf="!l.recentFeedback?.length">Mentor nije još ocenio.</small><br>
                 <table *ngIf="l.recentFeedback?.length">

diff --git a/src/app/modules/monitoring/course-monitoring/course-monitoring.component.ts b/src/app/modules/monitoring/course-monitoring/course-monitoring.component.ts
@@ -65,7 +65,7 @@ export class CourseMonitoringComponent implements OnInit {
   }
 
   calculateSemaphoreWithKeyMetrics(semaphore: number, satisfaction: number, score: number): number {
-    if(satisfaction == -1 || score == -1) return -1;
+    if(score == -1) return -1;
     if(semaphore < 1.67 || satisfaction < 2 || score < 34) return 1;
 
     let blueCount = 0;

diff --git a/src/app/modules/monitoring/weekly-feedback/weekly-feedback.component.html b/src/app/modules/monitoring/weekly-feedback/weekly-feedback.component.html
@@ -27,9 +27,9 @@ <h3 class="mat-h3" style="margin: 0;">Koliko se dobro student snašao u nedelji
                 <textarea matInput formControlName="semaphoreJustification" rows="10"></textarea>
             </mat-form-field>
             <div class="flex-row">
-                <button mat-raised-button [color]="selectedFeedback?.id ? '' : 'primary'" type="submit" style="width: 100px;" (click)="onSubmit()">{{selectedFeedback?.id ? 'Ažuriraj' : 'Sačuvaj'}}</button>
+                <button mat-raised-button [color]="selectedFeedback?.id ? '' : 'primary'" type="submit" style="width: 100px;" (click)="onSubmit()" [disabled]="progressBarActive || !loaded">{{selectedFeedback?.id ? 'Ažuriraj' : 'Sačuvaj'}}</button>
                 <span style="flex-grow: 1;"></span>
-                <button *ngIf="selectedFeedback?.id" mat-raised-button color="warn" style="width: 100px;" (click)="onDelete(selectedFeedback.id)">Obriši</button>
+                <button *ngIf="selectedFeedback?.id" mat-raised-button color="warn" style="width: 100px;" (click)="onDelete(selectedFeedback.id)" [disabled]="progressBarActive || !loaded">Obriši</button>
             </div>
             <mat-progress-bar style="margin: 8px 0 8px 0" mode="indeterminate" *ngIf="progressBarActive"></mat-progress-bar>
         </form>

diff --git a/src/app/modules/monitoring/weekly-feedback/weekly-feedback.component.ts b/src/app/modules/monitoring/weekly-feedback/weekly-feedback.component.ts
@@ -18,6 +18,7 @@ export class WeeklyFeedbackComponent implements OnChanges {
 
   @Input() rating: WeeklyRatingStatistics;
   @Input() results: WeeklyProgressStatistics;
+  @Input() loaded: boolean;
 
   feedback: WeeklyFeedback[];
   selectedFeedback: WeeklyFeedback;

diff --git a/src/app/modules/monitoring/weekly-progress/weekly-progress.component.html b/src/app/modules/monitoring/weekly-progress/weekly-progress.component.html
@@ -3,7 +3,8 @@
         <small *ngIf="!units?.length" style="padding: 10px;">
             Student nije imao nove lekcije u protekloj nedelji.
         </small>
-        <div class="flex-col gap tutor-panel" *ngIf="units?.length">
+        <mat-progress-bar style="margin: 8px 0 8px 0" mode="indeterminate" *ngIf="!readyForFeedback"></mat-progress-bar>
+        <div class="flex-col gap tutor-panel" *ngIf="units?.length && readyForFeedback">
             <mat-card appearance="outlined" style="margin: 10px 0 20px 0;">
                 <div class="theme-highlight-primary">
                     <h2 class="mat-h2 flex-row gap" style="margin: 0px; align-items: center; padding: 5px;">
@@ -152,7 +153,7 @@ <h3 class="mat-h3">
     <mat-divider vertical="true" style="border-width: 2px;"></mat-divider>
     <div class="flex-col mentor-panel">
         <cc-weekly-feedback [courseId]="courseId" [learnerId]="selectedLearnerId" [selectedDate]="selectedDate"
-            [rating]="weeklyRatings" [results]="weeklyResults"></cc-weekly-feedback>
+            [rating]="weeklyRatings" [results]="weeklyResults" [loaded]="readyForFeedback"></cc-weekly-feedback>
         <div class="flex-row gap" style="height: 48px; justify-content: flex-end; align-items: center;">
             <button mat-icon-button (click)="changeLearner(-1)">
                 <span><mat-icon>arrow_back_ios_new</mat-icon></span>

diff --git a/src/app/modules/monitoring/weekly-progress/weekly-progress.component.ts b/src/app/modules/monitoring/weekly-progress/weekly-progress.component.ts
@@ -18,7 +18,7 @@ export class WeeklyProgressComponent implements OnChanges {
   @Output() learnerChanged = new EventEmitter<number>();
   groupMemberIds: Set<number>;
   allRatings: UnitProgressRating[];
-
+  readyForFeedback = false;
   @Input() selectedDate: Date;
 
   units: UnitHeader[] = [];
@@ -103,12 +103,13 @@ export class WeeklyProgressComponent implements OnChanges {
 
   private getKcAndTaskProgressAndWarnings() {
     if(!this.selectedLearnerId) return;
-
+    this.readyForFeedback = false;
     this.weeklyActivityService.GetKcAndTaskProgressAndWarnings(
       this.units.map(u => u.id), this.selectedLearnerId, [...this.groupMemberIds])
       .subscribe(unitSummaries => {
         this.linkStatisticsToUnits(unitSummaries);
         this.weeklyResults = calculateWeeklyProgressStatistics(this.units);
+        this.readyForFeedback = true;
       });
   }