[ENG-10047] Display Affiliated Institution(s) on User Profile Page

src/app/features/profile/components/profile-information/profile-information.component.html

@@ -35,6 +35,25 @@ <h1>{{ currentUser()?.fullName }}</h1>
         }
       </div>
 
+      <div class="flex flex-wrap align-items-center gap-3">
+        @for (institution of currentUserInstitutions(); track $index) {
+          <a
+            class="cursor-pointer custom-light-hover"
+            [routerLink]="['/institutions', institution.id]"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              [ngSrc]="institution.assets.logo"
+              class="fit-contain"
+              width="80"
+              height="80"
+              [alt]="institution.name"
+            />
+          </a>
+        }
+      </div>
+
       @if (!isMedium() && showEdit()) {
         <div class="btn-full-width">
           <p-button

src/app/features/profile/components/profile-information/profile-information.component.ts

@@ -5,13 +5,15 @@ import { Button } from 'primeng/button';
 import { DatePipe, NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { RouterLink } from '@angular/router';
 
 import { EducationHistoryComponent } from '@osf/shared/components/education-history/education-history.component';
 import { EmploymentHistoryComponent } from '@osf/shared/components/employment-history/employment-history.component';
 import { SOCIAL_LINKS } from '@osf/shared/constants/social-links.const';
 import { IS_MEDIUM } from '@osf/shared/helpers/breakpoints.tokens';
 import { UserModel } from '@osf/shared/models/user/user.models';
 import { SortByDatePipe } from '@osf/shared/pipes/sort-by-date.pipe';
+import { Institution } from '@shared/models/institutions/institutions.models';
 
 import { mapUserSocials } from '../../helpers';
 
@@ -25,13 +27,15 @@ import { mapUserSocials } from '../../helpers';
     DatePipe,
     NgOptimizedImage,
     SortByDatePipe,
+    RouterLink,
   ],
   templateUrl: './profile-information.component.html',
   styleUrl: './profile-information.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfileInformationComponent {
   currentUser = input<UserModel | null>();
+  currentUserInstitutions = input<Institution[]>();
   showEdit = input(false);
   editProfile = output<void>();
 

src/app/features/profile/profile.component.html

@@ -13,7 +13,12 @@
           </ng-template>
         </p-message>
       }
-      <osf-profile-information [currentUser]="user()" [showEdit]="isMyProfile()" (editProfile)="toProfileSettings()" />
+      <osf-profile-information
+        [currentUserInstitutions]="institutions() || []"
+        [currentUser]="user()"
+        [showEdit]="isMyProfile()"
+        (editProfile)="toProfileSettings()"
+      />
     </div>
 
     @if (defaultSearchFiltersInitialized()) {

src/app/features/profile/profile.component.ts

@@ -25,6 +25,7 @@ import { SEARCH_TAB_OPTIONS } from '@osf/shared/constants/search-tab-options.con
 import { ResourceType } from '@osf/shared/enums/resource-type.enum';
 import { UserModel } from '@osf/shared/models/user/user.models';
 import { SetDefaultFilterValue } from '@osf/shared/stores/global-search';
+import { FetchUserInstitutions, InstitutionsSelectors } from '@shared/stores/institutions';
 
 import { ProfileInformationComponent } from './components';
 import { FetchUserProfile, ProfileSelectors, SetUserProfile } from './store';
@@ -46,11 +47,13 @@ export class ProfileComponent implements OnInit, OnDestroy {
     fetchUserProfile: FetchUserProfile,
     setDefaultFilterValue: SetDefaultFilterValue,
     setUserProfile: SetUserProfile,
+    fetchUserInstitutions: FetchUserInstitutions,
   });
 
   loggedInUser = select(UserSelectors.getCurrentUser);
   userProfile = select(ProfileSelectors.getUserProfile);
   isUserLoading = select(ProfileSelectors.isUserProfileLoading);
+  institutions = select(InstitutionsSelectors.getUserInstitutions);
 
   resourceTabOptions = SEARCH_TAB_OPTIONS.filter((x) => x.value !== ResourceType.Agent);
 
@@ -67,6 +70,8 @@ export class ProfileComponent implements OnInit, OnDestroy {
     } else if (currentUser) {
       this.setupMyProfile(currentUser);
     }
