search page: show the search term in the title, above results

This commit is contained in:
Alex Martzios 2023-04-10 11:51:18 +03:00
parent d6edc17fee
commit f641624b32
5 changed files with 43 additions and 14 deletions

View File

@ -16,7 +16,7 @@
</div>
<div [class.uk-padding]="actions" class="uk-padding-remove-vertical">
<div class="uk-margin-medium-top">
<results-and-pages [type]="resultsNum !== 1?'Links':'Link'" [page]="page" [pageSize]="size"
<results-and-pages [type]="resultsNum !== 1?'Links':'Link'" [page]="page" [pageSize]="size" [hasSearch]="true" [searchTerm]="keyword"
[totalResults]="resultsNum" customClasses="uk-margin-remove"></results-and-pages>
</div>
<div class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>

View File

@ -240,7 +240,7 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
handleErrors(err, message) {
NotificationHandler.rise(message, "danger");
console.error("Dispaly Claims (component): " + message + " " + (err && err.error ? err.error : ''));
console.error("Display Claims (component): " + message + " " + (err && err.error ? err.error : ''));
}
goTo(page: number = 1) {
@ -290,7 +290,7 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
}
changeKeyword() {
if (this.filterForm.get("keyword") && (this.filterForm.get("keyword").value.length >= 3 || this.filterForm.get("keyword").value.length == 0)) {
if (this.filterForm.get("keyword") && (this.filterForm.get("keyword").value?.length >= 3 || this.filterForm.get("keyword").value?.length == 0)) {
this.searchTermStream.next(this.filterForm.get("keyword").value);
}
}

View File

@ -255,12 +255,17 @@
<div class="uk-flex uk-flex-middle uk-flex-wrap uk-child-width-1-1 uk-child-width-auto@m" [class.uk-flex-between]="!mobile"
[class.uk-margin-top]="mobile">
<!-- Total results, number of pages -->
<div class="uk-margin-remove" [class.uk-h6]="!mobile" [class.uk-text-center]="mobile">
<div class="uk-width-xlarge@m uk-margin-remove-bottom uk-text-truncate uk-margin-medium-right" [class.uk-h6]="!mobile" [class.uk-text-center]="mobile">
<ng-container *ngIf="results && searchUtils.totalResults > 0">
<span>{{searchUtils.totalResults|number}}</span>
<span class="uk-text-meta uk-text-capitalize"> {{type}}, page </span>
<span>{{searchUtils.page | number}}</span>
<span class="uk-text-meta"> of {{(totalPages(searchUtils.totalResults)|number)}}</span>
<span class="uk-text-meta uk-text-capitalize"> {{type}}</span>
<ng-container *ngIf="searchTerm && simpleView">
<span class="uk-text-meta"> for </span>
<span class="uk-text-bold">{{searchTerm}}</span>
</ng-container>
<!-- <ng-container *ngIf="!simpleView && advancedSearchTerms > 0">
<span class="uk-text-bold"> ({{advancedSearchTerms}} rule{{advancedSearchTerms == 1 ? '' : 's'}} applied)</span>
</ng-container> -->
</ng-container>
<ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
<span>{{oldTotalResults|number}}</span>

View File

@ -151,6 +151,8 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
showOffCanvas:boolean = false;
isMobile: boolean = false;
isServer: boolean;
searchTerm: string = null;
advancedSearchTerms: number = 0;
constructor(private route: ActivatedRoute,
private location: Location,
@ -1689,6 +1691,14 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
this.getRangeFiltersFromURL(params);
this.getRefineFiltersFromURL(params);
this.createAdvancedSearchSelectedFiltersFromURLParameters(params);
this.searchTerm = '';
if(params && params['fv0'] && params['f0'] && params['f0'] == 'q'){
let keyword = StringUtils.URIDecode(params['fv0']);
this.searchTerm = keyword;
}
if(params){
this.advancedSearchTerms = Object.keys(params).filter(key => key.includes('fv')).length;
}
}
removeResultType(type) {

View File

@ -3,13 +3,25 @@ import {Component, Input} from "@angular/core";
@Component({
selector: 'results-and-pages',
template: `
<h6 *ngIf="type && totalResults > 0" [ngClass]="customClasses">
<span>{{totalResults | number}}</span>
<span class="uk-text-meta uk-text-capitalize"> {{type}}, page </span>
<span>{{currentPage}}</span>
<span class="uk-text-meta"> of </span>
<span>{{getTotalPages() | number}}</span>
</h6>
<ng-container *ngIf="!hasSearch; else elseBlock">
<h6 *ngIf="type && totalResults > 0" [ngClass]="customClasses">
<span>{{totalResults | number}}</span>
<span class="uk-text-meta uk-text-capitalize"> {{type}}, page </span>
<span>{{currentPage}}</span>
<span class="uk-text-meta"> of </span>
<span>{{getTotalPages() | number}}</span>
</h6>
</ng-container>
<ng-template #elseBlock>
<h6 *ngIf="type && totalResults > 0" [ngClass]="customClasses">
<span>{{totalResults | number}}</span>
<span class="uk-text-meta uk-text-capitalize"> {{type}}</span>
<ng-container *ngIf="searchTerm">
<span class="uk-text-meta"> for </span>
<span class="uk-text-bold">{{searchTerm}}</span>
</ng-container>
</h6>
</ng-template>
`
})
@ -19,6 +31,8 @@ export class ResultsAndPagesNumComponent {
@Input() pageSize: number = 10;
@Input() totalResults: number = 0;
@Input() customClasses: string = "";
@Input() hasSearch: boolean = false;
@Input() searchTerm: string;
constructor() {}