Skip to content

Commit 16dbfec

Browse files
sawankshrmasawankshrma
committed
works for now --> test commit 2
1 parent 9c72afe commit 16dbfec

12 files changed

Lines changed: 539 additions & 180 deletions

‎src/app/app.module.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ 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';
3838
import { TeamSelectorComponent } from './component/team-selector/team-selector.component';
39+
import { ColResizeDirective } from './directive/col-resize.directive';
3940

4041
@NgModule({
4142
declarations: [
@@ -63,6 +64,7 @@ import { TeamSelectorComponent } from './component/team-selector/team-selector.c
6364
ReportComponent,
6465
ReportConfigModalComponent,
6566
TeamSelectorComponent,
67+
ColResizeDirective,
6668
],
6769
imports: [
6870
BrowserModule,
@@ -82,8 +84,8 @@ import { TeamSelectorComponent } from './component/team-selector/team-selector.c
8284
LoaderService,
8385
ModalMessageComponent,
8486
{ provide: MAT_DIALOG_DATA, useValue: {} },
85-
{ provide: MatDialogRef, useValue: { close: (dialogResult: any) => { } } },
87+
{ provide: MatDialogRef, useValue: { close: (dialogResult: any) => {} } },
8688
],
8789
bootstrap: [AppComponent],
8890
})
89-
export class AppModule { }
91+
export class AppModule {}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,31 @@ 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));
6074
gap: 8px;
6175
}
76+
::ng-deep .subtoggle-checkbox {
77+
--mdc-checkbox-selected-icon-color: var(--primary-color);
78+
--mdc-checkbox-selected-focus-icon-color: var(--primary-color);
79+
--mdc-checkbox-selected-hover-icon-color: var(--primary-color);
80+
--mdc-checkbox-selected-pressed-icon-color: var(--primary-color);
81+
}
6282

