hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'use-applied-filter-to-display-label-on-search_contribute-7.6' into use-applied-filter-to-display-label-on-search_contribute-main

Browse Source
This commit is contained in:
Alexandre Vryghem
2024-02-15 15:35:54 +01:00
parent 5a42f391cf f655777bd6
commit e9fe0a3cb8
53 changed files with 1108 additions and 744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/app/core/services/route.service.spec.ts
View File

@@ -9,6 +9,8 @@ import { RouteService } from './route.service';
import { RouterMock } from '../../shared/mocks/router.mock';
import { TestScheduler } from 'rxjs/testing';
import { AddUrlToHistoryAction } from '../history/history.actions';
import { ActivatedRouteStub } from 'src/app/shared/testing/active-router.stub';
import { take } from 'rxjs/operators';
describe('RouteService', () => {
let scheduler: TestScheduler;
@@ -29,6 +31,7 @@ describe('RouteService', () => {
select: jasmine.createSpy('select')
});
let route: ActivatedRouteStub;
const router = new RouterMock();
router.setParams(convertToParamMap(paramObject));
@@ -36,16 +39,11 @@ describe('RouteService', () => {
paramObject[paramName2] = [paramValue2a, paramValue2b];
beforeEach(waitForAsync(() => {
route = new ActivatedRouteStub(paramObject);
return TestBed.configureTestingModule({
providers: [
{
provide: ActivatedRoute,
useValue: {
queryParams: observableOf(paramObject),
params: observableOf(paramObject),
queryParamMap: observableOf(convertToParamMap(paramObject))
},
},
{ provide: ActivatedRoute, useValue: route },
{ provide: Router, useValue: router },
{ provide: Store, useValue: store },
]
@@ -181,4 +179,51 @@ describe('RouteService', () => {
});
});
});
describe('getParamsWithoutAppliedFilter', () => {
beforeEach(() => {
route.testParams = {
'query': '',
'spc.page': '1',
'f.author': '1282121b-5394-4689-ab93-78d537764052,authority',
'f.has_content_in_original_bundle': 'true,equals',
};
});
it('should remove the parameter completely if only one value is defined', (done: DoneFn) => {
service.getParamsExceptValue('f.author', '1282121b-5394-4689-ab93-78d537764052,authority').pipe(take(1)).subscribe((params: Params) => {
expect(params).toEqual({
'query': '',
'spc.page': '1',
'f.has_content_in_original_bundle': 'true,equals',
});
done();
});
});
it('should remove the parameter completely if only one value is defined in an array', (done: DoneFn) => {
route.testParams['f.author'] = ['1282121b-5394-4689-ab93-78d537764052,authority'];
service.getParamsExceptValue('f.author', '1282121b-5394-4689-ab93-78d537764052,authority').pipe(take(1)).subscribe((params: Params) => {
expect(params).toEqual({
'query': '',
'spc.page': '1',
'f.has_content_in_original_bundle': 'true,equals',
});
done();
});
});
it('should return all params except the applied filter even when multiple filters of the same type are selected', (done: DoneFn) => {
route.testParams['f.author'] = ['1282121b-5394-4689-ab93-78d537764052,authority', '71b91a28-c280-4352-a199-bd7fc3312501,authority'];
service.getParamsExceptValue('f.author', '1282121b-5394-4689-ab93-78d537764052,authority').pipe(take(1)).subscribe((params: Params) => {
expect(params).toEqual({
'query': '',
'spc.page': '1',
'f.author': ['71b91a28-c280-4352-a199-bd7fc3312501,authority'],
'f.has_content_in_original_bundle': 'true,equals',
});
done();
});
});
});
});

52
src/app/core/services/route.service.ts
View File

@@ -225,4 +225,56 @@ export class RouteService {
}
);
}
/**
* Returns all the query parameters except for the one with the given name & value.
*
* @param name The name of the query param to exclude
* @param value The optional value that the query param needs to have to be excluded
*/
getParamsExceptValue(name: string, value?: string): Observable<Params> {
return this.route.queryParams.pipe(
map((params: Params) => {
const newParams: Params = Object.assign({}, params);
const queryParamValues: string | string[] = newParams[name];
if (queryParamValues === value || value === undefined) {
delete newParams[name];
} else if (Array.isArray(queryParamValues) && queryParamValues.includes(value)) {
newParams[name] = (queryParamValues as string[]).filter((paramValue: string) => paramValue !== value);
if (newParams[name].length === 0) {
delete newParams[name];
}
}
return newParams;
}),
);
}
/**
* Returns all the existing query parameters and the new value pair with the given name & value.
*
* @param name The name of the query param for which you need to add the value
* @param value The optional value that the query param needs to have in addition to the current ones
*/
getParamsWithAdditionalValue(name: string, value: string): Observable<Params> {
return this.route.queryParams.pipe(
map((params: Params) => {
const newParams: Params = Object.assign({}, params);
const queryParamValues: string | string[] = newParams[name];
if (queryParamValues === undefined) {
newParams[name] = value;
} else {
if (Array.isArray(queryParamValues)) {
newParams[name] = [...queryParamValues, value];
} else {
newParams[name] = [queryParamValues, value];
}
}
return newParams;
}),
);
}
}

33
src/app/core/shared/search/search-configuration.service.spec.ts
View File

