fix(users-search): changed api for user search

Author: nsemets

src/app/features/moderation/components/add-moderator-dialog/add-moderator-dialog.component.html

@@ -11,7 +11,7 @@
       @for (item of users(); track $index) {
         <div class="border-divider flex pb-3">
           <p-checkbox variant="filled" [value]="item" [inputId]="item.id" [(ngModel)]="selectedUsers"></p-checkbox>
-          <label class="label mb-0 ml-2 cursor-pointer" [for]="item.id">{{ item.fullName }}</label>
+          <a class="ml-2 font-bold" [href]="item.id" target="_blank">{{ item.fullName }}</a>
         </div>
       }
 
@@ -27,6 +27,7 @@
       [first]="first()"
       [rows]="rows()"
       [totalCount]="totalUsersCount()"
+      [showPageLinks]="false"
       (pageChanged)="pageChanged($event)"
     ></osf-custom-paginator>
   }

src/app/features/moderation/components/add-moderator-dialog/add-moderator-dialog.component.ts

@@ -19,7 +19,7 @@ import { SearchInputComponent } from '@osf/shared/components/search-input/search
 
 import { AddModeratorType } from '../../enums';
 import { ModeratorAddModel, ModeratorDialogAddModel } from '../../models';
-import { ClearUsers, ModeratorsSelectors, SearchUsers } from '../../store/moderators';
+import { ClearUsers, ModeratorsSelectors, SearchUsers, SearchUsersPageChange } from '../../store/moderators';
 
 @Component({
   selector: 'osf-add-moderator-dialog',
@@ -44,6 +44,8 @@ export class AddModeratorDialogComponent implements OnInit, OnDestroy {
   users = select(ModeratorsSelectors.getUsers);
   isLoading = select(ModeratorsSelectors.isUsersLoading);
   totalUsersCount = select(ModeratorsSelectors.getUsersTotalCount);
+  usersNextLink = select(ModeratorsSelectors.getUsersNextLink);
+  usersPreviousLink = select(ModeratorsSelectors.getUsersPreviousLink);
   isInitialState = signal(true);
 
   currentPage = signal(1);
@@ -53,7 +55,11 @@ export class AddModeratorDialogComponent implements OnInit, OnDestroy {
   selectedUsers = signal<ModeratorAddModel[]>([]);
   searchControl = new FormControl<string>('');
 
-  actions = createDispatchMap({ searchUsers: SearchUsers, clearUsers: ClearUsers });
+  actions = createDispatchMap({
+    searchUsers: SearchUsers,
+    searchUsersPageChange: SearchUsersPageChange,
+    clearUsers: ClearUsers,
+  });
 
   ngOnInit(): void {
     this.setSearchSubscription();
@@ -74,10 +80,32 @@ export class AddModeratorDialogComponent implements OnInit, OnDestroy {
     this.dialogRef.close(dialogData);
   }
 
-  pageChanged(event: PaginatorState) {
-    this.currentPage.set(event.page ? this.currentPage() + 1 : 1);
-    this.first.set(event.first ?? 0);
-    this.actions.searchUsers(this.searchControl.value, this.currentPage());
+  pageChanged(event: PaginatorState): void {
+    if (event.page === undefined) {
+      return;
+    }
+
+    const eventPageOneBased = event.page + 1;
+
+    if (eventPageOneBased === 1) {
+      const searchTerm = this.searchControl.value?.trim();
+
+      if (searchTerm) {
+        this.actions.searchUsers(searchTerm);
+        this.currentPage.set(1);
+        this.first.set(0);
+      }
+
+      return;
+    }
+
+    const link = eventPageOneBased > this.currentPage() ? this.usersNextLink() : this.usersPreviousLink();
+
+    if (link) {
+      this.actions.searchUsersPageChange(link);
+      this.currentPage.set(eventPageOneBased);
+      this.first.set(event.first ?? 0);
+    }
   }
 
   private setSearchSubscription() {
@@ -86,7 +114,7 @@ export class AddModeratorDialogComponent implements OnInit, OnDestroy {
         filter((searchTerm) => !!searchTerm && searchTerm.trim().length > 0),
         debounceTime(500),
         distinctUntilChanged(),
-        switchMap((searchTerm) => this.actions.searchUsers(searchTerm, this.currentPage())),
+        switchMap((searchTerm) => this.actions.searchUsers(searchTerm)),
         takeUntilDestroyed(this.destroyRef)
       )
       .subscribe(() => {

src/app/features/moderation/services/moderators.service.ts

@@ -1,16 +1,19 @@
-import { map, Observable } from 'rxjs';
+import { forkJoin, map, Observable } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { ResourceType } from '@osf/shared/enums/resource-type.enum';
-import { JsonApiResponse, ResponseJsonApi } from '@osf/shared/models/common/json-api.model';
+import { parseSearchTotalCount } from '@osf/shared/helpers/search-total-count.helper';
+import { MapResources } from '@osf/shared/mappers/search';
+import { JsonApiResponse } from '@osf/shared/models/common/json-api.model';
 import { PaginatedData } from '@osf/shared/models/paginated-data.model';
-import { UserDataJsonApi } from '@osf/shared/models/user/user-json-api.model';
+import { IndexCardSearchResponseJsonApi } from '@osf/shared/models/search/index-card-search-json-api.models';
+import { SearchUserDataModel } from '@osf/shared/models/user/search-user-data.model';
 import { JsonApiService } from '@osf/shared/services/json-api.service';
 import { StringOrNull } from '@shared/helpers/types.helper';
 
-import { AddModeratorType } from '../enums';
+import { AddModeratorType, ModeratorPermission } from '../enums';
 import { ModerationMapper } from '../mappers';
 import { ModeratorAddModel, ModeratorDataJsonApi, ModeratorModel, ModeratorResponseJsonApi } from '../models';
 
@@ -25,6 +28,14 @@ export class ModeratorsService {
     return `${this.environment.apiDomainUrl}/v2`;
   }
 
+  get shareTroveUrl() {
+    return this.environment.shareTroveUrl;
+  }
+
+  get webUrl() {
+    return this.environment.webUrl;
+  }
+
   private readonly urlMap = new Map<ResourceType, string>([
     [ResourceType.Collection, 'providers/collections'],
     [ResourceType.Registration, 'providers/registrations'],
@@ -84,11 +95,86 @@ export class ModeratorsService {
     return this.jsonApiService.delete(baseUrl);
   }
 
-  searchUsers(value: string, page = 1): Observable<PaginatedData<ModeratorAddModel[]>> {
-    const baseUrl = `${this.apiUrl}/search/users/?q=${value}*&page=${page}`;
+  searchUsers(value: string, pageSize = 10): Observable<SearchUserDataModel<ModeratorAddModel[]>> {
+    if (value.length === 5) {
+      return forkJoin([this.searchUsersByName(value, pageSize), this.searchUsersById(value, pageSize)]).pipe(
+        map(([nameResults, idResults]) => {
+          const users = [...nameResults.users];
+          const existingIds = new Set(users.map((u) => u.id));
+
+          idResults.users.forEach((user) => {
+            if (!existingIds.has(user.id)) {
+              users.push(user);
+              existingIds.add(user.id);
+            }
+          });
+
+          return {
+            users,
+            totalCount: nameResults.totalCount + idResults.totalCount,
+            next: nameResults.next,
+            previous: nameResults.previous,
+          };
+        })
+      );
+    } else {
+      return this.searchUsersByName(value, pageSize);
+    }
+  }
+
+  searchUsersByName(value: string, pageSize = 10): Observable<SearchUserDataModel<ModeratorAddModel[]>> {
+    const baseUrl = `${this.shareTroveUrl}/index-card-search`;
+    const params = {
+      'cardSearchFilter[resourceType]': 'Person',
+      'cardSearchFilter[accessService]': this.webUrl,
+      'cardSearchText[name]': `${value}*`,
+      acceptMediatype: 'application/vnd.api+json',
+      'page[size]': pageSize,
+    };
 
     return this.jsonApiService
-      .get<ResponseJsonApi<UserDataJsonApi[]>>(baseUrl)
-      .pipe(map((response) => ModerationMapper.fromUsersWithPaginationGetResponse(response)));
+      .get<IndexCardSearchResponseJsonApi>(baseUrl, params)
+      .pipe(map((response) => this.handleResourcesRawResponse(response)));
+  }
+
+  searchUsersById(value: string, pageSize = 10): Observable<SearchUserDataModel<ModeratorAddModel[]>> {
+    const baseUrl = `${this.shareTroveUrl}/index-card-search`;
+    const params = {
+      'cardSearchFilter[resourceType]': 'Person',
+      'cardSearchFilter[accessService]': this.webUrl,
+      'cardSearchFilter[sameAs]': `${this.webUrl}/${value}`,
+      acceptMediatype: 'application/vnd.api+json',
+      'page[size]': pageSize,
+    };
+
+    return this.jsonApiService
+      .get<IndexCardSearchResponseJsonApi>(baseUrl, params)
+      .pipe(map((response) => this.handleResourcesRawResponse(response)));
+  }
+
+  getUsersByLink(link: string): Observable<SearchUserDataModel<ModeratorAddModel[]>> {
+    return this.jsonApiService
+      .get<IndexCardSearchResponseJsonApi>(link)
+      .pipe(map((response) => this.handleResourcesRawResponse(response)));
+  }
+
+  private handleResourcesRawResponse(
+    response: IndexCardSearchResponseJsonApi
+  ): SearchUserDataModel<ModeratorAddModel[]> {
+    const users = MapResources(response).map(
+      (user) =>
+        ({
+          id: user.absoluteUrl.split('/').pop(),
+          fullName: user.name,
+          permission: ModeratorPermission.Moderator,
+        }) as ModeratorAddModel
+    );
+
+    return {
+      users,
+      totalCount: parseSearchTotalCount(response),
+      next: response.data?.relationships?.searchResultPage.links?.next?.href ?? null,
+      previous: response.data?.relationships?.searchResultPage.links?.prev?.href ?? null,
+    };
   }
 }

src/app/features/moderation/store/moderators/moderators.actions.ts

@@ -54,10 +54,13 @@ export class UpdateModeratorsSearchValue {
 
 export class SearchUsers {
   static readonly type = `${ACTION_SCOPE} Search Users`;
-  constructor(
-    public searchValue: string | null,
-    public page: number
-  ) {}
+  constructor(public searchValue: string | null) {}
+}
+
+export class SearchUsersPageChange {
+  static readonly type = `${ACTION_SCOPE} Search Users Page Change`;
+
+  constructor(public link: string) {}
 }
 
 export class ClearUsers {

src/app/features/moderation/store/moderators/moderators.model.ts

@@ -4,13 +4,18 @@ import { ModeratorAddModel, ModeratorModel } from '../../models';
 
 export interface ModeratorsStateModel {
   moderators: ModeratorsDataStateModel;
-  users: AsyncStateWithTotalCount<ModeratorAddModel[]>;
+  users: UserListModel;
 }
 
 interface ModeratorsDataStateModel extends AsyncStateWithTotalCount<ModeratorModel[]> {
   searchValue: string | null;
 }
 
+interface UserListModel extends AsyncStateWithTotalCount<ModeratorAddModel[]> {
+  next: string | null;
+  previous: string | null;
+}
+
 export const MODERATORS_STATE_DEFAULTS: ModeratorsStateModel = {
   moderators: {
     data: [],
@@ -24,5 +29,7 @@ export const MODERATORS_STATE_DEFAULTS: ModeratorsStateModel = {
     isLoading: false,
     error: null,
     totalCount: 0,
+    next: null,
+    previous: null,
   },
 };

src/app/features/moderation/store/moderators/moderators.selectors.ts

@@ -39,4 +39,14 @@ export class ModeratorsSelectors {
   static getUsersTotalCount(state: ModeratorsStateModel): number {
     return state.users.totalCount;
   }
+
+  @Selector([ModeratorsState])
+  static getUsersNextLink(state: ModeratorsStateModel) {
+    return state?.users?.next || null;
+  }
+
+  @Selector([ModeratorsState])
+  static getUsersPreviousLink(state: ModeratorsStateModel) {
+    return state?.users?.previous || null;
+  }
 }

src/app/features/moderation/store/moderators/moderators.state.ts

@@ -16,6 +16,7 @@ import {
   DeleteModerator,
   LoadModerators,
   SearchUsers,
+  SearchUsersPageChange,
   UpdateModerator,
   UpdateModeratorsSearchValue,
 } from './moderators.actions';
@@ -141,14 +142,43 @@ export class ModeratorsState {
       return of([]);
     }
 
-    return this.moderatorsService.searchUsers(action.searchValue, action.page).pipe(
-      tap((users) => {
+    return this.moderatorsService.searchUsers(action.searchValue).pipe(
+      tap((response) => {
         ctx.patchState({
           users: {
-            data: users.data.filter((user) => !addedModeratorsIds.includes(user.id!)),
+            data: response.users.filter((user) => !addedModeratorsIds.includes(user.id!)),
             isLoading: false,
             error: '',
-            totalCount: users.totalCount,
+            totalCount: response.totalCount,
+            next: response.next,
+            previous: response.previous,
+          },
+        });
+      }),
+      catchError((error) => handleSectionError(ctx, 'users', error))
+    );
+  }
+
+  @Action(SearchUsersPageChange)
+  searchUsersPageChange(ctx: StateContext<ModeratorsStateModel>, action: SearchUsersPageChange) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      users: { ...state.users, isLoading: true, error: null },
+    });
+
+    const addedModeratorsIds = state.moderators.data.map((moderator) => moderator.userId);
+
+    return this.moderatorsService.getUsersByLink(action.link).pipe(
+      tap((response) => {
+        ctx.patchState({
+          users: {
+            data: response.users.filter((user) => !addedModeratorsIds.includes(user.id!)),
+            isLoading: false,
+            error: '',
+            totalCount: response.totalCount,
+            next: response.next,
+            previous: response.previous,
           },
         });
       }),
@@ -158,6 +188,8 @@ export class ModeratorsState {
 
   @Action(ClearUsers)
   clearUsers(ctx: StateContext<ModeratorsStateModel>) {
-    ctx.patchState({ users: { data: [], isLoading: false, error: null, totalCount: 0 } });
+    ctx.patchState({
+      users: { data: [], isLoading: false, error: null, totalCount: 0, next: null, previous: null },
+    });
   }
 }

src/app/shared/components/contributors/add-contributor-dialog/add-contributor-dialog.component.html

@@ -31,6 +31,7 @@
       <osf-custom-paginator
         [first]="first()"
         [totalCount]="totalUsersCount()"
+        [showPageLinks]="false"
         (pageChanged)="pageChanged($event)"
       ></osf-custom-paginator>
     }