6383
.search-field {
6484
width: 80%;

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

Lines changed: 85 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ <h3>Display Configuration</h3>
77

88
<div class="config-row">
99
<span class="config-row-label">Column Grouping:</span>
10-
<mat-button-toggle-group class="column-toggle" [value]="config.columnGrouping"
10+
<mat-button-toggle-group
11+
class="column-toggle"
12+
[value]="config.columnGrouping"
1113
(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>
@@ -23,69 +25,115 @@ <h3>Activity Attributes</h3>
2325
<p class="config-hint">Choose which activity fields to show as columns in the report.</p>
2426

2527
<div class="checkbox-grid">
26-
<mat-checkbox [checked]="config.activityAttributes.showDescription"
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"
2735
(change)="toggleActivityAttribute('showDescription')">
2836
Description
2937
</mat-checkbox>
30-
<mat-checkbox [checked]="config.activityAttributes.showRisk" (change)="toggleActivityAttribute('showRisk')">
38+
<mat-checkbox
39+
[checked]="config.activityAttributes.showRisk"
40+
(change)="toggleActivityAttribute('showRisk')">
3141
Risk
3242
</mat-checkbox>
33-
<mat-checkbox [checked]="config.activityAttributes.showMeasure" (change)="toggleActivityAttribute('showMeasure')">
43+
<mat-checkbox
44+
[checked]="config.activityAttributes.showMeasure"
45+
(change)="toggleActivityAttribute('showMeasure')">
3446
Measure
3547
</mat-checkbox>
36-
<mat-checkbox [checked]="config.activityAttributes.showTags" (change)="toggleActivityAttribute('showTags')">
37-
Tags
38-
</mat-checkbox>
39-
<mat-checkbox [checked]="config.activityAttributes.showImplementationGuide"
40-
(change)="toggleActivityAttribute('showImplementationGuide')">
41-
Implementation Guide
42-
</mat-checkbox>
43-
<mat-checkbox [checked]="config.activityAttributes.showDifficultyOfImplementation"
48+
<mat-checkbox
49+
[checked]="config.activityAttributes.showDifficultyOfImplementation"
4450
(change)="toggleActivityAttribute('showDifficultyOfImplementation')">
4551
Difficulty of Implementation
4652
</mat-checkbox>
47-
<mat-checkbox [checked]="config.activityAttributes.showUsefulness"
53+
<mat-checkbox
54+
[checked]="config.activityAttributes.showUsefulness"
4855
(change)="toggleActivityAttribute('showUsefulness')">
4956
Usefulness
5057
</mat-checkbox>
51-
<mat-checkbox [checked]="config.activityAttributes.showEvidence"
52-
(change)="toggleActivityAttribute('showEvidence')">
53-
Evidence
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>
5669

5770
<!-- References with sub-toggles -->
5871
<div class="references-section">
59-
<mat-checkbox [checked]="config.activityAttributes.showReferences"
72+
<mat-checkbox
73+
[checked]="config.activityAttributes.showReferences"
6074
(change)="toggleActivityAttribute('showReferences')">
6175
References
6276
</mat-checkbox>
6377
<div class="references-subtoggle" *ngIf="config.activityAttributes.showReferences">
64-
<mat-checkbox [checked]="config.activityAttributes.showReferencesIso27001_2017"
78+
<mat-checkbox
79+
class="subtoggle-checkbox"
80+
[checked]="config.activityAttributes.showReferencesIso27001_2017"
6581
(change)="toggleActivityAttribute('showReferencesIso27001_2017')">
6682
ISO 27001:2017
6783
</mat-checkbox>
68-
<mat-checkbox [checked]="config.activityAttributes.showReferencesIso27001_2022"
84+
<mat-checkbox
85+
class="subtoggle-checkbox"
86+
[checked]="config.activityAttributes.showReferencesIso27001_2022"
6987
(change)="toggleActivityAttribute('showReferencesIso27001_2022')">
7088
ISO 27001:2022
7189
</mat-checkbox>
72-
<mat-checkbox [checked]="config.activityAttributes.showReferencesSamm2"
90+
<mat-checkbox
91+
class="subtoggle-checkbox"
92+
[checked]="config.activityAttributes.showReferencesSamm2"
7393
(change)="toggleActivityAttribute('showReferencesSamm2')">
7494
SAMM2
7595
</mat-checkbox>
76-
<mat-checkbox [checked]="config.activityAttributes.showReferencesOpenCRE"
96+
<mat-checkbox
97+
class="subtoggle-checkbox"
98+
[checked]="config.activityAttributes.showReferencesOpenCRE"
7799
(change)="toggleActivityAttribute('showReferencesOpenCRE')">
78100
OpenCRE
79101
</mat-checkbox>
80102
</div>
81103
</div>
82104

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>
83117
<div class="config-row slider-row" *ngIf="hasAnyMarkdownAttribute">
84118
<span class="config-row-label">
85-
Word Cap: <strong>{{ config.descriptionWordCap }}</strong>
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>
86127
</span>
87-
<mat-slider class="word-cap-slider" min="5" [max]="maxWordCap" step="5" thumbLabel [displayWith]="wordCapLabel"
88-
[value]="config.descriptionWordCap" (input)="onWordCapChange($event)">
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)">
89137
</mat-slider>
90138
</div>
91139
</div>
@@ -97,7 +145,9 @@ <h3>Activity Attributes</h3>
97145
<h3>Dimensions</h3>
98146
<p class="config-hint">Uncheck dimensions to exclude all their activities.</p>
99147
<div class="checkbox-grid">
100-
<mat-checkbox *ngFor="let dim of allDimensions" [checked]="!isDimensionExcluded(dim)"
148+
<mat-checkbox
149+
*ngFor="let dim of allDimensions"
150+
[checked]="!isDimensionExcluded(dim)"
101151
(change)="toggleDimension(dim)">
102152
{{ dim }}
103153
</mat-checkbox>
@@ -111,7 +161,9 @@ <h3>Dimensions</h3>
111161
<h3>Subdimensions</h3>
112162
<p class="config-hint">Uncheck subdimensions to exclude their activities.</p>
113163
<div class="checkbox-grid subdimension-grid">
114-
<mat-checkbox *ngFor="let subdim of allSubdimensions" [checked]="!isSubdimensionExcluded(subdim)"
164+
<mat-checkbox
165+
*ngFor="let subdim of allSubdimensions"
166+
[checked]="!isSubdimensionExcluded(subdim)"
115167
(change)="toggleSubdimension(subdim)">
116168
{{ subdim }}
117169
</mat-checkbox>
@@ -130,7 +182,9 @@ <h3>Individual Activities</h3>
130182
<mat-icon matSuffix>search</mat-icon>
131183
</mat-form-field>
132184
<div class="activity-list">
133-
<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)"
134188
(change)="toggleActivity(activity.uuid)">
135189
<span class="activity-checkbox-label">
136190
<span class="activity-name">{{ activity.name }}</span>
@@ -142,7 +196,9 @@ <h3>Individual Activities</h3>
142196

