feat/219 add institutions list page

src/app/app.routes.ts

@@ -183,6 +183,10 @@ export const routes: Routes = [
           provideStates([MyProfileResourceFiltersState, MyProfileResourceFiltersOptionsState, MyProfileState]),
         ],
       },
+      {
+        path: 'institutions',
+        loadChildren: () => import('./features/institutions/institutions.routes').then((r) => r.routes),
+      },
       {
         path: 'confirm/:userId/:token',
         loadComponent: () => import('./features/home/home.component').then((mod) => mod.HomeComponent),

src/app/core/constants/nav-items.constant.ts

@@ -53,6 +53,13 @@ export const NAV_ITEMS: NavItem[] = [
     icon: 'profile',
     useExactMatch: true,
   },
+  {
+    path: '/institutions',
+    label: 'navigation.institutions',
+    icon: 'institutions',
+    useExactMatch: true,
+  },
+
   {
     path: '/collections',
     label: 'navigation.collections',

src/app/core/constants/ngxs-states.constant.ts

@@ -1,7 +1,6 @@
 import { AuthState } from '@core/store/auth';
 import { UserState } from '@core/store/user';
 import { CollectionsState } from '@osf/features/collections/store';
-import { InstitutionsState } from '@osf/features/institutions/store';
 import { MeetingsState } from '@osf/features/meetings/store';
 import { MyProjectsState } from '@osf/features/my-projects/store';
 import { AnalyticsState } from '@osf/features/project/analytics/store';
@@ -14,6 +13,7 @@ import { DeveloperAppsState } from '@osf/features/settings/developer-apps/store'
 import { NotificationSubscriptionState } from '@osf/features/settings/notifications/store';
 import { ProfileSettingsState } from '@osf/features/settings/profile-settings/store/profile-settings.state';
 import { TokensState } from '@osf/features/settings/tokens/store';
+import { InstitutionsState } from '@shared/stores';
 import { AddonsState } from '@shared/stores/addons';
 
 export const STATES = [

src/app/features/home/home.component.ts

@@ -15,14 +15,14 @@ import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { MY_PROJECTS_TABLE_PARAMS } from '@osf/core/constants';
+import { MyProjectsItem } from '@osf/features/my-projects/models';
 import { AddProjectFormComponent, MyProjectsTableComponent, SubHeaderComponent } from '@osf/shared/components';
 import { SortOrder } from '@osf/shared/enums';
 import { TableParameters } from '@osf/shared/models';
 import { IS_MEDIUM } from '@osf/shared/utils';
+import { GetUserInstitutions } from '@shared/stores';
 
-import { GetUserInstitutions } from '../institutions/store';
 import { MyProjectsSearchFilters } from '../my-projects/models';
-import { MyProjectsItem } from '../my-projects/models/my-projects.models';
 import { ClearMyProjects, GetMyProjects, MyProjectsSelectors } from '../my-projects/store';
 import { AccountSettingsService } from '../settings/account-settings/services';
 

src/app/features/institutions/institutions.component.html

@@ -0,0 +1,34 @@
+<section class="flex-column flex flex-1">
+  <osf-sub-header
+    class="pt-6"
+    [description]="'institutions.description' | translate"
+    [title]="'institutions.title' | translate"
+    [icon]="'institutions'"
+  />
+
+  @if (institutionsLoading()) {
+    <div class="flex-1 mt-4 md:mt-8 lg:pt-5">
+      <osf-loading-spinner />
+    </div>
+  } @else {
+    <div class="flex-column flex flex-1 w-full bg-white p-5">
+      <osf-search-input [control]="searchControl" [placeholder]="'institutions.searchInstitutions' | translate" />
+
+      <div class="py-5 flex flex-column gap-3">
+        @for (institution of institutions(); track $index) {
+          <div class="border-1 border-round-xl grey-border-color px-5 py-4 flex align-items-center gap-4">
+            <img [ngSrc]="institution.assets.logo" [alt]="institution.name" width="60" height="60" />
+
+            <h3 class="text-lg">{{ institution.name }}</h3>
+          </div>
+        }
+      </div>
+
+      <osf-custom-paginator
+        [first]="first()"
+        [totalCount]="totalInstitutionsCount()"
+        (pageChanged)="onPageChange($event)"
+      ></osf-custom-paginator>
+    </div>
+  }
+</section>

src/app/features/institutions/institutions.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InstitutionsComponent } from './institutions.component';
+
+describe('InstitutionsComponent', () => {
+  let component: InstitutionsComponent;
+  let fixture: ComponentFixture<InstitutionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InstitutionsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InstitutionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/institutions/institutions.component.ts

@@ -0,0 +1,123 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { PaginatorState } from 'primeng/paginator';
+
+import { debounceTime, distinctUntilChanged } from 'rxjs';
+
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, signal, untracked } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { FormControl } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { parseQueryFilterParams } from '@core/helpers';
+import {
+  CustomPaginatorComponent,
+  LoadingSpinnerComponent,
+  SearchInputComponent,
+  SubHeaderComponent,
+} from '@shared/components';
+import { TABLE_PARAMS } from '@shared/constants';
+import { QueryParams } from '@shared/models';
+import { FetchInstitutions, InstitutionsSelectors } from '@shared/stores';
+
+@Component({
+  selector: 'osf-institutions',
+  imports: [
+    SubHeaderComponent,
+    TranslatePipe,
+    SearchInputComponent,
+    NgOptimizedImage,
+    CustomPaginatorComponent,
+    LoadingSpinnerComponent,
+  ],
+  templateUrl: './institutions.component.html',
+  styleUrl: './institutions.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InstitutionsComponent {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly destroyRef = inject(DestroyRef);
+
+  private readonly actions = createDispatchMap({ getInstitutions: FetchInstitutions });
+
+  searchControl = new FormControl('');
+
+  queryParams = toSignal(this.route.queryParams);
+  currentPage = signal(1);
+  currentPageSize = signal(TABLE_PARAMS.rows);
+  first = signal(0);
+
+  institutions = select(InstitutionsSelectors.getInstitutions);
+  totalInstitutionsCount = select(InstitutionsSelectors.getInstitutionsTotalCount);
+  institutionsLoading = select(InstitutionsSelectors.isInstitutionsLoading);
+
+  constructor() {
+    this.setupQueryParamsEffect();
+    this.setupSearchSubscription();
+  }
+
+  onPageChange(event: PaginatorState): void {
+    this.currentPage.set(event.page ? this.currentPage() + 1 : 1);
+    this.first.set(event.first ?? 0);
+    this.updateQueryParams({
+      page: this.currentPage(),
+      size: event.rows,
+    });
+  }
+
+  private setupQueryParamsEffect(): void {
+    effect(() => {
+      const rawQueryParams = this.queryParams();
+      if (!rawQueryParams) return;
+
+      const parsedQueryParams = parseQueryFilterParams(rawQueryParams);
+
+      this.updateComponentState(parsedQueryParams);
+
+      this.actions.getInstitutions(parsedQueryParams.page, parsedQueryParams.size, parsedQueryParams.search);
+    });
+  }
+
+  private updateQueryParams(updates: Partial<QueryParams>): void {
+    const queryParams: Record<string, string | undefined> = {};
+
+    if ('page' in updates) {
+      queryParams['page'] = updates.page!.toString();
+    }
+    if ('size' in updates) {
+      queryParams['size'] = updates.size!.toString();
+    }
+    if ('search' in updates) {
+      queryParams['search'] = updates.search || undefined;
+    }
+
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams,
+      queryParamsHandling: 'merge',
+    });
+  }
+
+  private setupSearchSubscription(): void {
+    this.searchControl.valueChanges
+      .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+      .subscribe((searchControl) => {
+        this.updateQueryParams({
+          search: searchControl ?? '',
+          page: 1,
+        });
+      });
+  }
+
+  private updateComponentState(params: QueryParams): void {
+    untracked(() => {
+      this.currentPage.set(params.page);
+      this.currentPageSize.set(params.size);
+      this.searchControl.setValue(params.search);
+    });
+  }
+}

src/app/features/institutions/institutions.routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+
+import { InstitutionsComponent } from '@osf/features/institutions/institutions.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: InstitutionsComponent,
+  },
+];

