#408 Added List View to Progress Dashboard (hobbyfarm#231)

* moved ProgressComponent into subfolder

renamed progressComponent into ProgressCardComponent

* generated progress-list component with angular cli

* added empty progress-list to sessions dashboard

added dummy table

* added table to end of the progress dashboard

* added progress colour to table

* ui changes to list-view

* Added action button

* progress info overlay enabled

* added filter function

* changed table structure

* added view to settings

* added clarity table, fixed colors, added service

* changed sort fields

* modifications for angular 17

---------

Co-authored-by: Tanja Ulmen <[email protected]>

Author: tanemlu

src/app/app.module.ts

@@ -46,7 +46,8 @@ import { AlertComponent } from './alert/alert.component';
 import { VmtemplatesComponent } from './configuration/vmtemplates/vmtemplates.component';
 import { EditVmtemplateComponent } from './configuration/vmtemplates/edit-vmtemplate/edit-vmtemplate.component';
 import { AppConfigService } from './app-config.service';
-import { ProgressComponent } from './progress/progress.component';
+import { ProgressCardComponent } from './progress/progress-card/progress-card.component';
+import { ProgressListComponent } from './progress/progress-list/progress-list.component';
 import { ProgressInfoComponent } from './progress/progress-info/progress-info.component';
 import { EventUserListComponent } from './dashboards/progress-dashboard/event-user-list/event-user-list.component';
 import { IntervalTimer } from './IntervalTimer/interval-timer.component';
@@ -169,6 +170,7 @@ import { TooltipDirective } from './directives/tooltip.directive';
 import { TooltipComponent } from './tooltip/tooltip.component';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { AuthnService } from './data/authn.service';
