fixed :comments and added new terminology section in settings page

Author: HishamHR5

src/app/model/meta-store.ts

@@ -4,12 +4,16 @@ import { ProgressDefinitions, TeamNames, TeamGroups } from './types';
 import { perfNow } from 'src/app/util/util';
 
 export interface MetaStrings {
+  team: string;
+  group: string;
   allTeamsGroupName: string;
   labels: string[];
   maturityLevels: string[];
   knowledgeLabels: string[];
 }
 const fallbackMetaStrings: MetaStrings = {
+  team: 'Team',
+  group: 'Group',
   allTeamsGroupName: 'All',
   maturityLevels: ['Level 1', 'Level 2'],
   labels: ['Easy', 'Medium', 'Hard'],

src/app/pages/settings/settings.component.css

@@ -248,3 +248,31 @@ mat-icon.mandatory-icon {
   margin-left: 0.5rem;
   font-weight: 500;
 }
+
+/* Terminology section */
+.terminology-section {
+  margin-top: 1rem;
+}
+
+.terminology-description {
+  color: #666;
+  font-size: 0.9em;
+  margin-bottom: 1em;
+}
+
+.terminology-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.terminology-row {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.terminology-row mat-form-field {
+  flex: 1;
+  min-width: 180px;
+}

src/app/pages/settings/settings.component.html

@@ -35,30 +35,6 @@
       </div>
     </mat-card-content>
 
-    <mat-card-content>
-      <div
-        class="terminology-container"
-        style="display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px">
-        <mat-form-field appearance="fill">
-          <mat-label>Custom Team Terminology</mat-label>
-          <input
-            matInput
-            placeholder="e.g. App"
-            name="customTeamLabel"
-            [(ngModel)]="customTeamLabel"
-            (ngModelChange)="onTeamLabelChange()" />
-        </mat-form-field>
-        <mat-form-field appearance="fill">
-          <mat-label>Custom Group Terminology</mat-label>
-          <input
-            matInput
-            placeholder="e.g. Portfolio"
-            name="customGroupLabel"
-            [(ngModel)]="customGroupLabel"
-            (ngModelChange)="onGroupLabelChange()" />
-        </mat-form-field>
-      </div>
-    </mat-card-content>
   </mat-card>
 
   <mat-card class="progress-definitions-section">
@@ -181,6 +157,56 @@ <h2>Progress Definitions</h2>
       </div>
     </div>
   </mat-card>
+
+  <mat-card class="terminology-section">
+    <h2>Terminology</h2>
+    <p class="terminology-description">
+      Customize the terminology to how you organize your "teams" and how you group them
+      (e.g. 'Apps' and 'Portfolios').
+    </p>
+    <div class="terminology-grid">
+      <div class="terminology-row">
+        <mat-form-field appearance="fill">
+          <mat-label>Team (singular)</mat-label>
+          <input
+            matInput
+            placeholder="e.g. App"
+            name="customTeamLabel"
+            [(ngModel)]="customTeamLabel"
+            (ngModelChange)="onTeamLabelChange()" />
+        </mat-form-field>
+        <mat-form-field appearance="fill">
+          <mat-label>Team (plural)</mat-label>
+          <input
+            matInput
+            [placeholder]="getTeamPluralPlaceholder()"
+            name="customTeamLabelPlural"
+            [(ngModel)]="customTeamLabelPlural"
+            (ngModelChange)="onTeamLabelPluralChange()" />
+        </mat-form-field>
+      </div>
+      <div class="terminology-row">
+        <mat-form-field appearance="fill">
+          <mat-label>Group (singular)</mat-label>
+          <input
+            matInput
+            placeholder="e.g. Portfolio"
+            name="customGroupLabel"
+            [(ngModel)]="customGroupLabel"
+            (ngModelChange)="onGroupLabelChange()" />
+        </mat-form-field>
+        <mat-form-field appearance="fill">
+          <mat-label>Group (plural)</mat-label>
+          <input
+            matInput
+            [placeholder]="getGroupPluralPlaceholder()"
+            name="customGroupLabelPlural"
+            [(ngModel)]="customGroupLabelPlural"
+            (ngModelChange)="onGroupLabelPluralChange()" />
+        </mat-form-field>
+      </div>
+    </div>
+  </mat-card>
   <mat-card class="settings-about-section">
     <h2>About the DSOMM Model</h2>
     <div class="card-content">

src/app/pages/settings/settings.component.spec.ts

@@ -44,10 +44,17 @@ describe('SettingsComponent', () => {
       'getDateFormat',
       'setDateFormat',
       'getTeamLabel',
+      'getTeamLabelPlural',
       'getGroupLabel',
+      'getGroupLabelPlural',
+      'setTeamLabel',
+      'setGroupLabel',
+      'initFromMeta',
     ]);
     settingsService.getTeamLabel.and.returnValue('Team');
+    settingsService.getTeamLabelPlural.and.returnValue('Teams');
     settingsService.getGroupLabel.and.returnValue('Group');
+    settingsService.getGroupLabelPlural.and.returnValue('Groups');
     modalComponent = jasmine.createSpyObj('ModalMessageComponent', ['openDialog']);
 
     await TestBed.configureTestingModule({

src/app/pages/settings/settings.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, FormArray, AbstractControl } from '@angular/forms';
-import { SettingsService } from '../../service/settings/settings.service';
+import { SettingsService, LabelParts } from '../../service/settings/settings.service';
 import { GithubService, GithubReleaseInfo } from 'src/app/service/settings/github.service';
 import { LoaderService } from 'src/app/service/loader/data-loader.service';
 import { DataStore } from 'src/app/model/data-store';
@@ -62,7 +62,9 @@ export class SettingsComponent implements OnInit {
   selectedDateFormat: string = this.BROWSER_LOCALE;
 
   customTeamLabel: string = 'Team';
+  customTeamLabelPlural: string = '';
   customGroupLabel: string = 'Group';
+  customGroupLabelPlural: string = '';
 
   // GitHub release check state
   checkingLatest: boolean = false;
@@ -149,7 +151,9 @@ export class SettingsComponent implements OnInit {
   initialize(): void {
     this.selectedDateFormat = this.settings.getDateFormat() || this.BROWSER_LOCALE;
     this.customTeamLabel = this.settings.getTeamLabel();
+    this.customTeamLabelPlural = this.settings.getTeamLabelPlural();
     this.customGroupLabel = this.settings.getGroupLabel();
+    this.customGroupLabelPlural = this.settings.getGroupLabelPlural();
 
     // Init dates
     let date: Date = new Date();
@@ -185,11 +189,35 @@ export class SettingsComponent implements OnInit {
   }
 
   onTeamLabelChange(): void {
-    this.settings.setTeamLabel(this.customTeamLabel);
+    this.settings.setTeamLabel(this.customTeamLabel, this.customTeamLabelPlural);
+    // Update plural placeholder when singular changes
+    if (!this.customTeamLabelPlural || this.customTeamLabelPlural === this.customTeamLabel + 's') {
+      this.customTeamLabelPlural = '';
+    }
+  }
+
+  onTeamLabelPluralChange(): void {
+    this.settings.setTeamLabel(this.customTeamLabel, this.customTeamLabelPlural);
   }
 
   onGroupLabelChange(): void {
-    this.settings.setGroupLabel(this.customGroupLabel);
+    this.settings.setGroupLabel(this.customGroupLabel, this.customGroupLabelPlural);
+    // Update plural placeholder when singular changes
+    if (!this.customGroupLabelPlural || this.customGroupLabelPlural === this.customGroupLabel + 's') {
+      this.customGroupLabelPlural = '';
+    }
+  }
+
+  onGroupLabelPluralChange(): void {
+    this.settings.setGroupLabel(this.customGroupLabel, this.customGroupLabelPlural);
+  }
+
+  getTeamPluralPlaceholder(): string {
+    return (this.customTeamLabel || 'Team') + 's';
+  }
+
+  getGroupPluralPlaceholder(): string {
+    return (this.customGroupLabel || 'Group') + 's';
   }
 
   onMaxLevelChange(value: number | null): void {

src/app/service/loader/data-loader.service.ts

@@ -13,6 +13,7 @@ import {
 } from 'src/app/model/activity-store';
 import { DataStore } from 'src/app/model/data-store';
 import { NotificationService } from '../notification.service';
+import { SettingsService } from '../settings/settings.service';
 
 export class DataValidationError extends Error {
   constructor(message: string) {
@@ -38,7 +39,8 @@ export class LoaderService {
   constructor(
     private yamlService: YamlService,
     private githubService: GithubService,
-    private notificationService: NotificationService
+    private notificationService: NotificationService,
+    private settingsService: SettingsService
   ) {
     this.DSOMM_MODEL_URL = this.githubService.getDsommModelUrl() + '/tree/main/generated';
   }
@@ -62,6 +64,9 @@ export class LoaderService {
       this.dataStore.meta = await this.loadMeta();
       this.dataStore.progressStore?.init(this.dataStore.meta.progressDefinition);
 
+      // Initialize SettingsService with meta.yaml defaults for team/group terminology
+      this.settingsService.initFromMeta(this.dataStore.getMetaStrings());
+
       // Then load activities
       this.dataStore.addActivities(await this.loadActivities(this.dataStore.meta));