1
0
mirror of https://github.com/bitwarden/browser synced 2026-02-11 14:04:03 +00:00

update dialog template to display application metrics

- Update @for track to use app.applicationName
- Update all app references to app.applicationName for selection logic
- Add "Total items" and "Members affected" column headers
- Replace placeholder cell with three data cells for metrics
- Display atRiskPasswordCount, passwordCount, and atRiskMemberCount
- Apply right-alignment and muted styling to secondary metrics
- Direct property binding - no helper methods needed

Part 4 of 5: Dialog template now displays full application data.
This commit is contained in:
Alex
2025-10-31 16:18:21 -04:00
parent e2e2c293df
commit 4220eafa46

View File

@@ -21,25 +21,31 @@
<th bitTypography="body2" class="tw-text-right tw-py-3 tw-px-2 tw-font-semibold">
{{ "atRiskItems" | i18n }}
</th>
<th bitTypography="body2" class="tw-text-right tw-py-3 tw-px-2 tw-font-semibold">
{{ "totalItems" | i18n }}
</th>
<th bitTypography="body2" class="tw-text-right tw-py-3 tw-px-2 tw-font-semibold">
{{ "membersAffected" | i18n }}
</th>
</tr>
</thead>
<tbody>
@for (app of newApplications; track app) {
@for (app of newApplications; track app.applicationName) {
<tr class="tw-border-b tw-border-secondary-300 hover:tw-bg-background-alt">
<td class="tw-py-3 tw-px-2">
<button
type="button"
class="tw-bg-transparent tw-border-0 tw-p-0 tw-cursor-pointer"
(click)="toggleSelection(app)"
(click)="toggleSelection(app.applicationName)"
[attr.aria-label]="
isSelected(app)
isSelected(app.applicationName)
? ('unselectApplication' | i18n)
: ('selectApplication' | i18n)
"
>
<i
class="bwi tw-text-muted"
[ngClass]="isSelected(app) ? 'bwi-star-f' : 'bwi-star'"
[ngClass]="isSelected(app.applicationName) ? 'bwi-star-f' : 'bwi-star'"
aria-hidden="true"
></i>
</button>
@@ -47,10 +53,18 @@
<td bitTypography="body1" class="tw-py-3 tw-px-2">
<div class="tw-flex tw-items-center tw-gap-2">
<i class="bwi bwi-globe tw-text-muted" aria-hidden="true"></i>
<span>{{ app }}</span>
<span>{{ app.applicationName }}</span>
</div>
</td>
<td bitTypography="body1" class="tw-py-3 tw-px-2 tw-text-right tw-text-muted"></td>
<td bitTypography="body1" class="tw-py-3 tw-px-2 tw-text-right">
{{ app.atRiskPasswordCount }}
</td>
<td bitTypography="body1" class="tw-py-3 tw-px-2 tw-text-right tw-text-muted">
{{ app.passwordCount }}
</td>
<td bitTypography="body1" class="tw-py-3 tw-px-2 tw-text-right tw-text-muted">
{{ app.atRiskMemberCount }}
</td>
</tr>
}
</tbody>