feat: customizable UI terminology 513

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

@@ -288,7 +288,7 @@ <h3><b>Usefulness</b></h3>
     <!-- <mat-expansion-panel>
       <mat-expansion-panel-header>
         <mat-panel-title>
-          <b>Teams Evidence</b>
+          <b>{{ settings.getTeamLabelPlural() }} Evidence</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
       <mat-accordion multi="true">
@@ -349,7 +349,10 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
               </span>
             </span>
             <span class="ref-section" *ngIf="teamsImplemented.size === 0">
-              <span class="ref-values">No teams have started this activity yet</span>
+              <span class="ref-values"
+                >No {{ settings.getTeamLabelPlural() | lowercase }} have started this activity
+                yet</span
+              >
             </span>
           </div>
         </mat-panel-title>
@@ -367,7 +370,10 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
         </div>
       </div>
       <ng-template #noTeamsBlock>
-        <p>No teams have started implementing this activity yet.</p>
+        <p>
+          No {{ settings.getTeamLabelPlural() | lowercase }} have started implementing this activity
+          yet.
+        </p>
       </ng-template>
     </mat-expansion-panel>
   </mat-accordion>

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

@@ -14,6 +14,7 @@ import { MatAccordion } from '@angular/material/expansion';
 import { Activity } from '../../model/activity-store';
 import { LoaderService } from '../../service/loader/data-loader.service';
 import { TeamName, ProgressTitle } from '../../model/types';
