-
-
-
-
- {{ 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..859f01980 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 { provideRouter } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { of } from 'rxjs';
@@ -11,7 +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';
@@ -48,6 +48,7 @@ let mockData = {
@Component({
selector: 'app-dependency-graph',
template: '',
+ 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: [NoopAnimationsModule, 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', () => {
diff --git a/src/app/component/activity-description/activity-description.component.ts b/src/app/component/activity-description/activity-description.component.ts
index 2a583a7b7..8745b76d0 100644
--- a/src/app/component/activity-description/activity-description.component.ts
+++ b/src/app/component/activity-description/activity-description.component.ts
@@ -9,18 +9,32 @@ import {
EventEmitter,
OnInit,
HostListener,
+ inject,
} 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'],
+ 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 +57,6 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
@ViewChildren(MatAccordion) accordion!: QueryList
;
- constructor(private loader: LoaderService) {}
-
ngOnInit() {
// Set activity data if provided
if (this.activity) {
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..1d7bc3720 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 } 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,24 @@ export interface AddEvidenceModalData {
selector: 'app-add-evidence-modal',
templateUrl: './add-evidence-modal.component.html',
styleUrls: ['./add-evidence-modal.component.css'],
+ 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 +61,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..81df71f19 100644
--- a/src/app/component/dependency-graph/dependency-graph.component.ts
+++ b/src/app/component/dependency-graph/dependency-graph.component.ts
@@ -1,4 +1,12 @@
-import { Component, OnInit, Input, ElementRef, SimpleChanges, OnChanges } from '@angular/core';
+import {
+ Component,
+ OnInit,
+ Input,
+ ElementRef,
+ SimpleChanges,
+ OnChanges,
+ inject,
+} 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 +45,12 @@ interface ThemeColors {
selector: 'app-dependency-graph',
templateUrl: './dependency-graph.component.html',
styleUrls: ['./dependency-graph.component.css'],
+ 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 +63,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);
}
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..079ff444f 100644
--- a/src/app/component/evidence-panel/evidence-panel.component.ts
+++ b/src/app/component/evidence-panel/evidence-panel.component.ts
@@ -1,13 +1,19 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, inject } 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'],
+ imports: [MatExpansionModule, MatIconModule, DatePipe],
})
export class EvidencePanelComponent implements OnChanges {
+ private loader = inject(LoaderService);
+
@Input() activityUuid: string = '';
@Input() expanded: boolean = false;
@@ -15,8 +21,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..59e4fa4d7 100644
--- a/src/app/component/kpi/kpi.component.ts
+++ b/src/app/component/kpi/kpi.component.ts
@@ -4,6 +4,7 @@ import { Component, Input } from '@angular/core';
selector: 'app-kpi',
templateUrl: './kpi.component.html',
styleUrls: ['./kpi.component.css'],
+ 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..7c447ed29 100644
--- a/src/app/component/logo/logo.component.ts
+++ b/src/app/component/logo/logo.component.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core';
selector: 'app-logo',
templateUrl: './logo.component.html',
styleUrls: ['./logo.component.css'],
+ standalone: true,
})
export class LogoComponent {
constructor() {}
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..caaa31898 100644
--- a/src/app/component/markdown-viewer/markdown-viewer.component.ts
+++ b/src/app/component/markdown-viewer/markdown-viewer.component.ts
@@ -1,20 +1,22 @@
-import { Component, Input, OnInit } from '@angular/core';
-import * as md from 'markdown-it';
+import { Component, Input, OnInit, inject } 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'],
+ 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) {}
ngOnInit(): void {
this.loadMarkdownFiles(this.MDFile);
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..bbcb5f9ed 100644
--- a/src/app/component/modal-message/modal-message.component.spec.ts
+++ b/src/app/component/modal-message/modal-message.component.spec.ts
@@ -10,8 +10,7 @@ describe('ModalMessageComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- imports: [NoopAnimationsModule, MatDialogModule],
- declarations: [ModalMessageComponent],
+ imports: [NoopAnimationsModule, 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..1dae53919 100644
--- a/src/app/component/modal-message/modal-message.component.ts
+++ b/src/app/component/modal-message/modal-message.component.ts
@@ -1,20 +1,28 @@
-import { Inject, Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } 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'],
+ imports: [MatDialogModule, MatButtonModule],
})
export class ModalMessageComponent implements OnInit {
+ dialog = inject(MatDialog);
+ dialogRef = inject>(MatDialogRef);
+ private notificationService = inject(NotificationService);
+
data: DialogInfo;
markdown: md = md();
@@ -22,12 +30,9 @@ 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;
}
@@ -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..51245999c 100644
--- a/src/app/component/progress-slider/progress-slider.component.spec.ts
+++ b/src/app/component/progress-slider/progress-slider.component.spec.ts
@@ -9,8 +9,7 @@ describe('ProgressSliderComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ProgressSliderComponent],
- imports: [FormsModule, MatSliderModule],
+ imports: [FormsModule, MatSliderModule, ProgressSliderComponent],
}).compileComponents();
});
@@ -18,27 +17,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', () => {
+ fixture.detectChanges();
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..2dc28dea5 100644
--- a/src/app/component/progress-slider/progress-slider.component.ts
+++ b/src/app/component/progress-slider/progress-slider.component.ts
@@ -1,9 +1,12 @@
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { MatSliderModule } from '@angular/material/slider';
+
@Component({
selector: 'app-progress-slider',
templateUrl: './progress-slider.component.html',
styleUrls: ['./progress-slider.component.css'],
+ 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.