Skip to content

Commit 91a419f

Browse files
GauravD2ttdonohue
GauravD2t
and
tdonohue
authored
Advance search search page (DSpace#2608)
* Update homepage-config.interface.ts change comment of homepage-config.interface.ts * advance Search add * slove error while unti test * write unit test * Ensures select element has an accessible name * change data pass into url * error resolve * Search.Filters.Applied.F.Title given name as Title * Advanced filters configurable in the User interface (in config.*.yml) * turn on/off and add filters as a list * remove currenturl * resolve * change envierment config and url pass data * set enabled: false ,and remove debugger ,remove searchConfig * expect clauses add * reslove conflict * merge added * remove commented and design change advance search * moving the "add" button to its own col-lg-12 * resolve conflict * reslove error * merge en.json5 file * remove trailing spaces * resolve Conflicts * Fix typo. property is filter not filters --------- Co-authored-by: Tim Donohue <tim.donohue@lyrasis.org>
1 parent bfeeeac commit 91a419f

16 files changed

Lines changed: 326 additions & 8 deletions

‎config/config.example.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -424,3 +424,12 @@ comcolSelectionSort:
424424
# suggestion:
425425
# - collectionId: 8f7df5ca-f9c2-47a4-81ec-8a6393d6e5af
426426
# source: "openaire"
427+
428+
429+
# Search settings
430+
search:
431+
# Settings to enable/disable or configure advanced search filters.
432+
advancedFilters:
433+
enabled: false
434+
# List of filters to enable in "Advanced Search" dropdown
435+
filter: [ 'title', 'author', 'subject', 'entityType' ]

‎src/app/shared/search/advanced-search/advanced-search.component.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<div class="facet-filter d-block mb-3 p-3" [ngClass]="{ 'focus': focusBox }" role="region">
2+
<button (click)="toggle()" (focusin)="focusBox = true" (focusout)="focusBox = false" class="filter-name d-flex"
3+
[attr.aria-expanded]="false"
4+
[attr.aria-label]="((collapsedSearch ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate) + ' ' + (('search.advanced.filters.head') | translate | lowercase)"
5+
[attr.data-test]="'filter-toggle' | dsBrowserOnly">
6+
<span class="h4 d-inline-block text-left mt-auto mb-auto">
7+
{{'search.advanced.filters.head' | translate}}
8+
</span>
9+
<i class="filter-toggle flex-grow-1 fas p-auto" aria-hidden="true" [ngClass]="collapsedSearch ? 'fa-plus' : 'fa-minus'"
10+
[title]="(collapsedSearch ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate">
11+
</i>
12+
</button>
13+
<div [@slide]="collapsedSearch ? 'collapsed' : 'expanded'" (@slide.start)="startSlide($event)"
14+
(@slide.done)="finishSlide($event)" class="search-filter-wrapper"
15+
[ngClass]="{ 'closed' : closed, 'notab': notab }">
16+
<form [class]="'ng-invalid'" [formGroup]="advSearchForm" (ngSubmit)="onSubmit(advSearchForm.value)">
17+
<div class="row">
18+
<div class="col-lg-12">
19+
<select
20+
[className]="(filter.invalid) && (filter.dirty || filter.touched) ? 'form-control is-invalid' :'form-control'"
21+
aria-label="filter" name="filter" id="filter" placeholder="select operator"
22+
formControlName="filter" required>
23+
<ng-container *ngFor="let filter of appConfig.search.advancedFilters.filter;">
24+
<option [value]="filter">
25+
{{'search.filters.filter.' + filter + '.text'| translate}}
26+
</option>
27+
</ng-container>
28+
</select>
29+
</div>
30+
<div class="col-lg-12 mt-1">
31+
<select
32+
[className]="(operator.invalid) && (operator.dirty || operator.touched) ? 'form-control is-invalid' :'form-control'"
33+
aria-label="operator" name="operator" id="operator" formControlName="operator" required>
34+
<option value="equals">{{'search.filters.operator.equals.text'| translate}}</option>
35+
<option value="notequals">{{'search.filters.operator.notequals.text'| translate}}</option>
36+
<option value="contains">{{'search.filters.operator.contains.text'| translate}}</option>
37+
<option value="notcontains">{{'search.filters.operator.notcontains.text'| translate}}</option>
38+
</select>
39+
</div>
40+
<div class="col-lg-12 mt-1">
41+
<input type="text" aria-label="textsearch" class="form-control" id="textsearch" name="textsearch"
42+
formControlName="textsearch" #text [placeholder]="('filter.search.text.placeholder' | translate)" required>
43+
</div>
44+
<div class="col-lg-12 mt-1">
45+
<button class="form-control btn w-50 float-right btn-primary" type="submit"
46+
[disabled]="advSearchForm.invalid">{{'advancesearch.form.submit'| translate}}</button>
47+
</div>
48+
</div>
49+
</form>
50+
</div>
51+
</div>

‎src/app/shared/search/advanced-search/advanced-search.component.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import '../search-filters/search-filter/search-filter.component.scss';

‎src/app/shared/search/advanced-search/advanced-search.component.spec.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
3+
import { AdvancedSearchComponent } from './advanced-search.component';
4+
import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
5+
import { SearchService } from '../../../core/shared/search/search.service';
6+
import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
7+
import { SearchConfigurationServiceStub } from '../../testing/search-configuration-service.stub';
8+
import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
9+
import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
10+
import { APP_CONFIG } from '../../../../config/app-config.interface';
11+
import { environment } from '../../../../environments/environment';
12+
import { RouterStub } from '../../testing/router.stub';
13+
import { Router } from '@angular/router';
14+
import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
15+
import { BrowserOnlyMockPipe } from '../../testing/browser-only-mock.pipe';
16+
import { RouterTestingModule } from '@angular/router/testing';
17+
import { TranslateModule } from '@ngx-translate/core';
18+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
19+
describe('AdvancedSearchComponent', () => {
20+
let component: AdvancedSearchComponent;
21+
let fixture: ComponentFixture<AdvancedSearchComponent>;
22+
let builderService: FormBuilderService = getMockFormBuilderService();
23+
let searchService: SearchService;
24+
let router;
25+
const searchServiceStub = {
26+
/* eslint-disable no-empty,@typescript-eslint/no-empty-function */
27+
getClearFiltersQueryParams: () => {
28+
},
29+
getSearchLink: () => {
30+
},
31+
getConfigurationSearchConfig: () => { },
32+
/* eslint-enable no-empty, @typescript-eslint/no-empty-function */
33+
};
34+
beforeEach(async () => {
35+
await TestBed.configureTestingModule({
36+
declarations: [AdvancedSearchComponent, BrowserOnlyMockPipe],
37+
imports: [FormsModule, RouterTestingModule, TranslateModule.forRoot(), BrowserAnimationsModule, ReactiveFormsModule],
38+
providers: [
39+
FormBuilder,
40+
{ provide: APP_CONFIG, useValue: environment },
41+
{ provide: FormBuilderService, useValue: builderService },
42+
{ provide: Router, useValue: new RouterStub() },
43+
{ provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
44+
{ provide: RemoteDataBuildService, useValue: {} },
45+
{ provide: SearchService, useValue: searchServiceStub },
46+
],
47+
schemas: [NO_ERRORS_SCHEMA]
48+
}).overrideComponent(AdvancedSearchComponent, {
49+
set: { changeDetection: ChangeDetectionStrategy.Default }
50+
}).compileComponents();
51+
});
52+
53+
beforeEach(() => {
54+
fixture = TestBed.createComponent(AdvancedSearchComponent);
55+
component = fixture.componentInstance;
56+
router = TestBed.inject(Router);
57+
fixture.detectChanges();
58+
});
59+
describe('when the getSearchLink method is called', () => {
60+
const data = { filter: 'title', textsearch: 'demo', operator: 'equals' };
61+
it('should call navigate on the router with the right searchlink and parameters when the filter is provided with a valid operator', () => {
62+
component.advSearchForm.get('textsearch').patchValue('1');
63+
component.advSearchForm.get('filter').patchValue('1');
64+
component.advSearchForm.get('operator').patchValue('1');
65+
66+
component.onSubmit(data);
67+
expect(router.navigate).toHaveBeenCalledWith([undefined], {
68+
queryParams: { ['f.' + data.filter]: data.textsearch + ',' + data.operator },
69+
queryParamsHandling: 'merge'
70+
});
71+
72+
});
73+
});
74+
});

‎src/app/shared/search/advanced-search/advanced-search.component.ts‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { Component, Inject, Input, OnInit } from '@angular/core';
2+
import { Router } from '@angular/router';
3+
import { slide } from '../../animations/slide';
4+
import { FormBuilder } from '@angular/forms';
5+
import { FormControl, FormGroup, Validators } from '@angular/forms';
6+
import { SearchService } from '../../../core/shared/search/search.service';
7+
import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
8+
import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
9+
import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
10+
@Component({
11+
selector: 'ds-advanced-search',
12+
templateUrl: './advanced-search.component.html',
13+
styleUrls: ['./advanced-search.component.scss'],
14+
animations: [slide],
15+
})
16+
/**
17+
* This component represents the part of the search sidebar that contains advanced filters.
18+
*/
19+
export class AdvancedSearchComponent implements OnInit {
20+
/**
21+
* True when the search component should show results on the current page
22+
*/
23+
@Input() inPlaceSearch;
24+
25+
26+
/**
27+
* Link to the search page
28+
*/
29+
notab: boolean;
30+
31+
closed: boolean;
32+
collapsedSearch = false;
33+
focusBox = false;
34+
35+
advSearchForm: FormGroup;
36+
constructor(
37+
@Inject(APP_CONFIG) protected appConfig: AppConfig,
38+
private formBuilder: FormBuilder,
39+
protected searchService: SearchService,
40+
protected router: Router,
41+
@Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService) {
42+
}
43+
44+
ngOnInit(): void {
45+
46+
this.advSearchForm = this.formBuilder.group({
47+
textsearch: new FormControl('', {
48+
validators: [Validators.required],
49+
}),
50+
filter: new FormControl('title', {
51+
validators: [Validators.required],
52+
}),
53+
operator: new FormControl('equals',
54+
{ validators: [Validators.required], }),
55+
56+
});
57+
this.collapsedSearch = this.isCollapsed();
58+
59+
}
60+
61+
get textsearch() {
62+
return this.advSearchForm.get('textsearch');
63+
}
64+
65+
get filter() {
66+
return this.advSearchForm.get('filter');
67+
}
68+
69+
get operator() {
70+
return this.advSearchForm.get('operator');
71+
}
72+
paramName(filter) {
73+
return 'f.' + filter;
74+
}
75+
onSubmit(data) {
76+
if (this.advSearchForm.valid) {
77+
let queryParams = { [this.paramName(data.filter)]: data.textsearch + ',' + data.operator };
78+
if (!this.inPlaceSearch) {
79+
this.router.navigate([this.searchService.getSearchLink()], { queryParams: queryParams, queryParamsHandling: 'merge' });
80+
} else {
81+
if (!this.router.url.includes('?')) {
82+
this.router.navigateByUrl(this.router.url + '?f.' + data.filter + '=' + data.textsearch + ',' + data.operator);
83+
} else {
84+
this.router.navigateByUrl(this.router.url + '&f.' + data.filter + '=' + data.textsearch + ',' + data.operator);
85+
}
86+
}
87+
88+
this.advSearchForm.reset({ operator: data.operator, filter: data.filter, textsearch: '' });
89+
}
90+
}
91+
startSlide(event: any): void {
92+
if (event.toState === 'collapsed') {
93+
this.closed = true;
94+
}
95+
if (event.fromState === 'collapsed') {
96+
this.notab = false;
97+
}
98+
}
99+
finishSlide(event: any): void {
100+
if (event.fromState === 'collapsed') {
101+
this.closed = false;
102+
}
103+
if (event.toState === 'collapsed') {
104+
this.notab = true;
105+
}
106+
}
107+
toggle() {
108+
this.collapsedSearch = !this.collapsedSearch;
109+
}
110+
private isCollapsed(): boolean {
111+
return !this.collapsedSearch;
112+
}
113+
114+
}
115+

‎src/app/shared/search/search-filters/search-filters.component.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ <h2 *ngIf="!inPlaceSearch">{{filterLabel+'.filters.head' | translate}}</h2>
55
<ds-search-filter [scope]="currentScope" [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters"></ds-search-filter>
66
</div>
77
</div>
8+
<ds-advanced-search *ngIf="appConfig.search.advancedFilters.enabled"
9+
[inPlaceSearch]="inPlaceSearch"></ds-advanced-search>
810
<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>

‎src/app/shared/search/search-filters/search-filters.component.spec.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { SearchFiltersComponent } from './search-filters.component';
99
import { SearchService } from '../../../core/shared/search/search.service';
1010
import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
1111
import { SearchConfigurationServiceStub } from '../../testing/search-configuration-service.stub';
12+
import { APP_CONFIG } from 'src/config/app-config.interface';
13+
import { environment } from 'src/environments/environment';
1214

1315
describe('SearchFiltersComponent', () => {
1416
let comp: SearchFiltersComponent;
@@ -38,6 +40,7 @@ describe('SearchFiltersComponent', () => {
3840
{ provide: SearchService, useValue: searchServiceStub },
3941
{ provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
4042
{ provide: SearchFilterService, useValue: searchFiltersStub },
43+
{ provide: APP_CONFIG, useValue: environment },
4144

4245
],
4346
schemas: [NO_ERRORS_SCHEMA]

‎src/app/shared/search/search-filters/search-filters.component.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Router } from '@angular/router';
33

44
import { BehaviorSubject, Observable } from 'rxjs';
55
import { map } from 'rxjs/operators';
6-
6+
import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
77
import { SearchService } from '../../../core/shared/search/search.service';
88
import { RemoteData } from '../../../core/data/remote-data';
99
import { SearchFilterConfig } from '../models/search-filter-config.model';
@@ -12,6 +12,7 @@ import { SearchFilterService } from '../../../core/shared/search/search-filter.s
1212
import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
1313
import { currentPath } from '../../utils/route.utils';
1414
import { hasValue } from '../../empty.util';
15+
import { PaginatedSearchOptions } from '../models/paginated-search-options.model';
1516

1617
@Component({
1718
selector: 'ds-search-filters',
@@ -28,7 +29,7 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
2829
* An observable containing configuration about which filters are shown and how they are shown
2930
*/
3031
@Input() filters: Observable<RemoteData<SearchFilterConfig[]>>;
31-
32+
@Input() searchOptions: PaginatedSearchOptions;
3233
/**
3334
* List of all filters that are currently active with their value set to null.
3435
* Used to reset all filters at once
@@ -71,6 +72,7 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
7172
* @param {SearchConfigurationService} searchConfigService
7273
*/
7374
constructor(
75+
@Inject(APP_CONFIG) protected appConfig: AppConfig,
7476
private searchService: SearchService,
7577
private filterService: SearchFilterService,
7678
private router: Router,

‎src/app/shared/search/search.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { ThemedSearchComponent } from './themed-search.component';
3232
import { ThemedSearchResultsComponent } from './search-results/themed-search-results.component';
3333
import { ThemedSearchSettingsComponent } from './search-settings/themed-search-settings.component';
3434
import { NouisliderModule } from 'ng2-nouislider';
35+
import { AdvancedSearchComponent } from './advanced-search/advanced-search.component';
3536
import { ThemedSearchFiltersComponent } from './search-filters/themed-search-filters.component';
3637
import { ThemedSearchSidebarComponent } from './search-sidebar/themed-search-sidebar.component';
3738
const COMPONENTS = [
@@ -59,6 +60,7 @@ const COMPONENTS = [
5960
ThemedConfigurationSearchPageComponent,
6061
ThemedSearchResultsComponent,
6162
ThemedSearchSettingsComponent,
63+
AdvancedSearchComponent,
6264
ThemedSearchFiltersComponent,
6365
ThemedSearchSidebarComponent,
6466
];

‎src/app/shared/search/search.utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function stripOperatorFromFilterValue(value: string) {
4949
* @param operator
5050
*/
5151
export function addOperatorToFilterValue(value: string, operator: string) {
52-
if (!value.match(new RegExp(`^.+,(equals|query|authority)$`))) {
52+
if (!value.match(new RegExp(`^.+,(equals|query|authority|contains|notcontains|notequals)$`))) {
5353
return `${value},${operator}`;
5454
}
5555
return value;

0 commit comments

Comments
 (0)