bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 06:13:38 +00:00
Code Issues Releases Wiki Activity

PM-2630 virtual scroll on tables (#13725)

Browse Source 
Tested by QA and passed.
This commit is contained in:
Vijay Oommen
2025-03-10 14:52:52 -05:00
committed by GitHub
parent f682870e41
commit a877450e0a
4 changed files with 186 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html
View File

@@ -26,77 +26,73 @@
</bit-toggle> </bit-toggle>
</ng-container> </ng-container>
</bit-toggle-group> </bit-toggle-group>
<bit-table [dataSource]="dataSource"> <bit-table-scroll [dataSource]="dataSource" [rowSize]="53">
<ng-container header> <ng-container header>
<tr bitRow> <th bitCell></th>
<th bitCell></th> <th bitCell bitSortable="name">{{ "name" | i18n }}</th>
<th bitCell bitSortable="name">{{ "name" | i18n }}</th> <th bitCell bitSortable="organizationId" *ngIf="!isAdminConsoleActive">
<th bitCell bitSortable="organizationId" *ngIf="!isAdminConsoleActive"> {{ "owner" | i18n }}
{{ "owner" | i18n }} </th>
</th> <th bitCell class="tw-text-right" bitSortable="exposedXTimes">
<th bitCell class="tw-text-right" bitSortable="exposedXTimes"> {{ "timesExposed" | i18n }}
{{ "timesExposed" | i18n }} </th>
</th>
</tr>
</ng-container> </ng-container>
<ng-template body let-rows$> <ng-template bitRowDef let-row>
<tr bitRow *ngFor="let r of rows$ | async"> <td bitCell>
<td bitCell> <app-vault-icon [cipher]="row"></app-vault-icon>
<app-vault-icon [cipher]="r"></app-vault-icon> </td>
</td> <td bitCell>
<td bitCell> <ng-container *ngIf="!organization || canManageCipher(row); else cantManage">
<ng-container *ngIf="!organization || canManageCipher(r); else cantManage"> <a
<a bitLink
bitLink href="#"
href="#" appStopClick
appStopClick (click)="selectCipher(row)"
(click)="selectCipher(r)" title="{{ 'editItemWithName' | i18n: row.name }}"
title="{{ 'editItemWithName' | i18n: r.name }}" >{{ row.name }}</a
>{{ r.name }}</a
>
</ng-container>
<ng-template #cantManage>
<span>{{ r.name }}</span>
</ng-template>
<ng-container *ngIf="!organization && r.organizationId">
<i
class="bwi bwi-collection"
appStopProp
title="{{ 'shared' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "shared" | i18n }}</span>
</ng-container>
<ng-container *ngIf="r.hasAttachments">
<i
class="bwi bwi-paperclip"
appStopProp
title="{{ 'attachments' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "attachments" | i18n }}</span>
</ng-container>
<br />
<small>{{ r.subTitle }}</small>
</td>
<td bitCell *ngIf="!isAdminConsoleActive">
<app-org-badge
*ngIf="!organization"
[disabled]="disabled"
[organizationId]="r.organizationId"
[organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
appStopProp
> >
</app-org-badge> </ng-container>
</td> <ng-template #cantManage>
<td bitCell class="tw-text-right"> <span>{{ row.name }}</span>
<span bitBadge variant="warning"> </ng-template>
{{ "exposedXTimes" | i18n: (r.exposedXTimes | number) }} <ng-container *ngIf="!organization && row.organizationId">
</span> <i
</td> class="bwi bwi-collection"
</tr> appStopProp
title="{{ 'shared' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "shared" | i18n }}</span>
</ng-container>
<ng-container *ngIf="row.hasAttachments">
<i
class="bwi bwi-paperclip"
appStopProp
title="{{ 'attachments' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "attachments" | i18n }}</span>
</ng-container>
<br />
<small>{{ row.subTitle }}</small>
</td>
<td bitCell *ngIf="!isAdminConsoleActive">
<app-org-badge
*ngIf="!organization"
[disabled]="disabled"
[organizationId]="row.organizationId"
[organizationName]="row.organizationId | orgNameFromId: (organizations$ | async)"
appStopProp
>
</app-org-badge>
</td>
<td bitCell class="tw-text-right">
<span bitBadge variant="warning">
{{ "exposedXTimes" | i18n: (row.exposedXTimes | number) }}
</span>
</td>
</ng-template> </ng-template>
</bit-table> </bit-table-scroll>
</ng-container> </ng-container>
</div> </div>
<ng-template #cipherAddEdit></ng-template> <ng-template #cipherAddEdit></ng-template>

122
apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
View File

@@ -33,73 +33,69 @@
</ng-container> </ng-container>
</bit-toggle-group> </bit-toggle-group>
<bit-table [dataSource]="dataSource"> <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
<ng-container header *ngIf="!isAdminConsoleActive"> <ng-container header *ngIf="!isAdminConsoleActive">
<tr bitRow> <th bitCell></th>
<th bitCell></th> <th bitCell>{{ "name" | i18n }}</th>
<th bitCell>{{ "name" | i18n }}</th> <th bitCell>{{ "owner" | i18n }}</th>
<th bitCell>{{ "owner" | i18n }}</th> <th bitCell class="tw-text-right">{{ "timesReused" | i18n }}</th>
<th bitCell class="tw-text-right">{{ "timesReused" | i18n }}</th>
</tr>
</ng-container> </ng-container>
<ng-template body let-rows$> <ng-template bitRowDef let-row>
<tr bitRow *ngFor="let r of rows$ | async"> <td bitCell>
<td bitCell> <app-vault-icon [cipher]="row"></app-vault-icon>
<app-vault-icon [cipher]="r"></app-vault-icon> </td>
</td> <td bitCell>
<td bitCell> <ng-container *ngIf="!organization || canManageCipher(row); else cantManage">
<ng-container *ngIf="!organization || canManageCipher(r); else cantManage"> <a
<a bitLink
bitLink href="#"
href="#" appStopClick
appStopClick (click)="selectCipher(row)"
(click)="selectCipher(r)" title="{{ 'editItemWithName' | i18n: row.name }}"
title="{{ 'editItemWithName' | i18n: r.name }}" >{{ row.name }}</a
>{{ r.name }}</a
>
</ng-container>
<ng-template #cantManage>
<span>{{ r.name }}</span>
</ng-template>
<ng-container *ngIf="!organization && r.organizationId">
<i
class="bwi bwi-collection"
appStopProp
title="{{ 'shared' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "shared" | i18n }}</span>
</ng-container>
<ng-container *ngIf="r.hasAttachments">
<i
class="bwi bwi-paperclip"
appStopProp
title="{{ 'attachments' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "attachments" | i18n }}</span>
</ng-container>
<br />
<small>{{ r.subTitle }}</small>
</td>
<td bitCell>
<app-org-badge
*ngIf="!organization"
[disabled]="disabled"
[organizationId]="r.organizationId"
[organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
appStopProp
> >
</app-org-badge> </ng-container>
</td> <ng-template #cantManage>
<td bitCell class="tw-text-right"> <span>{{ row.name }}</span>
<span bitBadge variant="warning"> </ng-template>
{{ "reusedXTimes" | i18n: passwordUseMap.get(r.login.password) }} <ng-container *ngIf="!organization && row.organizationId">
</span> <i
</td> class="bwi bwi-collection"
</tr> appStopProp
title="{{ 'shared' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "shared" | i18n }}</span>
</ng-container>
<ng-container *ngIf="row.hasAttachments">
<i
class="bwi bwi-paperclip"
appStopProp
title="{{ 'attachments' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "attachments" | i18n }}</span>
</ng-container>
<br />
<small>{{ row.subTitle }}</small>
</td>
<td bitCell>
<app-org-badge
*ngIf="!organization"
[disabled]="disabled"
[organizationId]="row.organizationId"
[organizationName]="row.organizationId | orgNameFromId: (organizations$ | async)"
appStopProp
>
</app-org-badge>
</td>
<td bitCell class="tw-text-right">
<span bitBadge variant="warning">
{{ "reusedXTimes" | i18n: passwordUseMap.get(row.login.password) }}
</span>
</td>
</ng-template> </ng-template>
</bit-table> </bit-table-scroll>
</ng-container> </ng-container>
</div> </div>
<ng-template #cipherAddEdit></ng-template> <ng-template #cipherAddEdit></ng-template>

130
apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html
View File

@@ -31,77 +31,73 @@
</bit-toggle> </bit-toggle>
</ng-container> </ng-container>
</bit-toggle-group> </bit-toggle-group>
<bit-table [dataSource]="dataSource"> <bit-table-scroll [dataSource]="dataSource" [rowSize]="53">
<ng-container header> <ng-container header>
<tr bitRow> <th bitCell></th>
<th bitCell></th> <th bitCell bitSortable="name">{{ "name" | i18n }}</th>
<th bitCell bitSortable="name">{{ "name" | i18n }}</th> <th bitCell bitSortable="organizationId" *ngIf="!isAdminConsoleActive">
<th bitCell bitSortable="organizationId" *ngIf="!isAdminConsoleActive"> {{ "owner" | i18n }}
{{ "owner" | i18n }} </th>
</th> <th bitCell class="tw-text-right" bitSortable="score" default>
<th bitCell class="tw-text-right" bitSortable="score" default> {{ "weakness" | i18n }}
{{ "weakness" | i18n }} </th>
</th>
</tr>
</ng-container> </ng-container>
<ng-template body let-rows$> <ng-template bitRowDef let-row>
<tr bitRow *ngFor="let r of rows$ | async"> <td bitCell>
<td bitCell> <app-vault-icon [cipher]="row"></app-vault-icon>
<app-vault-icon [cipher]="r"></app-vault-icon> </td>
</td> <td bitCell>
<td bitCell> <ng-container *ngIf="!organization || canManageCipher(row); else cantManage">
<ng-container *ngIf="!organization || canManageCipher(r); else cantManage"> <a
<a bitLink
bitLink href="#"
href="#" appStopClick
appStopClick (click)="selectCipher(row)"
(click)="selectCipher(r)" title="{{ 'editItemWithName' | i18n: row.name }}"
title="{{ 'editItemWithName' | i18n: r.name }}" >{{ row.name }}</a
>{{ r.name }}</a
>
</ng-container>
<ng-template #cantManage>
<span>{{ r.name }}</span>
</ng-template>
<ng-container *ngIf="!organization && r.organizationId">
<i
class="bwi bwi-collection"
appStopProp
title="{{ 'shared' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "shared" | i18n }}</span>
</ng-container>
<ng-container *ngIf="r.hasAttachments">
<i
class="bwi bwi-paperclip"
appStopProp
title="{{ 'attachments' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "attachments" | i18n }}</span>
</ng-container>
<br />
<small>{{ r.subTitle }}</small>
</td>
<td bitCell *ngIf="!isAdminConsoleActive">
<app-org-badge
*ngIf="!organization"
[disabled]="disabled"
[organizationId]="r.organizationId"
[organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
appStopProp
> >
</app-org-badge> </ng-container>
</td> <ng-template #cantManage>
<td bitCell class="tw-text-right"> <span>{{ row.name }}</span>
<span bitBadge [variant]="r.reportValue.badgeVariant"> </ng-template>
{{ r.reportValue.label | i18n }} <ng-container *ngIf="!organization && row.organizationId">
</span> <i
</td> class="bwi bwi-collection"
</tr> appStopProp
title="{{ 'shared' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "shared" | i18n }}</span>
</ng-container>
<ng-container *ngIf="row.hasAttachments">
<i
class="bwi bwi-paperclip"
appStopProp
title="{{ 'attachments' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "attachments" | i18n }}</span>
</ng-container>
<br />
<small>{{ row.subTitle }}</small>
</td>
<td bitCell *ngIf="!isAdminConsoleActive">
<app-org-badge
*ngIf="!organization"
[disabled]="disabled"
[organizationId]="row.organizationId"
[organizationName]="row.organizationId | orgNameFromId: (organizations$ | async)"
appStopProp
>
</app-org-badge>
</td>
<td bitCell class="tw-text-right">
<span bitBadge [variant]="row.reportValue.badgeVariant">
{{ row.reportValue.label | i18n }}
</span>
</td>
</ng-template> </ng-template>
</bit-table> </bit-table-scroll>
</ng-container> </ng-container>
</div> </div>
<ng-template #cipherAddEdit></ng-template> <ng-template #cipherAddEdit></ng-template>

2
libs/components/src/table/table-scroll.component.html
View File

@@ -12,7 +12,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *cdkVirtualFor="let r of rows$; trackBy: trackBy" bitRow> <tr *cdkVirtualFor="let r of rows$; trackBy: trackBy; templateCacheSize: 0" bitRow>
<ng-container *ngTemplateOutlet="rowDef.template; context: { $implicit: r }"></ng-container> <ng-container *ngTemplateOutlet="rowDef.template; context: { $implicit: r }"></ng-container>
</tr> </tr>
</tbody> </tbody>