143197
<mat-divider></mat-divider>
144198
<!-- Teams -->
145-
<app-team-selector [allTeams]="allTeams" [(selectedTeams)]="config.selectedTeams"
199+
<app-team-selector
200+
[allTeams]="allTeams"
201+
[(selectedTeams)]="config.selectedTeams"
146202
[teamGroups]="teamGroups"></app-team-selector>
147203

148204
<mat-divider></mat-divider>
@@ -153,4 +209,4 @@ <h3>Individual Activities</h3>
153209
<button mat-raised-button color="primary" (click)="onSave()">
154210
Save Configuration and Generate Report
155211
</button>
156-
</mat-dialog-actions>
212+
</mat-dialog-actions>

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import { Component, Inject } from '@angular/core';
22
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
3-
import { ReportConfig, ActivityAttributes, ColumnGrouping, MAX_DESCRIPTION_WORD_CAP } from '../../model/report-config';
3+
import {
4+
ReportConfig,
5+
ActivityAttributes,
6+
ColumnGrouping,
7+
MAX_DESCRIPTION_WORD_CAP,
8+
} from '../../model/report-config';
49
import { Activity } from '../../model/activity-store';
510
import { ProgressTitle, TeamGroups } from '../../model/types';
611

@@ -65,8 +70,7 @@ export class ReportConfigModalComponent {
6570

6671
get hasAnyMarkdownAttribute(): boolean {
6772
const a = this.config.activityAttributes;
68-
return a.showDescription || a.showRisk || a.showMeasure ||
69-
a.showImplementationGuide || a.showEvidence;
73+
return a.showDescription || a.showRisk || a.showMeasure || a.showEvidence;
7074
}
7175

7276
// --- Dimension toggling ---

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

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
<div class="config-section">
2-
<h3>Teams</h3>
3-
<p class="config-hint">Select which teams to include in the report.</p>
4-
<div class="select-all-actions">
5-
<button mat-button color="primary" (click)="selectAllTeams()">Select All</button>
6-
<button mat-button (click)="deselectAllTeams()">Deselect All</button>
7-
<span *ngIf="groupNames.length > 0" class="group-section">
8-
<span class="group-label">Group:</span>
9-
<button mat-stroked-button [matMenuTriggerFor]="groupMenu" class="group-dropdown-btn">
10-
<mat-icon>group</mat-icon>
11-
{{ selectedGroupName || 'Select Group' }}
12-
<mat-icon>arrow_drop_down</mat-icon>
13-
</button>
14-
</span>
15-
<mat-menu #groupMenu="matMenu">
16-
<button mat-menu-item *ngFor="let group of groupNames" (click)="selectGroup(group)">
17-
{{ group }}
18-
</button>
19-
</mat-menu>
20-
</div>
21-
<div class="checkbox-grid">
22-
<mat-checkbox *ngFor="let team of allTeams" [checked]="isTeamSelected(team)" (change)="toggleTeam(team)">
23-
{{ team }}
24-
</mat-checkbox>
25-
</div>
26-
</div>
2+
<h3>Teams</h3>
3+
<p class="config-hint">Select which teams to include in the report.</p>
4+
<div class="select-all-actions">
5+
<button mat-button color="primary" (click)="selectAllTeams()">Select All</button>
6+
<button mat-button (click)="deselectAllTeams()">Deselect All</button>
7+
<span *ngIf="groupNames.length > 0" class="group-section">
8+
<span class="group-label">Group:</span>
9+
<button mat-stroked-button [matMenuTriggerFor]="groupMenu" class="group-dropdown-btn">
10+
<mat-icon>group</mat-icon>
11+
{{ selectedGroupName || 'Select Group' }}
12+
<mat-icon>arrow_drop_down</mat-icon>
13+
</button>
14+
</span>
15+
<mat-menu #groupMenu="matMenu">
16+
<button mat-menu-item *ngFor="let group of groupNames" (click)="selectGroup(group)">
17+
{{ group }}
18+
</button>
19+
</mat-menu>
20+
</div>
21+
<div class="checkbox-grid">
22+
<mat-checkbox
23+
*ngFor="let team of allTeams"
24+
[checked]="isTeamSelected(team)"
25+
(change)="toggleTeam(team)">
26+
{{ team }}
27+
</mat-checkbox>
28+
</div>
29+
</div>

0 commit comments

Comments
 (0)