[ANG-1075] [ANG-1073] Fix contributor pagination part 1 (#672)

* fix(bugs): fixed ui bugs

* fix(contributors): fixed pagination for contributors

Author: nsemets

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

@@ -123,11 +123,15 @@ export class ContributorsComponent implements OnInit {
   readonly hasAdminAccess = select(CurrentResourceSelectors.hasResourceAdminAccess);
   readonly resourceAccessRequestEnabled = select(CurrentResourceSelectors.resourceAccessRequestEnabled);
   readonly currentUser = select(UserSelectors.getCurrentUser);
+  page = select(ContributorsSelectors.getContributorsPageNumber);
+  pageSize = select(ContributorsSelectors.getContributorsPageSize);
 
   readonly tableParams = computed<TableParameters>(() => ({
     ...DEFAULT_TABLE_PARAMS,
     totalRecords: this.contributorsTotalCount(),
     paginator: this.contributorsTotalCount() > DEFAULT_TABLE_PARAMS.rows,
+    firstRowIndex: (this.page() - 1) * this.pageSize(),
+    rows: this.pageSize(),
   }));
 
   canCreateViewLink = computed(() => !!this.resourceDetails() && !!this.resourceId());

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

@@ -1,6 +1,6 @@
 <div class="contributors-dialog flex flex-column gap-4">
   <div class="flex justify-content-end align-items-center">
-    @if (isCurrentUserAdminContributor()) {
+    @if (hasAdminAccess()) {
       <p-button
         [label]="'project.contributors.addContributor' | translate"
         [disabled]="isLoading()"
@@ -21,9 +21,10 @@
     [isLoading]="isLoading()"
     [showEmployment]="false"
     [showEducation]="false"
-    [hasAdminAccess]="isCurrentUserAdminContributor()"
+    [hasAdminAccess]="hasAdminAccess()"
     [currentUserId]="currentUser()?.id"
     (remove)="removeContributor($event)"
+    (pageChanged)="pageChanged($event)"
   ></osf-contributors-table>
 
   @if (hasChanges) {

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

@@ -4,6 +4,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { TablePageEvent } from 'primeng/table';
 
 import { filter } from 'rxjs';
 
@@ -29,7 +30,7 @@ import {
   ContributorsTableComponent,
 } from '@osf/shared/components/contributors';
 import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
-import { AddContributorType, ContributorPermission, ResourceType } from '@osf/shared/enums';
+import { AddContributorType, ResourceType } from '@osf/shared/enums';
 import { findChangedItems } from '@osf/shared/helpers';
 import { ContributorDialogAddModel, ContributorModel, TableParameters } from '@osf/shared/models';
 import { CustomConfirmationService, CustomDialogService, ToastService } from '@osf/shared/services';
@@ -39,11 +40,14 @@ import {
   BulkUpdateContributors,
   ContributorsSelectors,
   DeleteContributor,
+  GetAllContributors,
   UpdateBibliographyFilter,
   UpdateContributorsSearchValue,
   UpdatePermissionFilter,
 } from '@osf/shared/stores';
 
+import { MetadataSelectors } from '../../store';
+
 @Component({
   selector: 'osf-contributors-dialog',
   imports: [Button, SearchInputComponent, TranslatePipe, FormsModule, ContributorsTableComponent],
@@ -64,17 +68,23 @@ export class ContributorsDialogComponent implements OnInit {
   isLoading = select(ContributorsSelectors.isContributorsLoading);
   initialContributors = select(ContributorsSelectors.getContributors);
   contributorsTotalCount = select(ContributorsSelectors.getContributorsTotalCount);
+  hasAdminAccess = select(MetadataSelectors.hasAdminAccess);
   contributors = signal<ContributorModel[]>([]);
+  page = select(ContributorsSelectors.getContributorsPageNumber);
+  pageSize = select(ContributorsSelectors.getContributorsPageSize);
 
   currentUser = select(UserSelectors.getCurrentUser);
 
   readonly tableParams = computed<TableParameters>(() => ({
     ...DEFAULT_TABLE_PARAMS,
     totalRecords: this.contributorsTotalCount(),
     paginator: this.contributorsTotalCount() > DEFAULT_TABLE_PARAMS.rows,
+    firstRowIndex: (this.page() - 1) * this.pageSize(),
+    rows: this.pageSize(),
   }));
 
   actions = createDispatchMap({
+    getContributors: GetAllContributors,
     updateSearchValue: UpdateContributorsSearchValue,
     updatePermissionFilter: UpdatePermissionFilter,
     updateBibliographyFilter: UpdateBibliographyFilter,
@@ -87,17 +97,6 @@ export class ContributorsDialogComponent implements OnInit {
   private readonly resourceType: ResourceType;
   private readonly resourceId: string;
 
-  isCurrentUserAdminContributor = computed(() => {
-    const currentUserId = this.currentUser()?.id;
-    const initialContributors = this.initialContributors();
-    if (!currentUserId) return false;
-
-    return initialContributors.some(
-      (contributor: ContributorModel) =>
-        contributor.userId === currentUserId && contributor.permission === ContributorPermission.Admin
-    );
-  });
-
   get searchPlaceholder() {
     return this.resourceType === ResourceType.Project
       ? 'project.contributors.searchProjectPlaceholder'
@@ -207,6 +206,13 @@ export class ContributorsDialogComponent 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);
+  }
+
   cancel() {
     this.contributors.set(structuredClone(this.initialContributors()));
   }

src/app/features/metadata/metadata.component.ts

@@ -19,7 +19,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { MetadataTabsComponent, SubHeaderComponent } from '@osf/shared/components';
-import { MetadataResourceEnum, ResourceType, UserPermissions } from '@osf/shared/enums';
+import { MetadataResourceEnum, ResourceType } from '@osf/shared/enums';
 import { MetadataTabsModel, SubjectModel } from '@osf/shared/models';
 import { CustomConfirmationService, CustomDialogService, ToastService } from '@osf/shared/services';
 import {
@@ -136,6 +136,9 @@ export class MetadataComponent implements OnInit {
   areInstitutionsLoading = select(InstitutionsSelectors.areResourceInstitutionsLoading);
   areResourceInstitutionsSubmitting = select(InstitutionsSelectors.areResourceInstitutionsSubmitting);
 
+  hasWriteAccess = select(MetadataSelectors.hasWriteAccess);
+  hasAdminAccess = select(MetadataSelectors.hasAdminAccess);
+
   provider = this.environment.defaultProvider;
 
   private readonly resourceNameMap = new Map<ResourceType, string>([
@@ -166,37 +169,23 @@ export class MetadataComponent implements OnInit {
     updateContributorsSearchValue: UpdateContributorsSearchValue,
   });
 
-  isLoading = computed(() => {
-    return (
+  isLoading = computed(
+    () =>
       this.isMetadataLoading() ||
       this.isContributorsLoading() ||
       this.areInstitutionsLoading() ||
       this.isSubmitting() ||
       this.areResourceInstitutionsSubmitting()
-    );
-  });
+  );
 
-  hideEditDoi = computed(() => {
-    return (
+  hideEditDoi = computed(
+    () =>
       this.resourceType() === ResourceType.Project &&
       (!!this.metadata()?.identifiers?.length || !this.metadata()?.public)
-    );
-  });
+  );
 
   isRegistrationType = computed(() => this.resourceType() === ResourceType.Registration);
 
-  hasWriteAccess = computed(() => {
-    const metadata = this.metadata();
-    if (!metadata) return false;
-    return metadata.currentUserPermissions.includes(UserPermissions.Write);
-  });
-
-  hasAdminAccess = computed(() => {
-    const metadata = this.metadata();
-    if (!metadata) return false;
-    return metadata.currentUserPermissions.includes(UserPermissions.Admin);
-  });
-
   constructor() {
     effect(() => {
       const records = this.cedarRecords();

src/app/features/metadata/store/metadata.selectors.ts

@@ -1,5 +1,7 @@
 import { Selector } from '@ngxs/store';
 
+import { UserPermissions } from '@osf/shared/enums';
+
 import { MetadataStateModel } from './metadata.model';
 import { MetadataState } from './metadata.state';
 
@@ -63,4 +65,14 @@ export class MetadataSelectors {
   static getCedarRecordsLoading(state: MetadataStateModel) {
     return state.cedarRecords.isLoading;
   }
+
+  @Selector([MetadataState])
+  static hasWriteAccess(state: MetadataStateModel): boolean {
+    return state.metadata.data?.currentUserPermissions?.includes(UserPermissions.Write) || false;
+  }
+
+  @Selector([MetadataState])
+  static hasAdminAccess(state: MetadataStateModel): boolean {
+    return state.metadata.data?.currentUserPermissions?.includes(UserPermissions.Admin) || false;
+  }
 }

src/app/features/preprints/components/stepper/preprints-metadata-step/preprints-contributors/preprints-contributors.component.html

@@ -11,26 +11,23 @@ <h2>{{ 'project.overview.metadata.contributors' | translate }}</h2>
     class="w-full"
     [(contributors)]="contributors"
     [tableParams]="tableParams()"
-    [currentUserId]="currentUser()?.id"
-    [hasAdminAccess]="isCurrentUserAdminContributor()"
     [isLoading]="isContributorsLoading()"
     (remove)="removeContributor($event)"
+    (pageChanged)="pageChanged($event)"
   />
   <div class="flex justify-content-end mt-3">
     @if (hasChanges) {
       <div class="flex gap-2 mr-4">
-        <p-button (click)="cancel()" severity="info" [label]="'common.buttons.cancel' | translate" />
-        <p-button (click)="save()" [label]="'common.buttons.save' | translate" />
+        <p-button (onClick)="cancel()" severity="info" [label]="'common.buttons.cancel' | translate" />
+        <p-button (onClick)="save()" [label]="'common.buttons.save' | translate" />
       </div>
     }
-    @if (isCurrentUserAdminContributor()) {
-      <p-button
-        class="w-full md:w-auto"
-        styleClass="w-full"
-        [label]="'preprints.addContributorBySearch' | translate"
-        type="submit"
-        (onClick)="openAddContributorDialog()"
-      />
-    }
+    <p-button
+      class="w-full md:w-auto"
+      styleClass="w-full"
+      [label]="'preprints.addContributorBySearch' | translate"
+      type="submit"
+      (onClick)="openAddContributorDialog()"
+    />
   </div>
 </p-card>

src/app/features/preprints/components/stepper/preprints-metadata-step/preprints-contributors/preprints-contributors.component.ts

@@ -5,7 +5,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { Message } from 'primeng/message';
-import { TableModule } from 'primeng/table';
+import { TableModule, TablePageEvent } from 'primeng/table';
 
 import { filter } from 'rxjs';
 
@@ -24,14 +24,13 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 
-import { UserSelectors } from '@core/store/user';
 import {
   AddContributorDialogComponent,
   AddUnregisteredContributorDialogComponent,
   ContributorsTableComponent,
 } from '@osf/shared/components/contributors';
 import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
-import { AddContributorType, ContributorPermission, ResourceType } from '@osf/shared/enums';
+import { AddContributorType, ResourceType } from '@osf/shared/enums';
 import { findChangedItems } from '@osf/shared/helpers';
 import { ContributorDialogAddModel, ContributorModel, TableParameters } from '@osf/shared/models';
 import { CustomConfirmationService, CustomDialogService, ToastService } from '@osf/shared/services';
@@ -64,25 +63,17 @@ export class PreprintsContributorsComponent implements OnInit {
   contributors = signal<ContributorModel[]>([]);
   contributorsTotalCount = select(ContributorsSelectors.getContributorsTotalCount);
   isContributorsLoading = select(ContributorsSelectors.isContributorsLoading);
-  currentUser = select(UserSelectors.getCurrentUser);
+  page = select(ContributorsSelectors.getContributorsPageNumber);
+  pageSize = select(ContributorsSelectors.getContributorsPageSize);
 
   readonly tableParams = computed<TableParameters>(() => ({
     ...DEFAULT_TABLE_PARAMS,
     totalRecords: this.contributorsTotalCount(),
     paginator: this.contributorsTotalCount() > DEFAULT_TABLE_PARAMS.rows,
+    firstRowIndex: (this.page() - 1) * this.pageSize(),
+    rows: this.pageSize(),
   }));
 
-  isCurrentUserAdminContributor = computed(() => {
-    const currentUserId = this.currentUser()?.id;
-    const initialContributors = this.initialContributors();
-    if (!currentUserId) return false;
-
-    return initialContributors.some(
-      (contributor: ContributorModel) =>
-        contributor.userId === currentUserId && contributor.permission === ContributorPermission.Admin
-    );
-  });
-
   actions = createDispatchMap({
     getContributors: GetAllContributors,
     deleteContributor: DeleteContributor,
@@ -171,29 +162,30 @@ export class PreprintsContributorsComponent implements OnInit {
   }
 
   removeContributor(contributor: ContributorModel) {
-    const isDeletingSelf = contributor.userId === this.currentUser()?.id;
-
     this.customConfirmationService.confirmDelete({
       headerKey: 'project.contributors.removeDialog.title',
       messageKey: 'project.contributors.removeDialog.message',
       messageParams: { name: contributor.fullName },
       acceptLabelKey: 'common.buttons.remove',
       onConfirm: () => {
         this.actions
-          .deleteContributor(this.preprintId(), ResourceType.Preprint, contributor.userId, isDeletingSelf)
+          .deleteContributor(this.preprintId(), ResourceType.Preprint, contributor.userId)
           .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe({
             next: () => {
               this.toastService.showSuccess('project.contributors.removeDialog.successMessage', {
                 name: contributor.fullName,
               });
-
-              if (isDeletingSelf) {
-                this.router.navigate(['/']);
-              }
             },
           });
       },
     });
   }
+
+  pageChanged(event: TablePageEvent) {
+    const page = Math.floor(event.first / event.rows) + 1;
+    const pageSize = event.rows;
+
+    this.actions.getContributors(this.preprintId(), ResourceType.Preprint, page, pageSize);
+  }
 }

src/app/features/registries/components/registries-metadata-step/registries-contributors/registries-contributors.component.html

@@ -6,9 +6,8 @@ <h2 class="mb-2">{{ 'project.overview.metadata.contributors' | translate }}</h2>
     [(contributors)]="contributors"
     [tableParams]="tableParams()"
     [isLoading]="isContributorsLoading()"
-    [currentUserId]="currentUser()?.id"
-    [hasAdminAccess]="isCurrentUserAdminContributor()"
     (remove)="removeContributor($event)"
+    (pageChanged)="pageChanged($event)"
   />
 
   <div class="flex justify-content-end mt-3">