+import { SettingsService } from 'src/app/service/settings/settings.service';
 
 @Component({
   selector: 'app-activity-description',
@@ -43,7 +44,7 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
 
   @ViewChildren(MatAccordion) accordion!: QueryList<MatAccordion>;
 
-  constructor(private loader: LoaderService) {}
+  constructor(private loader: LoaderService, public settings: SettingsService) {}
 
   ngOnInit() {
     // Set activity data if provided

src/app/component/report-config-modal/report-config-modal.component.html

@@ -12,7 +12,7 @@ <h3>Display Configuration</h3>
         [value]="config.columnGrouping"
         (change)="setColumnGrouping($event.value)">
         <mat-button-toggle value="byProgress">By Progress Stage</mat-button-toggle>
-        <mat-button-toggle value="byTeam">By Team</mat-button-toggle>
+        <mat-button-toggle value="byTeam">By {{ settings.getTeamLabel() }}</mat-button-toggle>
       </mat-button-toggle-group>
     </div>
   </div>

src/app/component/report-config-modal/report-config-modal.component.ts

@@ -8,6 +8,7 @@ import {
 } from '../../model/report-config';
 import { Activity } from '../../model/activity-store';
 import { ProgressTitle, TeamGroups } from '../../model/types';
+import { SettingsService } from 'src/app/service/settings/settings.service';
 
 export interface ReportConfigModalData {
   config: ReportConfig;
@@ -37,7 +38,8 @@ export class ReportConfigModalComponent {
 
   constructor(
     public dialogRef: MatDialogRef<ReportConfigModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: ReportConfigModalData
+    @Inject(MAT_DIALOG_DATA) public data: ReportConfigModalData,
+    public settings: SettingsService
   ) {
     // Deep copy config to avoid mutating the original until save
     this.config = JSON.parse(JSON.stringify(data.config));

src/app/component/team-selector/team-selector.component.html

@@ -1,14 +1,16 @@
 <div class="config-section">
-  <h3>Teams</h3>
-  <p class="config-hint">Select which teams to include in the report.</p>
+  <h3>{{ settings.getTeamLabelPlural() }}</h3>
+  <p class="config-hint">
+    Select which {{ settings.getTeamLabelPlural() | lowercase }} to include in the report.
+  </p>
   <div class="select-all-actions">
     <button mat-button color="primary" (click)="selectAllTeams()">Select All</button>
     <button mat-button (click)="deselectAllTeams()">Deselect All</button>
     <span *ngIf="groupNames.length > 0" class="group-section">
-      <span class="group-label">Group:</span>
+      <span class="group-label">{{ settings.getGroupLabel() }}:</span>
       <button mat-stroked-button [matMenuTriggerFor]="groupMenu" class="group-dropdown-btn">
         <mat-icon>group</mat-icon>
-        {{ selectedGroupName || 'Select Group' }}
+        {{ selectedGroupName || 'Select ' + settings.getGroupLabel() }}
         <mat-icon>arrow_drop_down</mat-icon>
       </button>
     </span>

src/app/component/team-selector/team-selector.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { TeamGroups } from '../../model/types';
+import { SettingsService } from 'src/app/service/settings/settings.service';
 
 @Component({
   selector: 'app-team-selector',
@@ -15,6 +16,8 @@ export class TeamSelectorComponent {
 
   selectedGroupName: string = '';
 
+  constructor(public settings: SettingsService) {}
+
   isTeamSelected(team: string): boolean {
     return this.selectedTeams.includes(team);
   }

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

@@ -2,7 +2,7 @@
 <div class="editor-container">
   <div class="editor-list-panel">
     <app-selectable-list
-      title="Groups"
+      [title]="settings.getGroupLabelPlural()"
       [items]="keys(localCopyTeamGroups)"
       [selectedItem]="selectedGroup"
       [highlightedItems]="highlightedGroups"
@@ -20,7 +20,7 @@
   </div>
   <div class="editor-list-panel">
     <app-selectable-list
-      title="Teams"
+      [title]="settings.getTeamLabelPlural()"
       [items]="localCopyTeams"
       [selectedItem]="selectedTeam"
       [highlightedItems]="highlightedTeams"

src/app/component/teams-groups-editor/teams-groups-editor.component.ts

@@ -2,6 +2,7 @@
 import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
 import { GroupName, TeamGroups, TeamName, TeamNames } from 'src/app/model/types';
 import { perfNow, renameArrayElement } from 'src/app/util/util';
+import { SettingsService } from 'src/app/service/settings/settings.service';
 
 enum EditMode {
   NONE,
@@ -49,6 +50,8 @@ export class TeamsGroupsEditorComponent implements OnChanges {
   localCopyTeamsRenamed: Record<TeamName, TeamName> = {};
   localCopyTeamGroups: TeamGroups = {};
 
+  constructor(public settings: SettingsService) {}
+
   ngOnChanges() {
     this.makeLocalCopy();
 
@@ -159,7 +162,7 @@ export class TeamsGroupsEditorComponent implements OnChanges {
   }
 
   onAddTeam() {
-    let newName: string = this.findNextName(this.localCopyTeams, 'Team');
+    let newName: string = this.findNextName(this.localCopyTeams, this.settings.getTeamLabel());
     this.localCopyTeams.push(newName);
     this.onTeamSelected(newName);
   }
@@ -194,7 +197,10 @@ export class TeamsGroupsEditorComponent implements OnChanges {
   }
 
   onAddGroup() {
-    let newName: string = this.findNextName(this.keys(this.localCopyTeamGroups), 'Group');
+    let newName: string = this.findNextName(
+      this.keys(this.localCopyTeamGroups),
+      this.settings.getGroupLabel()
+    );
     this.localCopyTeamGroups[newName] = [];
     this.onGroupSelected(newName);
   }

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/circular-heatmap/circular-heatmap.component.html

@@ -35,7 +35,9 @@ <h2>Nothing to show</h2>
           </button>
           <div class="team-filter" [class.hidden]="!showFilters">
             <mat-form-field class="team-chip-list">
-              <mat-label>Team Group Filter</mat-label>
+              <mat-label
+                >{{ settings.getTeamLabel() }} {{ settings.getGroupLabel() }} Filter</mat-label
+              >
               <mat-chip-list selectable>
                 <mat-chip
                   #chip="matChip"
@@ -47,7 +49,7 @@ <h2>Nothing to show</h2>
               </mat-chip-list>
             </mat-form-field>
             <mat-form-field>
-              <mat-label>Team Filter</mat-label>
+              <mat-label>{{ settings.getTeamLabel() }} Filter</mat-label>
               <mat-chip-list selectable multiple>
                 <mat-chip
                   #chip="matChip"
@@ -116,14 +118,14 @@ <h2>Nothing to show</h2>
             mat-raised-button
             class="downloadButtonClass"
             (click)="exportTeamProgress()">
-            Download team progress
+            Download {{ settings.getTeamLabel() | lowercase }} progress
           </button>
           <button
             class="normal-button"
             mat-raised-button
             class="resetButtonClass"
             (click)="deleteLocalTeamsProgress()">
-            Delete team progress
+            Delete {{ settings.getTeamLabel() | lowercase }} progress
           </button>
         </div>
       </div>

src/app/pages/circular-heatmap/circular-heatmap.component.ts

@@ -64,7 +64,7 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
   constructor(
     private loader: LoaderService,
     private sectorService: SectorService,
-    private settings: SettingsService,
+    public settings: SettingsService,
     private themeService: ThemeService,
     private titleService: TitleService,
     private router: Router,

src/app/pages/report/report.component.html

@@ -13,7 +13,7 @@
     <span class="activity-count" *ngIf="!isLoading">
       {{ totalFilteredActivities }} activities
       <span *ngIf="reportConfig.selectedTeams.length > 0">
-        · {{ reportConfig.selectedTeams.length }} teams
+        · {{ reportConfig.selectedTeams.length }} {{ settings.getTeamLabelPlural() | lowercase }}
       </span>
     </span>
   </div>

src/app/pages/report/report.component.ts

@@ -62,7 +62,7 @@ export class ReportComponent implements OnInit {
 
   constructor(
     private loader: LoaderService,
-    private settings: SettingsService,
+    public settings: SettingsService,
     private dialog: MatDialog
   ) {
     this.reportConfig = getReportConfig();

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

@@ -156,6 +156,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" floatLabel="always">
+          <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" floatLabel="always">
+          <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

@@ -43,7 +43,18 @@ describe('SettingsComponent', () => {
       'setMaxLevel',
       '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({