Merge branch 'v4-feat/settings' into v4-dev

Author: vbakke

src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { ActivityDescriptionPageComponent } from './pages/activity-description/a
 import { UsageComponent } from './pages/usage/usage.component';
 import { TeamsComponent } from './pages/teams/teams.component';
 import { RoadmapComponent } from './pages/roadmap/roadmap.component';
+import { SettingsComponent } from './pages/settings/settings.component';
 
 const routes: Routes = [
   { path: '', component: CircularHeatmapComponent },
@@ -22,6 +23,7 @@ const routes: Routes = [
   { path: 'about', component: AboutUsComponent },
   { path: 'userday', component: UserdayComponent },
   { path: 'roadmap', component: RoadmapComponent },
+  { path: 'settings', component: SettingsComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -13,6 +13,7 @@ import { TeamsComponent } from './pages/teams/teams.component';
 import { UsageComponent } from './pages/usage/usage.component';
 import { UserdayComponent } from './pages/userday/userday.component';
 import { RoadmapComponent } from './pages/roadmap/roadmap.component';
+import { SettingsComponent } from './pages/settings/settings.component';
 import { AboutUsComponent } from './pages/about-us/about-us.component';
 import { LogoComponent } from './component/logo/logo.component';
 import { SidenavButtonsComponent } from './component/sidenav-buttons/sidenav-buttons.component';
@@ -52,6 +53,7 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
     ModalMessageComponent,
     ProgressSliderComponent,
     KpiComponent,
+    SettingsComponent,
   ],
   imports: [
     BrowserModule,
@@ -60,6 +62,7 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
     MaterialModule,
     MatDialogModule,
     ReactiveFormsModule,
+    FormsModule,
     HttpClientModule,
     TeamsGroupsEditorModule,
   ],

src/app/component/activity-description/activity-description.component.html

@@ -20,7 +20,9 @@ <h1>
 
   <div class="activity-subheader">
     <span class="level">Level {{ currentActivity.level }}</span>
-    <div class="uuid"><span class="uuid-label">id: </span><span class="uuid-value">{{ currentActivity.uuid }}</span></div>
+    <div class="uuid">
+      <span class="uuid-label">id: </span><span class="uuid-value">{{ currentActivity.uuid }}</span>
+    </div>
   </div>
   <mat-accordion class="activity-details" multi="true">
     <mat-expansion-panel *ngIf="currentActivity.description?.hasContent()" [expanded]="true">
@@ -213,7 +215,8 @@ <h3><b>Usefulness</b></h3>
                   *ngFor="let openCRE of currentActivity?.references?.openCRE"
                   target="_blank"
                   [href]="openCRE">
-                  View OpenCRE</a>
+                  View OpenCRE</a
+                >
               </span>
               <ng-template #creEmpty>-</ng-template>
             </span>
@@ -336,9 +339,7 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
         <mat-panel-title>
           <b>Implemented by</b>
           <div class="references-summary" [class.hidden]="implementedByPanel.expanded">
-            <span
-              class="ref-section"
-              *ngFor="let progressTitle of progressTitlesWithTeams">
+            <span class="ref-section" *ngFor="let progressTitle of progressTitlesWithTeams">
               <strong>{{ progressTitle }}:</strong>
               <span class="ref-values">
                 <span
@@ -357,7 +358,9 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
         <div class="reference-column" *ngFor="let progressTitle of progressTitlesWithTeams">
           <div class="reference-header">{{ progressTitle }}</div>
           <div class="reference-values">
-            <span class="reference-value" *ngFor="let teamName of teamsByProgressTitle.get(progressTitle)">
+            <span
+              class="reference-value"
+              *ngFor="let teamName of teamsByProgressTitle.get(progressTitle)">
               {{ teamName }}
             </span>
           </div>
@@ -369,7 +372,9 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
     </mat-expansion-panel>
   </mat-accordion>
 
-  <div class="tags-section" *ngIf="currentActivity.tags?.length && currentActivity.tags?.[0] !== 'none'">
+  <div
+    class="tags-section"
+    *ngIf="currentActivity.tags?.length && currentActivity.tags?.[0] !== 'none'">
     <div class="tags-container">
       <span class="tag-chip" *ngFor="let tag of currentActivity.tags">{{ tag }}</span>
     </div>

src/app/component/activity-description/activity-description.component.ts

@@ -79,7 +79,7 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
       this.ResourceLabel = dataStore.getMetaString('labels', activity.difficultyOfImplementation.resources - 1);
       this.UsefulnessLabel = dataStore.getMetaString('labels', activity.usefulness - 1);
       /* eslint-enable */
-      
+
       // Get teams that have implemented this activity
       this.updateTeamsImplemented();
     }
@@ -89,7 +89,7 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
     this.teamsImplemented.clear();
     this.teamsByProgressTitle.clear();
     this.progressTitlesWithTeams = [];
-    
+
     const dataStore = this.loader.datastore;
     if (!dataStore || !dataStore.progressStore || !dataStore.meta || !this.currentActivity.uuid) {
       return;
@@ -108,11 +108,11 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
     for (const teamName of teams) {
       const progressTitle = progressStore.getTeamProgressTitle(activityUuid, teamName);
       const progressValue = progressStore.getTeamActivityProgressValue(activityUuid, teamName);
-      
+
       // Only include teams that have made progress (value > 0)
       if (progressValue > 0) {
         this.teamsImplemented.set(teamName, progressTitle);
-        
+
         // Group teams by progress title
         if (!this.teamsByProgressTitle.has(progressTitle)) {
           this.teamsByProgressTitle.set(progressTitle, []);

src/app/component/sidenav-buttons/sidenav-buttons.component.ts

@@ -12,6 +12,7 @@ export class SidenavButtonsComponent implements OnInit {
     'Matrix',
     'Mappings',
     'Teams',
+    'Settings',
     'Usage',
     'Roadmap v4.0',
     'DSOMM User Day 2025',
@@ -22,6 +23,7 @@ export class SidenavButtonsComponent implements OnInit {
     'table_chart',
     'timeline',
     'people',
+    'list',
     'description',
     'landscape',
     'school',
@@ -32,6 +34,7 @@ export class SidenavButtonsComponent implements OnInit {
     '/matrix',
     '/mapping',
     '/teams',
+    '/settings',
     '/usage',
     '/roadmap',
     '/userday',

src/app/component/teams-groups-editor/selectable-list.component.html

@@ -45,10 +45,10 @@ <h2>{{ title }}</h2>
 
       <span *ngIf="editMode">
         <button mat-icon-button (click)="startEditItem(name)" title="Rename {{ name }}">
-          <mat-icon>edit</mat-icon>
+          <mat-icon class="material-icons-outlined">edit</mat-icon>
         </button>
         <button mat-icon-button (click)="deleteListItem(name)" title="Delete {{ name }}">
-          <mat-icon>delete</mat-icon>
+          <mat-icon class="material-icons-outlined">delete</mat-icon>
         </button>
       </span>
       <span *ngIf="relationshipEditMode">

src/app/material/material.module.ts

@@ -9,6 +9,8 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -29,6 +31,8 @@ const MaterialComponents = [
   MatProgressSpinnerModule,
   MatAutocompleteModule,
   MatInputModule,
+  MatSelectModule,
+  MatFormFieldModule,
   MatExpansionModule,
   MatCardModule,
   MatCheckboxModule,

src/app/model/activity-store.ts

@@ -75,6 +75,15 @@ export class ActivityStore {
     return this._activityList;
   }
 
+  public getAllActivitiesUpToLevel(maxLevel: number | null): Activity[] {
+    /* eslint-disable */
+    if (maxLevel == null) 
+      return this._activityList;
+    else
+      return this._activityList.filter(a => a.level <= maxLevel);
+    /* eslint-enable */
+  }
+
   public getAllCategoryNames(): string[] {
     return this._categoryNames;
   }

src/app/model/data-store.ts

@@ -61,8 +61,14 @@ export class DataStore {
     return this.activityStore?.getMaxLevel() || 0;
   }
 
-  public getLevels(): string[] {
-    let maxLvl: number = this.getMaxLevel();
-    return this.getMetaStrings()?.maturityLevels?.slice(0, maxLvl) || [];
+  public getLevelTitles(maxLevel: number | null = null): string[] {
+    if (maxLevel == null) maxLevel = this.getMaxLevel();
+    let titles: string[] = this.getMetaStrings()?.maturityLevels?.slice(0, maxLevel) || [];
+    if (titles.length < maxLevel) {
+      for (let i = titles.length + 1; i <= maxLevel; i++) {
+        titles.push(`Level ${i}`);
+      }
+    }
+    return titles;
   }
 }

src/app/model/meta-store.ts

@@ -1,5 +1,5 @@
 import { YamlService } from '../service/yaml-loader/yaml-loader.service';
-import { ProgressDefinition, TeamNames, TeamGroups } from './types';
+import { ProgressDefinitions, TeamNames, TeamGroups } from './types';
 import { perfNow } from 'src/app/util/util';
 
 export interface MetaStrings {
@@ -16,16 +16,18 @@ const fallbackMetaStrings: MetaStrings = {
 };
 
 const LOCALSTORAGE_KEY: string = 'meta';
+const PROGRESS_DEFINITIONS_KEY: string = 'progressDefinitions';
 
 export class MetaStore {
   private yamlService: YamlService = new YamlService();
 
   public hasLocalStorage: boolean = false;
+  private defaultProgressDefinition: ProgressDefinitions = {};
 
   checkForDsommUpdates: boolean = false;
   lang: string = 'en';
   strings: Record<string, MetaStrings> = { en: fallbackMetaStrings };
-  progressDefinition: ProgressDefinition = {};
+  progressDefinition: ProgressDefinitions = {};
   teamGroups: TeamGroups = {};
   teams: TeamNames = [];
   activityFiles: string[] = [];
@@ -52,7 +54,12 @@ export class MetaStore {
         metaData.checkForDsommUpdates || this.checkForDsommUpdates || false;
       this.lang = metaData.lang || this.lang || 'en';
       this.strings = metaData.strings || this.strings || fallbackMetaStrings;
-      this.progressDefinition = metaData.progressDefinition || this.progressDefinition || {};
+      // Store default progress definition
+      if (metaData.progressDefinition) {
+        this.defaultProgressDefinition = { ...metaData.progressDefinition };
+      }
+      // Load custom progress definition if exists, otherwise use default
+      this.loadStoredProgressDefinition();
       this.teamGroups = metaData.teamGroups || this.teamGroups || {};
       this.teams = metaData.teams || this.teams || [];
       this.activityFiles = metaData.activityFiles || this.activityFiles || [];
@@ -62,6 +69,30 @@ export class MetaStore {
     }
   }
 
+  public saveProgressDefinition(definitions: ProgressDefinitions): void {
+    this.progressDefinition = definitions;
+    localStorage.setItem(PROGRESS_DEFINITIONS_KEY, JSON.stringify(definitions));
+  }
+
+  public resetProgressDefinition(): void {
+    this.progressDefinition = { ...this.defaultProgressDefinition };
+    localStorage.removeItem(PROGRESS_DEFINITIONS_KEY);
+  }
+
+  private loadStoredProgressDefinition(): void {
+    const stored = localStorage.getItem(PROGRESS_DEFINITIONS_KEY);
+    if (stored) {
+      try {
+        this.progressDefinition = JSON.parse(stored);
+      } catch (error) {
+        console.error('Failed to load stored progress definitions:', error);
+        this.progressDefinition = { ...this.defaultProgressDefinition };
+      }
+    } else {
+      this.progressDefinition = { ...this.defaultProgressDefinition };
+    }
+  }
+
   public updateTeamsAndGroups(teams: TeamNames, teamGroups: TeamGroups): void {
     this.teams = teams;
     this.teamGroups = teamGroups;