+import { SessionProgressService } from './progress/session-progress.service';
 
 ClarityIcons.addIcons(
   plusIcon,
@@ -268,7 +270,8 @@ export function jwtOptionsFactory(): JwtConfig {
     VmtemplatesComponent,
     EditVmtemplateComponent,
     ProgressInfoComponent,
-    ProgressComponent,
+    ProgressCardComponent,
+    ProgressListComponent,
     EventUserListComponent,
     IntervalTimer,
     ProgressDashboardComponent,
@@ -360,6 +363,7 @@ export function jwtOptionsFactory(): JwtConfig {
     GargantuaClientFactory,
     AppConfigService,
     ProgressService,
+    SessionProgressService,
     PredefinedServiceService,
     ThemeService,
     TypedSettingsService,

src/app/configuration/settings/settings.component.ts

@@ -11,6 +11,7 @@ import {
   DEFAULT_ALERT_ERROR_DURATION,
   DEFAULT_ALERT_SUCCESS_DURATION,
 } from 'src/app/alert/alert';
+import { ProgressViewMode } from 'src/app/data/ProgressViewMode';
 
 @Component({
   selector: 'app-settings',
@@ -28,6 +29,7 @@ export class SettingsComponent implements OnInit {
   scopesLoading = true;
 
   readonly FormGroupType = FormGroupType; // Reference to TypedInputTypes enum for template use
+  public progress_view_mode: ProgressViewMode = "cardView"
 
   @ViewChild('alert') alert: AlertComponent;
 

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

@@ -19,14 +19,37 @@
               >Whether finished sessions should be included.
             </clr-control-helper>
           </clr-toggle-container>
+          <clr-radio-container id="selectViewToggle" clrInline>
+            <clr-radio-wrapper>
+              <input
+                checked
+                type="radio"
+                clrRadio
+                value="cardView"
+                [formControl]="progressViewModeControl"
+              />
+              <label>Card View</label>
+            </clr-radio-wrapper>
+            <clr-radio-wrapper>
+              <input
+                type="radio"
+                clrRadio
+                value="listView"
+                [formControl]="progressViewModeControl"
+              />
+              <label>List View</label>
+            </clr-radio-wrapper>
+          </clr-radio-container>
           <clr-toggle-container id="hideUsernamesToggle">
             <clr-toggle-wrapper>
               <input
                 type="checkbox"
                 clrToggle
                 name="hideUsernames"
                 [(ngModel)]="hide_usernames_status"
-                (ngModelChange)="saveSettings($event)"
+                (ngModelChange)="
+                  saveSettings({ hide_usernames_status: $event })
+                "
               />
               <label>Hide Usernames</label>
             </clr-toggle-wrapper>
@@ -109,24 +132,47 @@
       <interval-timer (intervalElapsed)="refresh()"></interval-timer>
     </div>
   </div>
-  <div class="clr-row">
-    @if (currentProgress.length > 0) {
-      @for (p of filteredProgress; track p) {
-        <div class="clr-col-12 clr-col-sm-6 clr-col-md-4 clr-col-lg-3">
-          <progress-card
-            [progress]="p"
-            [pause]="pause"
-            [hideUsername]="hide_usernames_status"
-            (nameClickedEvent)="filterName($event)"
-          ></progress-card>
+  @if (progressViewModeControl.value === "cardView") {
+    <div class="clr-row">
+      @if (currentProgress && currentProgress.length > 0) {
+        @for (p of filteredProgress; track p) {
+          <div class="clr-col-12 clr-col-sm-6 clr-col-md-4 clr-col-lg-3">
+            <progress-card
+              [progress]="p"
+              [pause]="pause"
+              [hideUsername]="hide_usernames_status"
+              (nameClickedEvent)="filterName($event)"
+            ></progress-card>
+          </div>
+        }
+      } @else {
+        <div class="clr-col-12">
+          <p>No sessions found.</p>
         </div>
       }
-    } @else {
-      <div class="clr-col-12">
-        <p>No sessions found.</p>
-      </div>
-    }
-  </div>
+    </div>
+  }
+  @if (progressViewModeControl.value === "listView") {
+    <div class="clr-row">
+      <ng-container>
+        @if (currentProgress && currentProgress.length > 0) {
+          <div class="flex-container">
+            <progress-list
+              [progressList]="filteredProgress"
+              [pause]="pause"
+              [hideUsername]="hide_usernames_status"
+              (nameClickedEvent)="filterName($event)"
+            >
+            </progress-list>
+          </div>
+        } @else {
+          <div class="clr-col-12">
+            <p>No sessions found.</p>
+          </div>
+        }
+      </ng-container>
+    </div>
+  }
 </div>
 
 <event-user-list

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

@@ -120,3 +120,11 @@ svg circle {
       stroke: red;
     }
   }
+
+  .flex-container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    margin-top: 20px;
+  }
+  

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

@@ -8,16 +8,17 @@ import { ScenarioService } from '../../data/scenario.service';
 import { CourseService } from '../../data/course.service';
 import { EventUserListComponent } from './event-user-list/event-user-list.component';
 import { JwtHelperService } from '@auth0/angular-jwt';
-import { combineLatest, Subject, takeUntil } from 'rxjs';
+import { combineLatest, distinctUntilChanged, Subject, takeUntil } from 'rxjs';
 import { User } from '../../data/user';
 import { Settings, SettingsService } from 'src/app/data/settings.service';
-import { FormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'progress-dashboard',
   templateUrl: './progress-dashboard.component.html',
   styleUrls: ['./progress-dashboard.component.scss'],
 })
+
 export class ProgressDashboardComponent implements OnInit, OnDestroy, OnChanges {
   @Input()
   selectedEvent: ScheduledEventBase;
@@ -30,6 +31,7 @@ export class ProgressDashboardComponent implements OnInit, OnDestroy, OnChanges
   public users: User[] = [];
   public settingsForm: FormGroup;
   public hide_usernames_status: boolean = false;
+  public progressViewModeControl = new FormControl<'cardView' | 'listView'>('cardView');
   private settings_service$ = new Subject<Readonly<Settings>>();
 
   public pauseCall: boolean = false; // Stop refreshing if we are looking at a progress
@@ -53,7 +55,7 @@ export class ProgressDashboardComponent implements OnInit, OnDestroy, OnChanges
     public progressService: ProgressService,
     public scheduledeventService: ScheduledeventService,
     public helper: JwtHelperService,
-    public settingsService: SettingsService
+    public settingsService: SettingsService,
   ) {}
 
   ngOnInit() {
@@ -63,13 +65,25 @@ export class ProgressDashboardComponent implements OnInit, OnDestroy, OnChanges
       .subscribe(
         ({
           hide_usernames_status = false,
+          progress_view_mode = 'cardView'
         }) => {
           this.settingsForm.patchValue({
-            hide_usernames_status
+            hide_usernames_status,
+            progress_view_mode
           });
           this.hide_usernames_status = this.settingsForm.get('hide_usernames_status')?.value
+          this.progressViewModeControl.setValue(this.settingsForm.get('progress_view_mode')?.value)
         },
       );
+      this.progressViewModeControl.valueChanges
+      .pipe(distinctUntilChanged())
+      .subscribe((value) => {
+          if (value === 'cardView') {
+            this.setCardView();
+          } else if (value === 'listView') {
+            this.setListView();
+          }
+      });
     this.refresh();
   }
 
@@ -121,6 +135,17 @@ export class ProgressDashboardComponent implements OnInit, OnDestroy, OnChanges
     this.filter();
   }
 
+  setCardView() {
+    //this.progressViewModeService.setCardView();
+    this.saveSettings({ progress_view_mode: 'cardView' })
+  }
+
+  setListView() {
+    //this.progressViewModeService.setListView();
+    this.saveSettings({ progress_view_mode: 'listView' })
+
+  }
+
   openUserList() {
     this.userList.openModal();
   }
@@ -171,16 +196,15 @@ export class ProgressDashboardComponent implements OnInit, OnDestroy, OnChanges
     });
   }
 
