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/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.html

@@ -34,6 +34,31 @@
         <span class="caption">{{ selectedMaxLevelCaption }}</span>
       </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">

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

@@ -43,7 +43,11 @@ describe('SettingsComponent', () => {
       'setMaxLevel',
       'getDateFormat',
       'setDateFormat',
+      'getTeamLabel',
+      'getGroupLabel',
     ]);
+    settingsService.getTeamLabel.and.returnValue('Team');
+    settingsService.getGroupLabel.and.returnValue('Group');
     modalComponent = jasmine.createSpyObj('ModalMessageComponent', ['openDialog']);
 
     await TestBed.configureTestingModule({

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

@@ -61,6 +61,9 @@ export class SettingsComponent implements OnInit {
   ];
   selectedDateFormat: string = this.BROWSER_LOCALE;
 
+  customTeamLabel: string = 'Team';
+  customGroupLabel: string = 'Group';
+
   // GitHub release check state
   checkingLatest: boolean = false;
   latestReleaseInfo: GithubReleaseInfo | null = null;
@@ -145,6 +148,8 @@ export class SettingsComponent implements OnInit {
 
   initialize(): void {
     this.selectedDateFormat = this.settings.getDateFormat() || this.BROWSER_LOCALE;
+    this.customTeamLabel = this.settings.getTeamLabel();
+    this.customGroupLabel = this.settings.getGroupLabel();
 
     // Init dates
     let date: Date = new Date();
@@ -179,6 +184,14 @@ export class SettingsComponent implements OnInit {
     this.settings.setDateFormat(value);
   }
 
+  onTeamLabelChange(): void {
+    this.settings.setTeamLabel(this.customTeamLabel);
+  }
+
+  onGroupLabelChange(): void {
+    this.settings.setGroupLabel(this.customGroupLabel);
+  }
+
   onMaxLevelChange(value: number | null): void {
     if (value == null) value = this.dataStoreMaxLevel;
     if (value == this.dataStoreMaxLevel) {

src/app/pages/teams/teams.component.html

@@ -1,4 +1,7 @@
-<app-top-header section="Teams &amp; Groups"></app-top-header>
+<app-top-header
+  [section]="
+    settings.getTeamLabelPlural() + ' & ' + settings.getGroupLabelPlural()
+  "></app-top-header>
 <div class="team-section">
   <app-teams-groups-editor
     [teams]="teams"
@@ -8,8 +11,12 @@
     (namesChanged)="onTeamsChanged($event)"
     (click)="$event.stopPropagation()"></app-teams-groups-editor>
   <div class="button-container" *ngIf="dataStore?.meta?.hasLocalStorage">
-    <button mat-raised-button (click)="onExportTeamGroups()">Download team setup</button>
-    <button mat-raised-button (click)="onResetTeamGroups()">Reset team setup</button>
+    <button mat-raised-button (click)="onExportTeamGroups()">
+      Download {{ settings.getTeamLabel() | lowercase }} setup
+    </button>
+    <button mat-raised-button (click)="onResetTeamGroups()">
+      Reset {{ settings.getTeamLabel() | lowercase }} setup
+    </button>
   </div>
 
   <div class="team-info">
@@ -37,7 +44,9 @@ <h2>{{ infoTitle }}</h2>
     <h3>Activities in progress</h3>
     <table mat-table matSort [dataSource]="dataSource || []" class="mat-elevation-z8 teams-table">
       <ng-container matColumnDef="Team">
-        <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-small-width">Team</th>
+        <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-small-width">
+          {{ settings.getTeamLabel() }}
+        </th>
         <td mat-cell *matCellDef="let element" class="table-small-width">
           {{ element?.team }}
         </td>

src/app/pages/teams/teams.component.ts

@@ -161,7 +161,12 @@ export class TeamsComponent implements OnInit, AfterViewInit {
 
     if (!yamlStr) {
       this.displayMessage(
-        new DialogInfo('No team and groups names stored locally in the browser', 'Export Error')
+        new DialogInfo(
+          `No ${this.settings.getTeamLabel().toLowerCase()} and ${this.settings
+            .getGroupLabelPlural()
+            .toLowerCase()} names stored locally in the browser`,
+          'Export Error'
+        )
       );
       return;
     }
@@ -182,7 +187,9 @@ export class TeamsComponent implements OnInit, AfterViewInit {
     return new Promise((resolve, reject) => {
       let title: string = 'Delete local browser data';
       let message: string =
-        'Do you want to reset all team and group names?' +
+        `Do you want to reset all ${this.settings.getTeamLabel().toLowerCase()} and ${this.settings
+          .getGroupLabel()
+          .toLowerCase()} names?` +
         '\n\nThis will revert the names to the names stored in the yaml file on the server.';
       let buttons: string[] = ['Cancel', 'Delete'];
       this.modal