fix(request-access): added request access list (#564)

Author: nsemets

src/app/core/components/request-access/request-access.component.ts

@@ -12,9 +12,9 @@ import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
-import { AuthService, RequestAccessService } from '@osf/core/services';
+import { AuthService } from '@core/services';
 import { InputLimits } from '@osf/shared/constants';
-import { LoaderService, ToastService } from '@osf/shared/services';
+import { LoaderService, RequestAccessService, ToastService } from '@osf/shared/services';
 
 @Component({
  selector: 'osf-request-access',

src/app/core/services/index.ts

@@ -1,4 +1,3 @@
 export { AuthService } from './auth.service';
-export { RequestAccessService } from './request-access.service';
 export { UserService } from './user.service';
 export { UserEmailsService } from './user-emails.service';

src/app/core/services/request-access.service.ts

@@ -1,4 +1,4 @@
-import { SendMessageRequest } from '@osf/features/admin-institutions/models';
+import { SendMessageRequest } from '../models';
 
 export function sendMessageRequestMapper(request: SendMessageRequest) {
  return {

src/app/features/admin-institutions/mappers/send-message-request.mapper.ts

@@ -87,6 +87,21 @@ <h1 class="py-5 px-3 md:px-5 xl:px-4">{{ 'navigation.contributors' | translate }
  </div>
  }
 
+ @if (showRequestAccessList()) {
+ <h1 class="my-4">{{ 'project.requestAccess.requestForAccess' | translate }}</h1>
+
+ <p class="mb-4">{{ 'project.requestAccess.followingUsers' | translate }}</p>
+
+ <osf-request-access-table
+ class="w-full"
+ [contributors]="requestAccessList()"
+ [isLoading]="areRequestAccessListLoading()"
+ [resourceType]="resourceType()"
+ (accept)="acceptRequest($event)"
+ (reject)="rejectRequest($event)"
+ ></osf-request-access-table>
+ }
+
  @if (isCurrentUserAdminContributor()) {
  <div class="flex flex-column row-gap-4 mt-6 w-full">
  <h2>{{ 'project.contributors.viewOnly' | translate }}</h2>

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

@@ -28,6 +28,7 @@ import {
  AddContributorDialogComponent,
  AddUnregisteredContributorDialogComponent,
  ContributorsTableComponent,
+ RequestAccessTableComponent,
 } from '@osf/shared/components/contributors';
 import { BIBLIOGRAPHY_OPTIONS, PERMISSION_OPTIONS } from '@osf/shared/constants';
 import { AddContributorType, ContributorPermission, ResourceType } from '@osf/shared/enums';
@@ -41,6 +42,7 @@ import {
 } from '@osf/shared/models';
 import { CustomConfirmationService, CustomDialogService, ToastService } from '@osf/shared/services';
 import {
+ AcceptRequestAccess,
  AddContributor,
  BulkAddContributors,
  BulkUpdateContributors,
@@ -51,7 +53,9 @@ import {
  DeleteViewOnlyLink,
  FetchViewOnlyLinks,
  GetAllContributors,
+ GetRequestAccessContributors,
  GetResourceDetails,
+ RejectRequestAccess,
  UpdateBibliographyFilter,
  UpdateContributorsSearchValue,
  UpdatePermissionFilter,
@@ -71,6 +75,7 @@ import { ResourceInfoModel } from './models';
  FormsModule,
  TableModule,
  ContributorsTableComponent,
+ RequestAccessTableComponent,
  ViewOnlyTableComponent,
  ],
  templateUrl: './contributors.component.html',
@@ -99,9 +104,11 @@ export class ContributorsComponent implements OnInit {
  readonly permissionsOptions: SelectOption[] = PERMISSION_OPTIONS;
  readonly bibliographyOptions: SelectOption[] = BIBLIOGRAPHY_OPTIONS;
 
- initialContributors = select(ContributorsSelectors.getContributors);
  contributors = signal<ContributorModel[]>([]);
 
+ readonly initialContributors = select(ContributorsSelectors.getContributors);
+ readonly requestAccessList = select(ContributorsSelectors.getRequestAccessList);
+ readonly areRequestAccessListLoading = select(ContributorsSelectors.areRequestAccessListLoading);
  readonly isContributorsLoading = select(ContributorsSelectors.isContributorsLoading);
  readonly isViewOnlyLinksLoading = select(ViewOnlyLinkSelectors.isViewOnlyLinksLoading);
  readonly currentUser = select(UserSelectors.getCurrentUser);
@@ -118,11 +125,19 @@ export class ContributorsComponent implements OnInit {
  const initialContributors = this.initialContributors();
  if (!currentUserId) return false;
 
- return initialContributors.some((contributor: ContributorModel) => {
- return contributor.userId === currentUserId && contributor.permission === ContributorPermission.Admin;
- });
+ return initialContributors.some(
+ (contributor: ContributorModel) =>
+ contributor.userId === currentUserId && contributor.permission === ContributorPermission.Admin
+ );
  });
 
+ showRequestAccessList = computed(
+ () =>
+ this.isCurrentUserAdminContributor() &&
+ this.requestAccessList().length &&
+ this.resourceType() === ResourceType.Project
+ );
+
  actions = createDispatchMap({
  getViewOnlyLinks: FetchViewOnlyLinks,
  getResourceDetails: GetResourceDetails,
@@ -136,6 +151,9 @@ export class ContributorsComponent implements OnInit {
  addContributor: AddContributor,
  createViewOnlyLink: CreateViewOnlyLink,
  deleteViewOnlyLink: DeleteViewOnlyLink,
+ getRequestAccessContributors: GetRequestAccessContributors,
+ acceptRequestAccess: AcceptRequestAccess,
+ rejectRequestAccess: RejectRequestAccess,
  });
 
  get hasChanges(): boolean {
@@ -166,6 +184,10 @@ export class ContributorsComponent implements OnInit {
  if (id) {
  this.actions.getResourceDetails(id, this.resourceType());
  this.actions.getContributors(id, this.resourceType());
+
+ if (this.resourceType() === ResourceType.Project) {
+ this.actions.getRequestAccessContributors(id, this.resourceType());
+ }
  }
 
  this.setSearchSubscription();
@@ -250,6 +272,38 @@ export class ContributorsComponent implements OnInit {
  });
  }
 
+ acceptRequest(contributor: ContributorModel) {
+ this.customConfirmationService.confirmAccept({
+ headerKey: 'project.requestAccess.acceptDialog.header',
+ messageKey: 'project.requestAccess.acceptDialog.message',
+ messageParams: { name: contributor.fullName },
+ acceptLabelKey: 'common.buttons.accept',
+ onConfirm: () => {
+ const payload = { permissions: contributor.permission };
+
+ this.actions
+ .acceptRequestAccess(contributor.id, this.resourceId(), this.resourceType(), payload)
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(() => this.toastService.showSuccess('project.requestAccess.acceptDialog.successMessage'));
+ },
+ });
+ }
+
+ rejectRequest(contributor: ContributorModel) {
+ this.customConfirmationService.confirmDelete({
+ headerKey: 'project.requestAccess.rejectDialog.header',
+ messageKey: 'project.requestAccess.rejectDialog.message',
+ messageParams: { name: contributor.fullName },
+ acceptLabelKey: 'common.buttons.reject',
+ onConfirm: () => {
+ this.actions
+ .rejectRequestAccess(contributor.id, this.resourceId(), this.resourceType())
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(() => this.toastService.showSuccess('project.requestAccess.rejectDialog.successMessage'));
+ },
+ });
+ }
+
  removeContributor(contributor: ContributorModel) {
  this.customConfirmationService.confirmDelete({
  headerKey: 'project.contributors.removeDialog.title',

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

@@ -9,7 +9,7 @@
  [lazy]="true"
  [lazyLoadOnInit]="true"
  [customSort]="true"
- [reorderableColumns]="true"
+ [reorderableColumns]="!deactivatedContributors()"
  (onRowReorder)="onRowReorder()"
  class="view-only-table"
 >
@@ -176,7 +176,7 @@
  </tr>
  } @else {
  <tr class="loading-row">
- <td colspan="7">
+ <td colspan="8">
  <p-skeleton width="100%" height="3.3rem" borderRadius="0" />
  </td>
  </tr>
@@ -185,7 +185,7 @@
 
  <ng-template pTemplate="emptymessage">
  <tr>
- <td colspan="7" class="text-center">{{ 'project.contributors.table.emptyMessage' | translate }}</td>
+ <td colspan="8" class="text-center">{{ 'project.contributors.table.emptyMessage' | translate }}</td>
  </tr>
  </ng-template>
 </p-table>

src/app/shared/components/contributors/contributors-table/contributors-table.component.html

@@ -9,14 +9,14 @@ import { Tooltip } from 'primeng/tooltip';
 import { ChangeDetectionStrategy, Component, computed, inject, input, model, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { EducationHistoryDialogComponent } from '@osf/shared/components/education-history-dialog/education-history-dialog.component';
-import { EmploymentHistoryDialogComponent } from '@osf/shared/components/employment-history-dialog/employment-history-dialog.component';
 import { SelectComponent } from '@osf/shared/components/select/select.component';
 import { DEFAULT_TABLE_PARAMS, PERMISSION_OPTIONS } from '@osf/shared/constants';
 import { ContributorPermission, ResourceType } from '@osf/shared/enums';
 import { ContributorModel, SelectOption, TableParameters } from '@osf/shared/models';
 import { CustomDialogService } from '@osf/shared/services';
 
+import { EducationHistoryDialogComponent } from '../../education-history-dialog/education-history-dialog.component';
+import { EmploymentHistoryDialogComponent } from '../../employment-history-dialog/employment-history-dialog.component';
 import { IconComponent } from '../../icon/icon.component';
 import { InfoIconComponent } from '../../info-icon/info-icon.component';
 

src/app/shared/components/contributors/contributors-table/contributors-table.component.ts

@@ -1,3 +1,4 @@
 export * from './add-contributor-dialog/add-contributor-dialog.component';
 export * from './add-unregistered-contributor-dialog/add-unregistered-contributor-dialog.component';
 export * from './contributors-table/contributors-table.component';
+export * from './request-access-table/request-access-table.component';