Feat/221 institutions search

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

@@ -20,7 +20,7 @@ import { AddProjectFormComponent, MyProjectsTableComponent, SubHeaderComponent }
 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 { FetchUserInstitutions } from '@shared/stores';
 
 import { MyProjectsSearchFilters } from '../my-projects/models';
 import { ClearMyProjects, GetMyProjects, MyProjectsSelectors } from '../my-projects/store';
@@ -76,7 +76,7 @@ export class HomeComponent implements OnInit {
 
   ngOnInit() {
     this.setupQueryParamsSubscription();
-    this.store.dispatch(new GetUserInstitutions());
+    this.store.dispatch(new FetchUserInstitutions());
 
     this.route.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
       const userId = params['userId'];

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

@@ -7,7 +7,7 @@
   />
 
   @if (institutionsLoading()) {
-    <div class="flex-1 bg-white">
+    <div class="flex-1 mt-4 md:mt-8 lg:pt-5 bg-white">
       <osf-loading-spinner />
     </div>
   } @else {
@@ -16,11 +16,19 @@
 
       <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 class="image" [ngSrc]="institution.assets.logo" [alt]="institution.name" width="60" height="60" />
+          <a [routerLink]="[institution.id]">
+            <div class="border-1 border-round-xl grey-border-color px-5 py-4 flex align-items-center gap-4">
+              <img
+                class="fit-contain"
+                [ngSrc]="institution.assets.logo"
+                [alt]="institution.name"
+                width="60"
+                height="60"
+              />
 
-            <h2>{{ institution.name }}</h2>
-          </div>
+              <h2>{{ institution.name }}</h2>
+            </div>
+          </a>
         }
 
         @if (!institutions().length) {

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

@@ -19,7 +19,7 @@ import {
 } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { parseQueryFilterParams } from '@core/helpers';
 import {
@@ -41,9 +41,9 @@ import { FetchInstitutions, InstitutionsSelectors } from '@shared/stores';
     NgOptimizedImage,
     CustomPaginatorComponent,
     LoadingSpinnerComponent,
+    RouterLink,
   ],
   templateUrl: './institutions.component.html',
-  styleUrl: './institutions.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InstitutionsComponent {

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

@@ -1,10 +1,20 @@
+import { provideStates } from '@ngxs/store';
+
 import { Routes } from '@angular/router';
 
 import { InstitutionsComponent } from '@osf/features/institutions/institutions.component';
+import { InstitutionsSearchState } from '@shared/stores';
+
+import { InstitutionsSearchComponent } from './pages';
 
 export const routes: Routes = [
   {
     path: '',
     component: InstitutionsComponent,
   },
+  {
+    path: ':institution-id',
+    component: InstitutionsSearchComponent,
+    providers: [provideStates([InstitutionsSearchState])],
+  },
 ];

src/app/features/institutions/pages/index.ts

@@ -0,0 +1 @@
+export { InstitutionsSearchComponent } from './institutions-search/institutions-search.component';

src/app/features/institutions/pages/institutions-search/institutions-search.component.html

@@ -0,0 +1,98 @@
+<section class="flex flex-column xl:mt-6">
+  @if (isInstitutionLoading()) {
+    <div class="flex-1 mt-4 md:mt-8 lg:pt-5">
+      <osf-loading-spinner />
+    </div>
+  } @else {
+    <div class="flex flex-column gap-5 p-5">
+      <div class="flex align-items-center gap-2">
+        <img
+          [ngSrc]="institution().assets.logo"
+          [alt]="institution().name"
+          width="60"
+          height="60"
+          class="fit-contain"
+        />
+
+        <h1>{{ institution().name }}</h1>
+      </div>
+
+      <p [innerHtml]="institution().description | safeHtml"></p>
+    </div>
+
+    <div class="flex flex-1 flex-column h-full w-full">
+      <div class="mt-5 mx-3 md:mx-4">
+        <osf-search-input
+          [control]="searchControl"
+          [showHelpIcon]="true"
+          [placeholder]="'collections.searchInput.placeholder' | translate"
+          (helpClicked)="showTutorial()"
+        />
+      </div>
+
+      <div class="flex flex-column flex-1 w-full pt-6">
+        <p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="flex-1 px-3 hidden md:px-5 md:inline">
+          <p-tablist>
+            @for (item of resourceTabOptions; track $index) {
+              <p-tab [value]="item.value">{{ item.label | translate }}</p-tab>
+            }
+          </p-tablist>
+        </p-tabs>
+
+        <div class="py-4 px-3 md:px-5 xl:px-4 bg-white">
+          <osf-search-results-container
+            [resources]="resources()"
+            [searchCount]="resourcesCount()"
+            [selectedSort]="selectedSort()"
+            [selectedTab]="resourceType()"
+            [selectedValues]="selectedValues()"
+            [first]="first()"
+            [prev]="previous()"
+            [next]="next()"
+            [isFiltersOpen]="isFiltersOpen()"
+            [isSortingOpen]="isSortingOpen()"
+            (sortChanged)="onSortChanged($event)"
+            (tabChanged)="onTabChange(+$event)"
+            (pageChanged)="onPageChanged($event)"
+            (filtersToggled)="onFiltersToggled()"
+            (sortingToggled)="onSortingToggled()"
+          >
+            <div slot="filter-chips">
+              <osf-filter-chips
+                [selectedValues]="selectedValues()"
+                [filterLabels]="filterLabels()"
+                [filterOptions]="filterOptions()"
+                (filterRemoved)="onFilterChipRemoved($event)"
+                (allFiltersCleared)="onAllFiltersCleared()"
+              />
+            </div>
+
+            <div slot="filters">
+              <osf-reusable-filters
+                [filters]="filters()"
+                [selectedValues]="selectedValues()"
+                [isLoading]="isResourcesLoading()"
+                [showEmptyState]="true"
+                (loadFilterOptions)="onLoadFilterOptions($event)"
+                (filterValueChanged)="onFilterChanged($event)"
+              />
+            </div>
+
+            <div slot="mobile-filters">
+              <osf-reusable-filters
+                [filters]="filters()"
+                [selectedValues]="selectedValues()"
+                [isLoading]="isResourcesLoading()"
+                [showEmptyState]="true"
+                (loadFilterOptions)="onLoadFilterOptions($event)"
+                (filterValueChanged)="onFilterChanged($event)"
+              />
+            </div>
+          </osf-search-results-container>
+
+          <osf-search-help-tutorial [(currentStep)]="currentStep"></osf-search-help-tutorial>
+        </div>
+      </div>
+    </div>
+  }
+</section>

src/app/features/institutions/pages/institutions-search/institutions-search.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}

src/app/features/institutions/pages/institutions-search/institutions-search.component.spec.ts

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