+
+    this.actions.fetchUserInstitutions(userId || currentUser?.id);
   }
 
   ngOnDestroy(): void {

src/app/features/settings/account-settings/store/account-settings.actions.ts

@@ -24,6 +24,8 @@ export class DeleteExternalIdentity {
 
 export class GetUserInstitutions {
   static readonly type = '[AccountSettings] Get User Institutions';
+
+  constructor(public userId = 'me') {}
 }
 
 export class DeleteUserInstitution {

src/app/features/settings/account-settings/store/account-settings.state.ts

@@ -84,8 +84,8 @@ export class AccountSettingsState {
   }
 
   @Action(GetUserInstitutions)
-  getUserInstitutions(ctx: StateContext<AccountSettingsStateModel>) {
-    return this.institutionsService.getUserInstitutions().pipe(
+  getUserInstitutions(ctx: StateContext<AccountSettingsStateModel>, action: GetUserInstitutions) {
+    return this.institutionsService.getUserInstitutions(action.userId).pipe(
       tap((userInstitutions) => ctx.patchState({ userInstitutions })),
       catchError((error) => throwError(() => error))
     );

src/app/shared/services/institutions.service.ts

@@ -47,8 +47,8 @@ export class InstitutionsService {
       .pipe(map((response) => InstitutionsMapper.fromResponseWithMeta(response)));
   }
 
-  getUserInstitutions(): Observable<Institution[]> {
-    const url = `${this.apiUrl}/users/me/institutions/`;
+  getUserInstitutions(userId: string): Observable<Institution[]> {
+    const url = `${this.apiUrl}/users/${userId}/institutions/`;
 
     return this.jsonApiService
       .get<InstitutionsJsonApiResponse>(url)

src/app/shared/stores/institutions/institutions.actions.ts

@@ -3,6 +3,7 @@ import { Institution } from '@shared/models/institutions/institutions.models';
 
 export class FetchUserInstitutions {
   static readonly type = '[Institutions] Fetch User Institutions';
+  constructor(public userId = 'me') {}
 }
 
 export class FetchInstitutions {

src/app/shared/stores/institutions/institutions.model.ts

@@ -4,6 +4,7 @@ import { AsyncStateWithTotalCount } from '@osf/shared/models/store/async-state-w
 
 export interface InstitutionsStateModel {
   userInstitutions: AsyncStateModel<Institution[]>;
+  userInstitutionsById: Record<string, AsyncStateModel<Institution[]>>;
   institutions: AsyncStateWithTotalCount<Institution[]>;
   resourceInstitutions: AsyncStateModel<Institution[]>;
 }
@@ -14,6 +15,7 @@ export const INSTITUTIONS_STATE_DEFAULTS: InstitutionsStateModel = {
     isLoading: false,
     error: null,
   },
+  userInstitutionsById: {},
   institutions: {
     data: [],
     isLoading: false,

src/app/shared/stores/institutions/institutions.selectors.ts

@@ -9,6 +9,11 @@ export class InstitutionsSelectors {
     return state.userInstitutions.data;
   }
 
+  @Selector([InstitutionsState])
+  static getUserProfileInstitutions(state: InstitutionsStateModel) {
+    return state.userInstitutionsById;
+  }
+
   @Selector([InstitutionsState])
   static areUserInstitutionsLoading(state: InstitutionsStateModel) {
     return state.userInstitutions.isLoading;

src/app/shared/stores/institutions/institutions.state.ts

@@ -25,10 +25,10 @@ export class InstitutionsState {
   private readonly institutionsService = inject(InstitutionsService);
 
   @Action(FetchUserInstitutions)
-  getUserInstitutions(ctx: StateContext<InstitutionsStateModel>) {
+  getUserInstitutions(ctx: StateContext<InstitutionsStateModel>, action: FetchUserInstitutions) {
     ctx.setState(patch({ userInstitutions: patch({ isLoading: true }) }));
 
-    return this.institutionsService.getUserInstitutions().pipe(
+    return this.institutionsService.getUserInstitutions(action.userId).pipe(
       tap((institutions) => {
         ctx.setState(
           patch({