-  saveSettings(newHideUsernamesStatus: boolean) {
+  saveSettings(update: Partial<Settings>) {
     if (this.settingsForm.value) {
-      this.settingsService.update({hide_usernames_status: newHideUsernamesStatus}).subscribe({
+      this.settingsService.update(update).subscribe({
         next: () => {
-          console.log('Saved Settings.');
         },
         error: (err) => {
           console.error('Error while saving settings:', err);
-        }
-      })
+        },
+      });
     }
   }
 

src/app/data/ProgressViewMode.ts

@@ -0,0 +1 @@
+export type ProgressViewMode = 'cardView' | 'listView';

src/app/data/forms.ts

@@ -4,6 +4,7 @@ import {
   FormControl,
   FormGroup,
 } from '@angular/forms';
+import { ProgressViewMode } from './ProgressViewMode';
 
 export type ChartDetailsFormGroup = FormGroup<{
   observationPeriod: FormControl<'daily' | 'weekly' | 'monthly'>;
@@ -71,6 +72,7 @@ export type SettingFormGroup = FormGroup<{
   >;
   hide_usernames_status: FormControl<boolean>;
   theme: FormControl<'dark' | 'light' | 'system'>;
+  progress_view_mode: FormControl<ProgressViewMode>;
 }>;
 
 // This object type maps VMTemplate names to the number of requested VMs
@@ -188,10 +190,14 @@ export function isChartDetailsFormGroup(
   return (
     formGroup instanceof FormGroup &&
     formGroup.controls.observationPeriod instanceof FormControl &&
-    ['daily', 'weekly', 'monthly'].includes(formGroup.controls.observationPeriod.value) &&
+    ['daily', 'weekly', 'monthly'].includes(
+      formGroup.controls.observationPeriod.value,
+    ) &&
     formGroup.controls.scenarios instanceof FormControl &&
     Array.isArray(formGroup.controls.scenarios.value) &&
-    formGroup.controls.scenarios.value.every((item) => typeof item === 'string') &&
+    formGroup.controls.scenarios.value.every(
+      (item) => typeof item === 'string',
+    ) &&
     formGroup.controls.startDate instanceof FormControl &&
     typeof formGroup.controls.startDate.value === 'string' &&
     formGroup.controls.endDate instanceof FormControl &&
@@ -200,7 +206,7 @@ export function isChartDetailsFormGroup(
 }
 
 export function isGenericFormControl(
-  control: AbstractControl
+  control: AbstractControl,
 ): control is GenericFormControl {
   return (
     control instanceof FormControl &&
@@ -210,17 +216,15 @@ export function isGenericFormControl(
   );
 }
 
-export function isGenericFormArray(
-  control: any
-): control is GenericFormArray {
+export function isGenericFormArray(control: any): control is GenericFormArray {
   return (
     control instanceof FormArray &&
     control.controls.every(
       (ctrl) =>
         ctrl instanceof FormControl &&
         (typeof ctrl.value === 'string' ||
           typeof ctrl.value === 'number' ||
-          typeof ctrl.value === 'boolean')
+          typeof ctrl.value === 'boolean'),
     )
   );
 }

src/app/data/settings.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpErrorResponse, HttpParams } from '@angular/common/http';
+import { ProgressViewMode } from './ProgressViewMode';
 import { Subject, concat, throwError } from 'rxjs';
 import {
   catchError,
@@ -21,6 +22,7 @@ export interface Settings {
   terminal_theme: (typeof themes)[number]['id'];
   hide_usernames_status: boolean;
   theme: 'dark' | 'light' | 'system';
+  progress_view_mode: ProgressViewMode;
 }
 
 /**
@@ -40,8 +42,15 @@ export class SettingsService {
       validators: [Validators.required],
       nonNullable: true,
     }),
-    hide_usernames_status: new FormControl<boolean>(false, {nonNullable: true}),
-    theme: new FormControl<'dark' | 'light' | 'system'>('system', {nonNullable: true}),
+    hide_usernames_status: new FormControl<boolean>(false, {
+      nonNullable: true,
+    }),
+    progress_view_mode: new FormControl<ProgressViewMode>('cardView', {
+      nonNullable: true,
+    }),
+    theme: new FormControl<'dark' | 'light' | 'system'>('system', {
+      nonNullable: true,
+    }),
   });
 
   fetch() {
@@ -54,6 +63,7 @@ export class SettingsService {
               terminal_theme: themes[0].id,
               hide_usernames_status: false,
               theme: 'system',
+              progress_view_mode: 'cardView',
             } as Settings),
       ),
       tap((s: Settings) => {