Feat/398

src/app/app.routes.ts

@@ -7,8 +7,6 @@ import { BookmarksState, ProjectsState } from '@shared/stores';
 import { MyProfileResourceFiltersOptionsState } from './features/my-profile/components/filters/store';
 import { MyProfileResourceFiltersState } from './features/my-profile/components/my-profile-resource-filters/store';
 import { MyProfileState } from './features/my-profile/store';
-import { ResourceFiltersOptionsState } from './features/search/components/filters/store';
-import { ResourceFiltersState } from './features/search/components/resource-filters/store';
 import { SearchState } from './features/search/store';
 
 export const routes: Routes = [
@@ -91,7 +89,7 @@ export const routes: Routes = [
       {
         path: 'search',
         loadComponent: () => import('./features/search/search.component').then((mod) => mod.SearchComponent),
-        providers: [provideStates([ResourceFiltersState, ResourceFiltersOptionsState, SearchState])],
+        providers: [provideStates([SearchState])],
       },
       {
         path: 'my-profile',

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

@@ -71,21 +71,27 @@ <h1>{{ institution().name }}</h1>
               <osf-reusable-filters
                 [filters]="filters()"
                 [selectedValues]="selectedValues()"
+                [filterSearchResults]="filterSearchResults()"
                 [isLoading]="isResourcesLoading()"
                 [showEmptyState]="true"
                 (loadFilterOptions)="onLoadFilterOptions($event)"
                 (filterValueChanged)="onFilterChanged($event)"
+                (filterSearchChanged)="onFilterSearchChanged($event)"
+                (loadMoreFilterOptions)="onLoadMoreFilterOptions($event)"
               />
             </div>
 
             <div slot="mobile-filters">
               <osf-reusable-filters
                 [filters]="filters()"
                 [selectedValues]="selectedValues()"
+                [filterSearchResults]="filterSearchResults()"
                 [isLoading]="isResourcesLoading()"
                 [showEmptyState]="true"
                 (loadFilterOptions)="onLoadFilterOptions($event)"
                 (filterValueChanged)="onFilterChanged($event)"
+                (filterSearchChanged)="onFilterSearchChanged($event)"
+                (loadMoreFilterOptions)="onLoadMoreFilterOptions($event)"
               />
             </div>
           </osf-search-results-container>

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

@@ -26,12 +26,15 @@ import { SEARCH_TAB_OPTIONS } from '@osf/shared/constants';
 import { ResourceTab } from '@osf/shared/enums';
 import { DiscoverableFilter } from '@osf/shared/models';
 import {
+  ClearFilterSearchResults,
   FetchInstitutionById,
   FetchResources,
   FetchResourcesByLink,
   InstitutionsSearchSelectors,
   LoadFilterOptions,
   LoadFilterOptionsAndSetValues,
+  LoadFilterOptionsWithSearch,
+  LoadMoreFilterOptions,
   SetFilterValues,
   UpdateFilterValue,
   UpdateResourceType,
@@ -75,13 +78,17 @@ export class InstitutionsSearchComponent implements OnInit {
   first = select(InstitutionsSearchSelectors.getFirst);
   next = select(InstitutionsSearchSelectors.getNext);
   previous = select(InstitutionsSearchSelectors.getPrevious);
+  filterSearchResults = select(InstitutionsSearchSelectors.getFilterSearchCache);
 
   private readonly actions = createDispatchMap({
     fetchInstitution: FetchInstitutionById,
     updateResourceType: UpdateResourceType,
     updateSortBy: UpdateSortBy,
     loadFilterOptions: LoadFilterOptions,
     loadFilterOptionsAndSetValues: LoadFilterOptionsAndSetValues,
+    loadFilterOptionsWithSearch: LoadFilterOptionsWithSearch,
+    clearFilterSearchResults: ClearFilterSearchResults,
+    loadMoreFilterOptions: LoadMoreFilterOptions,
     setFilterValues: SetFilterValues,
     updateFilterValue: UpdateFilterValue,
     fetchResourcesByLink: FetchResourcesByLink,
@@ -148,6 +155,18 @@ export class InstitutionsSearchComponent implements OnInit {
     this.actions.loadFilterOptions(event.filterType);
   }
 
+  onFilterSearchChanged(event: { filterType: string; searchText: string }): void {
+    if (event.searchText.trim()) {
+      this.actions.loadFilterOptionsWithSearch(event.filterType, event.searchText);
+    } else {
+      this.actions.clearFilterSearchResults(event.filterType);
+    }
+  }
+
+  onLoadMoreFilterOptions(event: { filterType: string; filter: DiscoverableFilter }): void {
+    this.actions.loadMoreFilterOptions(event.filterType);
+  }
+
   onFilterChanged(event: { filterType: string; value: string | null }): void {
     this.actions.updateFilterValue(event.filterType, event.value);
 

src/app/features/my-profile/components/filters/store/my-profile-resource-filters-options.state.ts

@@ -5,7 +5,6 @@ import { tap } from 'rxjs';
 import { inject, Injectable } from '@angular/core';
 
 import { MyProfileFiltersOptionsService } from '@osf/features/my-profile/services';
-import { ResourceFiltersOptionsStateModel } from '@osf/features/search/components/filters/store';
 
 import {
   GetAllOptions,
@@ -39,7 +38,7 @@ export class MyProfileResourceFiltersOptionsState {
   readonly #filtersOptionsService = inject(MyProfileFiltersOptionsService);
 
   @Action(GetDatesCreatedOptions)
-  getDatesCreated(ctx: StateContext<ResourceFiltersOptionsStateModel>) {
+  getDatesCreated(ctx: StateContext<MyProfileResourceFiltersOptionsStateModel>) {
     return this.#filtersOptionsService.getDates().pipe(
       tap((datesCreated) => {
         ctx.patchState({ datesCreated: datesCreated });
@@ -48,7 +47,7 @@ export class MyProfileResourceFiltersOptionsState {
   }
 
   @Action(GetFundersOptions)
-  getFunders(ctx: StateContext<ResourceFiltersOptionsStateModel>) {
+  getFunders(ctx: StateContext<MyProfileResourceFiltersOptionsStateModel>) {
     return this.#filtersOptionsService.getFunders().pipe(
       tap((funders) => {
         ctx.patchState({ funders: funders });
@@ -57,7 +56,7 @@ export class MyProfileResourceFiltersOptionsState {
   }
 
   @Action(GetSubjectsOptions)
-  getSubjects(ctx: StateContext<ResourceFiltersOptionsStateModel>) {
+  getSubjects(ctx: StateContext<MyProfileResourceFiltersOptionsStateModel>) {
     return this.#filtersOptionsService.getSubjects().pipe(
       tap((subjects) => {
         ctx.patchState({ subjects: subjects });
@@ -66,7 +65,7 @@ export class MyProfileResourceFiltersOptionsState {
   }
 
   @Action(GetLicensesOptions)
-  getLicenses(ctx: StateContext<ResourceFiltersOptionsStateModel>) {
+  getLicenses(ctx: StateContext<MyProfileResourceFiltersOptionsStateModel>) {
     return this.#filtersOptionsService.getLicenses().pipe(
       tap((licenses) => {
         ctx.patchState({ licenses: licenses });
@@ -75,7 +74,7 @@ export class MyProfileResourceFiltersOptionsState {
   }
 
   @Action(GetResourceTypesOptions)
-  getResourceTypes(ctx: StateContext<ResourceFiltersOptionsStateModel>) {
+  getResourceTypes(ctx: StateContext<MyProfileResourceFiltersOptionsStateModel>) {
     return this.#filtersOptionsService.getResourceTypes().pipe(
       tap((resourceTypes) => {
         ctx.patchState({ resourceTypes: resourceTypes });
@@ -84,7 +83,7 @@ export class MyProfileResourceFiltersOptionsState {
   }
 
   @Action(GetInstitutionsOptions)
-  getInstitutions(ctx: StateContext<ResourceFiltersOptionsStateModel>) {
+  getInstitutions(ctx: StateContext<MyProfileResourceFiltersOptionsStateModel>) {
     return this.#filtersOptionsService.getInstitutions().pipe(
       tap((institutions) => {
         ctx.patchState({ institutions: institutions });
@@ -93,15 +92,15 @@ export class MyProfileResourceFiltersOptionsState {
   }
 
   @Action(GetProvidersOptions)
-  getProviders(ctx: StateContext<ResourceFiltersOptionsStateModel>) {
+  getProviders(ctx: StateContext<MyProfileResourceFiltersOptionsStateModel>) {
     return this.#filtersOptionsService.getProviders().pipe(
       tap((providers) => {
         ctx.patchState({ providers: providers });
       })
     );
   }
   @Action(GetPartOfCollectionOptions)
-  getPartOfCollection(ctx: StateContext<ResourceFiltersOptionsStateModel>) {
+  getPartOfCollection(ctx: StateContext<MyProfileResourceFiltersOptionsStateModel>) {
     return this.#filtersOptionsService.getPartOtCollections().pipe(
       tap((partOfCollection) => {
         ctx.patchState({ partOfCollection: partOfCollection });

src/app/features/my-profile/components/my-profile-resource-filters/store/my-profile-resource-filters.selectors.ts

@@ -1,60 +1,60 @@
 import { Selector } from '@ngxs/store';
 
-import { ResourceFiltersStateModel } from '@osf/features/search/components/resource-filters/store';
+import { MyProfileResourceFiltersStateModel } from '@osf/features/my-profile/components/my-profile-resource-filters/store/my-profile-resource-filters.model';
 import { ResourceFilterLabel } from '@shared/models';
 
 import { MyProfileResourceFiltersState } from './my-profile-resource-filters.state';
 
 export class MyProfileResourceFiltersSelectors {
   @Selector([MyProfileResourceFiltersState])
-  static getAllFilters(state: ResourceFiltersStateModel): ResourceFiltersStateModel {
+  static getAllFilters(state: MyProfileResourceFiltersStateModel): MyProfileResourceFiltersStateModel {
     return {
       ...state,
     };
   }
 
   @Selector([MyProfileResourceFiltersState])
-  static getCreator(state: ResourceFiltersStateModel): ResourceFilterLabel {
+  static getCreator(state: MyProfileResourceFiltersStateModel): ResourceFilterLabel {
     return state.creator;
   }
 
   @Selector([MyProfileResourceFiltersState])
-  static getDateCreated(state: ResourceFiltersStateModel): ResourceFilterLabel {
+  static getDateCreated(state: MyProfileResourceFiltersStateModel): ResourceFilterLabel {
     return state.dateCreated;
   }
 
   @Selector([MyProfileResourceFiltersState])
-  static getFunder(state: ResourceFiltersStateModel): ResourceFilterLabel {
+  static getFunder(state: MyProfileResourceFiltersStateModel): ResourceFilterLabel {
     return state.funder;
   }
 
   @Selector([MyProfileResourceFiltersState])
-  static getSubject(state: ResourceFiltersStateModel): ResourceFilterLabel {
+  static getSubject(state: MyProfileResourceFiltersStateModel): ResourceFilterLabel {
     return state.subject;
   }
 
   @Selector([MyProfileResourceFiltersState])
-  static getLicense(state: ResourceFiltersStateModel): ResourceFilterLabel {
+  static getLicense(state: MyProfileResourceFiltersStateModel): ResourceFilterLabel {
     return state.license;
   }
 
   @Selector([MyProfileResourceFiltersState])
-  static getResourceType(state: ResourceFiltersStateModel): ResourceFilterLabel {
+  static getResourceType(state: MyProfileResourceFiltersStateModel): ResourceFilterLabel {
     return state.resourceType;
   }
 
   @Selector([MyProfileResourceFiltersState])
-  static getInstitution(state: ResourceFiltersStateModel): ResourceFilterLabel {
+  static getInstitution(state: MyProfileResourceFiltersStateModel): ResourceFilterLabel {
     return state.institution;
   }
 
   @Selector([MyProfileResourceFiltersState])
-  static getProvider(state: ResourceFiltersStateModel): ResourceFilterLabel {
+  static getProvider(state: MyProfileResourceFiltersStateModel): ResourceFilterLabel {
     return state.provider;
   }
 
   @Selector([MyProfileResourceFiltersState])
-  static getPartOfCollection(state: ResourceFiltersStateModel): ResourceFilterLabel {
+  static getPartOfCollection(state: MyProfileResourceFiltersStateModel): ResourceFilterLabel {
     return state.partOfCollection;
   }
 }

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

@@ -13,7 +13,6 @@ import { UserSelectors } from '@osf/core/store/user';
 import { EducationHistoryComponent, EmploymentHistoryComponent } from '@osf/shared/components';
 import { IS_MEDIUM } from '@osf/shared/utils';
 
-import { ResetFiltersState } from '../search/components/resource-filters/store';
 import { ResetSearchState } from '../search/store';
 
 import { MyProfileSearchComponent } from './components';
@@ -40,7 +39,6 @@ export class MyProfileComponent implements OnDestroy {
   readonly isMedium = toSignal(inject(IS_MEDIUM));
   readonly currentUser = select(UserSelectors.getCurrentUser);
   readonly actions = createDispatchMap({
-    resetFiltersState: ResetFiltersState,
     resetSearchState: ResetSearchState,
     setIsMyProfile: SetIsMyProfile,
   });
@@ -50,7 +48,6 @@ export class MyProfileComponent implements OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.actions.resetFiltersState();
     this.actions.resetSearchState();
     this.actions.setIsMyProfile(false);
   }

src/app/features/preprints/components/browse-by-subjects/browse-by-subjects.component.ts

@@ -6,7 +6,6 @@ import { Skeleton } from 'primeng/skeleton';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
-import { ResourceTab } from '@shared/enums';
 import { SubjectModel } from '@shared/models';
 
 @Component({
@@ -20,14 +19,8 @@ export class BrowseBySubjectsComponent {
   subjects = input.required<SubjectModel[]>();
   linksToSearchPageForSubject = computed(() => {
     return this.subjects().map((subject) => ({
-      resourceTab: ResourceTab.Preprints,
-      activeFilters: JSON.stringify([
-        {
-          filterName: 'Subject',
-          label: subject.name,
-          value: subject.iri,
-        },
-      ]),
+      tab: 'preprints',
+      filter_subject: subject.iri,
     }));
   });
   areSubjectsLoading = input.required<boolean>();

src/app/features/preprints/services/preprints-resource-filters.service.ts

@@ -4,9 +4,9 @@ import { Observable } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
+import { MyProfileResourceFiltersStateModel } from '@osf/features/my-profile/components/my-profile-resource-filters/store';
 import { PreprintsDiscoverSelectors } from '@osf/features/preprints/store/preprints-discover';
 import { PreprintsResourcesFiltersSelectors } from '@osf/features/preprints/store/preprints-resources-filters';
-import { ResourceFiltersStateModel } from '@osf/features/search/components/resource-filters/store';
 import {
   Creator,
   DateCreated,
@@ -27,7 +27,9 @@ export class PreprintsFiltersOptionsService {
   filtersOptions = inject(FiltersOptionsService);
 
   private getFilterParams(): Record<string, string> {
-    return addFiltersParams(select(PreprintsResourcesFiltersSelectors.getAllFilters)() as ResourceFiltersStateModel);
+    return addFiltersParams(
+      select(PreprintsResourcesFiltersSelectors.getAllFilters)() as MyProfileResourceFiltersStateModel
+    );
   }
 
   private getParams(): Record<string, string> {

src/app/features/preprints/store/preprints-discover/preprints-discover.state.ts

@@ -4,6 +4,7 @@ import { BehaviorSubject, EMPTY, switchMap, tap } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
+import { MyProfileResourceFiltersStateModel } from '@osf/features/my-profile/components/my-profile-resource-filters/store';
 import {
   GetResources,
   GetResourcesByLink,
@@ -14,7 +15,6 @@ import {
 } from '@osf/features/preprints/store/preprints-discover/preprints-discover.actions';
 import { PreprintsDiscoverStateModel } from '@osf/features/preprints/store/preprints-discover/preprints-discover.model';
 import { PreprintsResourcesFiltersSelectors } from '@osf/features/preprints/store/preprints-resources-filters';
-import { ResourceFiltersStateModel } from '@osf/features/search/components/resource-filters/store';
 import { GetResourcesRequestTypeEnum, ResourceTab } from '@shared/enums';
 import { SearchService } from '@shared/services';
 import { addFiltersParams, getResourceTypes } from '@shared/utils';
@@ -51,7 +51,7 @@ export class PreprintsDiscoverState implements NgxsOnInit {
           ctx.patchState({ resources: { ...state.resources, isLoading: true } });
           if (query.type === GetResourcesRequestTypeEnum.GetResources) {
             const filters = this.store.selectSnapshot(PreprintsResourcesFiltersSelectors.getAllFilters);
-            const filtersParams = addFiltersParams(filters as ResourceFiltersStateModel);
+            const filtersParams = addFiltersParams(filters as MyProfileResourceFiltersStateModel);
             const searchText = state.searchText;
             const sortBy = state.sortBy;
             const resourceTab = ResourceTab.Preprints;

src/app/features/registries/store/registries-provider-search/registries-provider-search.state.ts

@@ -1,7 +1,7 @@
 import { Action, NgxsOnInit, State, StateContext } from '@ngxs/store';
 import { patch } from '@ngxs/store/operators';
 
-import { BehaviorSubject, catchError, EMPTY, forkJoin, of, switchMap, tap } from 'rxjs';
+import { BehaviorSubject, catchError, EMPTY, forkJoin, switchMap, tap } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
@@ -141,7 +141,8 @@ export class RegistriesProviderSearchState implements NgxsOnInit {
     ctx.patchState({ filters: loadingFilters });
 
     return this.searchService.getFilterOptions(filterKey).pipe(
-      tap((options) => {
+      tap((response) => {
+        const options = response.options;
         const updatedCache = { ...ctx.getState().filterOptionsCache, [filterKey]: options };
         const updatedFilters = ctx
           .getState()
@@ -189,14 +190,14 @@ export class RegistriesProviderSearchState implements NgxsOnInit {
 
     const observables = filterKeys.map((key) =>
       this.searchService.getFilterOptions(key).pipe(
-        tap((options) => {
+        tap((response) => {
+          const options = response.options;
           const updatedCache = { ...ctx.getState().filterOptionsCache, [key]: options };
           const updatedFilters = ctx
             .getState()
             .filters.map((f) => (f.key === key ? { ...f, options, isLoaded: true, isLoading: false } : f));
           ctx.patchState({ filters: updatedFilters, filterOptionsCache: updatedCache });
-        }),
-        catchError(() => of({ filterKey: key, options: [] }))
+        })
       )
     );