Fix - Ang-838 (#537)

* fix(global-search): Adjusted state and service for multiple selected options by the key * fix(global-search): Adjusted filter-ships component to handle multiple options for one key * fix(global-search): Refactored and adjusted components for multiple selection of filter options * fix(global-search): Resolved todo, fixed boolean filters mapping to query params * fix(global-search): Fixed logic for building params for index-card-search

Author: rrromchIk

src/app/features/admin-institutions/components/filters-section/filters-section.component.html

@@ -21,16 +21,16 @@ <h2>{{ 'adminInstitutions.common.filterBy' | translate }}</h2>
  />
 
  <div class="filters-section overflow-auto px-4">
- <osf-reusable-filters
+ <osf-search-filters
  [plainStyle]="true"
  [filters]="filters()"
  [selectedOptions]="selectedFilterOptions()"
  [filterSearchResults]="filterSearchCache()"
  [isLoading]="areResourcesLoading()"
  [showEmptyState]="true"
  (loadFilterOptions)="onLoadFilterOptions($event)"
- (filterOptionChanged)="onFilterChanged($event)"
- (filterSearchChanged)="onFilterSearchChanged($event)"
+ (filterOptionSelected)="onSelectedFilterOptionsChanged($event)"
+ (filterOptionsSearch)="onSearchFilterOptions($event)"
  (loadMoreFilterOptions)="onLoadMoreFilterOptions($event)"
  />
  </div>

src/app/features/admin-institutions/components/filters-section/filters-section.component.ts

@@ -7,7 +7,7 @@ import { Card } from 'primeng/card';
 
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 
-import { FilterChipsComponent, ReusableFilterComponent } from '@shared/components';
+import { FilterChipsComponent, SearchFiltersComponent } from '@shared/components';
 import { DiscoverableFilter, FilterOption } from '@shared/models';
 import {
  ClearFilterSearchResults,
@@ -23,7 +23,7 @@ import {
 
 @Component({
  selector: 'osf-institution-resource-table-filters',
- imports: [Button, Card, FilterChipsComponent, TranslatePipe, ReusableFilterComponent],
+ imports: [Button, Card, FilterChipsComponent, TranslatePipe, SearchFiltersComponent],
  templateUrl: './filters-section.component.html',
  styleUrl: './filters-section.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -46,7 +46,7 @@ export class FiltersSectionComponent {
  filterSearchCache = select(GlobalSearchSelectors.getFilterSearchCache);
  areResourcesLoading = select(GlobalSearchSelectors.getResourcesLoading);
 
- onFilterChanged(event: { filter: DiscoverableFilter; filterOption: FilterOption | null }): void {
+ onSelectedFilterOptionsChanged(event: { filter: DiscoverableFilter; filterOption: FilterOption[] }): void {
  this.actions.updateSelectedFilterOption(event.filter.key, event.filterOption);
  this.actions.fetchResources();
  }
@@ -59,16 +59,19 @@ export class FiltersSectionComponent {
  this.actions.loadMoreFilterOptions(filter.key);
  }
 
- onFilterSearchChanged(event: { searchText: string; filter: DiscoverableFilter }): void {
+ onSearchFilterOptions(event: { searchText: string; filter: DiscoverableFilter }): void {
  if (event.searchText.trim()) {
  this.actions.loadFilterOptionsWithSearch(event.filter.key, event.searchText);
  } else {
  this.actions.clearFilterSearchResults(event.filter.key);
  }
  }
 
- onFilterChipRemoved(filterKey: string): void {
- this.actions.updateSelectedFilterOption(filterKey, null);
+ onFilterChipRemoved(event: { filterKey: string; optionRemoved: FilterOption }): void {
+ const updatedOptions = this.selectedFilterOptions()[event.filterKey].filter(
+ (option) => option.value === event.optionRemoved.value
+ );
+ this.actions.updateSelectedFilterOption(event.filterKey, updatedOptions);
  this.actions.fetchResources();
  }
 }

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

@@ -21,10 +21,12 @@ export class BrowseBySubjectsComponent {
  linksToSearchPageForSubject = computed(() => {
  return this.subjects().map((subject) => ({
  tab: ResourceType.Preprint,
- filter_subject: JSON.stringify({
- label: subject.name,
- value: subject.iri,
- }),
+ filter_subject: JSON.stringify([
+ {
+ label: subject.name,
+ value: subject.iri,
+ },
+ ]),
  }));
  });
  areSubjectsLoading = input.required<boolean>();

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

@@ -90,7 +90,7 @@ export class PreprintsLandingComponent implements OnInit, OnDestroy {
  const searchValue = this.searchControl.value;
 
  this.router.navigate(['/search'], {
- queryParams: { search: searchValue, resourceTab: ResourceType.Preprint },
+ queryParams: { search: searchValue, tab: ResourceType.Preprint },
  });
  }
 }

src/app/shared/components/filter-chips/filter-chips.component.html

@@ -1,11 +1,11 @@
 @if (chips().length > 0) {
  <div class="flex flex-wrap gap-2">
- @for (chip of chips(); track chip.key) {
+ @for (chip of chips(); track chip.key + chip.displayValue) {
  <p-chip
  [label]="chip.label + ': ' + chip.displayValue"
  removeIcon="fas fa-close"
  removable
- (onRemove)="removeFilter(chip.key)"
+ (onRemove)="removeFilter(chip.key, chip.option)"
  />
  }
  </div>

src/app/shared/components/filter-chips/filter-chips.component.ts

@@ -12,10 +12,10 @@ import { DiscoverableFilter, FilterOption } from '@shared/models';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FilterChipsComponent {
- filterOptions = input<Record<string, FilterOption | null>>({});
+ filterOptions = input<Record<string, FilterOption[]>>({});
  filters = input.required<DiscoverableFilter[]>();
 
- selectedOptionRemoved = output<string>();
+ selectedOptionRemoved = output<{ filterKey: string; optionRemoved: FilterOption }>();
 
  filterLabels = computed(() => {
  return this.filters()
@@ -31,20 +31,24 @@ export class FilterChipsComponent {
  const labels = this.filterLabels();
 
  return Object.entries(options)
- .filter(([, value]) => value !== null)
- .map(([key, option]) => {
+ .filter(([, value]) => (value?.length ?? 0) > 0)
+ .flatMap(([key, option]) => {
  const filterLabel = labels.find((l) => l.key === key)?.label || key;
- const displayValue = option?.label || option?.value;
+ const optionArray = option as FilterOption[];
 
- return {
+ return optionArray.map((opt) => ({
  key,
  label: filterLabel,
- displayValue,
- };
+ displayValue: opt?.label || opt?.value,
+ option: opt,
+ }));
  });
  });
 
- removeFilter(filterKey: string): void {
- this.selectedOptionRemoved.emit(filterKey);
+ removeFilter(filterKey: string, option: FilterOption): void {
+ this.selectedOptionRemoved.emit({
+ filterKey,
+ optionRemoved: option,
+ });
  }
 }

src/app/shared/components/generic-filter/generic-filter.component.html

@@ -4,34 +4,30 @@
  <osf-loading-spinner />
  </div>
  } @else {
- <div class="relative">
- <p-select
- [id]="filterType()"
- [options]="filterOptions()"
- optionLabel="label"
- optionValue="value"
- [ngModel]="selectedValue()"
- [placeholder]="currentSelectedOption() ? currentSelectedOption()?.label : placeholder()"
- styleClass="w-full"
- panelStyleClass="max-w-30rem scrollable-panel"
- appendTo="body"
- filter
- resetFilterOnHide="false"
- [virtualScroll]="true"
- [virtualScrollItemSize]="25"
- [lazy]="true"
- scrollHeight="200px"
- [autoOptionFocus]="false"
- [loading]="isPaginationLoading() || isSearchLoading()"
- (onLazyLoad)="loadMoreItems($event)"
- (onChange)="onOptionChange($event)"
- (onFilter)="onFilterChange($event)"
- [showClear]="!!selectedValue()"
- >
- <ng-template #item let-item>
- <p class="text-base">{{ item.label }} ({{ item.cardSearchResultCount }})</p>
- </ng-template>
- </p-select>
- </div>
+ <p-multiSelect
+ [id]="filterOperator()"
+ [options]="filterOptions()"
+ optionLabel="label"
+ optionValue="value"
+ [ngModel]="selectedOptionValues()"
+ [placeholder]="placeholder()"
+ styleClass="w-full"
+ appendTo="body"
+ filter
+ resetFilterOnHide="false"
+ [showToggleAll]="false"
+ [virtualScroll]="true"
+ [virtualScrollItemSize]="40"
+ scrollHeight="200px"
+ [autoOptionFocus]="false"
+ [loading]="isPaginationLoading() || isSearchLoading()"
+ (onFilter)="onFilterChange($event)"
+ (onChange)="onMultiChange($event)"
+ (onLazyLoad)="loadMoreItems($event)"
+ >
+ <ng-template #item let-item>
+ <p class="text-base">{{ item.label }} ({{ item.cardSearchResultCount }})</p>
+ </ng-template>
+ </p-multiSelect>
  }
 </div>