Fix/pagination issues

src/app/features/collections/components/add-to-collection/project-contributors-step/project-contributors-step.component.html

@@ -40,6 +40,7 @@ <h3>{{ 'collections.addToCollection.projectContributors' | translate }}</h3>
  <osf-contributors-table
  class="w-full"
  [(contributors)]="projectContributors"
+ [tableParams]="tableParams()"
  [isLoading]="isContributorsLoading()"
  (remove)="handleRemoveContributor($event)"
  ></osf-contributors-table>

src/app/features/collections/components/add-to-collection/project-contributors-step/project-contributors-step.component.ts

@@ -8,7 +8,17 @@ import { Tooltip } from 'primeng/tooltip';
 
 import { filter } from 'rxjs/operators';
 
-import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, input, output, signal } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ DestroyRef,
+ effect,
+ inject,
+ input,
+ output,
+ signal,
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { InfoIconComponent } from '@osf/shared/components';
@@ -17,9 +27,10 @@ import {
  AddUnregisteredContributorDialogComponent,
  ContributorsTableComponent,
 } from '@osf/shared/components/contributors';
+import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
 import { AddContributorType, ResourceType } from '@osf/shared/enums';
 import { findChangedItems } from '@osf/shared/helpers';
-import { ContributorDialogAddModel, ContributorModel } from '@osf/shared/models';
+import { ContributorDialogAddModel, ContributorModel, TableParameters } from '@osf/shared/models';
 import { CustomConfirmationService, CustomDialogService, ToastService } from '@osf/shared/services';
 import {
  AddContributor,
@@ -44,11 +55,18 @@ export class ProjectContributorsStepComponent {
  private readonly customConfirmationService = inject(CustomConfirmationService);
 
  readonly isContributorsLoading = select(ContributorsSelectors.isContributorsLoading);
+ readonly contributorsTotalCount = select(ContributorsSelectors.getContributorsTotalCount);
  readonly selectedProject = select(ProjectsSelectors.getSelectedProject);
 
  private initialContributors = select(ContributorsSelectors.getContributors);
  readonly projectContributors = signal<ContributorModel[]>([]);
 
+ readonly tableParams = computed<TableParameters>(() => ({
+ ...DEFAULT_TABLE_PARAMS,
+ totalRecords: this.contributorsTotalCount(),
+ paginator: this.contributorsTotalCount() > DEFAULT_TABLE_PARAMS.rows,
+ }));
+
  stepperActiveValue = input.required<number>();
  targetStepValue = input.required<number>();
  isDisabled = input.required<boolean>();

src/app/features/project/contributors/contributors.component.html → src/app/features/contributors/contributors.component.html

@@ -63,12 +63,14 @@ <h1 class="py-5 px-3 md:px-5 xl:px-4">{{ 'navigation.contributors' | translate }
  class="w-full"
  [(contributors)]="contributors"
  [isLoading]="isContributorsLoading()"
+ [tableParams]="tableParams()"
  [isCurrentUserAdminContributor]="isCurrentUserAdminContributor()"
  [currentUserId]="currentUser()?.id"
  [showCurator]="true"
  [showInfo]="true"
  [resourceType]="resourceType()"
  (remove)="removeContributor($event)"
+ (pageChanged)="pageChanged($event)"
  ></osf-contributors-table>
 
  @if (hasChanges) {

src/app/features/project/contributors/contributors.component.ts → src/app/features/contributors/contributors.component.ts

@@ -4,7 +4,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Select } from 'primeng/select';
-import { TableModule } from 'primeng/table';
+import { TableModule, TablePageEvent } from 'primeng/table';
 
 import { debounceTime, distinctUntilChanged, filter, map, of, switchMap } from 'rxjs';
 
@@ -30,13 +30,14 @@ import {
  ContributorsTableComponent,
  RequestAccessTableComponent,
 } from '@osf/shared/components/contributors';
-import { BIBLIOGRAPHY_OPTIONS, PERMISSION_OPTIONS } from '@osf/shared/constants';
+import { BIBLIOGRAPHY_OPTIONS, DEFAULT_TABLE_PARAMS, PERMISSION_OPTIONS } from '@osf/shared/constants';
 import { AddContributorType, ContributorPermission, ResourceType } from '@osf/shared/enums';
 import { findChangedItems } from '@osf/shared/helpers';
 import {
  ContributorDialogAddModel,
  ContributorModel,
  SelectOption,
+ TableParameters,
  ViewOnlyLinkJsonApi,
  ViewOnlyLinkModel,
 } from '@osf/shared/models';
@@ -110,9 +111,16 @@ export class ContributorsComponent implements OnInit {
  readonly requestAccessList = select(ContributorsSelectors.getRequestAccessList);
  readonly areRequestAccessListLoading = select(ContributorsSelectors.areRequestAccessListLoading);
  readonly isContributorsLoading = select(ContributorsSelectors.isContributorsLoading);
+ readonly contributorsTotalCount = select(ContributorsSelectors.getContributorsTotalCount);
  readonly isViewOnlyLinksLoading = select(ViewOnlyLinkSelectors.isViewOnlyLinksLoading);
  readonly currentUser = select(UserSelectors.getCurrentUser);
 
+ readonly tableParams = computed<TableParameters>(() => ({
+ ...DEFAULT_TABLE_PARAMS,
+ totalRecords: this.contributorsTotalCount(),
+ paginator: this.contributorsTotalCount() > DEFAULT_TABLE_PARAMS.rows,
+ }));
+
  canCreateViewLink = computed(() => !!this.resourceDetails() && !!this.resourceId());
  searchPlaceholder = computed(() =>
  this.resourceType() === ResourceType.Project
@@ -323,6 +331,13 @@ export class ContributorsComponent implements OnInit {
  });
  }
 
+ pageChanged(event: TablePageEvent) {
+ const page = Math.floor(event.first / event.rows) + 1;
+ const pageSize = event.rows;
+
+ this.actions.getContributors(this.resourceId(), this.resourceType(), page, pageSize);
+ }
+
  createViewLink() {
  const currentResource: ResourceInfoModel = {
  id: this.resourceDetails().id,

src/app/features/meetings/store/meetings.state.ts

@@ -29,13 +29,13 @@ import { MeetingsStateModel } from './meetings.model';
 })
 @Injectable()
 export class MeetingsState {
- #meetingsService = inject(MeetingsService);
+ meetingsService = inject(MeetingsService);
 
  @Action(GetAllMeetings)
  getAllMeetings(ctx: StateContext<MeetingsStateModel>, action: GetAllMeetings) {
  ctx.setState(patch({ meetings: patch({ isLoading: true }) }));
 
- return this.#meetingsService.getAllMeetings(action.pageNumber, action.pageSize, action.filters).pipe(
+ return this.meetingsService.getAllMeetings(action.pageNumber, action.pageSize, action.filters).pipe(
  tap((meetingsWithPaging) => {
  ctx.setState(
  patch({
@@ -55,7 +55,7 @@ export class MeetingsState {
  ctx.setState(patch({ meetings: patch({ isLoading: true }) }));
  ctx.setState(patch({ meetingSubmissions: patch({ isLoading: true }) }));
 
- return this.#meetingsService.getMeetingById(action.meetingId).pipe(
+ return this.meetingsService.getMeetingById(action.meetingId).pipe(
  tap((meeting) => {
  ctx.setState(
  patch({
@@ -72,7 +72,7 @@ export class MeetingsState {
  getMeetingSubmissions(ctx: StateContext<MeetingsStateModel>, action: GetMeetingSubmissions) {
  ctx.setState(patch({ meetingSubmissions: patch({ isLoading: true }) }));
 
- return this.#meetingsService
+ return this.meetingsService
  .getMeetingSubmissions(action.meetingId, action.pageNumber, action.pageSize, action.filters)
  .pipe(
  tap((meetingSubmissionsWithPaging) => {

src/app/features/metadata/dialogs/contributors-dialog/contributors-dialog.component.html

@@ -17,9 +17,10 @@
  <osf-contributors-table
  class="w-full"
  [(contributors)]="contributors"
- [showEducation]="false"
- [showEmployment]="false"
+ [tableParams]="tableParams()"
  [isLoading]="isLoading()"
+ [showEmployment]="false"
+ [showEducation]="false"
  [isCurrentUserAdminContributor]="isCurrentUserAdminContributor()"
  [currentUserId]="currentUser()?.id"
  (remove)="removeContributor($event)"

src/app/features/metadata/dialogs/contributors-dialog/contributors-dialog.component.ts

@@ -27,9 +27,10 @@ import {
  AddUnregisteredContributorDialogComponent,
  ContributorsTableComponent,
 } from '@osf/shared/components/contributors';
+import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
 import { AddContributorType, ContributorPermission, ResourceType } from '@osf/shared/enums';
 import { findChangedItems } from '@osf/shared/helpers';
-import { ContributorDialogAddModel, ContributorModel } from '@osf/shared/models';
+import { ContributorDialogAddModel, ContributorModel, TableParameters } from '@osf/shared/models';
 import { CustomConfirmationService, CustomDialogService, ToastService } from '@osf/shared/services';
 import {
  AddContributor,
@@ -60,10 +61,17 @@ export class ContributorsDialogComponent implements OnInit {
 
  isLoading = select(ContributorsSelectors.isContributorsLoading);
  initialContributors = select(ContributorsSelectors.getContributors);
+ contributorsTotalCount = select(ContributorsSelectors.getContributorsTotalCount);
  contributors = signal<ContributorModel[]>([]);
 
  currentUser = select(UserSelectors.getCurrentUser);
 
+ readonly tableParams = computed<TableParameters>(() => ({
+ ...DEFAULT_TABLE_PARAMS,
+ totalRecords: this.contributorsTotalCount(),
+ paginator: this.contributorsTotalCount() > DEFAULT_TABLE_PARAMS.rows,
+ }));
+
  actions = createDispatchMap({
  updateSearchValue: UpdateContributorsSearchValue,
  updatePermissionFilter: UpdatePermissionFilter,

src/app/features/moderation/components/moderators-list/moderators-list.component.html

@@ -19,7 +19,9 @@
  [items]="moderators()"
  [isLoading]="isModeratorsLoading()"
  [currentUserId]="currentUser()?.id"
+ [tableParams]="tableParams()"
  [isCurrentUserAdminModerator]="isCurrentUserAdminModerator()"
+ (pageChanged)="pageChanged($event)"
  (update)="updateModerator($event)"
  (remove)="removeModerator($event)"
  />

src/app/features/moderation/components/moderators-list/moderators-list.component.ts

@@ -3,6 +3,7 @@ import { createDispatchMap, select } from '@ngxs/store';
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
+import { TablePageEvent } from 'primeng/table';
 
 import { debounceTime, distinctUntilChanged, filter, forkJoin, map, of } from 'rxjs';
 
@@ -23,7 +24,9 @@ import { ActivatedRoute } from '@angular/router';
 
 import { UserSelectors } from '@core/store/user';
 import { SearchInputComponent } from '@osf/shared/components';
+import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
 import { ResourceType } from '@osf/shared/enums';
+import { TableParameters } from '@osf/shared/models';
 import { CustomConfirmationService, CustomDialogService, ToastService } from '@osf/shared/services';
 
 import { AddModeratorType, ModeratorPermission } from '../../enums';
@@ -66,8 +69,15 @@ export class ModeratorsListComponent implements OnInit {
  moderators = signal<ModeratorModel[]>([]);
  initialModerators = select(ModeratorsSelectors.getModerators);
  isModeratorsLoading = select(ModeratorsSelectors.isModeratorsLoading);
+ moderatorsTotalCount = select(ModeratorsSelectors.getModeratorsTotalCount);
  currentUser = select(UserSelectors.getCurrentUser);
 
+ readonly tableParams = computed<TableParameters>(() => ({
+ ...DEFAULT_TABLE_PARAMS,
+ totalRecords: this.moderatorsTotalCount(),
+ paginator: this.moderatorsTotalCount() > DEFAULT_TABLE_PARAMS.rows,
+ }));
+
  isCurrentUserAdminModerator = computed(() => {
  const currentUserId = this.currentUser()?.id;
  const initialModerators = this.initialModerators();
@@ -151,6 +161,13 @@ export class ModeratorsListComponent implements OnInit {
  });
  }
 
+ pageChanged(event: TablePageEvent) {
+ const page = Math.floor(event.first / event.rows) + 1;
+ const pageSize = event.rows;
+
+ this.actions.loadModerators(this.providerId(), this.resourceType(), page, pageSize);
+ }
+
  updateModerator(item: ModeratorModel) {
  this.actions
  .updateModerator(this.providerId(), this.resourceType(), item)

src/app/features/moderation/components/moderators-table/moderators-table.component.html

@@ -3,14 +3,13 @@
  [rows]="tableParams().rows"
  [first]="tableParams().firstRowIndex"
  [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
+ [paginator]="tableParams().paginator"
  [totalRecords]="tableParams().totalRecords"
- [resizableColumns]="true"
- [autoLayout]="true"
- [scrollable]="true"
- [sortMode]="'single'"
+ paginatorDropdownAppendTo="body"
+ [scrollable]="tableParams().scrollable"
  [lazy]="true"
  [lazyLoadOnInit]="true"
- [customSort]="true"
+ (onPage)="onPageChange($event)"
  class="view-only-table"
 >
  <ng-template #header>

src/app/features/moderation/components/moderators-table/moderators-table.component.ts

@@ -2,9 +2,9 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Skeleton } from 'primeng/skeleton';
-import { TableModule } from 'primeng/table';
+import { TableModule, TablePageEvent } from 'primeng/table';
 
-import { ChangeDetectionStrategy, Component, inject, input, output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 
@@ -16,7 +16,6 @@ import {
  EmploymentHistoryDialogComponent,
  SelectComponent,
 } from '@osf/shared/components';
-import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
 import { TableParameters } from '@osf/shared/models';
 import { CustomDialogService } from '@osf/shared/services';
 
@@ -30,20 +29,25 @@ import { CustomDialogService } from '@osf/shared/services';
 export class ModeratorsTableComponent {
  items = input<ModeratorModel[]>([]);
  isLoading = input(false);
+ tableParams = input.required<TableParameters>();
  currentUserId = input.required<string | undefined>();
  isCurrentUserAdminModerator = input.required<boolean>();
 
  update = output<ModeratorModel>();
  remove = output<ModeratorModel>();
+ pageChanged = output<TablePageEvent>();
 
  customDialogService = inject(CustomDialogService);
 
- readonly tableParams = signal<TableParameters>({ ...DEFAULT_TABLE_PARAMS });
  readonly permissionsOptions = MODERATION_PERMISSIONS;
  readonly ModeratorPermission = ModeratorPermission;
 
  skeletonData: ModeratorModel[] = Array.from({ length: 3 }, () => ({}) as ModeratorModel);
 
+ onPageChange(event: TablePageEvent): void {
+ this.pageChanged.emit(event);
+ }
+
  updatePermission(item: ModeratorModel) {
  this.update.emit(item);
  }

src/app/features/moderation/mappers/moderation.mapper.ts

@@ -4,6 +4,14 @@ import { AddModeratorType, ModeratorPermission } from '../enums';
 import { ModeratorAddModel, ModeratorAddRequestModel, ModeratorDataJsonApi, ModeratorModel } from '../models';
 
 export class ModerationMapper {
+ static getModerators(data: ModeratorDataJsonApi[]): ModeratorModel[] {
+ if (!data?.length) {
+ return [];
+ }
+
+ return data.map((moderator) => this.fromModeratorResponse(moderator));
+ }
+
  static fromModeratorResponse(response: ModeratorDataJsonApi): ModeratorModel {
  return {
  id: response.id,
@@ -28,6 +36,7 @@ export class ModerationMapper {
  }) as ModeratorAddModel
  ),
  totalCount: response.meta.total,
+ pageSize: response.meta.per_page,
  };
  }
 

src/app/features/moderation/mappers/preprint-moderation.mapper.ts

@@ -39,6 +39,7 @@ export class PreprintModerationMapper {
  return {
  data: response.data.map((x) => this.fromResponse(x)),
  totalCount: response.meta.total,
+ pageSize: response.meta.per_page,
  };
  }
 
@@ -64,6 +65,7 @@ export class PreprintModerationMapper {
  actions: [],
  })),
  totalCount: response.meta.total,
+ pageSize: response.meta.per_page,
  pendingCount: response.meta.reviews_state_counts.pending,
  acceptedCount: response.meta.reviews_state_counts.accepted,
  rejectedCount: response.meta.reviews_state_counts.rejected,
@@ -82,6 +84,7 @@ export class PreprintModerationMapper {
  actions: [],
  })),
  totalCount: response.meta.total,
+ pageSize: response.meta.per_page,
  pendingCount: response.meta.requests_state_counts.pending,
  acceptedCount: response.meta.requests_state_counts.accepted,
  rejectedCount: response.meta.requests_state_counts.rejected,

src/app/features/moderation/mappers/registry-moderation.mapper.ts

@@ -27,6 +27,7 @@ export class RegistryModerationMapper {
  return {
  data: response.data.map((x) => this.fromResponse(x)),
  totalCount: response.meta.total,
+ pageSize: response.meta.per_page,
  };
  }