Skip to content

Commit b7c6a1e

Browse files
sawankshrmasawankshrma
committed
Address review feedback
1 parent c7b65c5 commit b7c6a1e

12 files changed

+804
-138
lines changed

‎src/app/app.module.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
3535
import { MatTooltipModule } from '@angular/material/tooltip';
3636
import { ReportComponent } from './pages/report/report.component';
3737
import { ReportConfigModalComponent } from './component/report-config-modal/report-config-modal.component';
38+
import { TeamSelectorComponent } from './component/team-selector/team-selector.component';
39+
import { ColResizeDirective } from './directive/col-resize.directive';
3840

3941
@NgModule({
4042
declarations: [
@@ -61,6 +63,8 @@ import { ReportConfigModalComponent } from './component/report-config-modal/repo
6163
SettingsComponent,
6264
ReportComponent,
6365
ReportConfigModalComponent,
66+
TeamSelectorComponent,
67+
ColResizeDirective,
6468
],
6569
imports: [
6670
BrowserModule,

‎src/app/component/report-config-modal/report-config-modal.component.css‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,20 @@ mat-dialog-title{
5454
margin-bottom: 8px;
5555
}
5656

57+
.config-row-label {
58+
display: flex;
59+
align-items: center;
60+
gap: 4px;
61+
}
62+
63+
.config-row-label mat-icon {
64+
font-size: 16px;
65+
width: 16px;
66+
height: 16px;
67+
cursor: pointer;
68+
color: var(--text-secondary);
69+
}
70+
5771
.checkbox-grid {
5872
display: grid;
5973
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -91,29 +105,41 @@ mat-dialog-title{
91105
color: var(--text-secondary);
92106
}
93107

108+
.references-section {
109+
margin-top: 12px;
110+
}
111+
112+
.references-subtoggle {
113+
display: flex;
114+
gap: 12px;
115+
margin-top: 6px;
116+
margin-left: 28px;
117+
flex-wrap: wrap;
118+
}
119+
94120
mat-divider {
95121
margin: 4px 0;
96122
}
97123

98124
.column-toggle {
99-
border-radius: 999px;
100-
padding: 2px;
101-
border: 1px solid var(--text-tertiary);
102-
background: var(--background-secondary);
125+
border-radius: 999px;
126+
padding: 2px;
127+
border: 1px solid var(--text-tertiary);
128+
background: var(--background-secondary);
103129
}
104130

105131
/* buttons */
106132
.column-toggle .mat-button-toggle {
107-
border-radius: 999px;
108-
border: none;
109-
padding: 0 16px;
110-
color: var(--text-secondary);
111-
background: transparent;
133+
border-radius: 999px;
134+
border: none;
135+
padding: 0 16px;
136+
color: var(--text-secondary);
137+
background: transparent;
112138
}
113139

114140
/* selected */
115141
.column-toggle .mat-button-toggle-checked {
116-
background: var(--primary-color);
117-
color: var(--text-on-primary);
142+
background: var(--primary-color);
143+
color: var(--text-on-primary);
118144
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
119145
}

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

Lines changed: 133 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,141 @@
11
<h2 mat-dialog-title align="center">Report Configuration</h2>
22

33
<mat-dialog-content class="config-content">
4-
54
<!-- Display Configuration -->
65
<div class="config-section">
76
<h3>Display Configuration</h3>
87

98
<div class="config-row">
109
<span class="config-row-label">Column Grouping:</span>
11-
<mat-button-toggle-group class = "column-toggle" [value]="config.columnGrouping" (change)="setColumnGrouping($event.value)">
10+
<mat-button-toggle-group
11+
class="column-toggle"
12+
[value]="config.columnGrouping"
13+
(change)="setColumnGrouping($event.value)">
1214
<mat-button-toggle value="byProgress">By Progress Stage</mat-button-toggle>
1315
<mat-button-toggle value="byTeam">By Team</mat-button-toggle>
1416
</mat-button-toggle-group>
1517
</div>
16-
17-
<mat-checkbox [checked]="config.showDescription"
18-
(change)="toggleAttribute('showDescription')">
19-
Show Description
20-
</mat-checkbox>
21-
22-
<div class="config-row slider-row" *ngIf="config.showDescription">
23-
<span class="config-row-label">Description Word Cap: <strong>{{ config.descriptionWordCap }}</strong></span>
24-
<mat-slider class="word-cap-slider" min="5" [max]="maxWordCap" step="5" thumbLabel [displayWith]="wordCapLabel"
25-
[value]="config.descriptionWordCap" (input)="onWordCapChange($event)">
26-
</mat-slider>
27-
</div>
2818
</div>
2919

3020
<mat-divider></mat-divider>
3121

32-
<!-- Teams -->
22+
<!-- Activity Attributes -->
3323
<div class="config-section">
34-
<h3>Teams</h3>
35-
<p class="config-hint">Select which teams to include in the report.</p>
36-
<div class="select-all-actions">
37-
<button mat-button color="primary" (click)="selectAllTeams()">Select All</button>
38-
<button mat-button (click)="deselectAllTeams()">Deselect All</button>
39-
<button *ngIf="groupNames.length > 0" mat-stroked-button [matMenuTriggerFor]="groupMenu"
40-
class="group-dropdown-btn">
41-
<mat-icon>group</mat-icon>
42-
Select Group
43-
<mat-icon>arrow_drop_down</mat-icon>
44-
</button>
45-
<mat-menu #groupMenu="matMenu">
46-
<button mat-menu-item *ngFor="let group of groupNames" (click)="selectGroup(group)">
47-
{{ group }}
48-
</button>
49-
</mat-menu>
50-
</div>
24+
<h3>Activity Attributes</h3>
25+
<p class="config-hint">Choose which activity fields to show as columns in the report.</p>
26+
5127
<div class="checkbox-grid">
52-
<mat-checkbox *ngFor="let team of allTeams" [checked]="isTeamSelected(team)" (change)="toggleTeam(team)">
53-
{{ team }}
28+
<mat-checkbox
29+
[checked]="config.activityAttributes.showUuid"
30+
(change)="toggleActivityAttribute('showUuid')">
31+
UUID
32+
</mat-checkbox>
33+
<mat-checkbox
34+
[checked]="config.activityAttributes.showDescription"
35+
(change)="toggleActivityAttribute('showDescription')">
36+
Description
37+
</mat-checkbox>
38+
<mat-checkbox
39+
[checked]="config.activityAttributes.showRisk"
40+
(change)="toggleActivityAttribute('showRisk')">
41+
Risk
42+
</mat-checkbox>
43+
<mat-checkbox
44+
[checked]="config.activityAttributes.showMeasure"
45+
(change)="toggleActivityAttribute('showMeasure')">
46+
Measure
47+
</mat-checkbox>
48+
<mat-checkbox
49+
[checked]="config.activityAttributes.showDifficultyOfImplementation"
50+
(change)="toggleActivityAttribute('showDifficultyOfImplementation')">
51+
Difficulty of Implementation
52+
</mat-checkbox>
53+
<mat-checkbox
54+
[checked]="config.activityAttributes.showUsefulness"
55+
(change)="toggleActivityAttribute('showUsefulness')">
56+
Usefulness
57+
</mat-checkbox>
58+
<mat-checkbox
59+
[checked]="config.activityAttributes.showImplementation"
60+
(change)="toggleActivityAttribute('showImplementation')">
61+
Implementation
62+
</mat-checkbox>
63+
<mat-checkbox
64+
[checked]="config.activityAttributes.showDependsOn"
65+
(change)="toggleActivityAttribute('showDependsOn')">
66+
Depends On
5467
</mat-checkbox>
5568
</div>
69+
70+
<!-- References with sub-toggles -->
71+
<div class="references-section">
72+
<mat-checkbox
73+
[checked]="config.activityAttributes.showReferences"
74+
(change)="toggleActivityAttribute('showReferences')">
75+
References
76+
</mat-checkbox>
77+
<div class="references-subtoggle" *ngIf="config.activityAttributes.showReferences">
78+
<mat-checkbox
79+
class="subtoggle-checkbox"
80+
[checked]="config.activityAttributes.showReferencesIso27001_2017"
81+
(change)="toggleActivityAttribute('showReferencesIso27001_2017')">
82+
ISO 27001:2017
83+
</mat-checkbox>
84+
<mat-checkbox
85+
class="subtoggle-checkbox"
86+
[checked]="config.activityAttributes.showReferencesIso27001_2022"
87+
(change)="toggleActivityAttribute('showReferencesIso27001_2022')">
88+
ISO 27001:2022
89+
</mat-checkbox>
90+
<mat-checkbox
91+
class="subtoggle-checkbox"
92+
[checked]="config.activityAttributes.showReferencesSamm2"
93+
(change)="toggleActivityAttribute('showReferencesSamm2')">
94+
SAMM2
95+
</mat-checkbox>
96+
<mat-checkbox
97+
class="subtoggle-checkbox"
98+
[checked]="config.activityAttributes.showReferencesOpenCRE"
99+
(change)="toggleActivityAttribute('showReferencesOpenCRE')">
100+
OpenCRE
101+
</mat-checkbox>
102+
</div>
103+
</div>
104+
105+
<div class="checkbox-grid" style="margin-top: 8px">
106+
<!-- To be implemented after issue #501 -->
107+
<!-- <mat-checkbox [checked]="config.activityAttributes.showEvidence"
108+
(change)="toggleActivityAttribute('showEvidence')">
109+
Evidence
110+
</mat-checkbox> -->
111+
<mat-checkbox
112+
[checked]="config.activityAttributes.showTags"
113+
(change)="toggleActivityAttribute('showTags')">
114+
Tags
115+
</mat-checkbox>
116+
</div>
117+
<div class="config-row slider-row" *ngIf="hasAnyMarkdownAttribute">
118+
<span class="config-row-label">
119+
Word Cap
120+
<mat-icon
121+
matTooltip="Limits the number of words shown for description, risk, measure, and evidence fields. Set to a high value to show full text."
122+
matTooltipClass="compact-tooltip info-icon"
123+
>info</mat-icon
124+
>
125+
:
126+
<strong>{{ config.descriptionWordCap }}</strong>
127+
</span>
128+
<mat-slider
129+
class="word-cap-slider"
130+
min="5"
131+
[max]="maxWordCap"
132+
step="5"
133+
thumbLabel
134+
[displayWith]="wordCapLabel"
135+
[value]="config.descriptionWordCap"
136+
(input)="onWordCapChange($event)">
137+
</mat-slider>
138+
</div>
56139
</div>
57140

58141
<mat-divider></mat-divider>
@@ -62,7 +145,9 @@ <h3>Teams</h3>
62145
<h3>Dimensions</h3>
63146
<p class="config-hint">Uncheck dimensions to exclude all their activities.</p>
64147
<div class="checkbox-grid">
65-
<mat-checkbox *ngFor="let dim of allDimensions" [checked]="!isDimensionExcluded(dim)"
148+
<mat-checkbox
149+
*ngFor="let dim of allDimensions"
150+
[checked]="!isDimensionExcluded(dim)"
66151
(change)="toggleDimension(dim)">
67152
{{ dim }}
68153
</mat-checkbox>
@@ -76,7 +161,9 @@ <h3>Dimensions</h3>
76161
<h3>Subdimensions</h3>
77162
<p class="config-hint">Uncheck subdimensions to exclude their activities.</p>
78163
<div class="checkbox-grid subdimension-grid">
79-
<mat-checkbox *ngFor="let subdim of allSubdimensions" [checked]="!isSubdimensionExcluded(subdim)"
164+
<mat-checkbox
165+
*ngFor="let subdim of allSubdimensions"
166+
[checked]="!isSubdimensionExcluded(subdim)"
80167
(change)="toggleSubdimension(subdim)">
81168
{{ subdim }}
82169
</mat-checkbox>
@@ -95,7 +182,9 @@ <h3>Individual Activities</h3>
95182
<mat-icon matSuffix>search</mat-icon>
96183
</mat-form-field>
97184
<div class="activity-list">
98-
<mat-checkbox *ngFor="let activity of filteredActivities" [checked]="!isActivityExcluded(activity.uuid)"
185+
<mat-checkbox
186+
*ngFor="let activity of filteredActivities"
187+
[checked]="!isActivityExcluded(activity.uuid)"
99188
(change)="toggleActivity(activity.uuid)">
100189
<span class="activity-checkbox-label">
101190
<span class="activity-name">{{ activity.name }}</span>
@@ -106,12 +195,18 @@ <h3>Individual Activities</h3>
106195
</div>
107196

108197
<mat-divider></mat-divider>
198+
<!-- Teams -->
199+
<app-team-selector
200+
[allTeams]="allTeams"
201+
[(selectedTeams)]="config.selectedTeams"
202+
[teamGroups]="teamGroups"></app-team-selector>
109203

204+
<mat-divider></mat-divider>
110205
</mat-dialog-content>
111206

112207
<mat-dialog-actions align="end">
113208
<button mat-button (click)="onCancel()">Cancel</button>
114209
<button mat-raised-button color="primary" (click)="onSave()">
115210
Save Configuration and Generate Report
116211
</button>
117-
</mat-dialog-actions>
212+
</mat-dialog-actions>

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

Lines changed: 9 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { Component, Inject } from '@angular/core';
22
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
33
import {
44
ReportConfig,
5-
ColumnGrouping,
6-
MAX_DESCRIPTION_WORD_CAP
5+
ActivityAttributes,
6+
ColumnGrouping,
7+
MAX_DESCRIPTION_WORD_CAP,
78
} from '../../model/report-config';
89
import { Activity } from '../../model/activity-store';
910
import { ProgressTitle, TeamGroups } from '../../model/types';
@@ -62,34 +63,14 @@ export class ReportConfigModalComponent {
6263
}
6364
}
6465

65-
// --- Team toggling ---
66-
isTeamSelected(team: string): boolean {
67-
return this.config.selectedTeams.includes(team);
66+
// --- Activity attribute toggling ---
67+
toggleActivityAttribute(key: keyof ActivityAttributes): void {
68+
(this.config.activityAttributes as any)[key] = !this.config.activityAttributes[key];
6869
}
6970

70-
toggleTeam(team: string): void {
71-
const idx = this.config.selectedTeams.indexOf(team);
72-
if (idx >= 0) {
73-
this.config.selectedTeams.splice(idx, 1);
74-
} else {
75-
this.config.selectedTeams.push(team);
76-
}
77-
}
78-
79-
selectAllTeams(): void {
80-
this.config.selectedTeams = [...this.allTeams];
81-
}
82-
83-
deselectAllTeams(): void {
84-
this.config.selectedTeams = [];
85-
}
86-
87-
get groupNames(): string[] {
88-
return Object.keys(this.teamGroups);
89-
}
90-
91-
selectGroup(group: string): void {
92-
this.config.selectedTeams = [...(this.teamGroups[group] || [])];
71+
get hasAnyMarkdownAttribute(): boolean {
72+
const a = this.config.activityAttributes;
73+
return a.showDescription || a.showRisk || a.showMeasure || a.showEvidence;
9374
}
9475

9576
// --- Dimension toggling ---
@@ -143,9 +124,6 @@ export class ReportConfigModalComponent {
143124
a => a.name.toLowerCase().includes(query) || a.dimension.toLowerCase().includes(query)
144125
);
145126
}
146-
toggleAttribute(key: "showDescription"): void {
147-
this.config[key] = !this.config[key];
148-
}
149127

150128
// --- Actions ---
151129
onSave(): void {

0 commit comments

Comments
 (0)