@@ -13,6 +13,7 @@ import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.u
import { getMockRequestService } from '../../../shared/mocks/request.service.mock';
import { RequestEntry } from '../../data/request-entry.model';
import { SearchObjects } from '../../../shared/search/models/search-objects.model';
import { AppliedFilter } from '../../../shared/search/models/applied-filter.model';
describe('SearchConfigurationService', () => {
let service: SearchConfigurationService;
@@ -38,13 +39,14 @@ describe('SearchConfigurationService', () => {
const routeService = jasmine.createSpyObj('RouteService', {
getQueryParameterValue: observableOf(value1),
getQueryParamsWithPrefix: observableOf(prefixFilter),
getRouteParameterValue: observableOf('')
getRouteParameterValue: observableOf(''),
getParamsExceptValue: observableOf({}),
});
const paginationService = new PaginationServiceStub();
const activatedRoute: any = new ActivatedRouteStub();
const activatedRoute: ActivatedRouteStub = new ActivatedRouteStub();
const linkService: any = {};
const requestService: any = getMockRequestService();
const halService: any = {
@@ -70,7 +72,7 @@ describe('SearchConfigurationService', () => {
}
};
beforeEach(() => {
service = new SearchConfigurationService(routeService, paginationService as any, activatedRoute, linkService, halService, requestService, rdb);
service = new SearchConfigurationService(routeService, paginationService as any, activatedRoute as any, linkService, halService, requestService, rdb);
});
describe('when the scope is called', () => {
@@ -279,4 +281,29 @@ describe('SearchConfigurationService', () => {
expect((service as any).requestService.send).toHaveBeenCalledWith(jasmine.objectContaining({ href: requestUrl }), true);
});
});
describe('unselectAppliedFilterParams', () => {
let appliedFilter: AppliedFilter;
beforeEach(() => {
appliedFilter = Object.assign(new AppliedFilter(), {
filter: 'author',
operator: 'authority',
value: '1282121b-5394-4689-ab93-78d537764052',
label: 'Odinson, Thor',
});
});
it('should return all params except the applied filter', () => {
service.unselectAppliedFilterParams(appliedFilter.filter, appliedFilter.value, appliedFilter.operator);
expect(routeService.getParamsExceptValue).toHaveBeenCalledWith('f.author', '1282121b-5394-4689-ab93-78d537764052,authority');
});
it('should be able to remove AppliedFilter without operator', () => {
service.unselectAppliedFilterParams('dateIssued.max', '2000');
expect(routeService.getParamsExceptValue).toHaveBeenCalledWith('f.dateIssued.max', '2000');
});
});
});

22
src/app/core/shared/search/search-configuration.service.ts
View File

@@ -28,6 +28,7 @@ import { FacetConfigResponseParsingService } from '../../data/facet-config-respo
import { ViewMode } from '../view-mode.model';
import { SearchFilterConfig } from '../../../shared/search/models/search-filter-config.model';
import { FacetConfigResponse } from '../../../shared/search/models/facet-config-response.model';
import { addOperatorToFilterValue } from '../../../shared/search/search.utils';
/**
* Service that performs all actions that have to do with the current search configuration
@@ -525,6 +526,27 @@ export class SearchConfigurationService implements OnDestroy {
);
}
/**
* Calculates the {@link Params} of the search after removing a filter with a certain value
*
* @param filterName The {@link AppliedFilter}'s name
* @param value The {@link AppliedFilter}'s value
* @param operator The {@link AppliedFilter}'s optional operator
*/
unselectAppliedFilterParams(filterName: string, value: string, operator?: string): Observable<Params> {
return this.routeService.getParamsExceptValue(`f.${filterName}`, hasValue(operator) ? addOperatorToFilterValue(value, operator) : value);
}
/**
* Calculates the {@link Params} of the search after removing a filter with a certain value
*
* @param filterName The {@link AppliedFilter}'s name
* @param value The {@link AppliedFilter}'s value
* @param operator The {@link AppliedFilter}'s optional operator
*/
selectNewAppliedFilterParams(filterName: string, value: string, operator?: string): Observable<Params> {
return this.routeService.getParamsWithAdditionalValue(`f.${filterName}`, hasValue(operator) ? addOperatorToFilterValue(value, operator) : value);
}
/**
* @returns {Observable<Params>} Emits the current view mode as a partial SearchOptions object

12
src/app/core/shared/search/search-filter.service.ts
View File

@@ -1,6 +1,6 @@
import { BehaviorSubject, combineLatest as observableCombineLatest, Observable } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators';
import { Injectable, InjectionToken } from '@angular/core';
import { Injectable, InjectionToken, EventEmitter } from '@angular/core';
import {
SearchFiltersState,
SearchFilterState
@@ -21,12 +21,14 @@ import { SortDirection, SortOptions } from '../../cache/models/sort-options.mode
import { RouteService } from '../../services/route.service';
import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
import { Params } from '@angular/router';
import { AppliedFilter } from '../../../shared/search/models/applied-filter.model';
const filterStateSelector = (state: SearchFiltersState) => state.searchFilter;
export const FILTER_CONFIG: InjectionToken<SearchFilterConfig> = new InjectionToken<SearchFilterConfig>('filterConfig');
export const IN_PLACE_SEARCH: InjectionToken<boolean> = new InjectionToken<boolean>('inPlaceSearch');
export const REFRESH_FILTER: InjectionToken<BehaviorSubject<any>> = new InjectionToken<boolean>('refreshFilters');
export const CHANGE_APPLIED_FILTERS: InjectionToken<EventEmitter<AppliedFilter[]>> = new InjectionToken('changeAppliedFilters');
/**
* Service that performs all actions that have to do with search filters and facets
@@ -61,7 +63,7 @@ export class SearchFilterService {
* Fetch the current active scope from the query parameters
* @returns {Observable<string>}
*/
getCurrentScope() {
getCurrentScope(): Observable<string> {
return this.routeService.getQueryParameterValue('scope');
}
@@ -69,7 +71,7 @@ export class SearchFilterService {
* Fetch the current query from the query parameters
* @returns {Observable<string>}
*/
getCurrentQuery() {
getCurrentQuery(): Observable<string> {
return this.routeService.getQueryParameterValue('query');
}
@@ -111,7 +113,7 @@ export class SearchFilterService {
* Fetch the current active filters from the query parameters
* @returns {Observable<Params>}
*/
getCurrentFilters() {
getCurrentFilters(): Observable<Params> {
return this.routeService.getQueryParamsWithPrefix('f.');
}
@@ -119,7 +121,7 @@ export class SearchFilterService {
* Fetch the current view from the query parameters
* @returns {Observable<string>}
*/
getCurrentView() {
getCurrentView(): Observable<string> {
return this.routeService.getQueryParameterValue('view');
}

17
src/app/shared/search/models/applied-filter.model.ts Normal file
View File

@@ -0,0 +1,17 @@
import { autoserialize } from 'cerialize';
export class AppliedFilter {
@autoserialize
filter: string;
@autoserialize
operator: string;
@autoserialize
value: string;
@autoserialize
label: string;
}

12
src/app/shared/search/models/search-query-response.model.ts
View File

@@ -1,6 +1,8 @@
import { autoserialize } from 'cerialize';
import { autoserialize, autoserializeAs } from 'cerialize';
import { PageInfo } from '../../../core/shared/page-info.model';
import { PaginatedList } from '../../../core/data/paginated-list.model';
import { AppliedFilter } from './applied-filter.model';
import { SearchResultSorting } from './search-result-sorting.model';
/**
* Class representing the response returned by the server when performing a search request
@@ -21,14 +23,14 @@ export abstract class SearchQueryResponse<T> extends PaginatedList<T> {
/**
* The currently active filters used in the search request
*/
@autoserialize
appliedFilters: any[]; // TODO
@autoserializeAs(AppliedFilter)
appliedFilters: AppliedFilter[];
/**
* The sort parameters used in the search request
*/
@autoserialize
sort: any; // TODO
@autoserializeAs(SearchResultSorting)
sort: SearchResultSorting;
/**
* The sort parameters used in the search request

11
src/app/shared/search/models/search-result-sorting.model.ts Normal file
View File

@@ -0,0 +1,11 @@
import { autoserialize } from 'cerialize';
export class SearchResultSorting {
@autoserialize
by: string;
@autoserialize
order: string;
}

6
src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html
View File

@@ -1,9 +1,9 @@
<div>
<div class="filters py-2">
<ds-search-facet-selected-option *ngFor="let value of (selectedValues$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
<ds-search-facet-selected-option *ngFor="let value of (selectedAppliedFilters$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
<ng-container *ngFor="let page of (facetValues$ | async)">
<div [@facetLoad]="animationState">
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
</div>
</ng-container>
<div class="clearfix toggle-more-filters">

6
src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
View File

@@ -1,9 +1,9 @@
<div>
<div class="filters py-2">
<ds-search-facet-selected-option *ngFor="let value of (selectedValues$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
<ds-search-facet-selected-option *ngFor="let value of (selectedAppliedFilters$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
<ng-container *ngFor="let page of (facetValues$ | async)">
<div [@facetLoad]="animationState">
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
</div>
</ng-container>
<div class="clearfix toggle-more-filters">

2
src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
View File

@@ -1,7 +1,7 @@
<a *ngIf="isVisible | async" class="d-flex flex-row"
[tabIndex]="-1"
[routerLink]="[searchLink]"
[queryParams]="addQueryParams" queryParamsHandling="merge">
[queryParams]="addQueryParams$ | async">
<label class="mb-0 d-flex w-100">
<input type="checkbox" [checked]="false" class="my-1 align-self-stretch filter-checkbox"/>
<span class="w-100 pl-1 break-facet">

123
src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.spec.ts
View File

@@ -3,9 +3,9 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { Router } from '@angular/router';
import { Router, Params } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { of as observableOf } from 'rxjs';
import { of as observableOf, take } from 'rxjs';
import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service';
import { SearchFilterService } from '../../../../../../core/shared/search/search-filter.service';
import { SearchService } from '../../../../../../core/shared/search/search.service';
@@ -18,16 +18,15 @@ import { SearchFacetOptionComponent } from './search-facet-option.component';
import { PaginationComponentOptions } from '../../../../../pagination/pagination-component-options.model';
import { PaginationService } from '../../../../../../core/pagination/pagination.service';
import { PaginationServiceStub } from '../../../../../testing/pagination-service.stub';
import { SearchConfigurationServiceStub } from '../../../../../testing/search-configuration-service.stub';
import { SearchFilterServiceStub } from '../../../../../testing/search-filter-service.stub';
import { ShortNumberPipe } from '../../../../../utils/short-number.pipe';
describe('SearchFacetOptionComponent', () => {
let comp: SearchFacetOptionComponent;
let fixture: ComponentFixture<SearchFacetOptionComponent>;
const filterName1 = 'testname';
const filterName2 = 'testAuthorityname';
const value1 = 'testvalue1';
const value2 = 'test2';
const operator = 'authority';
const mockFilterConfig = Object.assign(new SearchFilterConfig(), {
name: filterName1,
@@ -39,15 +38,7 @@ describe('SearchFacetOptionComponent', () => {
maxValue: 3000,
});
const mockAuthorityFilterConfig = Object.assign(new SearchFilterConfig(), {
name: filterName2,
filterType: FilterType.authority,
hasFacets: false,
isOpenByDefault: false,
pageSize: 2
});
const value: FacetValue = {
const facetValue: FacetValue = {
label: value2,
value: value2,
count: 20,
@@ -57,63 +48,30 @@ describe('SearchFacetOptionComponent', () => {
}
};
const selectedValue: FacetValue = {
label: value1,
value: value1,
count: 20,
_links: {
self: { href: 'selectedValue-self-link1' },
search: { href: `http://test.org/api/discover/search/objects?f.${filterName1}=${value1},${operator}` }
}
};
const authorityValue: FacetValue = {
label: value2,
value: value2,
count: 20,
_links: {
self: { href: 'authorityValue-self-link2' },
search: { href: `http://test.org/api/discover/search/objects?f.${filterName2}=${value2},${operator}` }
}
};
const searchLink = '/search';
const selectedValues = [selectedValue];
const selectedValues$ = observableOf(selectedValues);
let filterService;
let searchService;
let router;
const page = observableOf(0);
let searchConfigurationService: SearchConfigurationServiceStub;
let searchFilterService: SearchFilterServiceStub;
let searchService: SearchServiceStub;
let router: RouterStub;
const pagination = Object.assign(new PaginationComponentOptions(), { id: 'page-id', currentPage: 1, pageSize: 20 });
const pagination = Object.assign(new PaginationComponentOptions(), { id: 'test-id', currentPage: 1, pageSize: 20 });
const paginationService = new PaginationServiceStub(pagination);
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
searchConfigurationService = new SearchConfigurationServiceStub();
searchFilterService = new SearchFilterServiceStub();
searchService = new SearchServiceStub(searchLink);
router = new RouterStub();
void TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), NoopAnimationsModule, FormsModule],
declarations: [SearchFacetOptionComponent, ShortNumberPipe],
providers: [
{ provide: SearchService, useValue: new SearchServiceStub(searchLink) },
{ provide: Router, useValue: new RouterStub() },
{ provide: SearchService, useValue: searchService },
{ provide: Router, useValue: router },
{ provide: PaginationService, useValue: paginationService },
{
provide: SearchConfigurationService, useValue: {
paginationID: 'page-id',
searchOptions: observableOf({})
}
},
{
provide: SearchFilterService, useValue: {
getSelectedValuesForFilter: () => selectedValues,
isFilterActiveWithValue: (paramName: string, filterValue: string) => observableOf(true),
getPage: (paramName: string) => page,
/* eslint-disable no-empty,@typescript-eslint/no-empty-function */
incrementPage: (filterName: string) => {
},
resetPage: (filterName: string) => {
}
/* eslint-enable no-empty, @typescript-eslint/no-empty-function */
}
}
{ provide: SearchConfigurationService, useValue: searchConfigurationService },
{ provide: SearchFilterService, useValue: searchFilterService },
],
schemas: [NO_ERRORS_SCHEMA]
}).overrideComponent(SearchFacetOptionComponent, {
@@ -124,37 +82,24 @@ describe('SearchFacetOptionComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(SearchFacetOptionComponent);
comp = fixture.componentInstance; // SearchPageComponent test instance
filterService = (comp as any).filterService;
searchService = (comp as any).searchService;
router = (comp as any).router;
comp.filterValue = value;
comp.selectedValues$ = selectedValues$;
comp.filterValue = facetValue;
comp.filterConfig = mockFilterConfig;
fixture.detectChanges();
});
describe('when the updateAddParams method is called with a value', () => {
it('should update the addQueryParams with the new parameter values', () => {
comp.addQueryParams = {};
(comp as any).updateAddParams(selectedValues);
expect(comp.addQueryParams).toEqual({
[mockFilterConfig.paramName]: [`${value1},${operator}`, value.value + ',equals'],
['page-id.page']: 1
});
});
});
describe('updateAddParams', () => {
it('should always reset the page to 1', (done: DoneFn) => {
spyOn(searchConfigurationService, 'selectNewAppliedFilterParams').and.returnValue(observableOf({
[mockFilterConfig.paramName]: [`${facetValue.value},equals`],
['test-id.page']: 5,
}));
describe('when filter type is authority and the updateAddParams method is called with a value', () => {
it('should update the addQueryParams with the new parameter values', () => {
comp.filterValue = authorityValue;
comp.filterConfig = mockAuthorityFilterConfig;
fixture.detectChanges();
comp.addQueryParams = {};
(comp as any).updateAddParams(selectedValues);
expect(comp.addQueryParams).toEqual({
[mockAuthorityFilterConfig.paramName]: [value1 + ',equals', `${value2},${operator}`],
['page-id.page']: 1
comp.updateAddParams().pipe(take(1)).subscribe((params: Params) => {
expect(params).toEqual({
[mockFilterConfig.paramName]: [`${facetValue.value},equals`],
['test-id.page']: 1,
});
done();
});
});
});

59
src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts
View File

@@ -1,13 +1,12 @@
import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Component, Input, OnInit } from '@angular/core';
import { Params, Router } from '@angular/router';
import { FacetValue } from '../../../../models/facet-value.model';
import { SearchFilterConfig } from '../../../../models/search-filter-config.model';
import { SearchService } from '../../../../../../core/shared/search/search.service';
import { SearchFilterService } from '../../../../../../core/shared/search/search-filter.service';
import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service';
import { hasValue } from '../../../../../empty.util';
import { currentPath } from '../../../../../utils/route.utils';
import { getFacetValueForType } from '../../../../search.utils';
import { PaginationService } from '../../../../../../core/pagination/pagination.service';
@@ -21,7 +20,7 @@ import { PaginationService } from '../../../../../../core/pagination/pagination.
/**
* Represents a single option in a filter facet
*/
export class SearchFacetOptionComponent implements OnInit, OnDestroy {
export class SearchFacetOptionComponent implements OnInit {
/**
* A single value for this component
*/
@@ -32,15 +31,10 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
*/
@Input() filterConfig: SearchFilterConfig;
/**
* Emits the active values for this filter
*/
@Input() selectedValues$: Observable<FacetValue[]>;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
@Input() inPlaceSearch: boolean;
/**
* Emits true when this option should be visible and false when it should be invisible
@@ -50,16 +44,12 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
/**
* UI parameters when this filter is added
*/
addQueryParams;
addQueryParams$: Observable<Params>;
/**
* Link to the search page
*/
searchLink: string;
/**
* Subscription to unsubscribe from on destroy
*/
sub: Subscription;
paginationId: string;
@@ -78,23 +68,20 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
this.paginationId = this.searchConfigService.paginationID;
this.searchLink = this.getSearchLink();
this.isVisible = this.isChecked().pipe(map((checked: boolean) => !checked));
this.sub = observableCombineLatest(this.selectedValues$, this.searchConfigService.searchOptions)
.subscribe(([selectedValues, searchOptions]) => {
this.updateAddParams(selectedValues);
});
this.addQueryParams$ = this.updateAddParams();
}
/**
* Checks if a value for this filter is currently active
*/
private isChecked(): Observable<boolean> {
isChecked(): Observable<boolean> {
return this.filterService.isFilterActiveWithValue(this.filterConfig.paramName, this.getFacetValue());
}
/**
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
private getSearchLink(): string {
getSearchLink(): string {
if (this.inPlaceSearch) {
return currentPath(this.router);
}
@@ -102,31 +89,23 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
}
/**
* Calculates the parameters that should change if a given value for this filter would be added to the active filters
* @param {string[]} selectedValues The values that are currently selected for this filter
* Calculates the parameters that should change if this {@link filterValue} would be added to the active filters
*/
private updateAddParams(selectedValues: FacetValue[]): void {
const page = this.paginationService.getPageParam(this.searchConfigService.paginationID);
this.addQueryParams = {
[this.filterConfig.paramName]: [...selectedValues.map((facetValue: FacetValue) => getFacetValueForType(facetValue, this.filterConfig)), this.getFacetValue()],
[page]: 1
};
updateAddParams(): Observable<Params> {
const page: string = this.paginationService.getPageParam(this.searchConfigService.paginationID);
return this.searchConfigService.selectNewAppliedFilterParams(this.filterConfig.name, this.getFacetValue()).pipe(
map((params: Params) => ({
...params,
[page]: 1,
})),
);
}
/**
* TODO to review after https://github.com/DSpace/dspace-angular/issues/368 is resolved
* Retrieve facet value related to facet type
*/
private getFacetValue(): string {
getFacetValue(): string {
return getFacetValueForType(this.filterValue, this.filterConfig);
}
/**
* Make sure the subscription is unsubscribed from when this component is destroyed
*/
ngOnDestroy(): void {
if (hasValue(this.sub)) {
this.sub.unsubscribe();
}
}
}

4
src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.spec.ts
View File

@@ -123,8 +123,8 @@ describe('SearchFacetRangeOptionComponent', () => {
};
(comp as any).updateChangeParams();
expect(comp.changeQueryParams).toEqual({
[mockFilterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: ['50'],
[mockFilterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: ['60'],
[mockFilterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: [50],
[mockFilterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: [60],
['page-id.page']: 1
});
});

12
src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts
View File

@@ -1,7 +1,7 @@
import { Observable, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Params, Router } from '@angular/router';
import { FacetValue } from '../../../../models/facet-value.model';
import { SearchFilterConfig } from '../../../../models/search-filter-config.model';
import { SearchService } from '../../../../../../core/shared/search/search.service';
@@ -41,7 +41,7 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
@Input() inPlaceSearch: boolean;
/**
* Emits true when this option should be visible and false when it should be invisible
@@ -51,7 +51,7 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
/**
* UI parameters when this filter is changed
*/
changeQueryParams;
changeQueryParams: Params;
/**
* Subscription to unsubscribe from on destroy
@@ -104,12 +104,12 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
*/
private updateChangeParams(): void {
const parts = this.filterValue.value.split(rangeDelimiter);
const min = parts.length > 1 ? parts[0].trim() : this.filterValue.value;
const max = parts.length > 1 ? parts[1].trim() : this.filterValue.value;
const min = parts.length > 1 ? Number(parts[0].trim()) : this.filterValue.value;
const max = parts.length > 1 ? Number(parts[1].trim()) : this.filterValue.value;
const page = this.paginationService.getPageParam(this.searchConfigService.paginationID);
this.changeQueryParams = {
[this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: [min],
[this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: [max],
[this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: max === new Date().getUTCFullYear() ? null : [max],
[page]: 1
};
}

2
src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html
View File

@@ -1,7 +1,7 @@
<a class="d-flex flex-row"
[tabIndex]="-1"
[routerLink]="[searchLink]"
[queryParams]="removeQueryParams" queryParamsHandling="merge">
[queryParams]="removeQueryParams | async">
<label class="mb-0 d-flex w-100">
<input type="checkbox" [checked]="true" class="my-1 align-self-stretch filter-checkbox"/>
<span class="filter-value pl-1 break-facet">

158
src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.spec.ts
View File

@@ -1,31 +1,31 @@
import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { Router } from '@angular/router';
import { Params, Router } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { of as observableOf } from 'rxjs';
import { of as observableOf, take } from 'rxjs';
import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service';
import { SearchFilterService } from '../../../../../../core/shared/search/search-filter.service';
import { SearchService } from '../../../../../../core/shared/search/search.service';
import { RouterStub } from '../../../../../testing/router.stub';
import { SearchServiceStub } from '../../../../../testing/search-service.stub';
import { FacetValue } from '../../../../models/facet-value.model';
import { FilterType } from '../../../../models/filter-type.model';
import { SearchFilterConfig } from '../../../../models/search-filter-config.model';
import { SearchFacetSelectedOptionComponent } from './search-facet-selected-option.component';
import { PaginationComponentOptions } from '../../../../../pagination/pagination-component-options.model';
import { PaginationService } from '../../../../../../core/pagination/pagination.service';
import { PaginationServiceStub } from '../../../../../testing/pagination-service.stub';
import { AppliedFilter } from '../../../../models/applied-filter.model';
import { SearchConfigurationServiceStub } from '../../../../../testing/search-configuration-service.stub';
import { SearchFilterServiceStub } from '../../../../../testing/search-filter-service.stub';
describe('SearchFacetSelectedOptionComponent', () => {
let comp: SearchFacetSelectedOptionComponent;
let fixture: ComponentFixture<SearchFacetSelectedOptionComponent>;
const filterName1 = 'test name';
const filterName2 = 'testAuthorityname';
const label1 = 'test value 1';
const value1 = 'testvalue1';
const label2 = 'test 2';
const value2 = 'test2';
const operator = 'authority';
const mockFilterConfig = Object.assign(new SearchFilterConfig(), {
@@ -37,149 +37,63 @@ describe('SearchFacetSelectedOptionComponent', () => {
minValue: 200,
maxValue: 3000,
});
const mockAuthorityFilterConfig = Object.assign(new SearchFilterConfig(), {
name: filterName2,
filterType: FilterType.authority,
hasFacets: false,
isOpenByDefault: false,
pageSize: 2
});
const searchLink = '/search';
const selectedValue: FacetValue = {
label: value1,
value: value1,
count: 20,
_links: {
self: { href: 'selectedValue-self-link1' },
search: { href: `http://test.org/api/discover/search/objects?f.${filterName1}=${value1}` }
}
};
const selectedValue2: FacetValue = {
const appliedFilter: AppliedFilter = Object.assign(new AppliedFilter(), {
filter: filterName2,
operator: operator,
label: value2,
value: value2,
count: 20,
_links: {
self: { href: 'selectedValue-self-link2' },
search: { href: `http://test.org/api/discover/search/objects?f.${filterName1}=${value2}` }
}
};
const selectedAuthorityValue: FacetValue = {
label: label1,
value: value1,
count: 20,
_links: {
self: { href: 'selectedAuthorityValue-self-link1' },
search: { href: `http://test.org/api/discover/search/objects?f.${filterName2}=${value1},${operator}` }
}
};
const selectedAuthorityValue2: FacetValue = {
label: label2,
value: value2,
count: 20,
_links: {
self: { href: 'selectedAuthorityValue-self-link2' },
search: { href: `http://test.org/api/discover/search/objects?f.${filterName2}=${value2},${operator}` }
}
};
const selectedValues = [selectedValue, selectedValue2];
const selectedAuthorityValues = [selectedAuthorityValue, selectedAuthorityValue2];
const facetValue = {
label: value2,
value: value2,
count: 1,
_links: {
self: { href: 'facetValue-self-link2' },
search: { href: `` }
}
};
const authorityValue: FacetValue = {
label: label2,
value: value2,
count: 20,
_links: {
self: { href: 'authorityValue-self-link2' },
search: { href: `http://test.org/api/discover/search/objects?f.${filterName2}=${value2},${operator}` }
}
};
const selectedValues$ = observableOf(selectedValues);
const selectedAuthorityValues$ = observableOf(selectedAuthorityValues);
let filterService;
let searchService;
let router;
const page = observableOf(0);
});
let searchService: SearchServiceStub;
let searchConfigurationService: SearchConfigurationServiceStub;
let searchFilterService: SearchFilterServiceStub;
let router: RouterStub;
const pagination = Object.assign(new PaginationComponentOptions(), { id: 'page-id', currentPage: 1, pageSize: 20 });
const paginationService = new PaginationServiceStub(pagination);
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
searchConfigurationService = new SearchConfigurationServiceStub();
searchFilterService = new SearchFilterServiceStub();
searchService = new SearchServiceStub(searchLink);
router = new RouterStub();
void TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), NoopAnimationsModule, FormsModule],
declarations: [SearchFacetSelectedOptionComponent],
providers: [
{ provide: SearchService, useValue: new SearchServiceStub(searchLink) },
{ provide: Router, useValue: new RouterStub() },
{ provide: SearchService, useValue:searchService },
{ provide: Router, useValue: router },
{ provide: PaginationService, useValue: paginationService },
{
provide: SearchConfigurationService, useValue: {
searchOptions: observableOf({})
}
},
{
provide: SearchFilterService, useValue: {
getSelectedValuesForFilter: () => selectedValues,
isFilterActiveWithValue: (paramName: string, filterValue: string) => observableOf(true),
getPage: (paramName: string) => page,
/* eslint-disable no-empty,@typescript-eslint/no-empty-function */
incrementPage: (filterName: string) => {
},
resetPage: (filterName: string) => {
}
/* eslint-enable no-empty, @typescript-eslint/no-empty-function */
}
}
{ provide: SearchConfigurationService, useValue: searchConfigurationService },
{ provide: SearchFilterService, useValue: searchFilterService },
],
schemas: [NO_ERRORS_SCHEMA]
}).overrideComponent(SearchFacetSelectedOptionComponent, {
set: { changeDetection: ChangeDetectionStrategy.Default }
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SearchFacetSelectedOptionComponent);
comp = fixture.componentInstance; // SearchFacetSelectedOptionComponent test instance
filterService = (comp as any).filterService;
searchService = (comp as any).searchService;
router = (comp as any).router;
comp.selectedValue = facetValue;
comp.selectedValues$ = selectedValues$;
comp.selectedValue = appliedFilter;
comp.filterConfig = mockFilterConfig;
fixture.detectChanges();
});
describe('when the updateRemoveParams method is called wih a value', () => {
it('should update the removeQueryParams with the new parameter values', () => {
comp.removeQueryParams = {};
(comp as any).updateRemoveParams(selectedValues);
expect(comp.removeQueryParams).toEqual({
describe('updateRemoveParams', () => {
it('should always reset the page to 1', (done: DoneFn) => {
spyOn(searchConfigurationService, 'unselectAppliedFilterParams').and.returnValue(observableOf({
[mockFilterConfig.paramName]: [`${value1},equals`],
['page-id.page']: 1
});
});
});
['page-id.page']: 5,
}));
describe('when filter type is authority and the updateRemoveParams method is called with a value', () => {
it('should update the removeQueryParams with the new parameter values', () => {
spyOn(filterService, 'getSelectedValuesForFilter').and.returnValue(selectedAuthorityValues);
comp.selectedValue = authorityValue;
comp.selectedValues$ = selectedAuthorityValues$;
comp.filterConfig = mockAuthorityFilterConfig;
comp.removeQueryParams = {};
fixture.detectChanges();
(comp as any).updateRemoveParams(selectedAuthorityValues);
expect(comp.removeQueryParams).toEqual({
[mockAuthorityFilterConfig.paramName]: [`${value1},${operator}`],
['page-id.page']: 1
comp.updateRemoveParams().pipe(take(1)).subscribe((params: Params) => {
expect(params).toEqual({
[mockFilterConfig.paramName]: [`${value1},equals`],
['page-id.page']: 1
});
done();
});
});
});

89
src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.ts
View File

@@ -1,14 +1,12 @@
import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { Component, Input, OnInit } from '@angular/core';
import { Params, Router } from '@angular/router';
import { SearchFilterConfig } from '../../../../models/search-filter-config.model';
import { SearchService } from '../../../../../../core/shared/search/search.service';
import { SearchFilterService } from '../../../../../../core/shared/search/search-filter.service';
import { hasValue } from '../../../../../empty.util';
import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service';
import { FacetValue } from '../../../../models/facet-value.model';
import { currentPath } from '../../../../../utils/route.utils';
import { getFacetValueForType } from '../../../../search.utils';
import { AppliedFilter } from '../../../../models/applied-filter.model';
import { map } from 'rxjs/operators';
import { PaginationService } from '../../../../../../core/pagination/pagination.service';
@Component({
@@ -20,47 +18,37 @@ import { PaginationService } from '../../../../../../core/pagination/pagination.
/**
* Represents a single selected option in a filter facet
*/
export class SearchFacetSelectedOptionComponent implements OnInit, OnDestroy {
export class SearchFacetSelectedOptionComponent implements OnInit {
/**
* The value for this component
*/
@Input() selectedValue: FacetValue;
@Input() selectedValue: AppliedFilter;
/**
* The filter configuration for this facet option
*/
@Input() filterConfig: SearchFilterConfig;
/**
* Emits the active values for this filter
*/
@Input() selectedValues$: Observable<FacetValue[]>;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
@Input() inPlaceSearch: boolean;
/**
* UI parameters when this filter is removed
*/
removeQueryParams;
/**
* Subscription to unsubscribe from on destroy
*/
sub: Subscription;
removeQueryParams: Observable<Params>;
/**
* Link to the search page
*/
searchLink: string;
constructor(protected searchService: SearchService,
protected filterService: SearchFilterService,
protected searchConfigService: SearchConfigurationService,
protected router: Router,
protected paginationService: PaginationService
constructor(
protected paginationService: PaginationService,
protected router: Router,
protected searchService: SearchService,
protected searchConfigService: SearchConfigurationService,
) {
}
@@ -68,50 +56,31 @@ export class SearchFacetSelectedOptionComponent implements OnInit, OnDestroy {
* Initializes all observable instance variables and starts listening to them
*/
ngOnInit(): void {
this.sub = observableCombineLatest(this.selectedValues$, this.searchConfigService.searchOptions)
.subscribe(([selectedValues, searchOptions]) => {
this.updateRemoveParams(selectedValues);
});
this.searchLink = this.getSearchLink();
this.removeQueryParams = this.updateRemoveParams();
}
/**
* Calculates the parameters that should change if this {@link selectedValue} would be removed from the active filters
*/
updateRemoveParams(): Observable<Params> {
const page: string = this.paginationService.getPageParam(this.searchConfigService.paginationID);
return this.searchConfigService.unselectAppliedFilterParams(this.selectedValue.filter, this.selectedValue.value, this.selectedValue.operator).pipe(
map((params: Params) => ({
...params,
[page]: 1,
})),
);
}
/**
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
private getSearchLink(): string {
getSearchLink(): string {
if (this.inPlaceSearch) {
return currentPath(this.router);
}
return this.searchService.getSearchLink();
}
/**
* Calculates the parameters that should change if a given value for this filter would be removed from the active filters
* @param {string[]} selectedValues The values that are currently selected for this filter
*/
private updateRemoveParams(selectedValues: FacetValue[]): void {
const page = this.paginationService.getPageParam(this.searchConfigService.paginationID);
this.removeQueryParams = {
[this.filterConfig.paramName]: selectedValues
.filter((facetValue: FacetValue) => facetValue.label !== this.selectedValue.label)
.map((facetValue: FacetValue) => this.getFacetValue(facetValue)),
[page]: 1
};
}
/**
* TODO to review after https://github.com/DSpace/dspace-angular/issues/368 is resolved
* Retrieve facet value related to facet type
*/
private getFacetValue(facetValue: FacetValue): string {
return getFacetValueForType(facetValue, this.filterConfig);
}
/**
* Make sure the subscription is unsubscribed from when this component is destroyed
*/
ngOnDestroy(): void {
if (hasValue(this.sub)) {
this.sub.unsubscribe();
}
}
}

13
src/app/shared/search/search-filters/search-filter/search-facet-filter-wrapper/search-facet-filter-wrapper.component.ts
View File

@@ -1,15 +1,16 @@
import { Component, Injector, Input, OnInit } from '@angular/core';
import { Component, Injector, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { renderFilterType } from '../search-filter-type-decorator';
import { FilterType } from '../../../models/filter-type.model';
import { SearchFilterConfig } from '../../../models/search-filter-config.model';
import {
FILTER_CONFIG,
IN_PLACE_SEARCH,
REFRESH_FILTER
REFRESH_FILTER, CHANGE_APPLIED_FILTERS
} from '../../../../../core/shared/search/search-filter.service';
import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
import { SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
import { BehaviorSubject } from 'rxjs';
import { AppliedFilter } from '../../../models/applied-filter.model';
@Component({
selector: 'ds-search-facet-filter-wrapper',
@@ -35,6 +36,11 @@ export class SearchFacetFilterWrapperComponent implements OnInit {
*/
@Input() refreshFilters: BehaviorSubject<boolean>;
/**
* Emits the {@link AppliedFilter}s of this search filter
*/
@Output() changeAppliedFilters: EventEmitter<AppliedFilter[]> = new EventEmitter();
/**
* The constructor of the search facet filter that should be rendered, based on the filter config's type
*/
@@ -56,7 +62,8 @@ export class SearchFacetFilterWrapperComponent implements OnInit {
providers: [
{ provide: FILTER_CONFIG, useFactory: () => (this.filterConfig), deps: [] },
{ provide: IN_PLACE_SEARCH, useFactory: () => (this.inPlaceSearch), deps: [] },
{ provide: REFRESH_FILTER, useFactory: () => (this.refreshFilters), deps: [] }
{ provide: REFRESH_FILTER, useFactory: () => (this.refreshFilters), deps: [] },
{ provide: CHANGE_APPLIED_FILTERS, useFactory: () => this.changeAppliedFilters },
],
parent: this.injector
});

88
src/app/shared/search/search-filters/search-filter/search-facet-filter/search-facet-filter.component.spec.ts
View File

@@ -1,8 +1,9 @@
import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
import { ChangeDetectionStrategy, EventEmitter, NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import {
CHANGE_APPLIED_FILTERS,
FILTER_CONFIG,
IN_PLACE_SEARCH,
REFRESH_FILTER,
@@ -10,20 +11,19 @@ import {
} from '../../../../../core/shared/search/search-filter.service';
import { SearchFilterConfig } from '../../../models/search-filter-config.model';
import { FilterType } from '../../../models/filter-type.model';
import { FacetValue } from '../../../models/facet-value.model';
import { FormsModule } from '@angular/forms';
import { BehaviorSubject, of as observableOf } from 'rxjs';
import { SearchService } from '../../../../../core/shared/search/search.service';
import { SearchServiceStub } from '../../../../testing/search-service.stub';
import { buildPaginatedList } from '../../../../../core/data/paginated-list.model';
import { RouterStub } from '../../../../testing/router.stub';
import { Router } from '@angular/router';
import { PageInfo } from '../../../../../core/shared/page-info.model';
import { SearchFacetFilterComponent } from './search-facet-filter.component';
import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
import { SearchConfigurationServiceStub } from '../../../../testing/search-configuration-service.stub';
import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-page.component';
import { createSuccessfulRemoteDataObject$ } from '../../../../remote-data.utils';
import { AppliedFilter } from '../../../models/applied-filter.model';
import { FacetValues } from '../../../models/facet-values.model';
describe('SearchFacetFilterComponent', () => {
let comp: SearchFacetFilterComponent;
@@ -39,45 +39,28 @@ describe('SearchFacetFilterComponent', () => {
isOpenByDefault: false,
pageSize: 2
});
const values: FacetValue[] = [
{
label: value1,
value: value1,
count: 52,
_links: {
self: {
href: ''
},
search: {
href: ''
}
const values: Partial<FacetValues> = {
appliedFilters: [
{
filter: filterName1,
operator: 'equals',
label: value1,
value: value1,
},
{
filter: filterName1,
operator: 'equals',
label: value2,
value: value2,
},
{
filter: filterName1,
operator: 'equals',
label: value3,
value: value3,
}
}, {
label: value2,
value: value2,
count: 20,
_links: {
self: {
href: ''
},
search: {
href: ''
}
}
}, {
label: value3,
value: value3,
count: 5,
_links: {
self: {
href: ''
},
search: {
href: ''
}
}
}
];
]
};
const searchLink = '/search';
const selectedValues = [value1, value2];
@@ -86,7 +69,6 @@ describe('SearchFacetFilterComponent', () => {
let router;
const page = observableOf(0);
const mockValues = createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), values));
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), NoopAnimationsModule, FormsModule],
@@ -99,6 +81,7 @@ describe('SearchFacetFilterComponent', () => {
{ provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
{ provide: IN_PLACE_SEARCH, useValue: false },
{ provide: REFRESH_FILTER, useValue: new BehaviorSubject<boolean>(false) },
{ provide: CHANGE_APPLIED_FILTERS, useValue: new EventEmitter() },
{
provide: SearchFilterService, useValue: {
getSelectedValuesForFilter: () => observableOf(selectedValues),
@@ -125,22 +108,11 @@ describe('SearchFacetFilterComponent', () => {
comp.filterConfig = mockFilterConfig;
filterService = (comp as any).filterService;
searchService = (comp as any).searchService;
spyOn(searchService, 'getFacetValuesFor').and.returnValue(mockValues);
spyOn(searchService, 'getFacetValuesFor').and.returnValue(createSuccessfulRemoteDataObject$(values));
router = (comp as any).router;
fixture.detectChanges();
});
describe('when the isChecked method is called with a value', () => {
beforeEach(() => {
spyOn(filterService, 'isFilterActiveWithValue');
comp.isChecked(values[1]);
});
it('should call isFilterActiveWithValue on the filterService with the correct filter parameter name and the passed value', () => {
expect(filterService.isFilterActiveWithValue).toHaveBeenCalledWith(mockFilterConfig.paramName, values[1].value);
});
});
describe('when the getSearchLink method is triggered', () => {
let link: string;
beforeEach(() => {
@@ -201,8 +173,10 @@ describe('SearchFacetFilterComponent', () => {
const testValue = 'test';
beforeEach(() => {
comp.selectedValues$ = observableOf(selectedValues.map((value) =>
Object.assign(new FacetValue(), {
comp.selectedAppliedFilters$ = observableOf(selectedValues.map((value) =>
Object.assign(new AppliedFilter(), {
filter: filterName1,
operator: 'equals',
label: value,
value: value
})));

126
src/app/shared/search/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts
View File

@@ -1,15 +1,8 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { Component, Inject, OnDestroy, OnInit, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import {
BehaviorSubject,
combineLatest as observableCombineLatest,
Observable,
of as observableOf,
Subject,
Subscription
} from 'rxjs';
import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, filter, map, mergeMap, switchMap, take, tap } from 'rxjs/operators';
import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
@@ -20,21 +13,16 @@ import { EmphasizePipe } from '../../../../utils/emphasize.pipe';
import { FacetValue } from '../../../models/facet-value.model';
import { SearchFilterConfig } from '../../../models/search-filter-config.model';
import { SearchService } from '../../../../../core/shared/search/search.service';
import {
FILTER_CONFIG,
IN_PLACE_SEARCH,
REFRESH_FILTER,
SearchFilterService
} from '../../../../../core/shared/search/search-filter.service';
import { FILTER_CONFIG, IN_PLACE_SEARCH, REFRESH_FILTER, SearchFilterService, CHANGE_APPLIED_FILTERS } from '../../../../../core/shared/search/search-filter.service';
import { SearchConfigurationService } from '../../../../../core/shared/search/search-configuration.service';
import { getFirstSucceededRemoteData } from '../../../../../core/shared/operators';
import { getFirstSucceededRemoteData, getFirstSucceededRemoteDataPayload } from '../../../../../core/shared/operators';
import { InputSuggestion } from '../../../../input-suggestions/input-suggestions.model';
import { SearchOptions } from '../../../models/search-options.model';
import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-page.component';
import { currentPath } from '../../../../utils/route.utils';
import { getFacetValueForType, stripOperatorFromFilterValue } from '../../../search.utils';
import { createPendingRemoteDataObject } from '../../../../remote-data.utils';
import { getFacetValueForType, stripOperatorFromFilterValue, addOperatorToFilterValue } from '../../../search.utils';
import { FacetValues } from '../../../models/facet-values.model';
import { AppliedFilter } from '../../../models/applied-filter.model';
@Component({
selector: 'ds-search-facet-filter',
@@ -48,7 +36,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
/**
* Emits an array of pages with values found for this facet
*/
filterValues$: Subject<RemoteData<PaginatedList<FacetValue>[]>>;
facetValues$: BehaviorSubject<FacetValues[]> = new BehaviorSubject([]);
/**
* Emits the current last shown page of this facet's values
@@ -78,7 +66,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
/**
* Emits the active values for this filter
*/
selectedValues$: Observable<FacetValue[]>;
selectedAppliedFilters$: Observable<AppliedFilter[]>;
protected collapseNextUpdate = true;
@@ -90,7 +78,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
/**
* Emits all current search options available in the search URL
*/
searchOptions$: Observable<SearchOptions>;
searchOptions$: BehaviorSubject<SearchOptions>;
/**
* The current URL
@@ -104,7 +92,9 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
@Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
@Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
@Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>) {
@Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>,
@Inject(CHANGE_APPLIED_FILTERS) public changeAppliedFilters: EventEmitter<AppliedFilter[]>,
) {
}
/**
@@ -112,7 +102,6 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
*/
ngOnInit(): void {
this.currentUrl = this.router.url;
this.filterValues$ = new BehaviorSubject(createPendingRemoteDataObject());
this.currentPage = this.getCurrentPage().pipe(distinctUntilChanged());
this.searchOptions$ = this.searchConfigService.searchOptions;
@@ -137,13 +126,6 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
this.filter = '';
}
/**
* Checks if a value for this filter is currently active
*/
isChecked(value: FacetValue): Observable<boolean> {
return this.filterService.isFilterActiveWithValue(this.filterConfig.paramName, value.value);
}
/**
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
@@ -254,13 +236,13 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
*/
protected applyFilterValue(data) {
if (data.match(new RegExp(`^.+,(equals|query|authority)$`))) {
this.selectedValues$.pipe(take(1)).subscribe((selectedValues) => {
this.selectedAppliedFilters$.pipe(take(1)).subscribe((selectedValues: AppliedFilter[]) => {
if (isNotEmpty(data)) {
this.router.navigate(this.getSearchLinkParts(), {
void this.router.navigate(this.getSearchLinkParts(), {
queryParams:
{
[this.filterConfig.paramName]: [
...selectedValues.map((facet) => this.getFacetValue(facet)),
...selectedValues.map((appliedFilter: AppliedFilter) => addOperatorToFilterValue(appliedFilter.value, appliedFilter.operator)),
data
]
},
@@ -280,67 +262,53 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
return getFacetValueForType(facet, this.filterConfig);
}
protected retrieveFilterValues(useCachedVersionIfAvailable = true): Observable<RemoteData<PaginatedList<FacetValue>[]>> {
const facetValues$ = observableCombineLatest([this.searchOptions$, this.currentPage]).pipe(
map(([options, page]) => {
return { options, page };
}),
switchMap(({ options, page }) => {
return this.searchService.getFacetValuesFor(this.filterConfig, page, options, null, useCachedVersionIfAvailable)
.pipe(
getFirstSucceededRemoteData(),
tap((rd: RemoteData<FacetValues>) => {
this.isLastPage$.next(hasNoValue(rd?.payload?.next));
}),
map((rd: RemoteData<FacetValues>) => ({
values: observableOf(rd),
page: page
})
)
);
})
);
let filterValues = [];
return facetValues$.pipe(
mergeMap((facetOutcome) => {
const newValues$ = facetOutcome.values;
protected retrieveFilterValues(useCachedVersionIfAvailable = true): Observable<FacetValues[]> {
return observableCombineLatest([this.searchOptions$, this.currentPage]).pipe(
switchMap(([options, page]: [SearchOptions, number]) => this.searchService.getFacetValuesFor(this.filterConfig, page, options, null, useCachedVersionIfAvailable).pipe(
getFirstSucceededRemoteDataPayload(),
tap((facetValues: FacetValues) => {
this.isLastPage$.next(hasNoValue(facetValues?.next));
}),
)),
map((newFacetValues: FacetValues) => {
let filterValues: FacetValues[] = this.facetValues$.value;
if (this.collapseNextUpdate) {
this.showFirstPageOnly();
facetOutcome.page = 1;
filterValues = [];
this.collapseNextUpdate = false;
}
if (facetOutcome.page === 1) {
if (newFacetValues.pageInfo.currentPage === 1) {
filterValues = [];
}
filterValues = [...filterValues, newValues$];
filterValues = [...filterValues, newFacetValues];
return this.rdbs.aggregate(filterValues);
return filterValues;
}),
tap((rd: RemoteData<PaginatedList<FacetValue>[]>) => {
this.selectedValues$ = this.filterService.getSelectedValuesForFilter(this.filterConfig).pipe(
map((selectedValues) => {
return selectedValues.map((value: string) => {
const fValue = [].concat(...rd.payload.map((page) => page.page))
.find((facetValue: FacetValue) => this.getFacetValue(facetValue) === value);
if (hasValue(fValue)) {
return fValue;
}
const filterValue = stripOperatorFromFilterValue(value);
return Object.assign(new FacetValue(), { label: filterValue, value: filterValue });
});
})
);
}),
tap((rd: RemoteData<PaginatedList<FacetValue>[]>) => {
tap((allFacetValues: FacetValues[]) => {
this.setAppliedFilter(allFacetValues);
this.animationState = 'ready';
this.filterValues$.next(rd);
this.facetValues$.next(allFacetValues);
})
);
}
setAppliedFilter(allFacetValues: FacetValues[]): void {
const allAppliedFilters: AppliedFilter[] = [].concat(...allFacetValues.map((facetValues: FacetValues) => facetValues.appliedFilters))
.filter((appliedFilter: AppliedFilter) => hasValue(appliedFilter));
this.selectedAppliedFilters$ = this.filterService.getSelectedValuesForFilter(this.filterConfig).pipe(
map((selectedValues: string[]) => {
const appliedFilters: AppliedFilter[] = selectedValues.map((value: string) => {
return allAppliedFilters.find((appliedFilter: AppliedFilter) => appliedFilter.value === stripOperatorFromFilterValue(value));
}).filter((appliedFilter: AppliedFilter) => hasValue(appliedFilter));
this.changeAppliedFilters.emit(appliedFilters);
return appliedFilters;
}),
);
}
/**
* Transforms the facet value string, so if the query matches part of the value, it's emphasized in the value
* @param {FacetValue} facet The value of the facet as returned by the server

3
src/app/shared/search/search-filters/search-filter/search-filter.component.html
View File

@@ -21,7 +21,8 @@
<ds-search-facet-filter-wrapper
[filterConfig]="filter"
[inPlaceSearch]="inPlaceSearch"
[refreshFilters]="refreshFilters" >
[refreshFilters]="refreshFilters"
(changeAppliedFilters)="changeAppliedFilters.emit($event)">
</ds-search-facet-filter-wrapper>
</div>
</div>

8
src/app/shared/search/search-filters/search-filter/search-filter.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Inject, Input, OnInit } from '@angular/core';
import { Component, Inject, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
import { filter, map, startWith, switchMap, take } from 'rxjs/operators';
@@ -11,6 +11,7 @@ import { SearchService } from '../../../../core/shared/search/search.service';
import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
import { SequenceService } from '../../../../core/shared/sequence.service';
import { AppliedFilter } from '../../models/applied-filter.model';
@Component({
selector: 'ds-search-filter',
@@ -38,6 +39,11 @@ export class SearchFilterComponent implements OnInit {
*/
@Input() refreshFilters: BehaviorSubject<boolean>;
/**
* Emits the {@link AppliedFilter}s of this search filter
*/
@Output() changeAppliedFilters: EventEmitter<AppliedFilter[]> = new EventEmitter();
/**
* True when the filter is 100% collapsed in the UI
*/

6
src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
View File

@@ -1,9 +1,9 @@
<div>
<div class="filters py-2">
<ds-search-facet-selected-option *ngFor="let value of (selectedValues$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
<ds-search-facet-selected-option *ngFor="let value of (selectedAppliedFilters$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
<ng-container *ngFor="let page of (facetValues$ | async)">
<div [@facetLoad]="animationState">
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
</div>
</ng-container>
<div class="clearfix toggle-more-filters">

10
src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.spec.ts
View File

@@ -13,6 +13,7 @@ import { PageInfo } from '../../../../../core/shared/page-info.model';
import { CommonModule } from '@angular/common';
import { SearchService } from '../../../../../core/shared/search/search.service';
import {
CHANGE_APPLIED_FILTERS,
FILTER_CONFIG,
IN_PLACE_SEARCH,
SearchFilterService,
@@ -24,7 +25,7 @@ import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-page.component';
import { SearchConfigurationServiceStub } from '../../../../testing/search-configuration-service.stub';
import { VocabularyEntryDetail } from '../../../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
import { FacetValue} from '../../../models/facet-value.model';
import { AppliedFilter } from '../../../models/applied-filter.model';
import { SearchFilterConfig } from '../../../models/search-filter-config.model';
describe('SearchHierarchyFilterComponent', () => {
@@ -75,7 +76,8 @@ describe('SearchHierarchyFilterComponent', () => {
{ provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
{ provide: IN_PLACE_SEARCH, useValue: false },
{ provide: FILTER_CONFIG, useValue: Object.assign(new SearchFilterConfig(), { name: testSearchFilter }) },
{ provide: REFRESH_FILTER, useValue: new BehaviorSubject<boolean>(false)}
{ provide: REFRESH_FILTER, useValue: new BehaviorSubject<boolean>(false) },
{ provide: CHANGE_APPLIED_FILTERS, useValue: new EventEmitter() },
],
schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();
@@ -124,8 +126,8 @@ describe('SearchHierarchyFilterComponent', () => {
beforeEach(async () => {
showVocabularyTreeLink.nativeElement.click();
fixture.componentInstance.selectedValues$ = observableOf(
alreadySelectedValues.map(value => Object.assign(new FacetValue(), { value }))
fixture.componentInstance.selectedAppliedFilters$ = observableOf(
alreadySelectedValues.map(value => Object.assign(new AppliedFilter(), { value }))
);
VocabularyTreeViewComponent.select.emit(Object.assign(new VocabularyEntryDetail(), {
value: newSelectedValue,

36
src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, Inject, OnInit, EventEmitter } from '@angular/core';
import { renderFacetFor } from '../search-filter-type-decorator';
import { FilterType } from '../../../models/filter-type.model';
import { facetLoad, SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
@@ -10,15 +10,13 @@ import { SearchService } from '../../../../../core/shared/search/search.service'
import {
FILTER_CONFIG,
IN_PLACE_SEARCH,
SearchFilterService, REFRESH_FILTER
SearchFilterService, REFRESH_FILTER, CHANGE_APPLIED_FILTERS
} from '../../../../../core/shared/search/search-filter.service';
import { Router } from '@angular/router';
import { Params, Router } from '@angular/router';
import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-page.component';
import { SearchConfigurationService } from '../../../../../core/shared/search/search-configuration.service';
import { SearchFilterConfig } from '../../../models/search-filter-config.model';
import { FacetValue } from '../../../models/facet-value.model';
import { getFacetValueForType } from '../../../search.utils';
import { filter, map, take } from 'rxjs/operators';
import { VocabularyService } from '../../../../../core/submission/vocabularies/vocabulary.service';
import { Observable, BehaviorSubject } from 'rxjs';
@@ -26,6 +24,7 @@ import { PageInfo } from '../../../../../core/shared/page-info.model';
import { environment } from '../../../../../../environments/environment';
import { addOperatorToFilterValue } from '../../../search.utils';
import { VocabularyTreeviewModalComponent } from '../../../../form/vocabulary-treeview-modal/vocabulary-treeview-modal.component';
import { AppliedFilter } from '../../../models/applied-filter.model';
@Component({
selector: 'ds-search-hierarchy-filter',
@@ -49,9 +48,10 @@ export class SearchHierarchyFilterComponent extends SearchFacetFilterComponent i
@Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
@Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
@Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>
@Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>,
@Inject(CHANGE_APPLIED_FILTERS) public changeAppliedFilters: EventEmitter<AppliedFilter[]>,
) {
super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters);
super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters, changeAppliedFilters);
}
vocabularyExists$: Observable<boolean>;
@@ -92,20 +92,14 @@ export class SearchHierarchyFilterComponent extends SearchFacetFilterComponent i
closed: true
};
modalRef.result.then((detail: VocabularyEntryDetail) => {
this.selectedValues$
.pipe(take(1))
.subscribe((selectedValues) => {
this.router.navigate(
[this.searchService.getSearchLink()],
{
queryParams: {
[this.filterConfig.paramName]: [...selectedValues, {value: detail.value}]
.map((facetValue: FacetValue) => getFacetValueForType(facetValue, this.filterConfig)),
},
queryParamsHandling: 'merge',
},
);
});
this.subs.push(this.searchConfigService.selectNewAppliedFilterParams(this.filterConfig.name, detail.value, 'equals').pipe(take(1)).subscribe((params: Params) => {
void this.router.navigate(
[this.searchService.getSearchLink()],
{
queryParams: params,
},
);
}));
}).catch();
}

2
src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
View File

@@ -38,7 +38,7 @@
[(ngModel)]="range" ngDefaultControl>
</nouislider>
</ng-container>
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
<ng-container *ngFor="let page of (facetValues$ | async)">
<div [@facetLoad]="animationState">
<ds-search-facet-range-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-range-option>
</div>

5
src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.spec.ts
View File

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
import { ChangeDetectionStrategy, EventEmitter, NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -6,7 +6,7 @@ import {
FILTER_CONFIG,
IN_PLACE_SEARCH,
REFRESH_FILTER,
SearchFilterService
SearchFilterService, CHANGE_APPLIED_FILTERS
} from '../../../../../core/shared/search/search-filter.service';
import { SearchFilterConfig } from '../../../models/search-filter-config.model';
import { FilterType } from '../../../models/filter-type.model';
@@ -105,6 +105,7 @@ describe('SearchRangeFilterComponent', () => {
{ provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
{ provide: IN_PLACE_SEARCH, useValue: false },
{ provide: REFRESH_FILTER, useValue: new BehaviorSubject<boolean>(false) },
{ provide: CHANGE_APPLIED_FILTERS, useValue: new EventEmitter() },
{
provide: SearchFilterService, useValue: {
getSelectedValuesForFilter: () => selectedValues,

37
src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
View File

@@ -1,7 +1,7 @@
import { BehaviorSubject, combineLatest as observableCombineLatest, Subscription } from 'rxjs';
import { BehaviorSubject, combineLatest as observableCombineLatest, of as observableOf , Subscription } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, EventEmitter } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
import { FilterType } from '../../../models/filter-type.model';
@@ -9,6 +9,7 @@ import { renderFacetFor } from '../search-filter-type-decorator';
import { facetLoad, SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
import { SearchFilterConfig } from '../../../models/search-filter-config.model';
import {
CHANGE_APPLIED_FILTERS,
FILTER_CONFIG,
IN_PLACE_SEARCH,
REFRESH_FILTER,
@@ -20,6 +21,8 @@ import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-p
import { SearchConfigurationService } from '../../../../../core/shared/search/search-configuration.service';
import { RouteService } from '../../../../../core/services/route.service';
import { hasValue } from '../../../../empty.util';
import { AppliedFilter } from '../../../models/applied-filter.model';
import { FacetValues } from '../../../models/facet-values.model';
import { yearFromString } from 'src/app/shared/date.util';
/**
@@ -78,7 +81,7 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
/**
* The current range of the filter
*/
range;
range: [number | undefined, number | undefined];
/**
* Subscription to unsubscribe from
@@ -101,8 +104,9 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
@Inject(PLATFORM_ID) private platformId: any,
@Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>,
@Inject(CHANGE_APPLIED_FILTERS) public changeAppliedFilters: EventEmitter<AppliedFilter[]>,
private route: RouteService) {
super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters);
super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters, changeAppliedFilters);
}
@@ -118,13 +122,13 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
this.maxLabel = this.translateService.instant('search.filters.filter.' + this.filterConfig.name + '.max.placeholder');
const iniMin = this.route.getQueryParameterValue(this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX).pipe(startWith(undefined));
const iniMax = this.route.getQueryParameterValue(this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX).pipe(startWith(undefined));
this.sub = observableCombineLatest(iniMin, iniMax).pipe(
map(([min, max]) => {
const minimum = hasValue(min) ? min : this.min;
const maximum = hasValue(max) ? max : this.max;
this.sub = observableCombineLatest([iniMin, iniMax]).pipe(
map(([min, max]: [string, string]) => {
const minimum = hasValue(min) ? Number(min) : this.min;
const maximum = hasValue(max) ? Number(max) : this.max;
return [minimum, maximum];
})
).subscribe((minmax) => this.range = minmax);
).subscribe((minmax: [number, number]) => this.range = minmax);
// Default/base config for nouislider
this.config = {
@@ -136,6 +140,19 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
};
}
setAppliedFilter(allFacetValues: FacetValues[]): void {
const appliedFilters: AppliedFilter[] = [].concat(...allFacetValues.map((facetValues: FacetValues) => facetValues.appliedFilters))
.filter((appliedFilter: AppliedFilter) => hasValue(appliedFilter))
.filter((appliedFilter: AppliedFilter) => appliedFilter.filter === this.filterConfig.name)
// TODO this should ideally be fixed in the backend
.map((appliedFilter: AppliedFilter) => Object.assign({}, appliedFilter, {
operator: 'range',
}));
this.selectedAppliedFilters$ = observableOf(appliedFilters);
this.changeAppliedFilters.emit(appliedFilters);
}
/**
* Submits new custom range values to the range filter from the widget
*/
@@ -146,7 +163,7 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
const newMin = this.range[0] !== this.min ? [this.range[0]] : null;
const newMax = this.range[1] !== this.max ? [this.range[1]] : null;
this.router.navigate(this.getSearchLinkParts(), {
void this.router.navigate(this.getSearchLinkParts(), {
queryParams:
{
[this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: newMin,

6
src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html
View File

@@ -1,9 +1,9 @@
<div>
<div class="filters py-2">
<ds-search-facet-selected-option *ngFor="let value of (selectedValues$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
<ds-search-facet-selected-option *ngFor="let value of (selectedAppliedFilters$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
<ng-container *ngFor="let page of (facetValues$ | async)">
<div [@facetLoad]="animationState">
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
</div>
</ng-container>
<div class="clearfix toggle-more-filters">

2
src/app/shared/search/search-filters/search-filters.component.html
View File

@@ -1,7 +1,7 @@
<h3>{{"search.filters.head" | translate}}</h3>
<div *ngIf="(filters | async)?.hasSucceeded">
<div *ngFor="let filter of (filters | async)?.payload; trackBy: trackUpdate">
<ds-search-filter [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters"></ds-search-filter>
<ds-search-filter [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters" (changeAppliedFilters)="updateAppliedFilters(filter.name, $event)"></ds-search-filter>
</div>
</div>
<a class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button"><i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}</a>

23
src/app/shared/search/search-filters/search-filters.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Inject, Input, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject, Observable } from 'rxjs';
@@ -8,10 +8,10 @@ import { SearchService } from '../../../core/shared/search/search.service';
import { RemoteData } from '../../../core/data/remote-data';
import { SearchFilterConfig } from '../models/search-filter-config.model';
import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
import { SearchFilterService } from '../../../core/shared/search/search-filter.service';
import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
import { currentPath } from '../../utils/route.utils';
import { hasValue } from '../../empty.util';
import { AppliedFilter } from '../models/applied-filter.model';
@Component({
selector: 'ds-search-filters',
@@ -55,6 +55,13 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
*/
@Input() refreshFilters: BehaviorSubject<boolean>;
/**
* Emits the {@link AppliedFilter}s by search filter name
*/
@Output() changeAppliedFilters: EventEmitter<Map<string, AppliedFilter[]>> = new EventEmitter();
appliedFilters: Map<string, AppliedFilter[]> = new Map();
/**
* Link to the search page
*/
@@ -71,7 +78,6 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
*/
constructor(
private searchService: SearchService,
private filterService: SearchFilterService,
private router: Router,
@Inject(SEARCH_CONFIG_SERVICE) private searchConfigService: SearchConfigurationService) {
}
@@ -101,6 +107,17 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
return config ? config.name : undefined;
}
/**
* Updates the map of {@link AppliedFilter}s and emits it to it's parent component
*
* @param filterName
* @param appliedFilters
*/
updateAppliedFilters(filterName: string, appliedFilters: AppliedFilter[]): void {
this.appliedFilters.set(filterName, appliedFilters);
this.changeAppliedFilters.emit(this.appliedFilters);
}
ngOnDestroy() {
this.subs.forEach((sub) => {
if (hasValue(sub)) {

16
src/app/shared/search/search-labels/search-label-loader/search-label-loader-directive.directive.ts Normal file
View File

@@ -0,0 +1,16 @@
import { Directive, ViewContainerRef } from '@angular/core';
/**
* Directive used as a hook to know where to inject the dynamic loaded component
*/
@Directive({
selector: '[dsSearchLabelLoader]'
})
export class SearchLabelLoaderDirective {
constructor(
public viewContainerRef: ViewContainerRef,
) {
}
}

1
src/app/shared/search/search-labels/search-label-loader/search-label-loader.component.html Normal file
View File

@@ -0,0 +1 @@
<ng-template dsSearchLabelLoader></ng-template>

132
src/app/shared/search/search-labels/search-label-loader/search-label-loader.component.ts Normal file
View File

@@ -0,0 +1,132 @@
import { Component, ComponentRef, OnChanges, OnDestroy, OnInit, ViewChild, ViewContainerRef, SimpleChanges, Input } from '@angular/core';
import { Subscription } from 'rxjs';
import { GenericConstructor } from 'src/app/core/shared/generic-constructor';
import { hasValue, isNotEmpty } from 'src/app/shared/empty.util';
import { ThemeService } from '../../../theme-support/theme.service';
import { SearchLabelLoaderDirective } from './search-label-loader-directive.directive';
import { getSearchLabelByOperator } from './search-label-loader.decorator';
import { AppliedFilter } from '../../models/applied-filter.model';
@Component({
selector: 'ds-search-label-loader',
templateUrl: './search-label-loader.component.html',
})
export class SearchLabelLoaderComponent implements OnInit, OnChanges, OnDestroy {
@Input() inPlaceSearch: boolean;
@Input() appliedFilter: AppliedFilter;
/**
* Directive to determine where the dynamic child component is located
*/
@ViewChild(SearchLabelLoaderDirective, { static: true }) componentDirective: SearchLabelLoaderDirective;
/**
* The reference to the dynamic component
*/
protected compRef: ComponentRef<Component>;
/**
* Array to track all subscriptions and unsubscribe them onDestroy
*/
protected subs: Subscription[] = [];
/**
* The @Input() that are used to find the matching component using {@link getComponent}. When the value of
* one of these @Input() change this loader needs to retrieve the best matching component again using the
* {@link getComponent} method.
*/
protected inputNamesDependentForComponent: (keyof this & string)[] = [];
/**
* The list of the @Input() names that should be passed down to the dynamically created components.
*/
protected inputNames: (keyof this & string)[] = [
'inPlaceSearch',
'appliedFilter',
];
constructor(
protected themeService: ThemeService,
) {
}
/**
* Set up the dynamic child component
*/
ngOnInit(): void {
this.instantiateComponent();
}
/**
* Whenever the inputs change, update the inputs of the dynamic component
*/
ngOnChanges(changes: SimpleChanges): void {
if (hasValue(this.compRef)) {
if (this.inputNamesDependentForComponent.some((name: keyof this & string) => hasValue(changes[name]) && changes[name].previousValue !== changes[name].currentValue)) {
// Recreate the component when the @Input()s used by getComponent() aren't up-to-date anymore
this.destroyComponentInstance();
this.instantiateComponent();
} else {
this.connectInputsAndOutputs();
}
}
}
ngOnDestroy(): void {
this.subs
.filter((subscription: Subscription) => hasValue(subscription))
.forEach((subscription: Subscription) => subscription.unsubscribe());
this.destroyComponentInstance();
}
/**
* Creates the component and connects the @Input() & @Output() from the ThemedComponent to its child Component.
*/
public instantiateComponent(): void {
const component: GenericConstructor<Component> = this.getComponent();
const viewContainerRef: ViewContainerRef = this.componentDirective.viewContainerRef;
viewContainerRef.clear();
this.compRef = viewContainerRef.createComponent(
component, {
index: 0,
injector: undefined,
},
);
this.connectInputsAndOutputs();
}
/**
* Destroys the themed component and calls it's `ngOnDestroy`
*/
public destroyComponentInstance(): void {
if (hasValue(this.compRef)) {
this.compRef.destroy();
this.compRef = null;
}
}
/**
* Fetch the component depending on the item's entity type, metadata representation type and context
*/
public getComponent(): GenericConstructor<Component> {
return getSearchLabelByOperator(this.appliedFilter.operator);
}
/**
* Connect the inputs and outputs of this component to the dynamic component,
* to ensure they're in sync
*/
public connectInputsAndOutputs(): void {
if (isNotEmpty(this.inputNames) && hasValue(this.compRef) && hasValue(this.compRef.instance)) {
this.inputNames.filter((name: string) => this[name] !== undefined).filter((name: string) => this[name] !== this.compRef.instance[name]).forEach((name: string) => {
this.compRef.instance[name] = this[name];
});
}
}
}

17
src/app/shared/search/search-labels/search-label-loader/search-label-loader.decorator.ts Normal file
View File

@@ -0,0 +1,17 @@
import { Component } from '@angular/core';
import { GenericConstructor } from '../../../../core/shared/generic-constructor';
export const map: Map<string, GenericConstructor<Component>> = new Map();
export function renderSearchLabelFor(operator: string) {
return function decorator(objectElement: any) {
if (!objectElement) {
return;
}
map.set(operator, objectElement);
};
}
export function getSearchLabelByOperator(operator: string): GenericConstructor<Component> {
return map.get(operator);
}

14
src/app/shared/search/search-labels/search-label-range/search-label-range.component.html Normal file
View File

@@ -0,0 +1,14 @@
<a *ngIf="min !== '*'"
[routerLink]="searchLink"
[queryParams]="(removeParametersMin$ | async)"
class="badge badge-primary mr-1 mb-1 text-capitalize">
{{('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate}}: {{ min }}
<span> ×</span>
</a>
<a *ngIf="max !== '*'"
[routerLink]="searchLink"
[queryParams]="(removeParametersMax$ | async)"
class="badge badge-primary mr-1 mb-1 text-capitalize">
{{('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate}}: {{ max }}
<span> ×</span>
</a>

94
src/app/shared/search/search-labels/search-label-range/search-label-range.component.spec.ts Normal file
View File

@@ -0,0 +1,94 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { Params, ActivatedRoute } from '@angular/router';
import { SearchLabelRangeComponent } from './search-label-range.component';
import { SearchServiceStub } from '../../../testing/search-service.stub';
import { SearchService } from '../../../../core/shared/search/search.service';
import { ActivatedRouteStub } from '../../../testing/active-router.stub';
import { AppliedFilter } from '../../models/applied-filter.model';
import { addOperatorToFilterValue } from '../../search.utils';
import { RouterTestingModule } from '@angular/router/testing';
import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
import { SearchConfigurationServiceStub } from '../../../testing/search-configuration-service.stub';
import { PaginationService } from '../../../../core/pagination/pagination.service';
import { PaginationServiceStub } from '../../../testing/pagination-service.stub';
import { take } from 'rxjs/operators';
import { of as observableOf } from 'rxjs';
import { PaginationComponentOptions } from '../../../pagination/pagination-component-options.model';
describe('SearchLabelRangeComponent', () => {
let comp: SearchLabelRangeComponent;
let fixture: ComponentFixture<SearchLabelRangeComponent>;
let route: ActivatedRouteStub;
let searchConfigurationService: SearchConfigurationServiceStub;
let paginationService: PaginationServiceStub;
const searchLink = '/search';
let appliedFilter: AppliedFilter;
let initialRouteParams: Params;
let pagination: PaginationComponentOptions;
function init(): void {
appliedFilter = Object.assign(new AppliedFilter(), {
filter: 'author',
operator: 'authority',
value: '1282121b-5394-4689-ab93-78d537764052',
label: 'Odinson, Thor',
});
initialRouteParams = {
'query': '',
'page-id.page': '5',
'f.author': addOperatorToFilterValue(appliedFilter.value, appliedFilter.operator),
'f.has_content_in_original_bundle': addOperatorToFilterValue('true', 'equals'),
};
pagination = Object.assign(new PaginationComponentOptions(), {
id: 'page-id',
currentPage: 1,
pageSize: 20,
});
}
beforeEach(waitForAsync(async () => {
init();
route = new ActivatedRouteStub(initialRouteParams);
searchConfigurationService = new SearchConfigurationServiceStub();
paginationService = new PaginationServiceStub(pagination);
await TestBed.configureTestingModule({
imports: [
RouterTestingModule,
TranslateModule.forRoot(),
],
declarations: [
SearchLabelRangeComponent,
],
providers: [
{ provide: PaginationService, useValue: paginationService },
{ provide: SearchConfigurationService, useValue: searchConfigurationService },
{ provide: SearchService, useValue: new SearchServiceStub(searchLink) },
{ provide: ActivatedRoute, useValue: route },
],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SearchLabelRangeComponent);
comp = fixture.componentInstance;
comp.appliedFilter = appliedFilter;
fixture.detectChanges();
});
describe('updateRemoveParams', () => {
it('should always reset the page to 1', (done: DoneFn) => {
spyOn(searchConfigurationService, 'unselectAppliedFilterParams').and.returnValue(observableOf(initialRouteParams));
comp.updateRemoveParams('f.dateIssued.max', '2000').pipe(take(1)).subscribe((params: Params) => {
expect(params).toEqual(Object.assign({}, initialRouteParams, {
'page-id.page': 1,
}));
done();
});
});
});
});

79
src/app/shared/search/search-labels/search-label-range/search-label-range.component.ts Normal file
View File

@@ -0,0 +1,79 @@
import { Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Params, Router } from '@angular/router';
import { SearchService } from '../../../../core/shared/search/search.service';
import { currentPath } from '../../../utils/route.utils';
import { AppliedFilter } from '../../models/applied-filter.model';
import { renderSearchLabelFor } from '../search-label-loader/search-label-loader.decorator';
import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
import { map } from 'rxjs/operators';
import { PaginationService } from '../../../../core/pagination/pagination.service';
/**
* Component that represents the label containing the currently active filters
*/
@Component({
selector: 'ds-search-label-range',
templateUrl: './search-label-range.component.html',
})
@renderSearchLabelFor('range')
export class SearchLabelRangeComponent implements OnInit {
@Input() inPlaceSearch: boolean;
@Input() appliedFilter: AppliedFilter;
searchLink: string;
removeParametersMin$: Observable<Params>;
removeParametersMax$: Observable<Params>;
min: string;
max: string;
constructor(
protected paginationService: PaginationService,
protected router: Router,
protected searchConfigurationService: SearchConfigurationService,
protected searchService: SearchService,
) {
}
ngOnInit(): void {
this.searchLink = this.getSearchLink();
this.min = this.appliedFilter.value.substring(1, this.appliedFilter.value.indexOf('TO') - 1);
this.max = this.appliedFilter.value.substring(this.appliedFilter.value.indexOf('TO') + 3, this.appliedFilter.value.length - 1);
this.removeParametersMin$ = this.updateRemoveParams(`${this.appliedFilter.filter}.min`, this.min);
this.removeParametersMax$ = this.updateRemoveParams(`${this.appliedFilter.filter}.max`, this.max);
}
/**
* Calculates the parameters that should change if this {@link appliedFilter} would be removed from the active filters
*
* @param filterName The {@link AppliedFilter}'s name
* @param value The {@link AppliedFilter}'s value
* @param operator The {@link AppliedFilter}'s optional operator
*/
updateRemoveParams(filterName: string, value: string, operator?: string): Observable<Params> {
const page: string = this.paginationService.getPageParam(this.searchConfigurationService.paginationID);
return this.searchConfigurationService.unselectAppliedFilterParams(filterName, value, operator).pipe(
map((params: Params) => ({
...params,
[page]: 1,
})),
);
}
/**
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
getSearchLink(): string {
if (this.inPlaceSearch) {
return currentPath(this.router);
}
return this.searchService.getSearchLink();
}
}

6
src/app/shared/search/search-labels/search-label/search-label.component.html
View File

@@ -1,7 +1,7 @@
<a class="badge badge-primary mr-1 mb-1"
[attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.' + key) | translate, value: normalizeFilterValue(value) }"
[attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.' + appliedFilter.filter) | translate, value: appliedFilter.label }"
[routerLink]="searchLink"
[queryParams]="(removeParameters | async)" queryParamsHandling="merge">
{{('search.filters.applied.' + key) | translate}}: {{'search.filters.' + filterName + '.' + value | translate: {default: normalizeFilterValue(value)} }}
[queryParams]="(removeParameters$ | async)">
{{('search.filters.applied.f.' + appliedFilter.filter) | translate}}: {{'search.filters.' + appliedFilter.filter + '.' + appliedFilter.label | translate: {default: appliedFilter.label} }}
<span aria-hidden="true"> ×</span>
</a>

129
src/app/shared/search/search-labels/search-label/search-label.component.spec.ts
View File

@@ -1,97 +1,94 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateModule } from '@ngx-translate/core';
import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Observable, of as observableOf } from 'rxjs';
import { Params, Router } from '@angular/router';
import { Params, ActivatedRoute } from '@angular/router';
import { SearchLabelComponent } from './search-label.component';
import { ObjectKeysPipe } from '../../../utils/object-keys-pipe';
import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
import { SearchServiceStub } from '../../../testing/search-service.stub';
import { SearchConfigurationServiceStub } from '../../../testing/search-configuration-service.stub';
import { SearchService } from '../../../../core/shared/search/search.service';
import { PaginationComponentOptions } from '../../../pagination/pagination-component-options.model';
import { PaginationService } from '../../../../core/pagination/pagination.service';
import { ActivatedRouteStub } from '../../../testing/active-router.stub';
import { AppliedFilter } from '../../models/applied-filter.model';
import { addOperatorToFilterValue } from '../../search.utils';
import { RouterTestingModule } from '@angular/router/testing';
import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
import { SearchConfigurationServiceStub } from '../../../testing/search-configuration-service.stub';
import { PaginationService } from '../../../../core/pagination/pagination.service';
import { PaginationServiceStub } from '../../../testing/pagination-service.stub';
import { PaginationComponentOptions } from '../../../pagination/pagination-component-options.model';
import { of as observableOf } from 'rxjs';
import { take } from 'rxjs/operators';
describe('SearchLabelComponent', () => {
let comp: SearchLabelComponent;
let fixture: ComponentFixture<SearchLabelComponent>;
let route: ActivatedRouteStub;
let searchConfigurationService: SearchConfigurationServiceStub;
let paginationService: PaginationServiceStub;
const searchLink = '/search';
let searchService;
let appliedFilter: AppliedFilter;
let initialRouteParams: Params;
let pagination: PaginationComponentOptions;
const key1 = 'author';
const key2 = 'subject';
const value1 = 'Test, Author';
const normValue1 = 'Test, Author';
const value2 = 'TestSubject';
const value3 = 'Test, Authority,authority';
const normValue3 = 'Test, Authority';
const filter1 = [key1, value1];
const filter2 = [key2, value2];
const mockFilters = [
filter1,
filter2
];
function init(): void {
appliedFilter = Object.assign(new AppliedFilter(), {
filter: 'author',
operator: 'authority',
value: '1282121b-5394-4689-ab93-78d537764052',
label: 'Odinson, Thor',
});
initialRouteParams = {
'query': '',
'spc.page': '1',
'f.author': addOperatorToFilterValue(appliedFilter.value, appliedFilter.operator),
'f.has_content_in_original_bundle': addOperatorToFilterValue('true', 'equals'),
};
pagination = Object.assign(new PaginationComponentOptions(), {
id: 'page-id',
currentPage: 1,
pageSize: 20,
});
}
const pagination = Object.assign(new PaginationComponentOptions(), { id: 'page-id', currentPage: 1, pageSize: 20 });
const paginationService = new PaginationServiceStub(pagination);
beforeEach(waitForAsync(async () => {
init();
route = new ActivatedRouteStub(initialRouteParams);
searchConfigurationService = new SearchConfigurationServiceStub();
paginationService = new PaginationServiceStub(pagination);
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), NoopAnimationsModule, FormsModule],
declarations: [SearchLabelComponent, ObjectKeysPipe],
providers: [
{ provide: SearchService, useValue: new SearchServiceStub(searchLink) },
{ provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
{ provide: SearchConfigurationService, useValue: new SearchConfigurationServiceStub() },
{ provide: PaginationService, useValue: paginationService },
{ provide: Router, useValue: {} }
// { provide: SearchConfigurationService, useValue: {getCurrentFrontendFilters : () => observableOf({})} }
await TestBed.configureTestingModule({
imports: [
RouterTestingModule,
TranslateModule.forRoot(),
],
declarations: [
SearchLabelComponent,
],
providers: [
{ provide: PaginationService, useValue: paginationService },
{ provide: SearchConfigurationService, useValue: searchConfigurationService },
{ provide: SearchService, useValue: new SearchServiceStub(searchLink) },
{ provide: ActivatedRoute, useValue: route },
],
schemas: [NO_ERRORS_SCHEMA]
}).overrideComponent(SearchLabelComponent, {
set: { changeDetection: ChangeDetectionStrategy.Default }
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SearchLabelComponent);
comp = fixture.componentInstance;
searchService = (comp as any).searchService;
comp.key = key1;
comp.value = value1;
(comp as any).appliedFilters = observableOf(mockFilters);
comp.appliedFilter = appliedFilter;
fixture.detectChanges();
});
describe('when getRemoveParams is called', () => {
let obs: Observable<Params>;
describe('updateRemoveParams', () => {
it('should always reset the page to 1', (done: DoneFn) => {
spyOn(searchConfigurationService, 'unselectAppliedFilterParams').and.returnValue(observableOf(initialRouteParams));
beforeEach(() => {
obs = comp.getRemoveParams();
});
it('should return all params but the provided filter', () => {
obs.subscribe((params) => {
// Should contain only filter2 and page: length == 2
expect(Object.keys(params).length).toBe(2);
comp.updateRemoveParams().pipe(take(1)).subscribe((params: Params) => {
expect(params).toEqual(Object.assign({}, initialRouteParams, {
'page-id.page': 1,
}));
done();
});
});
});
describe('when normalizeFilterValue is called', () => {
it('should return properly filter value', () => {
let result: string;
result = comp.normalizeFilterValue(value1);
expect(result).toBe(normValue1);
result = comp.normalizeFilterValue(value3);
expect(result).toBe(normValue3);
});
});
});

87
src/app/shared/search/search-labels/search-label/search-label.component.ts
View File

@@ -1,94 +1,71 @@
import { Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Params, Router } from '@angular/router';
import { map } from 'rxjs/operators';
import { hasValue, isNotEmpty } from '../../../empty.util';
import { SearchService } from '../../../../core/shared/search/search.service';
import { currentPath } from '../../../utils/route.utils';
import { PaginationService } from '../../../../core/pagination/pagination.service';
import { AppliedFilter } from '../../models/applied-filter.model';
import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
import { stripOperatorFromFilterValue } from '../../search.utils';
@Component({
selector: 'ds-search-label',
templateUrl: './search-label.component.html',
})
import { renderSearchLabelFor } from '../search-label-loader/search-label-loader.decorator';
import { map } from 'rxjs/operators';
import { PaginationService } from '../../../../core/pagination/pagination.service';
/**
* Component that represents the label containing the currently active filters
*/
@Component({
selector: 'ds-search-label',
templateUrl: './search-label.component.html',
})
@renderSearchLabelFor('equals')
@renderSearchLabelFor('notequals')
@renderSearchLabelFor('authority')
@renderSearchLabelFor('notauthority')
@renderSearchLabelFor('contains')
@renderSearchLabelFor('notcontains')
@renderSearchLabelFor('query')
export class SearchLabelComponent implements OnInit {
@Input() key: string;
@Input() value: string;
@Input() inPlaceSearch: boolean;
@Input() appliedFilters: Observable<Params>;
@Input() appliedFilter: AppliedFilter;
searchLink: string;
removeParameters: Observable<Params>;
/**
* The name of the filter without the f. prefix
*/
filterName: string;
removeParameters$: Observable<Params>;
/**
* Initialize the instance variable
*/
constructor(
private searchService: SearchService,
private paginationService: PaginationService,
private searchConfigurationService: SearchConfigurationService,
private router: Router) {
protected paginationService: PaginationService,
protected router: Router,
protected searchConfigurationService: SearchConfigurationService,
protected searchService: SearchService,
) {
}
ngOnInit(): void {
this.searchLink = this.getSearchLink();
this.removeParameters = this.getRemoveParams();
this.filterName = this.getFilterName();
this.removeParameters$ = this.updateRemoveParams();
}
/**
* Calculates the parameters that should change if a given value for the given filter would be removed from the active filters
* @returns {Observable<Params>} The changed filter parameters
* Calculates the parameters that should change if this {@link appliedFilter} would be removed from the active filters
*/
getRemoveParams(): Observable<Params> {
return this.appliedFilters.pipe(
map((filters) => {
const field: string = Object.keys(filters).find((f) => f === this.key);
const newValues = hasValue(filters[field]) ? filters[field].filter((v) => v !== this.value) : null;
const page = this.paginationService.getPageParam(this.searchConfigurationService.paginationID);
return {
[field]: isNotEmpty(newValues) ? newValues : null,
[page]: 1
};
})
updateRemoveParams(): Observable<Params> {
const page: string = this.paginationService.getPageParam(this.searchConfigurationService.paginationID);
return this.searchConfigurationService.unselectAppliedFilterParams(this.appliedFilter.filter, this.appliedFilter.value, this.appliedFilter.operator).pipe(
map((params: Params) => ({
...params,
[page]: 1,
})),
);
}
/**
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
private getSearchLink(): string {
getSearchLink(): string {
if (this.inPlaceSearch) {
return currentPath(this.router);
}
return this.searchService.getSearchLink();
}
/**
* TODO to review after https://github.com/DSpace/dspace-angular/issues/368 is resolved
* Strips authority operator from filter value
* e.g. 'test ,authority' => 'test'
*
* @param value
*/
normalizeFilterValue(value: string) {
// const pattern = /,[^,]*$/g;
const pattern = /,authority*$/g;
value = value.replace(pattern, '');
return stripOperatorFromFilterValue(value);
}
private getFilterName(): string {
return this.key.startsWith('f.') ? this.key.substring(2) : this.key;
}
}

9
src/app/shared/search/search-labels/search-labels.component.html
View File

@@ -1,5 +1,8 @@
<div class="labels">
<ng-container *ngFor="let key of ((appliedFilters | async) | dsObjectKeys)">
<ds-search-label *ngFor="let value of (appliedFilters | async)[key]" [inPlaceSearch]="inPlaceSearch" [key]="key" [value]="value" [appliedFilters]="appliedFilters"></ds-search-label>
</ng-container>
<ng-container *ngFor="let appliedFilters of (appliedFilters | keyvalue)">
<ds-search-label-loader *ngFor="let appliedFilter of appliedFilters.value"
[appliedFilter]="appliedFilter"
[inPlaceSearch]="inPlaceSearch">
</ds-search-label-loader>
</ng-container>
</div>

11
src/app/shared/search/search-labels/search-labels.component.spec.ts
View File

@@ -16,7 +16,6 @@ describe('SearchLabelsComponent', () => {
let fixture: ComponentFixture<SearchLabelsComponent>;
const searchLink = '/search';
let searchService;
const field1 = 'author';
const field2 = 'subject';
@@ -46,16 +45,10 @@ describe('SearchLabelsComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(SearchLabelsComponent);
comp = fixture.componentInstance;
searchService = (comp as any).searchService;
(comp as any).appliedFilters = observableOf(mockFilters);
fixture.detectChanges();
});
describe('when the component has been initialized', () => {
it('should return all params but the provided filter', () => {
comp.appliedFilters.subscribe((filters) => {
expect(filters).toBe(mockFilters);
});
});
it('should create', () => {
expect(comp).toBeTruthy();
});
});

32
src/app/shared/search/search-labels/search-labels.component.ts
View File

@@ -1,9 +1,5 @@
import { Component, Inject, Input } from '@angular/core';
import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
import { Observable } from 'rxjs';
import { Params, Router } from '@angular/router';
import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
import { map } from 'rxjs/operators';
import { Component, Input } from '@angular/core';
import { AppliedFilter } from '../models/applied-filter.model';
@Component({
selector: 'ds-search-labels',
@@ -15,31 +11,15 @@ import { map } from 'rxjs/operators';
* Component that represents the labels containing the currently active filters
*/
export class SearchLabelsComponent {
/**
* Emits the currently active filters
*/
appliedFilters: Observable<Params>;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
@Input() inPlaceSearch: boolean;
/**
* Initialize the instance variable
* The {@link AppliedFilter}s by filter name
*/
constructor(
protected router: Router,
@Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService) {
this.appliedFilters = this.searchConfigService.getCurrentFrontendFilters().pipe(
map((params) => {
const labels = {};
Object.keys(params)
.forEach((key) => {
labels[key] = [...params[key].map((value) => value)];
});
return labels;
})
);
}
@Input() appliedFilters: Map<string, AppliedFilter[]>;
}

4
src/app/shared/search/search-sidebar/search-sidebar.component.html
View File

@@ -22,7 +22,9 @@
[currentConfiguration]="configuration"
[filters]="filters"
[refreshFilters]="refreshFilters"
[inPlaceSearch]="inPlaceSearch"></ds-themed-search-filters>
[inPlaceSearch]="inPlaceSearch"
(changeAppliedFilters)="changeAppliedFilters.emit($event)">
</ds-themed-search-filters>
<ds-themed-search-settings [currentSortOption]="currentSortOption"
[sortOptionsList]="sortOptionsList"></ds-themed-search-settings>
</div>

6
src/app/shared/search/search-sidebar/search-sidebar.component.ts
View File

@@ -7,6 +7,7 @@ import { SortOptions } from '../../../core/cache/models/sort-options.model';
import { ViewMode } from '../../../core/shared/view-mode.model';
import { RemoteData } from '../../../core/data/remote-data';
import { SearchFilterConfig } from '../models/search-filter-config.model';
import { AppliedFilter } from '../models/applied-filter.model';
/**
* This component renders a simple item page.
@@ -95,6 +96,11 @@ export class SearchSidebarComponent {
*/
@Output() changeConfiguration: EventEmitter<SearchConfigurationOption> = new EventEmitter<SearchConfigurationOption>();
/**
* Emits the {@link AppliedFilter}s by search filter name
*/
@Output() changeAppliedFilters: EventEmitter<Map<string, AppliedFilter[]>> = new EventEmitter();
/**
* Emits event when the user select a new view mode
*/

5
src/app/shared/search/search.component.html
View File

@@ -62,6 +62,7 @@
[viewModeList]="viewModeList"
[showViewModes]="showViewModes"
(changeConfiguration)="changeContext($event.context)"
(changeAppliedFilters)="appliedFilters = $event"
(changeViewMode)="changeViewMode()"></ds-themed-search-sidebar>
<ds-themed-search-sidebar id="search-sidebar-sm" *ngIf="(isXsOrSm$ | async)"
[configurationList]="configurationList"
@@ -77,6 +78,7 @@
[showViewModes]="showViewModes"
(toggleSidebar)="closeSidebar()"
(changeConfiguration)="changeContext($event.context)"
(changeAppliedFilters)="appliedFilters = $event"
(changeViewMode)="changeViewMode()">
</ds-themed-search-sidebar>
</ng-template>
@@ -92,7 +94,8 @@
</ds-themed-search-form>
<div class="row mb-3 mb-md-1">
<div class="labels col-sm-9">
<ds-search-labels *ngIf="searchEnabled" [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
<ds-search-labels *ngIf="searchEnabled" [appliedFilters]="appliedFilters" [inPlaceSearch]="inPlaceSearch">
</ds-search-labels>
</div>
</div>
</ng-template>

8
src/app/shared/search/search.component.ts
View File

@@ -34,10 +34,11 @@ import { CollectionElementLinkType } from '../object-collection/collection-eleme
import { environment } from 'src/environments/environment';
import { SubmissionObject } from '../../core/submission/models/submission-object.model';
import { SearchFilterConfig } from './models/search-filter-config.model';
import { WorkspaceItem } from '../..//core/submission/models/workspaceitem.model';
import { WorkspaceItem } from '../../core/submission/models/workspaceitem.model';
import { ITEM_MODULE_PATH } from '../../item-page/item-page-routing-paths';
import { COLLECTION_MODULE_PATH } from '../../collection-page/collection-page-routing-paths';
import { COMMUNITY_MODULE_PATH } from '../../community-page/community-page-routing-paths';
import { AppliedFilter } from './models/applied-filter.model';
@Component({
selector: 'ds-search',
@@ -268,6 +269,11 @@ export class SearchComponent implements OnInit {
*/
@Output() selectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
/**
* The {@link AppliedFilter}s by filter name
*/
appliedFilters: Map<string, AppliedFilter[]> = new Map();
constructor(protected service: SearchService,
protected sidebarService: SidebarService,
protected windowService: HostWindowService,

61
src/app/shared/search/search.module.ts
View File

@@ -5,7 +5,10 @@ import { SearchFiltersComponent } from './search-filters/search-filters.componen
import { SearchFilterComponent } from './search-filters/search-filter/search-filter.component';
import { SearchFacetFilterComponent } from './search-filters/search-filter/search-facet-filter/search-facet-filter.component';
import { SearchLabelsComponent } from './search-labels/search-labels.component';
import { SearchLabelLoaderComponent } from './search-labels/search-label-loader/search-label-loader.component';
import { SearchLabelLoaderDirective } from './search-labels/search-label-loader/search-label-loader-directive.directive';
import { SearchLabelComponent } from './search-labels/search-label/search-label.component';
import { SearchLabelRangeComponent } from './search-labels/search-label-range/search-label-range.component';
import { SearchFacetFilterWrapperComponent } from './search-filters/search-filter/search-facet-filter-wrapper/search-facet-filter-wrapper.component';
import { SearchRangeFilterComponent } from './search-filters/search-filter/search-range-filter/search-range-filter.component';
import { SearchTextFilterComponent } from './search-filters/search-filter/search-text-filter/search-text-filter.component';
@@ -35,35 +38,6 @@ import { NouisliderModule } from 'ng2-nouislider';
import { ThemedSearchFiltersComponent } from './search-filters/themed-search-filters.component';
import { ThemedSearchSidebarComponent } from './search-sidebar/themed-search-sidebar.component';
const COMPONENTS = [
SearchComponent,
ThemedSearchComponent,
SearchResultsComponent,
SearchSidebarComponent,
SearchSettingsComponent,
SearchFiltersComponent,
SearchFilterComponent,
SearchFacetFilterComponent,
SearchLabelsComponent,
SearchLabelComponent,
SearchFacetFilterWrapperComponent,
SearchRangeFilterComponent,
SearchTextFilterComponent,
SearchHierarchyFilterComponent,
SearchBooleanFilterComponent,
SearchFacetOptionComponent,
SearchFacetSelectedOptionComponent,
SearchFacetRangeOptionComponent,
SearchAuthorityFilterComponent,
SearchSwitchConfigurationComponent,
ConfigurationSearchPageComponent,
ThemedConfigurationSearchPageComponent,
ThemedSearchResultsComponent,
ThemedSearchSettingsComponent,
ThemedSearchFiltersComponent,
ThemedSearchSidebarComponent,
];
const ENTRY_COMPONENTS = [
SearchFacetFilterComponent,
SearchRangeFilterComponent,
@@ -74,6 +48,29 @@ const ENTRY_COMPONENTS = [
SearchFacetSelectedOptionComponent,
SearchFacetRangeOptionComponent,
SearchAuthorityFilterComponent,
SearchLabelComponent,
SearchLabelRangeComponent,
];
const COMPONENTS = [
...ENTRY_COMPONENTS,
SearchComponent,
ThemedSearchComponent,
SearchResultsComponent,
SearchSidebarComponent,
SearchSettingsComponent,
SearchFiltersComponent,
SearchFilterComponent,
SearchLabelsComponent,
SearchLabelLoaderComponent,
SearchFacetFilterWrapperComponent,
SearchSwitchConfigurationComponent,
ConfigurationSearchPageComponent,
ThemedConfigurationSearchPageComponent,
ThemedSearchResultsComponent,
ThemedSearchSettingsComponent,
ThemedSearchFiltersComponent,
ThemedSearchSidebarComponent,
];
/**
@@ -88,7 +85,8 @@ export const MODELS = [
@NgModule({
declarations: [
...COMPONENTS
...COMPONENTS,
SearchLabelLoaderDirective,
],
imports: [
CommonModule,
@@ -100,7 +98,8 @@ export const MODELS = [
NouisliderModule,
],
exports: [
...COMPONENTS
...COMPONENTS,
SearchLabelLoaderDirective,
]
})
export class SearchModule {

16
src/app/shared/testing/search-configuration-service.stub.ts
View File

@@ -1,6 +1,5 @@
import { BehaviorSubject, of as observableOf } from 'rxjs';
import { SearchConfig } from '../../core/shared/search/search-filters/search-config.model';
import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
import { BehaviorSubject, of as observableOf, Observable } from 'rxjs';
import { Params } from '@angular/router';
export class SearchConfigurationServiceStub {
@@ -33,15 +32,12 @@ export class SearchConfigurationServiceStub {
return observableOf([{value: 'test', label: 'test'}]);
}
getConfigurationSearchConfigObservable() {
return observableOf(new SearchConfig());
unselectAppliedFilterParams(_filterName: string, _value: string, _operator?: string): Observable<Params> {
return observableOf({});
}
getConfigurationSortOptionsObservable() {
return observableOf([new SortOptions('score', SortDirection.ASC), new SortOptions('score', SortDirection.DESC)]);
selectNewAppliedFilterParams(_filterName: string, _value: string, _operator?: string): Observable<Params> {
return observableOf({});
}
initializeSortOptionsFromConfiguration() {
/* empty */
}
}

75
src/app/shared/testing/search-filter-service.stub.ts Normal file
View File

@@ -0,0 +1,75 @@
import { Observable, of as observableOf } from 'rxjs';
import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
import { SearchFilterConfig } from '../search/models/search-filter-config.model';
import { Params } from '@angular/router';
/* eslint-disable no-empty,@typescript-eslint/no-empty-function */
export class SearchFilterServiceStub {
isFilterActiveWithValue(_paramName: string, _filterValue: string): Observable<boolean> {
return observableOf(true);
}
isFilterActive(_paramName: string): Observable<boolean> {
return observableOf(true);
}
getCurrentScope(): Observable<string> {
return observableOf(undefined);
}
getCurrentQuery(): Observable<string> {
return observableOf(undefined);
}
getCurrentPagination(_pagination: any = {}): Observable<PaginationComponentOptions> {
return Object.assign(new PaginationComponentOptions());
}
getCurrentSort(_defaultSort: SortOptions): Observable<SortOptions> {
return observableOf(new SortOptions('', SortDirection.ASC));
}
getCurrentFilters(): Observable<Params> {
return observableOf({});
}
getCurrentView(): Observable<string> {
return observableOf(undefined);
}
getSelectedValuesForFilter(_filterConfig: SearchFilterConfig): Observable<string[]> {
return observableOf([]);
}
isCollapsed(_filterName: string): Observable<boolean> {
return observableOf(true);
}
getPage(_filterName: string): Observable<number> {
return observableOf(1);
}
collapse(_filterName: string): void {
}
expand(_filterName: string): void {
}
toggle(_filterName: string): void {
}
initializeFilter(_filter: SearchFilterConfig): void {
}
decrementPage(_filterName: string): void {
}
incrementPage(_filterName: string): void {
}
resetPage(_filterName: string): void {
}
}

4
src/app/shared/testing/search-service.stub.ts
View File

@@ -1,5 +1,7 @@
import {of as observableOf, Observable , BehaviorSubject } from 'rxjs';
import { ViewMode } from '../../core/shared/view-mode.model';
import { SearchFilterConfig } from '../search/models/search-filter-config.model';
import { PaginatedSearchOptions } from '../search/models/paginated-search-options.model';
export class SearchServiceStub {
@@ -20,7 +22,7 @@ export class SearchServiceStub {
this.testViewMode = viewMode;
}
getFacetValuesFor() {
getFacetValuesFor(_filterConfig: SearchFilterConfig, _valuePage: number, _searchOptions?: PaginatedSearchOptions, _filterQuery?: string, _useCachedVersionIfAvailable = true) {
return null;
}