src/app/features/meetings/constants/index.ts

@@ -1,3 +1,2 @@
 export * from './meeting-submissions-table.constants';
 export * from './meetings-fields.constants';
-export * from './meetings-table.constants';

src/app/features/meetings/pages/meetings-landing/meetings-landing.component.ts

@@ -25,11 +25,11 @@ import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { parseQueryFilterParams } from '@core/helpers';
-import { MEETINGS_TABLE_PARAMS } from '@osf/features/meetings/constants';
 import { Meeting } from '@osf/features/meetings/models';
 import { GetAllMeetings, MeetingsSelectors } from '@osf/features/meetings/store';
 import { IS_XSMALL } from '@osf/shared/utils';
 import { SearchInputComponent, SubHeaderComponent } from '@shared/components';
+import { TABLE_PARAMS } from '@shared/constants';
 import { SortOrder } from '@shared/enums';
 import { QueryParams, TableParameters } from '@shared/models';
 import { SearchFilters } from '@shared/models/filters';
@@ -55,9 +55,9 @@ export class MeetingsLandingComponent {
   sortColumn = signal('');
   sortOrder = signal<SortOrder>(SortOrder.Asc);
   currentPage = signal(1);
-  currentPageSize = signal(MEETINGS_TABLE_PARAMS.rows);
+  currentPageSize = signal(TABLE_PARAMS.rows);
   tableParams = signal<TableParameters>({
-    ...MEETINGS_TABLE_PARAMS,
+    ...TABLE_PARAMS,
     firstRowIndex: 0,
   });
 

src/app/features/my-projects/my-projects.component.spec.ts

@@ -14,7 +14,7 @@ import { ActivatedRoute } from '@angular/router';
 
 import { IS_MEDIUM, IS_WEB, IS_XSMALL } from '@shared/utils';
 
-import { InstitutionsState } from '../institutions/store';
+import { InstitutionsState } from '../../shared/stores/institutions';
 
 import { MyProjectsState } from './store/my-projects.state';
 import { MyProjectsComponent } from './my-projects.component';

src/app/features/my-projects/my-projects.component.ts

@@ -31,8 +31,8 @@ import { SortOrder } from '@osf/shared/enums';
 import { QueryParams, TableParameters, TabOption } from '@osf/shared/models';
 import { IS_MEDIUM, IS_WEB, IS_XSMALL } from '@osf/shared/utils';
 
+import { GetUserInstitutions } from '../../shared/stores/institutions';
 import { CollectionsSelectors, GetBookmarksCollectionId } from '../collections/store';
-import { GetUserInstitutions } from '../institutions/store';
 
 import { MyProjectsItem, MyProjectsSearchFilters } from './models';
 import {