-
-
-
-
- {{ teamName }}
-
-
+ @if (teamsImplemented.size > 0) {
+
+ @for (progressTitle of progressTitlesWithTeams; track progressTitle) {
+
+
+
+ @for (teamName of teamsByProgressTitle.get(progressTitle); track teamName) {
+
+ {{ teamName }}
+
+ }
+
+
+ }
-
-
+ } @else {
No teams have started implementing this activity yet.
-
+ }
-
diff --git a/src/app/component/activity-description/activity-description.component.spec.ts b/src/app/component/activity-description/activity-description.component.spec.ts
index e3d56ee8b..f07d7cde9 100644
--- a/src/app/component/activity-description/activity-description.component.spec.ts
+++ b/src/app/component/activity-description/activity-description.component.spec.ts
@@ -1,7 +1,7 @@
import { HttpClient, HttpHandler } from '@angular/common/http';
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { provideRouter } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { of } from 'rxjs';
@@ -11,8 +11,7 @@ import { MockLoaderService } from 'src/app/service/loader/mock-data-loader.servi
import { MarkdownText } from 'src/app/model/markdown-text';
import { Data } from 'src/app/model/activity-store';
import { isEmptyObj } from 'src/app/util/util';
-import { MaterialModule } from 'src/app/material/material.module';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
import { DataStore } from 'src/app/model/data-store';
let mockLoaderService: MockLoaderService;
@@ -48,6 +47,8 @@ let mockData = {
@Component({
selector: 'app-dependency-graph',
template: '',
+ changeDetection: ChangeDetectionStrategy.Eager,
+ standalone: true,
})
class DependencyGraphStubComponent {
@Input() activityName: string = '';
@@ -64,17 +65,17 @@ describe('ActivityDescriptionComponent', () => {
dataStore = (await mockLoaderService.load()) as DataStore;
await TestBed.configureTestingModule({
providers: [
+ provideRouter([]),
HttpClient,
HttpHandler,
{ provide: ActivatedRoute, useValue: mockActivatedRoute },
{ provide: LoaderService, useValue: mockLoaderService },
],
- imports: [RouterTestingModule, MaterialModule, NoopAnimationsModule],
- declarations: [ActivityDescriptionComponent, DependencyGraphStubComponent],
+ imports: [ActivityDescriptionComponent, DependencyGraphStubComponent],
}).compileComponents();
});
- beforeEach(async () => {
+ beforeEach(() => {
fixture = TestBed.createComponent(ActivityDescriptionComponent);
component = fixture.componentInstance;
// Provide the @Input activity before first change detection so ngOnInit uses it
@@ -87,8 +88,6 @@ describe('ActivityDescriptionComponent', () => {
component.activity = activity as any;
}
fixture.detectChanges();
- await fixture.whenStable();
- fixture.detectChanges();
});
it('should create', () => {
@@ -133,7 +132,9 @@ describe('ActivityDescriptionComponent', () => {
expect(HTMLElement.querySelector('#risk')?.textContent).toContain(testRisk);
expect(HTMLElement.querySelector('#measure')?.textContent).toContain(testMeasure);
expect(HTMLElement.querySelector('#assessment')?.textContent).toContain(testAssessment);
- expect(HTMLElement.querySelector('#implementationGuide')?.textContent).toContain(testImplementationGuide); // eslint-disable-line
+ expect(HTMLElement.querySelector('#implementationGuide')?.textContent).toContain(
+ testImplementationGuide
+ );
});
/*
diff --git a/src/app/component/activity-description/activity-description.component.ts b/src/app/component/activity-description/activity-description.component.ts
index 2a583a7b7..9b35e88ec 100644
--- a/src/app/component/activity-description/activity-description.component.ts
+++ b/src/app/component/activity-description/activity-description.component.ts
@@ -9,18 +9,34 @@ import {
EventEmitter,
OnInit,
HostListener,
+ inject,
+ ChangeDetectionStrategy,
} from '@angular/core';
-import { MatAccordion } from '@angular/material/expansion';
+import { MatAccordion, MatExpansionModule } 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 { EvidencePanelComponent } from '../evidence-panel/evidence-panel.component';
+import { DependencyGraphComponent } from '../dependency-graph/dependency-graph.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'app-activity-description',
templateUrl: './activity-description.component.html',
styleUrls: ['./activity-description.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ imports: [
+ MatIconModule,
+ MatButtonModule,
+ MatExpansionModule,
+ DependencyGraphComponent,
+ EvidencePanelComponent,
+ ],
})
export class ActivityDescriptionComponent implements OnInit, OnChanges {
+ private loader = inject(LoaderService);
+
@Input() activity: Activity | null = null;
@Input() iconName: string = '';
@Input() showCloseButton: boolean = false;
@@ -43,8 +59,6 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
@ViewChildren(MatAccordion) accordion!: QueryList
;
- constructor(private loader: LoaderService) {}
-
ngOnInit() {
// Set activity data if provided
if (this.activity) {
@@ -73,12 +87,19 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
// Get datastore for labels
const dataStore = this.loader.datastore;
if (dataStore) {
- /* eslint-disable */
- this.KnowledgeLabel = dataStore.getMetaString('knowledgeLabels', activity.difficultyOfImplementation.knowledge - 1);
- this.TimeLabel = dataStore.getMetaString('labels', activity.difficultyOfImplementation.time - 1);
- this.ResourceLabel = dataStore.getMetaString('labels', activity.difficultyOfImplementation.resources - 1);
+ this.KnowledgeLabel = dataStore.getMetaString(
+ 'knowledgeLabels',
+ activity.difficultyOfImplementation.knowledge - 1
+ );
+ this.TimeLabel = dataStore.getMetaString(
+ 'labels',
+ activity.difficultyOfImplementation.time - 1
+ );
+ 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();
diff --git a/src/app/component/add-evidence-modal/add-evidence-modal.component.html b/src/app/component/add-evidence-modal/add-evidence-modal.component.html
index 53f94c3a3..30b55ff07 100644
--- a/src/app/component/add-evidence-modal/add-evidence-modal.component.html
+++ b/src/app/component/add-evidence-modal/add-evidence-modal.component.html
@@ -8,9 +8,11 @@ Add Evidence
(selectedTeamsChange)="onSelectedTeamsChange($event)"
[type]="'add-evidence-config'">
- At least one team must be selected.
+ @if (teamsError) {
+ At least one team must be selected.
+ }
@@ -21,16 +23,14 @@ Evidence Details
Title
- Title is required.
+ @if (titleError) {
+ Title is required.
+ }
- Description
-
+
+
Reviewer
@@ -42,23 +42,27 @@ Evidence Details
Attachments
Add links to supporting documents, images, or URLs.
-
-
- Type
-
-
- {{ aType }}
-
-
-
-
- URL
-
-
-
-
+ @for (att of attachments; track att; let i = $index) {
+
+
+ Type
+
+ @for (aType of attachmentTypes; track aType) {
+
+ {{ aType }}
+
+ }
+
+
+
+ URL
+
+
+
+
+ }
diff --git a/src/app/component/add-evidence-modal/add-evidence-modal.component.ts b/src/app/component/add-evidence-modal/add-evidence-modal.component.ts
index 6f69b50ae..580aa1ff0 100644
--- a/src/app/component/add-evidence-modal/add-evidence-modal.component.ts
+++ b/src/app/component/add-evidence-modal/add-evidence-modal.component.ts
@@ -1,7 +1,18 @@
-import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
import { EvidenceEntry, EvidenceStore } from '../../model/evidence-store';
import { TeamGroups } from '../../model/types';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+import { TeamSelectorComponent } from '../team-selector/team-selector.component';
export interface AddEvidenceModalData {
activityUuid: string;
@@ -13,8 +24,25 @@ export interface AddEvidenceModalData {
selector: 'app-add-evidence-modal',
templateUrl: './add-evidence-modal.component.html',
styleUrls: ['./add-evidence-modal.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ imports: [
+ MatDialogModule,
+ TeamSelectorComponent,
+ MatFormFieldModule,
+ MatDividerModule,
+ MatInputModule,
+ FormsModule,
+ MatSelectModule,
+ MatOptionModule,
+ MatButtonModule,
+ MatTooltipModule,
+ MatIconModule,
+ ],
})
export class AddEvidenceModalComponent {
+ dialogRef = inject
>(MatDialogRef);
+ data = inject(MAT_DIALOG_DATA);
+
activityUuid: string;
allTeams: string[];
teamGroups: TeamGroups;
@@ -34,10 +62,9 @@ export class AddEvidenceModalComponent {
attachmentTypes: string[] = ['document', 'image', 'link'];
- constructor(
- public dialogRef: MatDialogRef,
- @Inject(MAT_DIALOG_DATA) public data: AddEvidenceModalData
- ) {
+ constructor() {
+ const data = this.data;
+
this.activityUuid = data.activityUuid;
this.allTeams = data.allTeams;
this.teamGroups = data.teamGroups || {};
diff --git a/src/app/component/dependency-graph/dependency-graph.component.spec.ts b/src/app/component/dependency-graph/dependency-graph.component.spec.ts
index ecb4c1c35..9f4dbaac0 100644
--- a/src/app/component/dependency-graph/dependency-graph.component.spec.ts
+++ b/src/app/component/dependency-graph/dependency-graph.component.spec.ts
@@ -9,8 +9,7 @@ describe('DependencyGraphComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [DependencyGraphComponent],
- imports: [MatDialogModule],
+ imports: [MatDialogModule, DependencyGraphComponent],
providers: [HttpClient, HttpHandler],
}).compileComponents();
});
diff --git a/src/app/component/dependency-graph/dependency-graph.component.ts b/src/app/component/dependency-graph/dependency-graph.component.ts
index 24275239d..f4c5a1349 100644
--- a/src/app/component/dependency-graph/dependency-graph.component.ts
+++ b/src/app/component/dependency-graph/dependency-graph.component.ts
@@ -1,4 +1,13 @@
-import { Component, OnInit, Input, ElementRef, SimpleChanges, OnChanges } from '@angular/core';
+import {
+ Component,
+ OnInit,
+ Input,
+ ElementRef,
+ SimpleChanges,
+ OnChanges,
+ inject,
+ ChangeDetectionStrategy,
+} from '@angular/core';
import * as d3 from 'd3';
import { LoaderService } from '../../service/loader/data-loader.service';
import { Activity } from 'src/app/model/activity-store';
@@ -37,8 +46,13 @@ interface ThemeColors {
selector: 'app-dependency-graph',
templateUrl: './dependency-graph.component.html',
styleUrls: ['./dependency-graph.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ standalone: true,
})
export class DependencyGraphComponent implements OnInit, OnChanges {
+ private loader = inject(LoaderService);
+ private themeService = inject(ThemeService);
+
css: CSSStyleDeclaration = getComputedStyle(document.body);
themeColors: Partial = {};
theme: string;
@@ -51,7 +65,7 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
@Output() activityClicked = new EventEmitter();
- constructor(private loader: LoaderService, private themeService: ThemeService) {
+ constructor() {
this.theme = this.themeService.getTheme();
this.setThemeColors(this.theme);
}
@@ -80,14 +94,16 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
}
setThemeColors(theme: string) {
- /* eslint-disable */
- this.themeColors.mainNodeFill = this.css.getPropertyValue('--heatmap-filled').trim();
- this.themeColors.mainNodeColor = this.css.getPropertyValue('--text-primary').trim();
- this.themeColors.linkColor = this.css.getPropertyValue('--dependency-link').trim();
- this.themeColors.borderColor = this.css.getPropertyValue('--dependency-border').trim();
- this.themeColors.predecessorFill = this.css.getPropertyValue('--dependency-predecessor-fill').trim();
- this.themeColors.successorFill = this.css.getPropertyValue('--dependency-successor-fill').trim();
- /*eslint-enable */
+ this.themeColors.mainNodeFill = this.css.getPropertyValue('--heatmap-filled').trim();
+ this.themeColors.mainNodeColor = this.css.getPropertyValue('--text-primary').trim();
+ this.themeColors.linkColor = this.css.getPropertyValue('--dependency-link').trim();
+ this.themeColors.borderColor = this.css.getPropertyValue('--dependency-border').trim();
+ this.themeColors.predecessorFill = this.css
+ .getPropertyValue('--dependency-predecessor-fill')
+ .trim();
+ this.themeColors.successorFill = this.css
+ .getPropertyValue('--dependency-successor-fill')
+ .trim();
this.generateGraph();
}
@@ -175,16 +191,33 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
svg.selectAll('*').remove();
// Now that rectWidth is set on each node, set up the simulation
- /* eslint-disable */
+
this.simulation = d3
.forceSimulation()
// .alphaMin(0.11)
- .force('link', d3.forceLink().id((d: any) => { return d.id; }).strength(0.1))
- .force('x', d3.forceX((d: any) => { return self.initX(d) }).strength(5))
+ .force(
+ 'link',
+ d3
+ .forceLink()
+ .id((d: any) => {
+ return d.id;
+ })
+ .strength(0.1)
+ )
+ .force(
+ 'x',
+ d3
+ .forceX((d: any) => {
+ return self.initX(d);
+ })
+ .strength(5)
+ )
.force('charge', d3.forceManyBody().strength(-30))
- .force('collide', d3.forceCollide((d: any) => 30))
+ .force(
+ 'collide',
+ d3.forceCollide((d: any) => 30)
+ )
.force('center', d3.forceCenter(0, 0));
- /* eslint-enable */
svg
.append('defs')
diff --git a/src/app/component/evidence-panel/evidence-panel.component.html b/src/app/component/evidence-panel/evidence-panel.component.html
index a73dc19b4..89bdbe100 100644
--- a/src/app/component/evidence-panel/evidence-panel.component.html
+++ b/src/app/component/evidence-panel/evidence-panel.component.html
@@ -1,51 +1,69 @@
-
-
-
- Teams Evidence
-
-
- {{ teamName }}:
- {{ evidenceByTeam.get(teamName)?.length || 0 }} entries
-
-
-
-
-
-
-
-
- {{ teamName }}
-
- {{ evidenceByTeam.get(teamName)?.length || 0 }} entries
-
-
-
-
-
-
-
+
+
+
+ @for (teamName of teamsWithEvidence; track teamName) {
+
+
+
+ {{ teamName }}
+
+ {{ evidenceByTeam.get(teamName)?.length || 0 }} entries
+
+
+ @for (entry of evidenceByTeam.get(teamName); track entry) {
+
+
+ @if (entry.description) {
+
{{ entry.description }}
+ }
+ @if (entry.reviewer) {
+
Reviewer: {{ entry.reviewer }}
+ }
+ @if (entry.attachment?.length) {
+
+ }
+
+
+}
-
-
No Evidence Recorded Yet for this Activity.
-
+@if (activityUuid && evidenceEntries.length === 0) {
+
+
No Evidence Recorded Yet for this Activity.
+
+}
diff --git a/src/app/component/evidence-panel/evidence-panel.component.ts b/src/app/component/evidence-panel/evidence-panel.component.ts
index 1fcf53929..52882e623 100644
--- a/src/app/component/evidence-panel/evidence-panel.component.ts
+++ b/src/app/component/evidence-panel/evidence-panel.component.ts
@@ -1,13 +1,27 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+ Component,
+ Input,
+ OnChanges,
+ SimpleChanges,
+ inject,
+ ChangeDetectionStrategy,
+} from '@angular/core';
import { EvidenceEntry } from '../../model/evidence-store';
import { LoaderService } from '../../service/loader/data-loader.service';
+import { MatIconModule } from '@angular/material/icon';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { DatePipe } from '@angular/common';
@Component({
selector: 'app-evidence-panel',
templateUrl: './evidence-panel.component.html',
styleUrls: ['./evidence-panel.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ imports: [MatExpansionModule, MatIconModule, DatePipe],
})
export class EvidencePanelComponent implements OnChanges {
+ private loader = inject(LoaderService);
+
@Input() activityUuid: string = '';
@Input() expanded: boolean = false;
@@ -15,8 +29,6 @@ export class EvidencePanelComponent implements OnChanges {
evidenceByTeam: Map
= new Map();
teamsWithEvidence: string[] = [];
- constructor(private loader: LoaderService) {}
-
ngOnChanges(changes: SimpleChanges) {
if (changes['activityUuid'] && this.activityUuid) {
this.updateTeamsEvidence();
diff --git a/src/app/component/kpi/kpi.component.ts b/src/app/component/kpi/kpi.component.ts
index acf14c7e6..4ea234fb1 100644
--- a/src/app/component/kpi/kpi.component.ts
+++ b/src/app/component/kpi/kpi.component.ts
@@ -1,9 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-kpi',
templateUrl: './kpi.component.html',
styleUrls: ['./kpi.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ standalone: true,
})
export class KpiComponent {
@Input() title: string = '';
diff --git a/src/app/component/logo/logo.component.spec.ts b/src/app/component/logo/logo.component.spec.ts
index f6b38029d..c513a702c 100644
--- a/src/app/component/logo/logo.component.spec.ts
+++ b/src/app/component/logo/logo.component.spec.ts
@@ -8,7 +8,7 @@ describe('LogoComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [LogoComponent],
+ imports: [LogoComponent],
}).compileComponents();
});
diff --git a/src/app/component/logo/logo.component.ts b/src/app/component/logo/logo.component.ts
index 0982bbf5a..e614e5819 100644
--- a/src/app/component/logo/logo.component.ts
+++ b/src/app/component/logo/logo.component.ts
@@ -1,9 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-logo',
templateUrl: './logo.component.html',
styleUrls: ['./logo.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ standalone: true,
})
export class LogoComponent {
constructor() {}
diff --git a/src/app/component/markdown-viewer/markdown-viewer.component.html b/src/app/component/markdown-viewer/markdown-viewer.component.html
index 2aaa1992d..8d242d924 100644
--- a/src/app/component/markdown-viewer/markdown-viewer.component.html
+++ b/src/app/component/markdown-viewer/markdown-viewer.component.html
@@ -1,3 +1,3 @@
diff --git a/src/app/component/markdown-viewer/markdown-viewer.component.spec.ts b/src/app/component/markdown-viewer/markdown-viewer.component.spec.ts
index bcea60a7b..cdd0f04cf 100644
--- a/src/app/component/markdown-viewer/markdown-viewer.component.spec.ts
+++ b/src/app/component/markdown-viewer/markdown-viewer.component.spec.ts
@@ -1,6 +1,7 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
import { MarkdownViewerComponent } from './markdown-viewer.component';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
describe('MarkdownViewerComponent', () => {
let component: MarkdownViewerComponent;
@@ -8,8 +9,8 @@ describe('MarkdownViewerComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- imports: [HttpClientTestingModule],
- declarations: [MarkdownViewerComponent],
+ imports: [MarkdownViewerComponent],
+ providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
}).compileComponents();
});
diff --git a/src/app/component/markdown-viewer/markdown-viewer.component.ts b/src/app/component/markdown-viewer/markdown-viewer.component.ts
index 8efa759f1..1e302ac57 100644
--- a/src/app/component/markdown-viewer/markdown-viewer.component.ts
+++ b/src/app/component/markdown-viewer/markdown-viewer.component.ts
@@ -1,20 +1,23 @@
-import { Component, Input, OnInit } from '@angular/core';
-import * as md from 'markdown-it';
+import { Component, Input, OnInit, inject, signal, ChangeDetectionStrategy } from '@angular/core';
+import md from 'markdown-it';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-markdown-viewer',
templateUrl: './markdown-viewer.component.html',
styleUrls: ['./markdown-viewer.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ standalone: true,
})
export class MarkdownViewerComponent implements OnInit {
+ private http = inject(HttpClient);
+
@Input() MDFile: string = '';
markdown: md = md({
html: true,
});
markdownURI: any;
- toRender: string = '';
- constructor(private http: HttpClient) {}
+ readonly toRender = signal('');
ngOnInit(): void {
this.loadMarkdownFiles(this.MDFile);
@@ -23,10 +26,10 @@ export class MarkdownViewerComponent implements OnInit {
async loadMarkdownFiles(MDFile: string): Promise {
try {
this.markdownURI = await this.http.get(MDFile, { responseType: 'text' }).toPromise();
- this.toRender = this.markdown.render(this.markdownURI);
+ this.toRender.set(this.markdown.render(this.markdownURI));
return true;
} catch {
- this.toRender = 'Markdown file could not be found';
+ this.toRender.set('Markdown file could not be found');
return false;
}
}
diff --git a/src/app/component/modal-message/modal-message.component.html b/src/app/component/modal-message/modal-message.component.html
index f1ff005f7..a27083f6c 100644
--- a/src/app/component/modal-message/modal-message.component.html
+++ b/src/app/component/modal-message/modal-message.component.html
@@ -3,12 +3,13 @@ {{ data.title }}
-
+ @for (name of data.buttons; track name) {
+
+ }
diff --git a/src/app/component/modal-message/modal-message.component.spec.ts b/src/app/component/modal-message/modal-message.component.spec.ts
index a30cdcad2..33a192909 100644
--- a/src/app/component/modal-message/modal-message.component.spec.ts
+++ b/src/app/component/modal-message/modal-message.component.spec.ts
@@ -1,7 +1,6 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DialogInfo, ModalMessageComponent } from './modal-message.component';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
describe('ModalMessageComponent', () => {
@@ -10,8 +9,7 @@ describe('ModalMessageComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- imports: [NoopAnimationsModule, MatDialogModule],
- declarations: [ModalMessageComponent],
+ imports: [MatDialogModule, ModalMessageComponent],
providers: [
{ provide: MatDialogRef, useValue: {} },
{ provide: MAT_DIALOG_DATA, useValue: {} },
diff --git a/src/app/component/modal-message/modal-message.component.ts b/src/app/component/modal-message/modal-message.component.ts
index bd5e3ab2f..2fbfc6824 100644
--- a/src/app/component/modal-message/modal-message.component.ts
+++ b/src/app/component/modal-message/modal-message.component.ts
@@ -1,20 +1,29 @@
-import { Inject, Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core';
import {
MAT_DIALOG_DATA,
MatDialogRef,
MatDialog,
MatDialogConfig,
+ MatDialogModule,
} from '@angular/material/dialog';
-import * as md from 'markdown-it';
+import md from 'markdown-it';
import { MarkdownText } from 'src/app/model/markdown-text';
import { NotificationService } from 'src/app/service/notification.service';
+import { dialogSizeConfig } from 'src/app/util/dialog-sizes';
+import { MatButtonModule } from '@angular/material/button';
@Component({
selector: 'app-modal-message',
templateUrl: './modal-message.component.html',
styleUrls: ['./modal-message.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ imports: [MatDialogModule, MatButtonModule],
})
export class ModalMessageComponent implements OnInit {
+ dialog = inject(MatDialog);
+ dialogRef = inject>(MatDialogRef);
+ private notificationService = inject(NotificationService);
+
data: DialogInfo;
markdown: md = md();
@@ -22,16 +31,12 @@ export class ModalMessageComponent implements OnInit {
DSOMM_url: string = `${this.DSOMM_host}/DevSecOps-MaturityModel-data`;
meassageTemplates: Record = {};
- constructor(
- public dialog: MatDialog,
- public dialogRef: MatDialogRef,
- @Inject(MAT_DIALOG_DATA) data: DialogInfo,
- private notificationService: NotificationService
- ) {
+ constructor() {
+ const data = inject(MAT_DIALOG_DATA);
+
this.data = data;
}
- // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
ngOnInit(): void {
this.notificationService.message$.subscribe(({ title, message }) => {
this.openDialog(new DialogInfo(message, title));
@@ -57,6 +62,7 @@ export class ModalMessageComponent implements OnInit {
dialogConfig.disableClose = true;
dialogConfig.data = dialogInfo;
dialogConfig.autoFocus = false;
+ Object.assign(dialogConfig, dialogSizeConfig('md'));
this.dialogRef = this.dialog.open(ModalMessageComponent, dialogConfig);
return this.dialogRef;
}
diff --git a/src/app/component/progress-slider/progress-slider.component.css b/src/app/component/progress-slider/progress-slider.component.css
index a16db4253..537b56426 100644
--- a/src/app/component/progress-slider/progress-slider.component.css
+++ b/src/app/component/progress-slider/progress-slider.component.css
@@ -5,13 +5,12 @@
width: 100%;
}
-.mat-slider-horizontal {
+.mat-mdc-slider {
min-width: 80px;
}
-.mat-slider-track-fill {
- background-color: #66bb6a;
- height: 10px;
+:host ::ng-deep .mat-mdc-slider .mdc-slider__track--active_fill {
+ border-color: #66bb6a;
}
.step-label {
min-width: 80px;
diff --git a/src/app/component/progress-slider/progress-slider.component.html b/src/app/component/progress-slider/progress-slider.component.html
index 30670b620..0ffa7c2bf 100644
--- a/src/app/component/progress-slider/progress-slider.component.html
+++ b/src/app/component/progress-slider/progress-slider.component.html
@@ -1,14 +1,19 @@
-
+
- {{ steps[currentValue] }}
- *
- **
+{{ steps[currentValue] }}
+ @if (currentValue > originalValue) {
+ *
+ }
+ @if (currentValue < originalValue) {
+ **
+ }
diff --git a/src/app/component/progress-slider/progress-slider.component.spec.ts b/src/app/component/progress-slider/progress-slider.component.spec.ts
index 604d73299..81beb964f 100644
--- a/src/app/component/progress-slider/progress-slider.component.spec.ts
+++ b/src/app/component/progress-slider/progress-slider.component.spec.ts
@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { MatSliderModule } from '@angular/material/slider';
@@ -9,8 +10,7 @@ describe('ProgressSliderComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ProgressSliderComponent],
- imports: [FormsModule, MatSliderModule],
+ imports: [FormsModule, MatSliderModule, ProgressSliderComponent],
}).compileComponents();
});
@@ -18,27 +18,28 @@ describe('ProgressSliderComponent', () => {
fixture = TestBed.createComponent(ProgressSliderComponent);
component = fixture.componentInstance;
component.steps = ['Step 1', 'Step 2', 'Step 3'];
- fixture.detectChanges();
});
it('should create', () => {
+ fixture.detectChanges();
expect(component).toBeTruthy();
});
it('should initialize with the correct initial step', () => {
component.state = 'Step 2';
- component.ngOnInit();
+ fixture.detectChanges();
expect(component.currentValue).toBe(1);
});
it('should emit step changes', () => {
- spyOn(component.progressChange, 'emit');
+ fixture.detectChanges();
+ vi.spyOn(component.progressChange, 'emit');
component.onStepChange(2);
expect(component.progressChange.emit).toHaveBeenCalledWith('Step 3');
});
it('should display the correct step label', () => {
- component.currentValue = 1;
+ component.state = 'Step 2';
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.step-label')?.textContent).toContain('Step 2');
diff --git a/src/app/component/progress-slider/progress-slider.component.ts b/src/app/component/progress-slider/progress-slider.component.ts
index b650a1e23..5e1748a35 100644
--- a/src/app/component/progress-slider/progress-slider.component.ts
+++ b/src/app/component/progress-slider/progress-slider.component.ts
@@ -1,9 +1,20 @@
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import {
+ Component,
+ Input,
+ Output,
+ EventEmitter,
+ OnInit,
+ ChangeDetectionStrategy,
+} from '@angular/core';
+
+import { MatSliderModule } from '@angular/material/slider';
@Component({
selector: 'app-progress-slider',
templateUrl: './progress-slider.component.html',
styleUrls: ['./progress-slider.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ imports: [MatSliderModule],
})
export class ProgressSliderComponent implements OnInit {
@Input() DBG_name: string = '';
diff --git a/src/app/component/report-config-modal/report-config-modal.component.css b/src/app/component/report-config-modal/report-config-modal.component.css
index c20b55e43..b81a6faa2 100644
--- a/src/app/component/report-config-modal/report-config-modal.component.css
+++ b/src/app/component/report-config-modal/report-config-modal.component.css
@@ -5,7 +5,7 @@
background-color: var(--background-primary);
}
-mat-dialog-title{
+.mat-mdc-dialog-title {
font-size:20px;
}
@@ -60,18 +60,35 @@ mat-dialog-title{
gap: 4px;
}
-.config-row-label mat-icon {
- font-size: 16px;
- width: 16px;
- height: 16px;
- cursor: pointer;
- color: var(--text-secondary);
+[mat-icon-button].info-button {
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ overflow: visible;
+ line-height: 24px;
}
-.checkbox-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- gap: 8px;
+.info-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ line-height: 18px;
+ display: block;
+ margin: auto;
+}
+
+:host {
+ .checkbox-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 1px;
+ }
+
+ .references-section {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+ gap: 1px;
+ }
}
.search-field {
diff --git a/src/app/component/report-config-modal/report-config-modal.component.html b/src/app/component/report-config-modal/report-config-modal.component.html
index 257044e0e..f9842d48d 100644
--- a/src/app/component/report-config-modal/report-config-modal.component.html
+++ b/src/app/component/report-config-modal/report-config-modal.component.html
@@ -9,7 +9,7 @@ Display Configuration
Column Grouping:
By Progress Stage
By Team
@@ -26,42 +26,42 @@ Activity Attributes
UUID
Description
Risk
Measure
Difficulty of Implementation
Usefulness
Implementation
Depends On
@@ -70,107 +70,125 @@
Activity Attributes
References
-
-
- ISO 27001:2017
-
-
- ISO 27001:2022
-
-
- SAMM2
-
-
- OpenCRE
-
-
+ @if (config().activityAttributes.showReferences) {
+
+
+ ISO 27001:2017
+
+
+ ISO 27001:2022
+
+
+ SAMM2
+
+
+ OpenCRE
+
+
+ }
Evidence
-
-
- Title
-
-
- Description
-
-
- Date Recorded
-
-
- Reviewer
-
-
- Attachments
-
-
+ @if (config().activityAttributes.showEvidence) {
+
+
+ Title
+
+
+ Description
+
+
+ Date Recorded
+
+
+ Reviewer
+
+
+ Attachments
+
+
+ }
Tags
-
-
- Word Cap
- info
- :
- {{ config.descriptionWordCap }}
-
-
-
-
+ @if (hasAnyMarkdownAttribute()) {
+
+
+ Word Cap
+
+ :
+ {{ config().descriptionWordCap }}
+
+
+
+
+ }
@@ -180,12 +198,11 @@ Activity Attributes
Dimensions
Uncheck dimensions to exclude all their activities.
-
- {{ dim }}
-
+ @for (dim of allDimensions; track dim) {
+
+ {{ dim }}
+
+ }
@@ -196,12 +213,13 @@ Dimensions
Subdimensions
Uncheck subdimensions to exclude their activities.
-
- {{ subdim }}
-
+ @for (subdim of allSubdimensions; track subdim) {
+
+ {{ subdim }}
+
+ }
Search and uncheck individual activities to exclude them.