Browse RFO/RPO: add the search keyword in the URL, prevent from losing results on user reload

This commit is contained in:
Alex Martzios 2023-11-13 15:59:56 +02:00
parent aada970077
commit 93056160c7
4 changed files with 20 additions and 12 deletions

View File

@ -5,7 +5,7 @@
</ng-container> </ng-container>
<ng-container *ngIf="!showLoading && stakeholders?.length"> <ng-container *ngIf="!showLoading && stakeholders?.length">
<div class="uk-flex uk-flex-middle uk-flex-center uk-position-relative"> <div class="uk-flex uk-flex-middle uk-flex-center uk-position-relative">
<div search-input [searchControl]="keywordControl" searchInputClass="border-bottom" iconPosition="left" <div search-input [(value)]="keyword" (searchEmitter)="keywordChanged()" searchInputClass="border-bottom" iconPosition="left"
placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="showLoading" class="uk-width-1-2@m uk-width-1-1"> placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="showLoading" class="uk-width-1-2@m uk-width-1-1">
</div> </div>
<div class="uk-flex uk-flex-middle uk-position-right"> <div class="uk-flex uk-flex-middle uk-position-right">

View File

@ -5,8 +5,6 @@ import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeho
import {Option} from "../../openaireLibrary/sharedComponents/input/input.component"; import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";
import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class"; import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
import {LayoutService} from "src/app/openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; import {LayoutService} from "src/app/openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
import {FormBuilder, FormControl} from "@angular/forms";
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
import {StakeholderBaseComponent} from "../../openaireLibrary/monitor-admin/utils/stakeholder-base.component"; import {StakeholderBaseComponent} from "../../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
@Component({ @Component({
@ -27,14 +25,14 @@ export class BrowseStakeholderComponent extends StakeholderBaseComponent impleme
sortBy: string = 'alphAsc'; sortBy: string = 'alphAsc';
currentPage: number = 1; currentPage: number = 1;
pageSize: number = 10; pageSize: number = 10;
keywordControl: FormControl; parameters = {};
keyword: string = '';
constructor(protected _route: ActivatedRoute, constructor(protected _route: ActivatedRoute,
protected _router: Router, protected _router: Router,
private stakeholderService: StakeholderService, private stakeholderService: StakeholderService,
private layoutService: LayoutService, private layoutService: LayoutService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef) {
private fb: FormBuilder) {
super(); super();
} }
@ -58,16 +56,26 @@ export class BrowseStakeholderComponent extends StakeholderBaseComponent impleme
this.filteredStakeholders.sort((a, b) => a['name'].localeCompare(b['name'])); this.filteredStakeholders.sort((a, b) => a['name'].localeCompare(b['name']));
this.showLoading = false; this.showLoading = false;
})); }));
this.keywordControl = this.fb.control(''); this._route.queryParams.subscribe(params => {
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => { this.parameters = Object.assign({}, params);
this.filtering(value); this.keyword = params['keyword'] ? params['keyword'] : '';
})); this.filtering(this.keyword);
})
} }
private navigateToError() { private navigateToError() {
this._router.navigate([this.properties.errorLink], {queryParams: {'page': this._router.url}}); this._router.navigate([this.properties.errorLink], {queryParams: {'page': this._router.url}});
} }
keywordChanged() {
if(this.keyword?.length > 0) {
this.parameters['keyword'] = this.keyword;
} else {
delete this.parameters['keyword'];
}
this._router.navigate([], {queryParams: this.parameters} );
}
private filtering(value) { private filtering(value) {
if(!value){ if(!value){
this.filteredStakeholders = this.stakeholders; this.filteredStakeholders = this.stakeholders;

@ -1 +1 @@
Subproject commit 6bb1e61b059bef1bff3bfb0611b0df46f7840426 Subproject commit d1b2d5e585722751792d12645d17f820cd6a7860

@ -1 +1 @@
Subproject commit 5e8c1addb1ebfa508aac8cb9540a755940c95b79 Subproject commit 2dadcf85926bc0f11fff22ed94dc197ddd8587c6