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

added search link fixes

Browse Source
This commit is contained in:
lotte
2019-05-15 15:34:46 +02:00
parent f34c19717d
commit c216e35a23
31 changed files with 271 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/app/+collection-page/collection-page.component.ts
View File

@@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable, Subscription } from 'rxjs';
import { filter, flatMap, map, take } from 'rxjs/operators';
import { filter, flatMap, map, switchMap, take } from 'rxjs/operators';
import { PaginatedSearchOptions } from '../+search-page/paginated-search-options.model';
import { SearchService } from '../+search-page/search-service/search.service';
import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
@@ -15,7 +15,11 @@ import { Bitstream } from '../core/shared/bitstream.model';
import { Collection } from '../core/shared/collection.model';
import { DSpaceObjectType } from '../core/shared/dspace-object-type.model';
import { Item } from '../core/shared/item.model';
import { getSucceededRemoteData, toDSpaceObjectListRD } from '../core/shared/operators';
import {
getSucceededRemoteData,
redirectToPageNotFoundOn404,
toDSpaceObjectListRD
} from '../core/shared/operators';
import { fadeIn, fadeInOut } from '../shared/animations/fade';
import { hasValue, isNotEmpty } from '../shared/empty.util';
@@ -31,22 +35,19 @@ import { PaginationComponentOptions } from '../shared/pagination/pagination-comp
fadeInOut
]
})
export class CollectionPageComponent implements OnInit, OnDestroy {
export class CollectionPageComponent implements OnInit {
collectionRD$: Observable<RemoteData<Collection>>;
itemRD$: Observable<RemoteData<PaginatedList<Item>>>;
logoRD$: Observable<RemoteData<Bitstream>>;
paginationConfig: PaginationComponentOptions;
sortConfig: SortOptions;
private subs: Subscription[] = [];
private collectionId: string;
private currentPage: number;
private pageSize: number;
constructor(
private collectionDataService: CollectionDataService,
private searchService: SearchService,
private metadata: MetadataService,
private route: ActivatedRoute
private route: ActivatedRoute,
private router: Router
) {
this.paginationConfig = new PaginationComponentOptions();
this.paginationConfig.id = 'collection-page-pagination';
@@ -57,7 +58,8 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
ngOnInit(): void {
this.collectionRD$ = this.route.data.pipe(
map((data) => data.collection),
map((data) => data.collection as RemoteData<Collection>),
redirectToPageNotFoundOn404(this.router),
take(1)
);
this.logoRD$ = this.collectionRD$.pipe(
@@ -65,42 +67,26 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
filter((collection: Collection) => hasValue(collection)),
flatMap((collection: Collection) => collection.logo)
);
this.subs.push(
this.route.queryParams.subscribe((params) => {
this.metadata.processRemoteData(this.collectionRD$);
const page = +params.page || this.paginationConfig.currentPage;
const pageSize = +params.pageSize || this.paginationConfig.pageSize;
this.collectionRD$.subscribe((rd: RemoteData<Collection>) => {
this.collectionId = rd.payload.id;
this.updatePage(page, pageSize);
});
})
);
this.route.queryParams.pipe(take(1)).subscribe((params) => {
this.metadata.processRemoteData(this.collectionRD$);
this.onPaginationChange(params)
})
}
updatePage(currentPage: number, pageSize: number) {
this.itemRD$ = this.searchService.search(
new PaginatedSearchOptions({
scope: this.collectionId,
pagination: {
currentPage,
pageSize
} as PaginationComponentOptions,
sort: this.sortConfig,
dsoType: DSpaceObjectType.ITEM
})).pipe(
toDSpaceObjectListRD(),
updatePage() {
this.itemRD$ = this.collectionRD$.pipe(
getSucceededRemoteData(),
take(1),
) as Observable<RemoteData<PaginatedList<Item>>>;
this.currentPage = currentPage;
this.pageSize = pageSize;
}
ngOnDestroy(): void {
this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
map((rd) => rd.payload.id),
switchMap((id: string) => {
return this.searchService.search(
new PaginatedSearchOptions({
scope: id,
pagination: this.paginationConfig,
sort: this.sortConfig,
dsoType: DSpaceObjectType.ITEM
})).pipe(toDSpaceObjectListRD()) as Observable<RemoteData<PaginatedList<Item>>>;
})
)
}
isNotEmpty(object: any) {
@@ -108,8 +94,10 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
}
onPaginationChange(event) {
if (this.currentPage !== event.page || this.pageSize !== event.pageSize) {
this.updatePage(event.page, event.pageSize);
}
this.paginationConfig.currentPage = +event.page || this.paginationConfig.currentPage;
this.paginationConfig.pageSize = +event.pageSize || this.paginationConfig.pageSize;
this.sortConfig.direction = event.sortDirection || this.sortConfig.direction;
this.sortConfig.field = event.sortField || this.sortConfig.field;
this.updatePage();
}
}

2
src/app/+home-page/home-page.component.html
View File

@@ -1,5 +1,5 @@
<ds-home-news></ds-home-news>
<div class="container">
<ds-search-form></ds-search-form>
<ds-search-form [inPlaceSearch]="false"></ds-search-form>
<ds-top-level-community-list></ds-top-level-community-list>
</div>

10
src/app/+my-dspace-page/my-dspace-page.component.html
View File

@@ -12,9 +12,10 @@
[query]="(searchOptions$ | async)?.query"
[scope]="(searchOptions$ | async)?.scope"
[currentUrl]="getSearchLink()"
[scopes]="(scopeListRD$ | async)">
[scopes]="(scopeListRD$ | async)"
[inPlaceSearch]="inPlaceSearch">
</ds-search-form>
<ds-search-labels></ds-search-labels>
<ds-search-labels [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
<div class="row">
<div id="search-body"
class="row-offcanvas row-offcanvas-left"
@@ -24,11 +25,12 @@
[configurationList]="(configurationList$ | async)"
[resultCount]="(resultsRD$ | async)?.payload.totalElements"
(toggleSidebar)="closeSidebar()"
[ngClass]="{'active': !(isSidebarCollapsed() | async)}">
[ngClass]="{'active': !(isSidebarCollapsed() | async)}"
[inPlaceSearch]="inPlaceSearch">
</ds-search-sidebar>
<div id="search-content" class="col-12">
<div class="d-block d-md-none search-controls clearfix">
<ds-view-mode-switch [viewModeList]="viewModeList"></ds-view-mode-switch>
<ds-view-mode-switch [viewModeList]="viewModeList" [inPlaceSearch]="inPlaceSearch"></ds-view-mode-switch>
<button (click)="openSidebar()" aria-controls="#search-body"
class="btn btn-outline-primary float-right open-sidebar"><i
class="fas fa-sliders"></i> {{"search.sidebar.open"

14
src/app/+my-dspace-page/my-dspace-page.component.ts
View File

@@ -1,4 +1,11 @@
import { ChangeDetectionStrategy, Component, Inject, InjectionToken, OnInit } from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
Inject,
InjectionToken,
Input,
OnInit
} from '@angular/core';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { switchMap, tap, } from 'rxjs/operators';
@@ -43,6 +50,11 @@ export const SEARCH_CONFIG_SERVICE: InjectionToken<SearchConfigurationService> =
})
export class MyDSpacePageComponent implements OnInit {
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch = true;
/**
* The list of available configuration options
*/

4
src/app/+search-page/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$"></ds-search-facet-selected-option>
<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">
<div [@facetLoad]="animationState">
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$"></ds-search-facet-option>
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
</div>
</ng-container>
<div class="clearfix toggle-more-filters">

1
src/app/+search-page/search-filters/search-filter/search-authority-filter/search-authority-filter.component.ts
View File

@@ -33,5 +33,4 @@ export class SearchAuthorityFilterComponent extends SearchFacetFilterComponent i
return params[this.filterConfig.paramName];
}
}

4
src/app/+search-page/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$"></ds-search-facet-selected-option>
<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">
<div [@facetLoad]="animationState">
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$"></ds-search-facet-option>
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
</div>
</ng-container>
<div class="clearfix toggle-more-filters">

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

@@ -35,6 +35,11 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
*/
@Input() selectedValues$: Observable<FacetValue[]>;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
/**
* Emits true when this option should be visible and false when it should be invisible
*/
@@ -76,9 +81,12 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
}
/**
* @returns {string} The base path to the search page
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
getSearchLink() {
public getSearchLink(): string {
if (this.inPlaceSearch) {
return './';
}
return this.searchService.getSearchLink();
}

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

@@ -35,6 +35,11 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
*/
@Input() filterConfig: SearchFilterConfig;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
/**
* Emits true when this option should be visible and false when it should be invisible
*/
@@ -75,9 +80,12 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
}
/**
* @returns {string} The base path to the search page
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
getSearchLink() {
public getSearchLink(): string {
if (this.inPlaceSearch) {
return './';
}
return this.searchService.getSearchLink();
}

12
src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.ts
View File

@@ -34,6 +34,11 @@ export class SearchFacetSelectedOptionComponent implements OnInit, OnDestroy {
*/
@Input() selectedValues$: Observable<FacetValue[]>;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
/**
* UI parameters when this filter is removed
*/
@@ -62,9 +67,12 @@ export class SearchFacetSelectedOptionComponent implements OnInit, OnDestroy {
}
/**
* @returns {string} The base path to the search page
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
getSearchLink() {
public getSearchLink(): string {
if (this.inPlaceSearch) {
return './';
}
return this.searchService.getSearchLink();
}

10
src/app/+search-page/search-filters/search-filter/search-facet-filter-wrapper/search-facet-filter-wrapper.component.ts
View File

@@ -2,7 +2,7 @@ import { Component, Injector, Input, OnInit } from '@angular/core';
import { renderFilterType } from '../search-filter-type-decorator';
import { FilterType } from '../../../search-service/filter-type.model';
import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
import { FILTER_CONFIG } from '../search-filter.service';
import { FILTER_CONFIG, IN_PLACE_SEARCH } from '../search-filter.service';
import { GenericConstructor } from '../../../../core/shared/generic-constructor';
import { SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
@@ -20,6 +20,11 @@ export class SearchFacetFilterWrapperComponent implements OnInit {
*/
@Input() filterConfig: SearchFilterConfig;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
/**
* The constructor of the search facet filter that should be rendered, based on the filter config's type
*/
@@ -39,7 +44,8 @@ export class SearchFacetFilterWrapperComponent implements OnInit {
this.searchFilter = this.getSearchFilter();
this.objectInjector = Injector.create({
providers: [
{ provide: FILTER_CONFIG, useFactory: () => (this.filterConfig), deps: [] }
{ provide: FILTER_CONFIG, useFactory: () => (this.filterConfig), deps: [] },
{ provide: IN_PLACE_SEARCH, useFactory: () => (this.inPlaceSearch), deps: [] }
],
parent: this.injector
});

22
src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts
View File

@@ -18,7 +18,7 @@ import { EmphasizePipe } from '../../../../shared/utils/emphasize.pipe';
import { FacetValue } from '../../../search-service/facet-value.model';
import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
import { SearchService } from '../../../search-service/search.service';
import { FILTER_CONFIG, SearchFilterService } from '../search-filter.service';
import { FILTER_CONFIG, IN_PLACE_SEARCH, SearchFilterService } from '../search-filter.service';
import { SearchConfigurationService } from '../../../search-service/search-configuration.service';
import { getSucceededRemoteData } from '../../../../core/shared/operators';
import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model';
@@ -85,6 +85,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
protected rdbs: RemoteDataBuildService,
protected router: Router,
@Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
@Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig) {
}
@@ -167,12 +168,25 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
}
/**
* @returns {string} The base path to the search page
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
getSearchLink() {
public getSearchLink(): string {
if (this.inPlaceSearch) {
return './';
}
return this.searchService.getSearchLink();
}
/**
* @returns {string[]} The base path to the search page, or the current page when inPlaceSearch is true, split in separate pieces
*/
public getSearchLinkParts(): string[] {
if (this.inPlaceSearch) {
return [];
}
return this.getSearchLink().split('/');
}
/**
* Show the next page as well
*/
@@ -208,7 +222,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
onSubmit(data: any) {
this.selectedValues$.pipe(take(1)).subscribe((selectedValues) => {
if (isNotEmpty(data)) {
this.router.navigate([this.getSearchLink()], {
this.router.navigate(this.getSearchLinkParts(), {
queryParams:
{ [this.filterConfig.paramName]: [
...selectedValues.map((facet) => this.getFacetValue(facet)),

2
src/app/+search-page/search-filters/search-filter/search-filter.component.html
View File

@@ -2,6 +2,6 @@
<div (click)="toggle()" class="filter-name"><h5 class="d-inline-block mb-0">{{'search.filters.filter.' + filter.name + '.head'| translate}}</h5> <span class="filter-toggle fas float-right"
[ngClass]="(collapsed$ | async) ? 'fa-plus' : 'fa-minus'"></span></div>
<div [@slide]="(collapsed$ | async) ? 'collapsed' : 'expanded'" (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{'closed' : closed}">
<ds-search-facet-filter-wrapper [filterConfig]="filter"></ds-search-facet-filter-wrapper>
<ds-search-facet-filter-wrapper [filterConfig]="filter" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-filter-wrapper>
</div>
</div>

5
src/app/+search-page/search-filters/search-filter/search-filter.component.ts
View File

@@ -27,6 +27,11 @@ export class SearchFilterComponent implements OnInit {
*/
@Input() filter: SearchFilterConfig;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
/**
* True when the filter is 100% collapsed in the UI
*/

1
src/app/+search-page/search-filters/search-filter/search-filter.service.ts
View File

@@ -25,6 +25,7 @@ import { Params } from '@angular/router';
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');
/**
* Service that performs all actions that have to do with search filters and facets

4
src/app/+search-page/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$"></ds-search-facet-selected-option>
<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">
<div [@facetLoad]="animationState">
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$"></ds-search-facet-option>
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
</div>
</ng-container>
<div class="clearfix toggle-more-filters">

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

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

7
src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
View File

@@ -10,7 +10,7 @@ import {
SearchFacetFilterComponent
} from '../search-facet-filter/search-facet-filter.component';
import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
import { FILTER_CONFIG, SearchFilterService } from '../search-filter.service';
import { FILTER_CONFIG, IN_PLACE_SEARCH, SearchFilterService } from '../search-filter.service';
import { SearchService } from '../../../search-service/search.service';
import { Router } from '@angular/router';
import * as moment from 'moment';
@@ -76,10 +76,11 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
protected router: Router,
protected rdbs: RemoteDataBuildService,
@Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
@Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
@Inject(PLATFORM_ID) private platformId: any,
private route: RouteService) {
super(searchService, filterService, rdbs, router, searchConfigService, filterConfig);
super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig);
}
@@ -108,7 +109,7 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
onSubmit() {
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.getSearchLink()], {
this.router.navigate(this.getSearchLinkParts(), {
queryParams:
{
[this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: newMin,

4
src/app/+search-page/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$"></ds-search-facet-selected-option>
<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">
<div [@facetLoad]="animationState">
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$"></ds-search-facet-option>
<ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
</div>
</ng-container>
<div class="clearfix toggle-more-filters">

2
src/app/+search-page/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"></ds-search-filter>
<ds-search-filter [filter]="filter" [inPlaceSearch]="inPlaceSearch"></ds-search-filter>
</div>
</div>
<a class="btn btn-primary" [routerLink]="[getSearchLink()]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button">{{"search.filters.reset" | translate}}</a>

14
src/app/+search-page/search-filters/search-filters.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, Inject, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
@@ -32,6 +32,11 @@ export class SearchFiltersComponent implements OnInit {
*/
clearParams;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
/**
* Initialize instance variables
* @param {SearchService} searchService
@@ -58,9 +63,12 @@ export class SearchFiltersComponent implements OnInit {
}
/**
* @returns {string} The base path to the search page
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
getSearchLink() {
public getSearchLink(): string {
if (this.inPlaceSearch) {
return './';
}
return this.searchService.getSearchLink();
}

14
src/app/+search-page/search-labels/search-labels.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Inject } from '@angular/core';
import { Component, Inject, Input } from '@angular/core';
import { SearchService } from '../search-service/search.service';
import { Observable } from 'rxjs';
import { Params } from '@angular/router';
@@ -22,6 +22,11 @@ export class SearchLabelsComponent {
*/
appliedFilters: Observable<Params>;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
/**
* Initialize the instance variable
*/
@@ -51,9 +56,12 @@ export class SearchLabelsComponent {
}
/**
* @returns {string} The base path to the search page
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
getSearchLink() {
public getSearchLink(): string {
if (this.inPlaceSearch) {
return './';
}
return this.searchService.getSearchLink();
}

9
src/app/+search-page/search-page.component.html
View File

@@ -2,15 +2,16 @@
<div class="search-page row">
<ds-search-sidebar *ngIf="!(isXsOrSm$ | async)" class="col-{{sideBarWidth}} sidebar-md-sticky"
id="search-sidebar"
[resultCount]="(resultsRD$ | async)?.payload.totalElements"></ds-search-sidebar>
[resultCount]="(resultsRD$ | async)?.payload.totalElements" [inPlaceSearch]="inPlaceSearch"></ds-search-sidebar>
<div class="col-12 col-md-{{12 - sideBarWidth}}">
<ds-search-form *ngIf="searchEnabled" id="search-form"
[query]="(searchOptions$ | async)?.query"
[scope]="(searchOptions$ | async)?.scope"
[currentUrl]="getSearchLink()"
[scopes]="(scopeListRD$ | async)">
[scopes]="(scopeListRD$ | async)"
[inPlaceSearch]="inPlaceSearch">
</ds-search-form>
<ds-search-labels *ngIf="searchEnabled"></ds-search-labels>
<ds-search-labels *ngIf="searchEnabled" [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
<div class="row">
<div id="search-body"
class="row-offcanvas row-offcanvas-left"
@@ -23,7 +24,7 @@
</ds-search-sidebar>
<div id="search-content" class="col-12">
<div class="d-block d-md-none search-controls clearfix">
<ds-view-mode-switch></ds-view-mode-switch>
<ds-view-mode-switch [inPlaceSearch]="inPlaceSearch"></ds-view-mode-switch>
<button (click)="openSidebar()" aria-controls="#search-body"
class="btn btn-outline-primary float-right open-sidebar"><i
class="fas fa-sliders"></i> {{"search.sidebar.open"

10
src/app/+search-page/search-page.component.ts
View File

@@ -69,6 +69,11 @@ export class SearchPageComponent implements OnInit {
*/
sub: Subscription;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch = true;
/**
* Whether or not the search bar should be visible
*/
@@ -148,9 +153,12 @@ export class SearchPageComponent implements OnInit {
}
/**
* @returns {string} The base path to the search page
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
public getSearchLink(): string {
if (this.inPlaceSearch) {
return './';
}
return this.service.getSearchLink();
}

4
src/app/+search-page/search-service/search.service.ts
View File

@@ -332,7 +332,7 @@ export class SearchService implements OnDestroy {
* Changes the current view mode in the current URL
* @param {ViewMode} viewMode Mode to switch to
*/
setViewMode(viewMode: ViewMode) {
setViewMode(viewMode: ViewMode, searchLinkParts?: string[]) {
this.routeService.getQueryParameterValue('pageSize').pipe(first())
.subscribe((pageSize) => {
let queryParams = { view: viewMode, page: 1 };
@@ -346,7 +346,7 @@ export class SearchService implements OnDestroy {
queryParamsHandling: 'merge'
};
this.router.navigate([this.getSearchLink()], navigationExtras);
this.router.navigate(hasValue(searchLinkParts) ? searchLinkParts : [this.getSearchLink()], navigationExtras);
})
}

33
src/app/+search-page/search-settings/search-settings.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, Inject, Input, OnInit } from '@angular/core';
import { SearchService } from '../search-service/search.service';
import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
@@ -18,6 +18,11 @@ import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.comp
*/
export class SearchSettingsComponent implements OnInit {
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
/**
* The configuration for the current paginated search results
*/
@@ -54,7 +59,7 @@ export class SearchSettingsComponent implements OnInit {
},
queryParamsHandling: 'merge'
};
this.router.navigate([ this.service.getSearchLink() ], navigationExtras);
this.router.navigate(this.getSearchLinkParts(), navigationExtras);
}
/**
@@ -71,6 +76,28 @@ export class SearchSettingsComponent implements OnInit {
},
queryParamsHandling: 'merge'
};
this.router.navigate([ this.service.getSearchLink() ], navigationExtras);
this.router.navigate(this.getSearchLinkParts(), navigationExtras);
}
/**
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
public getSearchLink(): string {
if (this.inPlaceSearch) {
return './';
}
return this.service.getSearchLink();
}
/**
* @returns {string[]} The base path to the search page, or the current page when inPlaceSearch is true, split in separate pieces
*/
public getSearchLinkParts(): string[] {
if (this.service) {
return [];
}
return this.getSearchLink().split('/');
}
}

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

@@ -11,8 +11,8 @@
<ds-view-mode-switch [viewModeList]="viewModeList" class="d-none d-md-block"></ds-view-mode-switch>
<div class="sidebar-content">
<ds-search-switch-configuration *ngIf="configurationList" [configurationList]="configurationList"></ds-search-switch-configuration>
<ds-search-filters></ds-search-filters>
<ds-search-settings></ds-search-settings>
<ds-search-filters [inPlaceSearch]="inPlaceSearch"></ds-search-filters>
<ds-search-settings [inPlaceSearch]="inPlaceSearch"></ds-search-settings>
</div>
</div>
</div>

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

@@ -34,8 +34,14 @@ export class SearchSidebarComponent {
*/
@Input() viewModeList;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
/**
* Emits event when the user clicks a button to open or close the sidebar
*/
@Output() toggleSidebar = new EventEmitter<boolean>();
}

7
src/app/shared/search-form/search-form.component.spec.ts
View File

@@ -8,6 +8,7 @@ import { RouterTestingModule } from '@angular/router/testing';
import { Community } from '../../core/shared/community.model';
import { TranslateModule } from '@ngx-translate/core';
import { DSpaceObject } from '../../core/shared/dspace-object.model';
import { SearchService } from '../../+search-page/search-service/search.service';
describe('SearchFormComponent', () => {
let comp: SearchFormComponent;
@@ -18,6 +19,12 @@ describe('SearchFormComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [FormsModule, RouterTestingModule, TranslateModule.forRoot()],
providers: [
{
provide: SearchService,
useValue: {}
}
],
declarations: [SearchFormComponent]
}).compileComponents();
}));

38
src/app/shared/search-form/search-form.component.ts
View File

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
import { hasValue, isNotEmpty } from '../empty.util';
import { QueryParamsHandling } from '@angular/router/src/config';
import { MYDSPACE_ROUTE } from '../../+my-dspace-page/my-dspace-page.component';
import { SearchService } from '../../+search-page/search-service/search.service';
/**
* This component renders a simple item page.
@@ -26,6 +27,11 @@ export class SearchFormComponent {
*/
@Input() query: string;
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
/**
* The currently selected scope object's UUID
*/
@@ -39,7 +45,7 @@ export class SearchFormComponent {
*/
@Input() scopes: DSpaceObject[];
constructor(private router: Router) {
constructor(private router: Router, private searchService: SearchService) {
}
/**
@@ -63,14 +69,10 @@ export class SearchFormComponent {
* @param data Updated parameters
*/
updateSearch(data: any) {
const newUrl = hasValue(this.currentUrl) ? this.currentUrl : '/search';
let handling: QueryParamsHandling = '' ;
if (this.currentUrl === '/search' || this.currentUrl === MYDSPACE_ROUTE) {
handling = 'merge';
}
this.router.navigate([newUrl], {
this.router.navigate(this.getSearchLinkParts(), {
queryParams: Object.assign({}, { page: 1 }, data),
queryParamsHandling: handling
queryParamsHandling: 'merge'
});
}
@@ -81,4 +83,24 @@ export class SearchFormComponent {
return isNotEmpty(object);
}
/**
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
public getSearchLink(): string {
if (this.inPlaceSearch) {
return './';
}
return this.searchService.getSearchLink();
}
/**
* @returns {string[]} The base path to the search page, or the current page when inPlaceSearch is true, split in separate pieces
*/
public getSearchLinkParts(): string[] {
if (this.inPlaceSearch) {
return [];
}
return this.getSearchLink().split('/');
}
}

28
src/app/shared/view-mode-switch/view-mode-switch.component.ts
View File

@@ -17,6 +17,11 @@ import { isEmpty } from '../empty.util';
export class ViewModeSwitchComponent implements OnInit, OnDestroy {
@Input() viewModeList: ViewMode[];
/**
* True when the search component should show results on the current page
*/
@Input() inPlaceSearch;
currentMode: ViewMode = ViewMode.List;
viewModeEnum = ViewMode;
private sub: Subscription;
@@ -35,7 +40,7 @@ export class ViewModeSwitchComponent implements OnInit, OnDestroy {
}
switchViewTo(viewMode: ViewMode) {
this.searchService.setViewMode(viewMode);
this.searchService.setViewMode(viewMode, this.getSearchLinkParts());
}
ngOnDestroy() {
@@ -47,4 +52,25 @@ export class ViewModeSwitchComponent implements OnInit, OnDestroy {
isToShow(viewMode: ViewMode) {
return this.viewModeList && this.viewModeList.includes(viewMode);
}
/**
* @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
*/
public getSearchLink(): string {
if (this.inPlaceSearch) {
return './';
}
return this.searchService.getSearchLink();
}
/**
* @returns {string[]} The base path to the search page, or the current page when inPlaceSearch is true, split in separate pieces
*/
public getSearchLinkParts(): string[] {
if (this.searchService) {
return [];
}
return this.getSearchLink().split('/');
}
}