[AC-2676] Remove paging logic from GroupsComponent

apps/web/src/app/admin-console/organizations/manage/groups.component.html

@@ -1,7 +1,7 @@
 <app-header>
  <bit-search
  [placeholder]="'searchGroups' | i18n"
- [(ngModel)]="searchText"
+ [formControl]="searchControl"
  class="tw-w-80"
  ></bit-search>
  <button bitButton type="button" buttonType="primary" (click)="add()">
@@ -18,95 +18,92 @@
  ></i>
  <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
-<ng-container *ngIf="!loading && visibleGroups">
- <p *ngIf="!visibleGroups.length">{{ "noGroupsInList" | i18n }}</p>
- <bit-table
- *ngIf="visibleGroups.length"
- infinite-scroll
- [infiniteScrollDistance]="1"
- [infiniteScrollDisabled]="!isPaging()"
- (scrolled)="loadMore()"
- >
- <ng-container header>
- <tr>
- <th bitCell class="tw-w-20">
- <input
- type="checkbox"
- bitCheckbox
- class="tw-mr-2"
- (change)="toggleAllVisible($event)"
- id="selectAll"
- />
- <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">{{
- "all" | i18n
- }}</label>
- </th>
- <th bitCell>{{ "name" | i18n }}</th>
- <th bitCell>{{ "collections" | i18n }}</th>
- <th bitCell class="tw-w-10">
- <button
- [bitMenuTriggerFor]="headerMenu"
- type="button"
- bitIconButton="bwi-ellipsis-v"
- size="small"
- appA11yTitle="{{ 'options' | i18n }}"
- ></button>
+<ng-container *ngIf="!loading">
+ <p *ngIf="!dataSource.filteredData.length">{{ "noGroupsInList" | i18n }}</p>
+ <!-- The padding on the bottom of the cdk-virtual-scroll-viewport element is required to prevent table row content
+ from overflowing the <main> element. -->
+ <cdk-virtual-scroll-viewport scrollWindow [itemSize]="rowHeight" class="tw-pb-8">
+ <bit-table *ngIf="dataSource.filteredData.length" [dataSource]="dataSource">
+ <ng-container header>
+ <tr>
+ <th bitCell class="tw-w-20">
+ <input
+ type="checkbox"
+ bitCheckbox
+ class="tw-mr-2"
+ (change)="toggleAllVisible($event)"
+ id="selectAll"
+ />
+ <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">{{
+ "all" | i18n
+ }}</label>
+ </th>
+ <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
+ <th bitCell>{{ "collections" | i18n }}</th>
+ <th bitCell class="tw-w-10">
+ <button
+ [bitMenuTriggerFor]="headerMenu"
+ type="button"
+ bitIconButton="bwi-ellipsis-v"
+ size="small"
+ appA11yTitle="{{ 'options' | i18n }}"
+ ></button>
 
- <bit-menu #headerMenu>
- <button type="button" bitMenuItem (click)="deleteAllSelected()">
- <span class="tw-text-danger"
- ><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
- >
+ <bit-menu #headerMenu>
+ <button type="button" bitMenuItem (click)="deleteAllSelected()">
+ <span class="tw-text-danger"
+ ><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
+ >
+ </button>
+ </bit-menu>
+ </th>
+ </tr>
+ </ng-container>
+ <ng-template body let-rows$>
+ <tr bitRow *cdkVirtualFor="let g of rows$" [ngClass]="rowHeightClass">
+ <td bitCell (click)="check(g)" class="tw-cursor-pointer">
+ <input type="checkbox" bitCheckbox [(ngModel)]="g.checked" />
+ </td>
+ <td bitCell class="tw-cursor-pointer tw-font-bold" (click)="edit(g)">
+ <button type="button" bitLink>
+ {{ g.details.name }}
  </button>
- </bit-menu>
- </th>
- </tr>
- </ng-container>
- <ng-template body>
- <tr bitRow *ngFor="let g of visibleGroups">
- <td bitCell (click)="check(g)" class="tw-cursor-pointer">
- <input type="checkbox" bitCheckbox [(ngModel)]="g.checked" />
- </td>
- <td bitCell class="tw-cursor-pointer tw-font-bold" (click)="edit(g)">
- <button type="button" bitLink>
- {{ g.details.name }}
- </button>
- </td>
- <td bitCell (click)="edit(g, ModalTabType.Collections)" class="tw-cursor-pointer">
- <bit-badge-list
- [items]="g.collectionNames"
- [maxItems]="3"
- variant="secondary"
- ></bit-badge-list>
- </td>
- <td bitCell>
- <button
- [bitMenuTriggerFor]="rowMenu"
- type="button"
- bitIconButton="bwi-ellipsis-v"
- size="small"
- appA11yTitle="{{ 'options' | i18n }}"
- ></button>
+ </td>
+ <td bitCell (click)="edit(g, ModalTabType.Collections)" class="tw-cursor-pointer">
+ <bit-badge-list
+ [items]="g.collectionNames"
+ [maxItems]="3"
+ variant="secondary"
+ ></bit-badge-list>
+ </td>
+ <td bitCell>
+ <button
+ [bitMenuTriggerFor]="rowMenu"
+ type="button"
+ bitIconButton="bwi-ellipsis-v"
+ size="small"
+ appA11yTitle="{{ 'options' | i18n }}"
+ ></button>
 
- <bit-menu #rowMenu>
- <button type="button" bitMenuItem (click)="edit(g)">
- <i aria-hidden="true" class="bwi bwi-pencil-square"></i> {{ "editInfo" | i18n }}
- </button>
- <button type="button" bitMenuItem (click)="edit(g, ModalTabType.Members)">
- <i aria-hidden="true" class="bwi bwi-user"></i> {{ "members" | i18n }}
- </button>
- <button type="button" bitMenuItem (click)="edit(g, ModalTabType.Collections)">
- <i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
- </button>
- <button type="button" bitMenuItem (click)="delete(g)">
- <span class="tw-text-danger"
- ><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
- >
- </button>
- </bit-menu>
- </td>
- </tr>
- </ng-template>
- </bit-table>
+ <bit-menu #rowMenu>
+ <button type="button" bitMenuItem (click)="edit(g)">
+ <i aria-hidden="true" class="bwi bwi-pencil-square"></i> {{ "editInfo" | i18n }}
+ </button>
+ <button type="button" bitMenuItem (click)="edit(g, ModalTabType.Members)">
+ <i aria-hidden="true" class="bwi bwi-user"></i> {{ "members" | i18n }}
+ </button>
+ <button type="button" bitMenuItem (click)="edit(g, ModalTabType.Collections)">
+ <i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
+ </button>
+ <button type="button" bitMenuItem (click)="delete(g)">
+ <span class="tw-text-danger"
+ ><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
+ >
+ </button>
+ </bit-menu>
+ </td>
+ </tr>
+ </ng-template>
+ </bit-table>
+ </cdk-virtual-scroll-viewport>
 </ng-container>
-<ng-template #addEdit></ng-template>